“How to customize the User Interface”
You can change the appearance of the game in all its aspects by substituting the image assets.
For doing so, you may use your favorite image editing software or vector graphics software, if you don't have any, we warmly encourage you to use GIMP, if you prefer working with pixels, or Inkscape if you prefer working with vectors. Both are free and open source software which running on Windows, Linux, OSX.
- Re-skinning the Graphical User Interface (GUI)
- Customize the Loader Screen
- Changing text in Info Screen
- Customizing the "how to play" screen
A) Re-skinning the Graphical User Interface (GUI) - top
Images used by the GUI are stored inside the folder data/img/gui/.
When you modify those images, please, try to keep their size unvaried, if not stated differently.
- data/img/gui/audio_off_button.png is used by the audio toggle button in main menu screen: it is the off state.
- data/img/gui/audio_on_button.png is used by the audio toggle button in main menu screen: it is the on state.
- data/img/gui/butt_down.png is the down button used in the hi-score screen and in the choose level screen.
- data/img/gui/butt_left.png is the left button used in "how to play" screen.
- data/img/gui/butt_pause.png is the pause button in the game HUD.
- data/img/gui/butt_right.png is the right button used in "how to play" screen.
- data/img/gui/butt_up.png is the up button used in the hi-score screen and in the choose level screen.
- data/img/gui/butt_x.png is the button for dismiss ads between levels.
- data/img/gui/continue_button.png is the button used to continue playing from the in-game pause menu and the next level from the "you did it" screen
- data/img/gui/cover.png is the cover image used in main menu screen. It must be a png image with transparency. You can resize this image, it will be put at the center of the screen. When you resize it, you should consider you may have the two columns of buttons at its sides.
- data/img/gui/fullscreen_off_button.png is used by the fullscreen button in main menu screen: it is the off state.
- data/img/gui/fullscreen_on_button.png is used by the fullscreen button in main menu screen: it is the on state.
- data/img/gui/gui_bg.jpg is the image used as background by the GUI. Size it at least at the resolution of the game.
- data/img/gui/head.png is the image used for showing on HUD the lives left .
- data/img/gui/hiscore_button.png is the button for accessing hi-score screen from the main menu.
- data/img/gui/home_button.png is the button used to back to main menu from the in-game pause menu and in the "you did it" screen.
- data/img/gui/info_button.png is the button for accessing to the info screen from the main menu.
- data/img/gui/level_button_lock.png is used to shows the levels not yet unlocked in the "choose level" screen.
- data/img/gui/loading.png is shown during loading screen, here you can put your logo or whatever. Image size can be modified, the system will try to center the image in the upper part of the screen.
- data/img/gui/menu_button.png is the the generic button used by GUI screens.
- data/img/gui/restart_button.png is is the button used restart the level from the "you did it" screen.
- data/img/gui/small_button.png is the generic small button used by dialogues, for example in the nickname input when player saves hi score.
- data/img/gui/title.png is the title image used in main menu screen. It must a png image with transparency. You can resize this image, it will be put at the upper center of the screen. When you resize it, you should consider you may have the two columns of buttons at its sides.
B) Customize the Loader Screen - top
You can customize the loader appearance by editing the corresponding section into the configuration file.
Moreover you can overwrite the image file located at data/img/gui/loading.png to change the image shown in the upper part of the loading screen.
C) Changing text in Info Screen - top
You have six title lines and six text lines for showing information onto the info screen.
Texts inside info screen vary according the user browser/device language preferences, if you are making a multi-language game you have to write such texts in every language files.
Language files are located into the folder data/local/
The fields you have to edit/translate are:
title1, text1, title2, text2, title3, text3, title4, text4, title5, text5, title6, text6.
D) Customizing the "how to play" screen - top
"How to play" screen (or help screen) is a combination of texts and images disposed in a series of pages. You have up to five pages to use.
Text are stored into the language files in
data/local/ folder.
You can set different instruction for mobile devices and personal computers. You have texts for page 1 page 2 and so on in
p1,
p2,
p3,
p4 and
p5 fields, those fields are available for personal computers (
howToPlay_desktop) and for mobile devices (
howToPlay_mobile).
Images for help pages are stored in
data/img/gui/help_mobile.png for mobile and
data/img/gui/help_desktop.png for personal computers. You can think at them as they were animation sheets arranged as vertical stack where each page uses a single frame. Each frame is 180 pixel height, the number of total frames sets the number of pages you get.
Go To Table of Contents