Customizing Basic Game UI (GUI) for Visual Novel

A good interface is important to ensure your player experience is pleasant.

In CloudNovel, we make it possible for you to customize the graphic user interface (GUI) in just several steps.

❚ Textbox 

A textbox is an image that contained the dialogue message of your visual novel. In CloudNovel, there is only one textbox that includes a basic textbox image and textbox with the name placeholder (name box) image. It is NOT required to have a textbox with a name placeholder but it is a nice addition. 

1. Get the new textbox ready. Make sure you have the asset link if you are using the free project version.
   
2. Open the project's Library.
   
   
   
   
   
   
3. Find the Interfaces button.
   
   
   
   
   
   
4. Under Main Graphic, you will find the Textbox button. Click on it.
   
   
   
   
   
   
5. Upload the textbox in the Asset Source box. 
   
   
   
   
   
   
6. Wait until the image finishes loading.
   
7. (OPTIONAL) If you have a different variation of textbox when a character is speaking, upload the textbox image with the name box into the W/ Name Placeholder box. Do not upload the name box separately, it must be exported together with the textbox.
   
   
   
   
   
   In this documentation, we've already included the name box as a default textbox so we don't need to use this.
   
   
8. Scale the image if needed.
   
   

   For example, 1 is the default of 100% size. Use numbers lower than 1 such as 0.1, 0.5 and to scale down the image. Use numbers higher than 1 to scale up the image.

   
   
   
   
    
   
9. Once you are satisfied with the changes, click Save Changes.
   
   
   
   
   
   
10. Go to the scene map and open any scene.
    
    
    
    
    
    
11. Click Manage Interfaces and choose Textbox.
    
    
    
    Click Manage Interfaces
    
    
    
    
    
    
12. Adjust the position of the textbox using inputting a number in Horizontal Position or Vertical Position.
    
    
    
    
    
13. Click the Close button if you are done.
    
    
14. Save your changes.
    

❚ Message

The message is the story script of a visual novel. Follow the guide below to customize the message text.

1. Open any scene in your game project.
   
   
   
   
   
   
2. Click Manage Interfaces and choose Message. 
   
   
   
   
   
   
3. Change the font to any of the available fonts that suited your visual novel the best.
   
   
   
   
   
   
4. Change the size of the font by typing your desired number in the box. The default size is 20px.
   
   
   
   
   
   
5. Change the font color by entering a color hex code in this input box OR click this square box. You may choose to slide around the color spectrum to find a color that is suitable.
   
   
   
   
   
   
6. Choose the message text-align among these options.
   
   
   
   
   
   
7. If you do not want any drop shadow in your message, you can enable this 'No Shadow' option.
   
   
   
   
   
   
8. Adjust the message width by inputting the number in this box.
   
   
   
   
   
   Depending on the width, the text of your message will keep appearing horizontally before it creates a new line.
   
   

   TIPS: Input a number that does not exceed the width of your textbox size

   
   
   
9. Adjust the position of the message with these two input boxes.
   
   
   
   
   
   
10. Click the Close button if you are satisfied with the changes.
    
    
11. Make sure you save the changes.
    
12. Repeat the same steps if you want to edit the Speaker text too. Just click Manage Interfaces and choose Speaker and the rest of the steps are similar.

❚ Choice Box

There are three states of choice boxes in CloudNovel. The normal, hovered and clicked state. Additionally, CloudNovel also allowed you to have sound in hovered and clicked state.

1. Make sure your choice box images for normal, hovered and clicked states have the same sizes. 
   
2. Open a visual novel project library.
   
   
   
   
   
   
3. Click the Interfaces button.
   
   
   
   
   
   
4. Under Main Graphic, choose Choice.
   
   
   
   
   
   
5. Paste the asset link or upload the Normal state choice box in Asset Source.
   
   
   
   
   
   
6. Repeat the same for Hover Source and Clicked Source for hovered and clicked state choice box.
   
   
7. (OPTIONAL) If you have a sound effect when a player hovers or/and clicks the choice box, you may add them in Hover Sound and Clicked Sound.
   
   
8. Next, you may set a number in the Image scale, if you want to scale up or down the choice box image.
   
   
9. Save the changes.
   
   
10. Open any scene.
    
    
    
    
    
    
    
11. Under Manage Interfaces, click Choices.
    
    
    
    
    
    
    
    
12. Choose a font from the available fonts to change the font of the choices. By default, it will carry over the settings from the Message but you may customize it as you wish.
    
    
    
    
    
    
13. Input a number in Size to change the font size.
    
    
    
    
    
    
14. You can adjust the text color of the choices by entering a color hex code in the input box or by clicking the rectangle button.
    You may choose a color by sliding around the color box to get a suitable color. 
    
    
    
    
    
    
15. Enable No Shadow effect if you don't wish to have a drop shadow effect.
    
    
    
    
    
    
16. The choice text position can be adjusted by entering the X and Y coordinates into these boxes.
    
    
    
    
    
    
17. Change the width of the text by entering a pixel number in this box.
    
    
    
18. If you want to arrange the position of the whole choice box instead, use these boxes, located below Text Width.
    
    
    
    
    
    
19. Once you are satisfied, click Close.
    
20. Do not forget to save the changes by clicking the Save Changes button.
    

❚ Options

Just like the choice box, options also have three state images. You are also given a choice to add a sound effect to the hovered and clicked states.

1. Open a project library.
   
   
   
   
   
   
2. Click Interfaces.
   
   
   
   
   
   
3. Under Options Icons, you will see a bunch of icons.
   
   
   
   
   
   
4. Click one of the icons that you wish to change.
   
   
5. Paste the link or upload the image of the new options icons to Asset Source, Hover Source, and Clicked Source accordingly to their state.
   
   
   
   
   
   
6. (Optional) Add a sound to hovered and/or clicked state by pasting the asset link or upload the sound if you are using a premium.
   
   
7. Repeat steps 5 and 6 to the rest of the icons.
   
   
8. Next, open a scene.
   
   
   
   
   
   
9. Click Manage Interfaces.
   
   
   
   
   
   
10. If you want to edit the position of all icons, click Options.
    
    
    
    
    
    
11. Move the Options icon by inputting coordinates into these boxes.
    
    
    
    
    
    
12. Color is only available if you are using default option icons.
    
    
    
    
    
    
13. If you want to edit the position of a single icon, click Manage Interfaces and choose one from the Options list.
    
    
    
    
    
    
14. Repeat step 11.
    
    
15. Click the Close button and save the changes.
    

❚ Arrow

Arrow is that little icon that appears after a page has finished its animation.

1. Open a project library.
   
   
   
   
   
   
2. Click Interfaces and choose Arrow.
   
   
   
   
   
   
   
   
3. Paste an image link or upload an image.
   
   
   
   
   
   
4. Scale the image if needed.
   
   
5. Click Save Changes.
   
   
6. Then, open a scene.
   
   
   
   
   
   
7. If an arrow needs a position adjustment, open Manage Interfaces and clicks Arrow,
   
   
   
   
   
   
   
   
8. You can change the animation by selecting the animation button.
   
   
   
   
   
   
9. Adjust its position by entering the desired horizontal and vertical position.
   
   
   
   
   
10. Save the changes.