Evolution of the graphics in Rabbit Story tutorial

Hi, my name is Slava Bushuev, and today I would like to tell you how I developed the graphics of Rabbit Story – the game I’ve been currently working on.

I started the developing process in summer 2016. I decided then that I was going to finish the game in two weeks! I was still working in Allods Team back then, so I only had free time in the evenings and during weekends. And yet I felt so motivated as if Tyler Durden was holding a gun to my head, saying that if I didn’t do it in two weeks, I was a dead man! Of course I never made it for that deadline, but still I managed to finish the first part in three weeks.

My primary profession is level designer, and I am also a lighting artist. This is why I put the main focus on level design. Initially, Rabbit was supposed to travel the world, and the story was told through dialogues and environment. The problem was that even if it had been possible to build up the locations in such short notice, I still wouldn’t have had the time to create the models.

This is why I decided to purchase a complete setting and build the game on it. I couldn’t find anything suitable in Unreal Engine 4 Marketplace so I decided to look through Unity Asset Store. Toon Environment Pack instantly grabbed my attention with its simplicity, curious stylization, angular fir trees, and appealing colors.

This is what my first attempt to design the world looked like.

Not so bad for the first try.

Developing a game is an iterative process, so in order to learn how to do something, you first need to do it as you can. After the first attempt, you build the second iteration, and so on, until you achieve the desired quality.

While working on my project I came across a game called Hob developed by Runic Games, and I loved the way rectangular grass looked in it.

I decided to create something similar for Rabbit Story.

This is a game screenshot after the first three weeks of development. I must give proper respect to Unreal Engine 4 whose lighting system allowed me to create a smooth, nicely colored picture. However, the detailing was obviously not sharp enough, especially for the full-screen mode.

At that stage, the development was paused - the first version of the game was ready.

I kept pondering over what could be done in order to improve the picture quality of Rabbit Story without investing into expensive and complex models, but nothing occurred to me.

At the end of that summer, a new World of Warcraft add-on - Legion was released. Together with my friends, I tried it out; WoW had always been beautifully designed, but this time the graphics quality increased significantly. Especially I was impressed by the way Blizzard’s artists had filled the locations with greenery. That was the moment when I realized that despite of Rabbit Story’s simple stylized graphics, I can still fill it with greenery in the way they do that in AAA games these days. Luckily, I had plenty of experience in that after having worked on Skyforge and Armored Warfare!

After certain experimentation with the graphics, I got this picture:

The main changes included approximately 10x increase of triangle count for the fir trees and the addition of small filling grass.

For a final touch, I added more details to the road, some dried bushes, branches, and flowers.

The flowers are actually the most important detail - they add bright and necessary accents to the scene.

Model Development

Rabbit Story has a fixed camera angle; sometimes it moves in the cutscenes but the general angle never changes.

This allowed me to design single-oriented assets which made the task much easier.

They used the same technology in Diablo 3; in one of their announcements, Blizzard called it 2.5D.

Apart from saving your time, this technology allows you to use less triangles on models.

Also, all models are slightly inclined in relation to the camera.

This way they look better from above. They used the same method in The Legend of Zelda: A Link Between Worlds.

All flower and herb models are created with geometry - they don’t have textures; only materials of different colors.

Advantages of this method:

1. Fast development; no need in creating UV layout or drawing the textures.
2. Models of this type are not much heavier for the performance; they have more triangles but they have no alpha channel which facilitates their rendering in the engine.

Light and Post-Processing

This is what the picture looks like without the light:

And this is what it looks like after Unreal Engine applies Ambient Occlusion to it. It can be seen quite clearly how it highlights the volume and the details which are usually drawn in the textures.

The final picture with the light and post-processing.

Optimization

Unreal Engine 4 uses deferred rendering.

This roughly means that each layer of a frame (color, normal map, light, depth, etc) is rendered separately and is stored in the video card memory. Then they are put together in a single image on the screen.

One of the advantages of this rendering method is that it provides the possibility of dynamic lighting with multiple sources of light, and great scope of options for picture post-processing, for instance, adding blur to the background.

Its drawback though is that it has high requirements for the video card and its memory, especially when processing high-definition graphics (e.g. 4k).

In order to have 60fps in the game, each frame has to bendered within 16 milliseconds. The faster one frame is rendered, the higher is fps.

Below is displayed an example of Rabbit Story render statistics for one frame.

BasePass is the rendering time of the scene geometry, and as it can be seen from the diagram (orange part), it’s just 25% of the overall rendering time of the frame - the rest is the light and post-processing.

Even though the number of triangles has increased by more than 400%, it almost didn’t affect the performance, thanks largely to the instanced static mesh.

Thank you for your attention.