Customizing the game UI

The UI for the adventure games created with the Composer can be fully customized.

• All assets used to draw the UI are in the 'assets/ui' folder.
• The images are in the ui atlas inside 'assets/ui/1' folder.
• The libgdx skin for the interface is defined in 'assets/ui/ui.json' file.

More info about creating .json skin files for LibGDX can be found here.

Easy way for changing the UI Icons

The images of the ui atlas can be replaced for changing the UI icons. The raw images used to generate the ui atlas can be found in the test projects (IMAGES-RAW/ui) and can be used to regenerate the atlas changing the needed images.

Customizing the Inventory

Inventory properties

The next properties can be set in the Game Props tab inside the Adventure composer to change the inventory behavior:

• inventory_autosize: when true, the inventory size will be changed depending on the number of items. When false, the inventory will always have the bigger size.
• inventory_pos: The inventory position. The possible values are: top, down, left, right, center.

Inventory skin

The inventory appearance is defined in the ui.json skin file inside the com.bladecoder.engine.ui.InventoryUI$InventoryUIStyle section.

Tree properties define the inventory appearance:

• background: The background image/drawable.
• itemBackground: The background for each item.
• menuButtonStyle: The style for the menu button. The style must exist in the image button style section.

Customizing the dialog interface

The appearance for the dialog ui is defined in the ui.json skin file inside the com.bladecoder.engine.ui.DialogUI$DialogUIStyle section.

These properties can be defined: background: black08, font: dialog-font, fontColor: white, overFontColor: light-grey

• font: The font used for the texts.
• fontColor: The font color.
• overFontColor: The font color when the cursor is over the text.
• background: The background image/drawable.

Customizing the texts

The appearance for the texts showed in the game is defined in the ui.json skin file inside the com.bladecoder.engine.ui.TextManagerUI$TextManagerUIStyle section.

These properties can be defined:

• font: The font used for the texts.
• rectBackground: The background image/drawable for non character texts.
• talkBackground: The background image/drawable for texts spoken by characters.
• talkBubble: The image/drawable drawed in the characters texts to give a comic look.

Pie menu interface and two buttons interface

Two interfaces are defined for interaction with the objects in the game:

• The two buttons interface works only for desktop. The left button is used for action (pickup/talkto) and the right button is used for 'lookat'.
• The pie menu interface shows icons for 'lookat' and action (pickup/talkto) verbs.

Customizing Game Screens

The Menu Screen

The appearance for the menu screen is defined in the ui.json skin file inside the com.bladecoder.engine.ui.MenuScreen$MenuScreenStyle section.

These properties define the menu screen appearance:

• bgFile: The background image. Ej. ui/menubg.png
• textButtonStyle: The style of the buttons. The style must exist in the image button style section.
• showTitle: Boolean to show/hide the title in text.

The Credit Screen

The text and images scrolled in the default credit screen are defined throught the 'assets/ui/credits.txt' file.

The appearance is defined in the ui.json skin file inside the com.bladecoder.engine.ui.CreditsScreen$CreditScreenStyle section.

The Help Screen

The images for the default help screen can be replaced in 'assets/ui/1'. The next images are used in the default help screen:

• helpDesktop.png the help showed when the two button interface is used.
• helpPie.png the help showed when the pie menu interface is used.

The help images can be translated in different languages adding the language suffix. For example, for Spanish we have the next images:

• helpDesktop_es.png
• helpPie_es.png

Replacing UI Screens

The next screens can be replaced by custom Java implementations:

• The init screen
• The menu screen
• The help screen
• The credit screen

The custom screens must implement the BladeScreen interface