Documentation

Backgrounds and Images

In this tutorial we will show you how to add backgrounds and images to your visual novel. To find a background for your visual novel, go to CloudNovel's background resources. Go to your visual novel project library, and click on the images tab to go to your images. Click on add a image. A new form will appear. Fill out the form with the name and asset source of your background/image: Name - name of background
Source - source or URL link of the image.

How do you retrieve the URL/source of an image?

Different browsers have different methods of finding the source URL of an image. First, make sure to upload your image onto an image hosting site. Once it is uploaded, find and copy the URL of the image(you can do this by right clicking on the image):

Chrome: Firefox: Safari: Internet Explorer: *Your image URL should end with .jpg, .gif, or .png extension file. If your image URL does not end with the file/image extension, most likely that URL will not work.

Once you have copied the URL/source, paste it in source. You may also preview your background to make sure the image is correct. Click on add asset. Your background should now be added to your images. When you add you background to your scene, you may find it may appear like in the scene below: By default, if your background image is smaller than the stage (1280 pixels width by 720 pixels height [you can change your visual novel stage dimensions in the library under interfaces > settings]) your background or image will appear at the top center of the stage. You can adjust your image and position by editing your background settings in the library.

To edit your background or image, click on your background/image asset: Name - Name of your background/image
Source - The source/URL of your background/image.
Position height - This number represents the default vertical position of your background/image.

High will place it 25% from the top, center will place it in the middle of the stage or 50% from top, low will place it 75% from the top.

Image Scale - This number represents the default size of your background. A scale of 0.5 will be half the size of the original image, and a scale of 2 will be twice the size of the original image. The preset fill in stage will automatically generate a scale value for your image to expand and cover the stage full, as the following images below will demonstrate (make sure to save changes): Your background should now appear in your scenes like below: Congratulations, you have now added your background to your visual novel! Continue onto the next tutorial to learn how to add music and sounds.