In the scene menu, the In-Game UI chapter includes the menu that can be customized from the Scene Editor:



Please read each section in order, as the guide does not repeat the whole procedure every time.

Most of the title screen can be edited by changing the “Show Image Map” event (in red):


Image: two images are set up: Ground (used for inactive display) and Hover (used when hovering over a hotspot):

Ground:



Hover:



You can change how the menu looks by replacing these images with different ones in the game folder (\resources\Graphics\Pictures ), or by importing your own images in “Graphics/Pictures” and selecting the image you want to use.


Buttons: You can change the button positions by editing the Hotspots:



The hotspot should cover the entire area that will change when hovering / clicking. In this example case, the hotspot extends to the left of the text, to cover the symbol that is displayed when hovered.

Two hotspots should not overlap.

The five hotspots set up are in order:

1. New Game
   
2. Load Game
   
3. Options
   
4. CG Gallery
   
5. Quit

Please make sure to move each to cover the corresponding button in your own design.
You can delete any hotspot that you do not have a button for or move it offscreen.
You can check what a hotspot does by double-clicking on it: for example, New Game:



The behavior in question is described after each label:

Similar to Title Screen, the main part here is the “Show Image Map”

Four images are selected: Idle for Ground, Hover for hover, and Selected, especially for the selected page tag. Replacing them will let you change the look for the menu.

Ground: Frames, back arrow, and page tab are inactive:



Hover: Frames, back arrow, and page tab are active:



For Selected AND Selected Hover, the page tabs stay active even when not hovered:



Hotspots: 14 hotspots are available for this menu:


1/ The BACK button
2 - 6/ The SAVE PAGE tab
7 - 14 / Each of the 8 save slots (each hotspot covers the frame)

When moving the save slots, another change is necessary. Below the Show Image Map, there is one “Show Picture” per slot numbered from 0-7 (slot 1 is number 0, slot 2 is number 1, etc). Clicking on the Position coordinates lets you move the thumbnail around on the layout. (See “Common Event” - “Save / Load Menu” to change thumbnail size).

As usual “Show Image Map” is the key.

The example uses two patterns, Idle and Hover.

Idle is used for the Ground:



Hover is used for Hover, but also Selected and Selected Hover (for selected options):



Hotspots:

1/ BACK button

Display Options
2/ Window (changes when selected)
3/ Fullscreen (changes when selected)

Skip Options
4/ Unread (changes when selected)
5/ Read (changes when selected)
6/ Choices (changes when selected)
7/ Voices (changes when selected)

8/ Back to Title (only active ingame)
9/ Reset Global Data



If you want to change the position of the Sliders you will need to move both:

• Add Hotspot (set to the end of the slider)
  
• Show Picture (the slider picture itself)

You can replace the slider picture with a picture of the same size by modifying “Change Picture.” Changing the length of the slider is a bit more complex, and will not be covered here.

The number set up for each action is the slider ID.

0: Text Speed
1: Auto Text Speed
2: Music Volume
3: Sound Volume
4: Voice Volume

The Layout is set in the “Show Image Map”, with one image for Ground and another for Hover:



Hotspots define the language options (two in the example). As usual they have to cover the whole zone that you want to change to the “hover” image when hovering.

The action when clicking is only:

Jump to the language label.

To add another language, you just need to copy the block below and change it to match the additional language.



Label: The name set in the “Jump To” command of the corresponding language hotspot.

Set Game Data - Set To: The language code set in the language tab for the corresponding language.

The rest of the customization is done in Database / Common Events



After selecting “Common Events” you will see the following in “Records” below.



Clicking on the arrow opens up the list of events, organized by category:

Show Gallery Image: The event that displays the necessary image in the gallery.

Show Gallery Thumb: The event that displays the thumbnail on the gallery page.

Neither event should need customization.

Back to title: Event that returns to the title screen, no customization

Confirm: Event that handles confirmation menus.


Customization as follows:

To change the menu base image, replace the files with the corresponding names in the database.

Load Menu: Graphics/ Pictures/ In-Game UI/ Prompt_Confirm_SaveLoad

Quit Menu: Graphics/ Pictures/ In-Game UI/ Prompt_Quit


To change the YES and NO buttons, or move them around, edit the

YES:

