Debug Lines

What is Debug Mode?

The layout of widgets can often be very confusing with invisible padding and complex drawables where it's hard to tell where one begins and another ends.

The solution to this is enabling debug for your widgets. This makes the edges of all actors (as defined by the stage) clear to see.

Code example

Let's take a simple table layout with one child.

Table table = new Table();
root.add(table).size(200);

Slider slider = new Slider(0, 100, 1, false, skin);
table.add(slider);

To add debug to a specific widget, use setDebug() on that widget:

slider.setDebug(true);

It is now clear that there is some empty space to the right of the slider because of the drawables used in the style.

You can add debug lines to the table as well:

table.setDebug(true);

If you add some padding to the slider cell, you can see the empty space around it.

table.add(slider).pad(20);

And you can tell how alignment works within the bounds of the cell:

table.add(slider).pad(20).expand().top();

It would be tedious to have to setDebug for every single actor you add to your stage. Instead, you can call it for everything all at once:

stage.setDebugAll(true);

If you just want to activate debug for a table and its children, do the following:

table.setDebug(true, true);

Debug colors explained

Individual widgets like sliders, groups, and images are drawn with the color green. This is actually a slightly transparent green: (0, 1, 0, 0, .85f).

This is not the case for Table, which has its own set of colors.

Blue (0, 0, 1, 1) is the color of the table itself and the padding/spacing of cells.

Each cell is colored red (1, 0, 0, 1).

Green is the color for the actor (0, 1, 0, 1).

When you shouldn't use debug mode

Debug mode can become a crutch for developers. Remember: if you can't tell where the edge of a widget is supposed to be, your players won't be able to either. If you activate debugAll every time you run your game, you'll never experience your menus like your players will. This can result in issues at release that you should have caught during testing. This should only be used as a visual aid to solve padding and alignment issues.

Debug should only be used sparingly. By developing your game menus without the lines activated, you will develop an intuition of where the lines should be. If a widget is not behaving as expected, activate the lines for that one widget alone. This way you can focus on the design of your menus and not have to deal with the clutter of lines everywhere.