Close Mark all as read
Notifications Announcements
Creating a Simple Main Menu

Preparing Assets for the Load Screen

Before you start, you need to make sure you have designed the main menu screen. In this tutorial, I have designed the main menu on Adobe Illustrator.

According to this design, here are the assets we needed to complete the main menu.

❏ Action Buttons

We designed this main menu to have three action buttons. Each of them will be assigned different actions.

Play = Will start playing the game
Load = Open load screen
Info = Open Credits page

You may add or remove as many buttons as you would like depending on the design you have.
In the CloudNovel engine, one button will have three different sources known as Normal, Hovered and Clicked. Just like the name, these sources refer to the state of the button when a player interacts with it. It is optional, but it is recommended to prepare an image for each source.
If you use different images for each state, make sure all the images are in the same sizes and carefully add the image in the right source field.

As you can see from the image, there are also options to add sound to the button. For the sake of simplicity, we do not add one in this tutorial but you're free to add a sound to your button.
❏ Background Image

An image that will act as a background image for the main menu. Make sure the image has enough empty space where you will place the action buttons on. Do not accidentally export the image with the button on it

TIPS: If you do not have Adobe Illustrator, you can use Inkscape. Unlike Illustrator, it is a free program. If you prefer working with raster images, you can use Photoshop or any drawing program that is available for you.

TIPS #2: If you do not wish to design anything by yourself, we have a Resource Library packed with free and paid resources uploaded by the amazing members of the community. Feel free to check them out by clicking here.

After you finalized your design and have all the assets ready, open your project and upload all your assets in the Library.

Creating the Main Menu

Once you have uploaded all of your assets, it is time to implement those assets as the main menu. We can do so using a scene.

  1. Go to the scene and create a new scene. For the sake of simplicity, I will name it as Main Menu.

  2. Set the Main Menu scene as the first scene. This will ensure this will be the first scene to play.


  3. Open the scene and add a new page.


  4. Click the Edit Page button and scroll down to enable [Stop page from automatically going to next page]. This will stop the page and will enable us to use the button.


  5. Add all related assets and enter the page timeline.


  6. Select Global to enter global's settings.


  7. Choose Hide Textbox, Hide Text, and Hide Options.


  8. Open the image you will use as the background image and choose Show Image. This will make sure your image is showing. 



  9. Next, select the Play button from the Scene Assets panel and choose Show Button animation command. Adjust the position of your button according to your design. Then, click Save Changes.

    If you cannot see your button, you may have accidentally added buttons before the background image. To fix this, drag your background image all the way to the bottom.

    Dragging an asset block up and down to rearrange it like a layered folder

  10. Repeat Step 8 to the rest of the buttons.
  11. Now, we will be adding action to the Play button to play the game.

    First, save all your progress and go back to the scene map.

    Click on the Main Menu scene and right-click to add a branch. Then, connect the branch to your next scene.


    Once you are done, open the Main Menu scene again and enter the page timeline.

    Open the Play button and add the Action command.


    Assign the button to go to the next scene you have just connected with a branch just now.


  12. Next, we will be adding action to the Load button.

    Save all the progress and go to Screen.

    Add a new screen and we will name it Load screen.


     Click on the Load screen and set it as Load screen.


    Go back to the Main Menu scene and enter the timeline.

    Open the Load button and add an action command.


    Assign the Load button to open the Load screen.


  13. Finally, we will add action to the Info button and make it show the credits page.

    Add a new page and enable the [Stop page from automatically going to the next page].


    Enter the Page 1 timeline, add credits image (if you haven't) and select the Credits image. Make sure the Credits image is above all current assets.


    Choose Show Image and adjust the position if needed.


    Add a Close button to the page and Show the button. Adjust the position of the button as much as you need.


    Then, add action to the Close button to go to Page 0.


    Go back to Page 0 and select the Info button.
    Add the Action command to the Info button and assign it to go to Page 1 where the credits image is shown.


  14. This is the last step, select the Credits image while still in Page 0 timeline and choose Hide Image. Then, select the Close button and hide the button as well.
    This will close the credits page.



  15. You are done. Feel free to add background music or soundtrack if you feel the Main Menu is a bit too silent. Do not forget to save changes

This is the result.