Create New Project

Cover Image Link:

Screenshot Links:

Note: CloudNovel doesn't support image uploading. We would like you to provide direct links to your images for the meantime.

Genre: Maturity:

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.


Customize Textbox, Choices, and more

In this tutorial, we will show you how to customize your own textbox, choices, and other interface graphics.

Open your project, and go to the library.

Main Graphics

Click on interfaces, and open up the main graphics. There are three main interfaces in main graphics.

Textbox - this is the textbox skin of your visual novel where the dialogue and narration will appear.
Choice - this will be the universal button skin for all your choice buttons in your visual novel.
Arrow - this is the click to continue icon that will appear in the bottom right corner of every page once it has finished playing all animations.

Insert the textbox source URL link in the asset source. If you have a second textbox version you would like to use for the name placeholder, place that source/URL link in the w/name placeholder asset source. This textbox will only appear if the page contains speaker text.

To adjust the textbox placement, enter any scene to go into the scene editor. Under manage interfaces > textbox you can adjust the horizontal(X) position and the vertical(Y) position of the textbox. Under manage interfaces > message and manage interfaces > speaker you can adjust your textbox text dialogue/narration and speaker name typography. Here is a video tutorial on customizing your textbox:

Place the choice button image source/URL in the asset source and an optional hover button image in the hover source. To adjust the choice settings and typography, enter any scene to go into the scene editor, and under manage interfaces > choices you can change the typography. The arrow icon image is recommended to be 50 pixels or smaller. To edit the different arrow animations, enter any scene to go into the scene editor, and under manage interfaces > arrow you can change the animations. That is all for customizing main graphic interfaces. More information will be covered in a later tutorial.