Debugging
Last updated
Last updated
Understanding how to use tools to help figure out what is happening when unexpected outcomes occur during your game's development is extremely useful. HYTOPIA leverages common industry tools and standard practices to simplify debugging.
The client performance info panels in the HYTOPIA game client display your game's frame rate, memory usage, and latency (round trip time - RTT). Additionally, you can see a real time position of your controlled entity at any time.
Keep in mind that frame rate (FPS) will never exceed the screen refresh rate (vsync) of the device that you're using.
You can toggle the debug info panels by pressing the tilde ` key at any time, this key is usually in the top left of your keyboard.
On mobile, you can toggle the debug info panels by quickly tapping with 5 fingers at the same time anywhere on the screen.
Alternatively, if you want the debug panels to stay visible even through hot reloads of your game that occur as you make changes, you can enable info panels to always show by appending the ?debug query parameter when loading or testing your game. For example, https://play.hytopia.com?debug
HYTOPIA builds on the back of some of the most common debugging tools used today. To debug your in-game User Interface, you can use your browser's developer tools.
Any errors, console.log or equivalent used in your game's User Interface will directly log to the "Console" section of your browser's developer tools. You can typically open these tools on any browser by going to "View -> Developer Tools", or right clicking anywhere in the browser and clicking "Inspect" from the dropdown.
Additionally, because your game UI is appended directly to the DOM, you can also use the "Elements" section of your browser's dev tools to see the current state, styles, and more of your UI!
Anytime an error is thrown, or you log a message from your game code using console.log() or similar, it will output to this window.
When you start the HYTOPIA game server for your game (), you'll see a variety of messages within the terminal. It will likely look similar to the screenshot below.
Additionally, you can make use of HYTOPIA's native error logging through the ErrorHandler class. When using the ErrorHandler.warn(), ErrorHandler.error() or ErrorHandler.fatalError() methods of the ErrorHandler, a complete stack trace will be logged to the terminal as well to help with debugging. You can find the .
