#004: Deciding on a Toolbar Layout

Deciding on a Toolbar Layout

The purpose of the Toolbar is to help the player clearly express their intended command to the game, and to avoid unintentional actions, or time-wasting annoyances.

The first consideration to make is whether your game needs a Toolbar at all.  If you are planning to show all available options on the screen with Verb Icons, and your game doesn’t require an "Examine" tool, you might seriously consider the following:

    adventure.toolbar_position = "none"

How Many Toolbar Icons?

If your game requires more interaction options, a simple combination of ["auto", "ex"] will probably handle most needs.

    adventure.toolbar_icons = ["auto", "ex"]

This communicates to the player that the arrow is used to actually DO things and the magnifying glass is used to LOOK at things (or otherwise receive explanations about them.)  This has the added benefit of making the icons disappear when choosing the "ex" tool, which players may find desirable for taking screenshots of simply viewing areas without overlay icons.

If your game has consequences relating to certain interactions, or if you want to frequqently allow for multiple types of interactions with the same on-screen element, you may want to expand to a more traditional toolbar, containing ["ex","say","op","go"] — this is the Investigative Order that I spoke about in the previous How-To Guide, #003: Icons, Polygons, and Tools — Your Contract with the Player.

    adventure.toolbar_icons = ["ex", "say", "op", "go"]

It is probably rare that you want "auto" to display at the same time as the other icons, but if you want to try out the full suite, you can use ["auto", "ex", "say", "op", "go"].  You may find this mode useful during the early stages of game development in order to experiment with the different tools and help you decide which set of icons to include in your game.

    adventure.toolbar_icons = ["auto", "ex", "say", "op", "go"]

Toolbar Position

The next thing to consider is the position of the Toolbar on the game screen.  This is a major choice, and probably needs to be made before your artwork and room layouts are finalized.  The toolbar will cover a small part of the image, and you’ll need to be careful not to put objects intended for interaction underneath or too close to the edges of the Toolbar.

You should also consider the other types of user interface elements that your game will employ:

• Text Representing Character Dialogue
• Narrative Text
• Multiple-Choice Menus
• Any other custom on-screen statistics or buttons you need to display.

Some of these may be helpful to place in the same zone.  For example, Narrative Text and Multiple-Choice Menus might both work well at the bottom of the screen, where the Toolbar will be during an interactive mode.  This works because interactive mode isn’t enabled while dialogue is happening, nor during a Multiple Choice Selection, and it keeps the player’s finger or mouse pointer near the area where they’ll be needing to interact with the game.

On the other hand, if your game frequently includes long Multiple-Choice selections, you might want to locate them on the left or right of the screen, to avoid obscuring the faces of characters.  Your game is likely already in a “widescreen” theatrical aspect ratio, and eating up even more vertical space might leave you feeling extremely limited.  You might consider moving your toolbar to the same edge you’ll be using for your Choice Menu.  On the other hand, you might have a game with extensive dialogue, and want to ensure that players who are tapping through the dialogue don’t accidentally tap past a menu choice as well.  In such a case, contrast between these positions could be useful.

Is your game likely to be played on a touch device, such as an iPad or Tablet?  If so, you may want to avoid putting options at the top of the screen, which makes for an awkward reach.  The top is also dangerous for full screen macOS games, since moving the mouse to the top edge will pop the Application’s title bar into view along with the options to remove it from Full Screen mode.

In addition to deciding which edge of the screen, you can also change where the Toolbar is located along that edge by changing the adventure.toolbar_anchor option.  A value of 0.5, the default value, keeps it right in the center.

For vertical toolbars (left or right edge),  a value of 0 will move it to the top of that edge of the screen, which may be undesirable for the reasons we just discussed, while a value of 1.0 will move it to the bottom of the left or right edge.

    adventure.toolbar_anchor = 1.0




For horizontal toolbars (top or bottom edge), a value of 0 will move it to the left corner of the screen, and a value of 1.0 will move it to the right corner.

You also have other options, such as toolbar_margin_edge, which controls how many pixels away from the edge of the screen the bar is positioned.  This can be useful for dodging other, conflicting user interface elements, such as Ren'Py bottom-of-the-screen menus, or the hover-over Tooltip indicator (which is also able to be repositioned, by the way.)

    adventure.toolbar_margin_edge = 60

So what should I pick?

There’s really no universal right or wrong answer.  Only you know the style of your game, the type of audience you have, and the flexibility you will be able to achieve in screen layouts and artwork.

I hope the points raised in this article will be able to help you consider the pros and cons of different layouts, and make the correct choice for your specific game.

What is certain is that making this decision early on will allow you to design your artwork, screen layouts, and other player interactions with the proper set of Tools and the proper positioning in mind, which will hopefully eliminate the types of conflicts that could occur if trying to retrofit a different design decision into a game that has already been extensively developed.

Good luck!