How to create Debug Panel

  1. As any other UI component with context menu UI/Debug Panel

    image.png

  2. You’ll get game object called Debug Panel in your scene, with several component attached (will talk about them in detail later on)

    image.png

  3. PROFIT!!!

How debug panel works?

Debug panel is the UIToolkit based solution for cheats in games, best suited for mobile ones.

It allows to define in code all of your cheat buttons and get dynamic UI instantly.

Built In Content Provider

On gif below showcased Built In Content Provider, base component that exist just to showcase panel capabilities.

All the content in it defined in a serialized structures allowing to you to make changes and see how debug panel reflects them immediately even in edit mode.

Built In Content Provide

Built In Content Provide

Custom content provider

However the intended use is to make a custom content provider that defines all the element through code, and links them with your game systems.

Code input

Part of the code that produces UI

Part of the code that produces UI

UI result

Final UI result

Final UI result

Above is the example of how buttons/groups/toggles/dropdowns/labels defined in code, and how UI is generated for them.

<aside> 💡

Will go over custom content provider in first sample Simple Content Provider

</aside>

UIDocument

UIDocument is the component that renders UIToolkit in runtime.

Debug panel injects two assets needed for its work, being the Panel Settings and Source Asset