• “Show Picture” Number = 12, the file set here is the YES button inactive graphics, and the position sets up where it is displayed on screen
  
• “Add Hotspot” Position = Picture, Picture Number = 12 (as defined in the show picture). The image set up in Hover is the YES button active graphics.

NO:

Similar to YES, change both the “Show Picture” Number = 13 and the “Add Hotspot” Picture Number = 13

To use:

Where {Picture Name} is either Prompt_Confirm_SaveLoad or Prompt_Quit

Displays the numpad to let the user enter a number.

Usage:

Where Digits is the max number of digits that the user can enter.



To customize:

You can change the design of the numpad by changing the images used in the “Show Image Map”

NE-IDLE-STF is the ground image:



NE-ACTIVE-STF is the hover image:



If the image layout changes, you will also need to adjust the 12 hotspots on the image.

10 of them are set on number buttons, with the value of the button in the “bind value” setting.
Ex: digit 9:



There is also one for the Clear button, which will delete a digit, and one for the End button to confirm/finish the entry.

The number displayed on top of the entry pad is set up by:

• “Text Setting” (number 300) that let you control the Font and Size
  
• “Show Text” (number 300) that sets up the position of the text

Display the text entry UI.

Usage:

Where letters is the max number of letters you want the user to enter.

The logic is very similar to input text, except that there are two different images:

• The alphabet entry image, active when ABC is clicked
  
• The symbols entry image, active when Symbols is clicked

Alphabet entry customization:

1. “Text Variable” (Text = L[0001: Letter Set]) contains a list of the letters that will be available on the alphabet entry UI, in order (Ex A is 1, a is 27 etc …)
   
2. “Show Image Map” (Number = 101)

The images used for the UI are the following:

Ground: showing the letters / buttons when inactive:



Hover, Selected, Selected Hover: shows the letters when hovered, and the buttons when hovered/ selected:



Each button and letter is set up as a hotspot, for a total of 56 hotspots.

• 52 hotspots are set to Jump To Process_letter, with Bind Value = letter number in the list (27 for a for example)
  
• ABC button, to change to the alphabet UI (already active)
  
• Symbols button, to change to the symbols UI (will show “Selected” when active)
  
• Clear All, to delete the entry
  
• Finish, to end the entry

Symbol entry customization is similar, with 2 different images and different hotspots.
“Text Variable” (Text = L[0001: Symbol-set]) contains a list of the symbols that will be available on the symbol entry UI, in order (Ex 1 is 1, & is 15 etc …)
“Show Image Map” (Number = 102), with similar hotspots.

Update Pages: Event to change the save/ load active page

Save Game: Event to save the slot corresponding to the page / slot chosen with the following formula:

Actual Save Game Slot Number = (Page - 1) * 8 (NumberOfSlotAreas) + Slot-Area

The size of the thumbnail image can be customized by changing Thumb Width and Thumb Height here:

Load Game: Event to load the correct slot with the same logic as save.

Show Save Game Image: Shows the correct image for the save slots, with the save formula as save and load.

If you want to change the number of slots per page, all of the events above need updating.

Contains all the events pertaining to the message box graphics, text display, and log.

Hide Message Box: Hides the message box and text

Show Message Box: Show the message box and make it ready for text display. It can be customized as follows.

“Show Image Map”
Three images show the message box parts in inactive, hovered and selected state (for skip, auto…). These images can be replaced by your custom graphics.







If changed, the hotspots need to be moved to match the new graphics.

• Open Backlog
  
• Open Save menu
  
• Open Load menu
  
• Open Option menu
  
• Toggle Skip ON/OFF (selected when active)
  
• Toggle Auto ON/OFF (selected when active)

Text Area: Character Name

The following events set up the font and position of the character name area



“Text Setting” (Number 0) lets you choose the font and size of the character name text.

“Color Text” (Number 0) affects the color

“Show Text” controls the the position and display effects


Text Area: Message Area

The following events set up the size and font of the message area:



“Create Message Area” sets up the area to be used for message display:




“Message Setting” controls how the text is displayed

• Font
  
• Size
  
• Style

Toggle Skip: skips the toggle option

Open Settings Menu (Right Click): An event that runs in the background, and checks if the right mouse button is clicked, only if in game while the backlog is not currently opened, to open the Settings menu.



