CloudNovel supports all sizes of projects, tiny, small to big. Some of the biggest games out there have hundreds of megabytes in assets. Very often authors just add images, sprites, audio and then complain when their game is slow or impossible to load. Here’s how to escape the pain of having to fix their assets and re-upload them.

Optimization 101

To ensure that your game runs as smooth as possible, there are three basic ways to optimize it.

1. To host game assets on fast and reliable servers with sufficient speed and bandwidth
2. To prepare assets so that they are properly sized and properly optimized images
3. To create optimally sized scenes so that our engine can load even chunks of your game lessening the load and loading times

Hosting options

Assets are images uploaded somewhere (Free visual novel option in CloudNovel) or uploaded to our servers powered by Amazon (Pro visual novel option in CloudNovel).

Not to blow our own horn, but it DOES represent the best option to invest 1000 points ($2.49) to purchase Pro version. Because then all your assets are located in the same place where our engine is, lessening the chance of:

1. Broken links to assets
2. Lag caused by poor bandwidth
3. Lag caused by poor server speed

The worst option for hosting assets is photobucket and similar services. They offer free storage for your images, but they don’t guarantee the best bandwidth and loading speeds. Sometimes these servers are down or too busy to process your game’s request which leads to error messages you don’t want your players to see and connect to your game.

Intermediate solution is to find a reliable hosting. Most of our authors who use Free option choose Trello and it’s ability to host images. You need to open a board, create a card and then attach image file to it. Then open the image and click on ‘show in new tab’ then simply copy the link and add to your Library. For detailed tour about this process, do read our documentation or interactive tutorials, and check our YouTube channel as well.

Advanced solution is to buy your own server, make sure that speed and bandwidth are to your liking and then host the images there. However, this might not be the most practical solution as it does require some knowledge of web-technologies.

Be prepared

Very effective method, actually the best one to achieve optimized use of your assets is to prepare in advance.

This is done by making sure that your assets are:

• Of the exact size for the project
• Saved in optimized way
• Additionally optimized using online optimizer algorhythms

Perfect size for the project

You have to test this. First decide on the size of your canvas for your visual novel project. It is done by opening your project, going to LIBRARY tab and picking the SETTINGS option from the INTERFACES tab.

You will see STAGE width and height options. Default one is 1280×720, but you can make it bigger – for example, 1920×1080 (HD) or smaller.

What’s the difference?

1920×1080 is most commonly used DESKTOP PC resolution.

1280×720 is very LAPTOP friendly resolution.

1024×768 resolution is very friendly for iPAD devices.

812×375 and 736×414 resolutions are friendly to iPHONE devices.

731×411 and 740×360 are resolutions friendly to ANDROID devices.

Now that you have your resolution set I recommend your backgrounds be of exact resolution like your stage size. This way there will be no resizing and it optimizes the use of your images.

Once you have the background set, take a character image (sprite). Upload and insert it in your visual novel, see how it looks like. Resize to suit your taste, then take note how much did you enlarge or shrink the image.

The percentage of resize will help you find the perfect size of characters that fits your story. Test this several times with all the objects you want to use, buttons, bars, prop/item images, characters, etc.

Remember the sizes and then use them to turn your original assets into optimal sized images to upload. For example if your background size is 1920×1080, a character sprite with height of 500 is as big as half of the screen, while character sprite with height of 300 is taking up only approximately third of your screen.

The importance of saving properly

Your original assets can (and should) be large. Just make sure they are properly resized when you are saving them for use in the CloudNovel engine.

If you are using professional tools like Photoshop or PS-like apps, pay attention to DPI size. Often, these tools are set to provide print-quality size of 300 DPI, which you absolutely don’t need for your visual novel. Whenever possible go with 72 DPI which is perfect for web apps, such is our engine.

For background images you should save as JPG format using 60-70% quality compression. Backgrounds are… well… in the background and don’t need to be top notch quality.

For buttons, items and sprites, you should save them as transparent PNG. Most of the programs don’t use extra optimization for PNG files, and that’s ok because we can optimize them in another way.

Optimistic about optimizers!

There are websites that offer optimization of your JPG and PNG images. They work by analyzing the palette used in your image and finding better way to index it. In other words, your human eye won’t be able to tell the difference and yet, the size of each image will drop from 3-6x depends on the colors used.

Many different sites offer such service, but we are the happiest with TinyJPG and TinyPNG (not affiliated to us in any way).

After you resize your images, run them through optimizer service and only then seek for the best solution to host them (see upper section).

Set the scene

Ok now it’s the time to tell you a bit about how scenes function in our engine. Everything within a scene is loaded in one chunk. So all the backgrounds, sprites, buttons, items, music – it loads in one go.

Multiple scenes using same assets

If your scenes are short and made of same assets like the next scene, then it doesn’t make sense to divide them. Instead of pesky loading breaks, you will have one shorter loading time for your players to enjoy the game uninterrupted.

Tiny, transitional scenes

Don’t have those! They will take time to load and then there will be loading time again for the next chapter. Even with the fastest connection, that can break the reader’s flow. Better attach transitional scenes within existing scene even if they are two separate chapters in the story. When scene loads, additional, transitional scene won’t be a burden for loading assets.

Lightweight novels

If you have no background or a single background. If you create illusion of different backdrops by strategically placing transparent images or items. If you lower the resolution far under the recommended ones.

Then you can get insanely fast loading speed and then you will be able to use scenes as episodes or locations…

Do you hear the music?

CloudNovel supports WAV, MP3 and OGG music formats. Just have in mind that downloaded games of Pro version DO NOT work with MP3.

Which is not a bad thing, since OGG files are smaller than MP3, anyway. Avoid WAV if you can they make huge files.

Music is not so easy to optimize mostly because we just find it ready for use and sound editing is not so popular like image editors. Online sound editors can be very messy so we recommend you get Audacity and use compress audio option to lower the size of audio file.

To get optimized size, lower the sampling rate to 44.1 KHz or 22.05 KHz (if you are ok with AM radio quality).

Next thing to lower is the bitrate, having in mind that 96 kbps is perfectly fine for web game. Sound effects you can even zip down to 64 kbps as they are not as sensitive as music is.

Another trick is to cut your music file size in half by making it MONO instead of STEREO. Yea, your audience won’t enjoy the full rich 3D sound, boo hoo, who cares, it’s web visual novel game not meant to be played with headphones, anyway.

That would be all for this post, let me know if this methods work for you and hope you make those great visual novels even greater using our help!