Cheese: Hello, everyone. This is Cheese, developer of <Ratocalypse>.
In this month’s devlog, we’d like to talk about the very first screen players see when they launch the game: the title screen. Although it has been finished for a little while now, we wanted to walk you through the thought process behind the title illustration, the logo, and the animation work.
Reference Research
<Ratocalypse> features several key characters and is set in a medieval apocalypse. To capture that atmosphere properly, we started by gathering title illustrations from other games that conveyed a similar mood.
Reference title images we collected
Since our game features many characters, we naturally gravitated toward compositions that could place multiple figures within a single illustration in a balanced way.
As we began planning the composition based on these references, one important question came up:
Which characters should we include in the illustration?
At the time, around five character types had been implemented, including one character who serves as the protagonist. However, since the game features a variety of characters, we discussed internally whether we should place the most narratively important characters at the front, or instead focus on characters that would look the most visually appealing.
In the end, we decided that the best way to spark interest in the game was to feature the characters with the strongest personalities and the most visually appealing designs at the forefront of the illustration.
Various characters appearing in the game
Deciding on the Composition
After that, we moved on to creating more concrete drafts based on the references we had gathered.
We created three rough composition drafts and compared them to decide which direction would be the best fit.
Title drafts exploring several different compositions
After discussing the drafts internally, we decided to proceed with the second draft as the basis for the title illustration.
Among the three options, we felt it suited the title illustration the best, and we also liked how prominently the characters were emphasized.
Another positive factor was that our previous game, <Ratopia>, also had a title image centered around the protagonist queen, and we had been quite satisfied with that composition. Since this draft had a similar structure, it felt like a good direction to build on.
Logo Design
Just like with the illustration, the logo design process began with collecting reference images that matched the mood we wanted, followed by creating design drafts.
For this logo, the main focus was finding a design that would fit well with the apocalyptic atmosphere of the illustration.
Logos from games with apocalyptic atmospheres
Various logo design drafts we tried
After sketching out several logo ideas, we developed some of them to an intermediate stage and placed them directly onto the title illustration we were working on. This allowed us to compare which one fit the overall image best.
Comparing logos by combining them with the title illustration
Among the various logo designs, we felt that the rough, carved-looking letter style matched the title’s atmosphere the best, so we ultimately chose that direction.
After that, we designed and placed an additional icon above the text, then adjusted the colors and post-processing to better match the title screen before finalizing the logo.
Revision process for the selected logo design
Title Animation
The final step was animating the title screen.
For the title screen, character movement and objects such as grass were animated using Spine. Elements like the background clouds and smoke were handled separately in Unity, and all the individually prepared parts were assembled together to create the final screen composition.
Separate layers being combined one by one
One thing we paid particular attention to from the start was separating the layers so the title screen could support various resolutions.
In our previous game, <Ratopia>, we had also separated layers to some extent with resolution support in mind. For this illustration, however, we divided the layers in even greater detail so that the image could look natural across a wider range of resolutions.
Title screen adjusted for different resolutions
As a result, while our previous titles sometimes had to rely on letterboxing to support different resolutions on the title screen, this time we were able to make the title screen adapt more naturally to various resolutions.
Closing
Working on the title screen for our studio’s third game gave us a renewed sense of appreciation. It also made us feel that, thanks to the experience we have built up over time, the process went more smoothly than before.
Looking back at our past devlogs about title screen work, there were several things we missed at the time or wished we had considered earlier. Now, being able to take those elements into account more naturally made us feel how much experience we have gained.
We’ll be back in the next devlog with more progress to share.
Thank you for reading.
Steam Store: https://store.steampowered.com/app/4156040/Ratocalypse/
Facebook: https://www.facebook.com/CasselGames/
X: https://x.com/CasselGames
Cheese: Hello, everyone. This is Cheese, developer of <Ratocalypse>.
In this month’s devlog, we’d like to talk about the very first screen players see when they launch the game: the title screen. Although it has been finished for a little while now, we wanted to walk you through the thought process behind the title illustration, the logo, and the animation work.
Reference Research
<Ratocalypse> features several key characters and is set in a medieval apocalypse. To capture that atmosphere properly, we started by gathering title illustrations from other games that conveyed a similar mood.
Reference title images we collected
Since our game features many characters, we naturally gravitated toward compositions that could place multiple figures within a single illustration in a balanced way.
As we began planning the composition based on these references, one important question came up:
Which characters should we include in the illustration?
At the time, around five character types had been implemented, including one character who serves as the protagonist. However, since the game features a variety of characters, we discussed internally whether we should place the most narratively important characters at the front, or instead focus on characters that would look the most visually appealing.
In the end, we decided that the best way to spark interest in the game was to feature the characters with the strongest personalities and the most visually appealing designs at the forefront of the illustration.
Various characters appearing in the game
Deciding on the Composition
After that, we moved on to creating more concrete drafts based on the references we had gathered.
We created three rough composition drafts and compared them to decide which direction would be the best fit.
Title drafts exploring several different compositions
After discussing the drafts internally, we decided to proceed with the second draft as the basis for the title illustration.
Among the three options, we felt it suited the title illustration the best, and we also liked how prominently the characters were emphasized.
Another positive factor was that our previous game, <Ratopia>, also had a title image centered around the protagonist queen, and we had been quite satisfied with that composition. Since this draft had a similar structure, it felt like a good direction to build on.
Logo Design
Just like with the illustration, the logo design process began with collecting reference images that matched the mood we wanted, followed by creating design drafts.
For this logo, the main focus was finding a design that would fit well with the apocalyptic atmosphere of the illustration.
Logos from games with apocalyptic atmospheres
Various logo design drafts we tried
After sketching out several logo ideas, we developed some of them to an intermediate stage and placed them directly onto the title illustration we were working on. This allowed us to compare which one fit the overall image best.
Comparing logos by combining them with the title illustration
Among the various logo designs, we felt that the rough, carved-looking letter style matched the title’s atmosphere the best, so we ultimately chose that direction.
After that, we designed and placed an additional icon above the text, then adjusted the colors and post-processing to better match the title screen before finalizing the logo.
Revision process for the selected logo design
Title Animation
The final step was animating the title screen.
For the title screen, character movement and objects such as grass were animated using Spine. Elements like the background clouds and smoke were handled separately in Unity, and all the individually prepared parts were assembled together to create the final screen composition.
Separate layers being combined one by one
One thing we paid particular attention to from the start was separating the layers so the title screen could support various resolutions.
In our previous game, <Ratopia>, we had also separated layers to some extent with resolution support in mind. For this illustration, however, we divided the layers in even greater detail so that the image could look natural across a wider range of resolutions.
Title screen adjusted for different resolutions
As a result, while our previous titles sometimes had to rely on letterboxing to support different resolutions on the title screen, this time we were able to make the title screen adapt more naturally to various resolutions.
Closing
Working on the title screen for our studio’s third game gave us a renewed sense of appreciation. It also made us feel that, thanks to the experience we have built up over time, the process went more smoothly than before.
Looking back at our past devlogs about title screen work, there were several things we missed at the time or wished we had considered earlier. Now, being able to take those elements into account more naturally made us feel how much experience we have gained.
We’ll be back in the next devlog with more progress to share.
Thank you for reading.
Steam Store: https://store.steampowered.com/app/4156040/Ratocalypse/
Facebook: https://www.facebook.com/CasselGames/
X: https://x.com/CasselGames