Ratopia DevDiary #11 - Title Artwork

Cassel
7 Feb 2023
Views 149


Hello all! It's Cassel, developer of <Ratopia>.

So long have passed but yet it's winter!

Hope you all are having safe and enjoyable cold weather.


For this time on DevDiary, I've brought stories about how we have worked on our Title scene.

A bit lighter topic compared to the recent DevDiaries related to system parts.



Main Artwork


On the early development stage, while we all were struggling on engineering,

We've also worked on the main artwork of the game.

It was needed to apply for exhibitions, government supports, and contests,

and in addition to that, we also needed an image to use on our title screen.

So we worked on.


Back then, quite many things were undecided.

Not even whether there would be playable character or not was yet to be discussed,

so the concept idea was bit vague as; overpopulated city with various castes.

Just like the movie <Parasite>, we wanted to show the poor and rich struggling to live in the city.

But the output was not clear enough to show the idea.



Some might even have not noticed they are rats



After we failed to join government support program, I felt the needs of new title illustrations.

This time, with more time and effort, we have decided to emphasize more on characters.

Because, through the experience, I have noticed the power of characters

and it was decided to put the main protagonist too. 

So this time by putting the main character at the center, 

we were trying to show that 'this is a city building game, controlling cute mouse princess!'

 

Well, always the hard part of 'How?' comes the next.

We've done researches on how the other games have put their main characters on the title page,

and how they could emphasize their ideas with it.

Then, we drew some artworks with many angles.



After the sketch, it was much easier to find where to emphasize and not



Since it was a total re-work, we've decided to put extra effort on it to make harmony with the game's other parts.

On our previous work, <Ratropolis>, the main artwork, card illustrations, 

and in game characters were designed all in different styles, making them hard to be explained.

So this time, we would like to give some unified feeling of the game, 

so tried to use same light, effect, texture, borderlines intentionally, making fairy tale like mood.



Logo Design


While sketching the main artwork, we found out that we do not have a proper logo for the game.

Again this time, we've set the keywords of rat, city, kingdom, and princess,

done researches of related movie posters and game titles, and drew some draft images.

What I wanted from logo was to make it represent the game,

so we did put some extra efforts to put game's main ideas, stories, and graphic styles on it.



We also have tried to put subtitles together



After many discussions, we've choose the one at the center of the image above.

Main reason was that the combination of red and gold colors felt like representation of the kingdom in prosperity.

And the little decorations were cartoonissh enough to show the game's casual style.

So the logo design was set, now it was time to finish designing the title.



Things for the title screen


This time again I wanted the opening scene to smoothly connect to the title screen, just as it did on <Ratropolis>.

In order to make this happen, we needed to make some sketches of the opening scenes,

because if they were not fitting with each other, we must work again to match them.



Let's watch the opening of <Ratropols> at this point



In order to sketch the opening, stories and the world had to be set.

Yes, the life is all but preparation, and making a game is just like the life.

Anywas, back then, we were in hurry of making the title scene,

but the storyline prepared were too vague and had high chance to be modified.


So instead, I thought, if we make a storyline related to <Ratropolis>,

this would be much interesting and would have less chance to be changed.

So with that idea in mind, I drew continuity of the opening scenes.

Since the actual opening movie would be worked on long later,

I had to record details of the ideas.



I sure will talk about the opening some day on the DevDiary



The opening was decided to end with the scene that the princess building a new homeland,

and the main artwork was designed to fit with the ending scene of the opening scene.

To make the character notable, design followed the structure of the sketches,

but rats roaming in the forest and the book that the princess was reading in the opening was added.


Where to put UIs and logo had to be decided too,

and for this again we've done researches to find out where they fit the best.

But this time the research was not really helpful because the styles were way too divers.

So, since the number of clickable buttons could be quite many on managing games,

we've decided to put the buttons on the side so that they would not block any images.



Sticker shaped buttons were tried too



This was a really satisfying output, but I've noticed a single mistake we have made.

It is a fact that the most popular ratio of nowadays monitors are 16:9, so we've prepared our image 1920 x 1080.

But in many situations such as steam library or game show banner, they require different sizes of the images.


So normally, it is better to make a larger image then we need,

and crop it to fit with the usage is much preferable method.

We have already known this since we have made same mistake before,

but I think I have forgot about this because we were in a bit of hurry.



Sample of the ideal artwork canvas



Title Animation


As the output was far better than I have expected,

I was tempted to make the title to look even better.

So I thought, why don't we put animation to make character move?

In <Ratropolis>m we have used unity animation toll and sprite images to make only simple motions,

but this time we've decided to make a better and detailed animations with Spine tool.


To make it happen, firstly we had to cut the resource into pieces.

Then, this artwork needed to be worked a bit more since there could be a empty spots when they move.

This could've been much easier if the image had separated layers,

but since this animation part was undecided at all, so we had to work a bit more.



Resources cut into pieces in order to make animations



Our game's characters are active and vivacious.

Thus I wanted the title to have same characteristics.

So we've made the princess's dress and hairs to wave,

and put fast moving clouds at the back as if some strong winds are blowing.

The scene really became live and fresh looking.


In addition to the winds,

the ideas about changing days and nights were discussed back then.

So we've put light and white resources to make natural-looking reflections,

trying to emphasize the changes and differences of the day and the night.



Let there be light!



The output was great, but the passage was not easy at all.

Since the illustration and animation were done by different persons,

there were many trial and errors while fixing the resources.

The paper-like texture that was put to give harmony was making the animation awkward,

and the frames got much longer than expected because of day and night,

meaning that any additional change would need great efforts.


This work was to make a temporary title screen,

But as usual, we put too much effort, much more than the plan.

Still we have learnt a lot, and I am sure many would love the title screen.

Though I am also a bit worried that you might get a bit disappointed after the screen.


DevDiary 11 is done here.

For the next time, I'll write about UIs, which is always problematic.

Thank you so much for reading this long article again.

Hope you have a great February.


8 0