“Condition Switch”: only runs when this is true (in this case, G:001 is true, which means the game was started)
“Trigger - Auto”: set this event to check the condition in the background and trigger when they are completed.

Changing what opens the menu can be done by changing the following field:

Open Settings Menu: Opens the Settings menu

Open Save Menu: Opens the Save menu, and prepare the game to be saved. You can choose for the game snapshot not to be saved by changing the below:

Update Log: An event to check and close the backlog when needed

Update Name Box: Checks when the speaking character change and update the character name when it happens.

Toggle Log: Toggles the backlog visibility, and change the switch (to prevent the menu from opening)

Toggle Auto Message: checks current setting for Auto, and toggles it.

Open Load Menu: Opens the load menu

Show Choices: Displays the choices you have set up with “Add Choices”. Here you can customize both the picture shown under the choices, and the font used for display.


Customizing image:

“Show Picture” (Number L[0003:Picture Number]) lets you change the picture shown under the choice when not hovered by changing “File”. If you change the picture width, you can adjust the horizontal position “X”.

“Add Hotspot” (Number L[0003:Picture Number]) you can change the active picture in “Hover” and “Selected Hover”. The picture used here should be the same size as the one in “Show Picture”

Customizing Text:



“Text Settings” lets you select the Font and Size of the choice text.
“Show Text” lets you select the text position and modify the text displayed.

By default

• {C:2} Color 2
  
• {Y:I} Italic style
  
• {LT:1} Content of Local Text 1

Advanced: Choice vertical position

By modifying the following numbers you can customize how high/ how spaced the choices are displayed:



Vertical position is 118 * Choice number + 100. Modifying those number will change it.

Text vertical position is:

Choice graphics position + 43, which can be modified it you use bigger / smaller buttons.

Add Choice: Adds a choice to the list to be displayed by the next Show Choices

Reset Global Data: Resets the global data

Update Slider: Controls the behavior of the sliders, will need changing if you change the size of the sliders on option. (this is however not part of this basic guide)

As the question came up in the forums, here is a quick update on UI localization.
If you just want to localize the game in 1 language, just replace imagemaps as mentionned in the previous sections.
However, if you want your UI in multiple languages, here is how you can do it:

Prepare the localized version of every image you want:
In this example, localizing title to english and japanese, images needed are:
titlescreen_hover (English)
titlescreen_hover_jp (Japanese)
titlescreen_idle (English)
titlescreen_idle_jp (Japanese)

The image name does not matter, you should just make it obvious for your own ease of use.

Import the images in the Resource Manager in Graphics/Pictures



Then for every imagemap you want to localize, change the scene/event as follow:

0/Check the language code possible value
The Language Menu scene will show you what values can be stored in the language code variable. In the current default project, these can be en_US or jp.

==========================
Label | Name: english
==========================
Set Game Data | Field: Language - Code | Set To: en_US
==========================
Change Scene | Scene: Title Screen | Save Previous: No
==========================
Label | Name: japanese
==========================
Set Game Data | Field: Language - Code | Set To: jp
==========================
Change Scene | Scene: Title Screen | Save Previous: No
==========================

You can add/ modify them as much as you need, but you must make sure to check for those EXACT values in the tests or they will fail.

1/ Store the language code in a "language code" Global text Variable
==========================
Get Game Data | Field: Language - Code | Store in: G[0004: language code] |
==========================
(This can be done once every time the user changes the language, or in each event you want to localize)

2/ Check if the "language code" Global Text variable match a language code, and display the corresponding imagemap
==========================
Condition | If: Text | Variable: G[0004: language code] | Is: Equal to | Value: en_US |
==========================
Show Image Map | Number: 0 | Position: Predefined | Top-Left | Hotspots: 5 Hotspots | Duration: 500ms | Wait
Ground: titlescreen_idle
Hover: titlescreen_hover
==========================
Else If | If: Text | Variable: G[0004: language code] | Is: Equal to | Value: jp |
==========================
Show Image Map | Number: 0 | Position: Predefined | Top-Left | Hotspots: 5 Hotspots | Duration: 500ms | Wait
Ground: titlescreen_idle_jp
Hover: titlescreen_hover_jp
==========================



Rinse and Repeat for each menu. :)