Creating a Simple Main Menu | Advanced Documentation

Note: If your visual novel contains any explicit content (Hentai, Eroge, Yaoi, etc), please select mature. Failure to do so may result in deletion of your visual novel and a banned account.

This is NOT where you add characters for your game, this is for submitting free to use character art for other game creators to share their artwork with the community in the public resources gallery.

To add characters to your game project, go to your Dashboard, choose a project and click "Open Project," click on the library tab, and add characters there.

I own this asset and allow others to use it

I don't own this asset and I will give proper credits to the original owner

This is NOT where you add backgrounds for your game, this is for submitting free to use background art for other game creators to share their artwork with the community in the public resources gallery.

To add backgrounds to your game project, go to your Dashboard, choose a project and click "Open Project," click on the library tab, and add images there.

I own this asset and allow others to use it

I don't own this asset and I will give proper credits to the original owner

This is NOT where you add GUI for your game, this is for submitting free to use GUI for other game creators to share their artwork with the community in the public resources gallery.

To add GUI to your game project, go to your Dashboard, choose a project and click "Open Project," click on the library tab, and add GUI there.

I own this asset and allow others to use it

I don't own this asset and I will give proper credits to the original owner

This is NOT where you add objects/item images for your game, this is for submitting free to use art for other game creators to share their artwork with the community in the public resources gallery.

To add objects/images to your game project, go to your Dashboard, choose a project and click "Open Project," click on the library tab, and add images there.

I own this asset and allow others to use it

I don't own this asset and I will give proper credits to the original owner

This is NOT where you add music/soundtracks for your game, this is for submitting free to use music/soundtracks for other game creators to share their music with the community in the public resources gallery.

To add music to your game project, go to your Dashboard, choose a project and click "Open Project," click on the library tab, and add sounds there.

I own this asset and allow others to use it

I don't own this asset and I will give proper credits to the original owner

This is NOT where you add sound effects for your game, this is for submitting free to use sound effects for other game creators to share their sounds with the community in the public resources gallery.

To add sounds to your game project, go to your Dashboard, choose a project and click "Open Project," click on the library tab, and add sounds there.

I own this asset and allow others to use it

I don't own this asset and I will give proper credits to the original owner

Note: If your dress up game contains any explicit content (Hentai, Eroge, Yaoi, etc), please select mature. Failure to do so may result in deletion of your visual novel and a banned account.

Features	Free	Premium
Scene map for organizing scenes and connecting your story
Flags or Point System: Keep track of simple statistics like love points, flagged triggers, etc.
Creating screens such as CG gallery or extra screens
Add collaborators to your visual novel project so multiple people can work on it at once
Cloud Storage: Directly upload files from your computer into your project	-
Video Files	-
Flag Folders: Organizing your flags into folders	-
Customizable Save Slots	-
Character Popularity Poll	-
Password Protection Feature	-

Features	Free	Premium
Pieces system for creating your character or avatar model
Creating screens such as character closet/wardrobe or other screen systems
Add collaborators to your dress-up game project so multiple people can work on it at once
Cloud Storage: Directly upload files from your computer into your project	-
Masking to hide certain shapes or "cutouts" of pieces or other assets	-
Special effects such as blurring or coloring filters	-
Sharing your saved images with online web community	-
Password Protection Feature	-

Uploading to Steam Collaborating Easily with CloudNovel Customizing Basic Game UI (GUI) for Visual Novel Creating a Simple Main Menu

Introduction to Flags Embedded Flag Code Designing a Custom Load Screen How to Create an Unlockable Image Gallery

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.

Go to the scene and create a new scene. For the sake of simplicity, I will name it as Main Menu.
Set the Main Menu scene as the first scene. This will ensure this will be the first scene to play.
Open the scene and add a new page.
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.
Add all related assets and enter the page timeline.
Select Global to enter global's settings.
Choose Hide Textbox, Hide Text, and Hide Options.
Open the image you will use as the background image and choose Show Image. This will make sure your image is showing.
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
Repeat Step 8 to the rest of the buttons.
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.
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.
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.
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.
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.