Search Unity

Anchors aweigh: The creative journey of designing a game to float everyone's boat

May 15, 2023 in Games | 10 min. read
Ship of Fools guest blog – Hero image
Ship of Fools guest blog – Hero image
Share

Is this article helpful for you?

Thank you for your feedback!

In this guest post (some of which first appeared on Discord), the Fika Productions art and animation team details the artistic journey toward developing its seafaring roguelite title, Ship of Fools. The team uses the Unity Editor 2D tools, Universal Render Pipeline (URP), Cinemachine, Netcode for GameObjects, and more to bring this 2D, coop game to life. First up, Ariane Petitclerc, 2D artist and co-art director, shares how the team approached boat design (and game design, in general).

Navigating the choppy waters of ship design

When making a game, our team almost spends more time in conception than actual production. A lot of content is created to find the right direction, so let’s take a look at what goes on behind the scenes.

Designing the boat was a particularly hard task because there were a lot of aspects to keep in mind. For one, it’s an incredibly small surface to hold all of the game’s combat mechanics, and there are a lot of player actions happening on it at once. As a result, it was a bit of a puzzle to place each component.

We had to keep everything readable and make sure player movement between the cannons and pedestals was fluid. The boat also needed to be the right size so players don’t feel claustrophobic – all the while leaving enough screen space for enemies.

Finally, the boat needed to look good. It’s something players always have right in their faces (literally, always at the center of the screen), so we knew it had to be nice to look at and not too distracting.

Here’s a mini-guide to the many iterations of the Ship of Fools boat design.

Boat 1: The isometric, rust boat

The first prototype for the game was in an isometric view. At the time, we were still exploring what kind of universe the Fools were living in, so the vibe of the boat was very different. The ship was old and patched with scraps – think steampunk-inspired with a post-apocalypse vibe. It’s pretty surprising, looking back, that the base was there even in this very first pass: Todd and Hink, cannons, holes to repair, pedestals, and ammo boxes (that became bomb boxes).

Drawings of the first prototype for the boat in Ship of Fools
Drawings of the first prototype for the boat in Ship of Fools

Boat 2: The cute, square boat

During this iteration, we had changed the game view to top-down for various reasons. This led to the square boat. I still think this version is cute and whimsical. It fits with the character design – the Fools are, well, not the most threatening sailors. From this design, we kept the color palette but ultimately went back to the drawing board because the growing game design needed a bigger boat.

Image of an early, small square boat design for Ship of Fools’ ship
Image of an early, small square boat design for Ship of Fools’ ship

Boat 3: Baby Stormstrider appears

At this point, we wanted to add a bit of space for some paddle action, fighting, and crawling mobs on the deck. At the same time, the story behind Ship of Fools was becoming more apparent, and we needed a more magical-looking boat that was capable of navigating through a demonic storm. It was quite clear what we wanted, so we made small variations of the same design to really nail the final Stormstrider (our official name for the boat).

Version 1: Preliminary mock-ups of the final Ship of Fools boat, Stormstrider, by Vincent Rochette
Version 1: Preliminary mock-ups of the final Ship of Fools boat, Stormstrider, by Vincent Rochette

Boat 4: Stormstrider_final_finalfinal

Voilà! Here’s the boat as players know it. We worked real hard at making sure our 3D boat didn’t clash too much with the 2D look of the game, and we’re quite happy with the finished product. We still have some ideas in store to improve it, but therein lies the beauty and the curse of designing a game... it’s never really finished.

Still of the final iteration of Stormstrider in the Ship of Fools game
Still of the final iteration of Stormstrider in the Ship of Fools game

Sailing to success with the right animation tools

Now, animator and cofounder, Étienne Gagnon, discusses the evolution of Ship of Fools’s animation and the team’s journey to find the right tools for the job.

Now, let’s talk animation. Like Ariane said, a lot of work and iteration needs to be done before you can find the right art direction for a game, and that counts for animation as well. Let me show you the (many) steps we took to find the right way to make things move in our game.

1. Traditional 2D

I focused on traditional 2D animation at university, so, instinctively, I decided to use that methodology during the very early stages of conceptualization. Taking inspiration from XCOM’s developers [Firaxis Games] and how they created an all-animated “fake” gameplay video to pitch their game, we created a 17-second clip called a previs (previsualization). Everything is animated frame by frame.

Some good ideas, some bad ones, funky little Fool designs, and an isometric boat. This previs video, while being a very useful clip early on, took so much time to create. It became clear to us that using traditional animation for our main characters wasn't the brightest idea for our first game. But that’s why we try things.

2D animated version of Todd, one of the Fools in Ship of Fools
2D animated version of Todd, one of the Fools in Ship of Fools

2. Toon Boom Harmony

Here is the same Todd design you saw in the previs video, but this time Todd is a puppet, rigged in a software called Toon Boom Harmony. I was still trying to use the tools I was accustomed to, and Harmony is what I learned to animate with originally. It looks fine, we even redid the puppets in the same software after Ariane redesigned the Fools.

Similar 2D version of the Fools in Ship of Fools, animated in Toon Boom Harmony
Similar 2D version of the Fools in Ship of Fools, animated in Toon Boom Harmony

3. Spine

As the art direction for the game was getting clearer, we realized that Harmony wasn’t offering us enough liberty to obtain the render style our artists were giving their illustrations. We wanted more details, more textures. Hence came Spine.

View of Ship of Fools character Todd that shows early rigging done in Spine to add more details
View of Ship of Fools character Todd that shows early rigging done in Spine to add more details
Update on early 2D version of Todd following changes made with Spine
Update on early 2D version of Todd following changes made with Spine

Spine is a wonderful software that allowed us to easily rig high-res illustrations, and to keep the level of visual polish our characters needed to fit their environment. Todd and Hink (the Fools) were fully animated in Spine, as were some enemies. Following some development shenanigans and technical tests, though, we decided to adjust our process again. So, we took our Todd and Hink characters, our animations and designs, and we moved them to the 3D realm of Autodesk Maya.

4. Autodesk Maya

Yes! Everything in Ship of Fools is animated in a 3D environment. Marc-André, our lovely technical artist, joined us during production. His skills with rigging in Maya were too valuable to ignore. Integration in Unity was also a lot smoother using Maya, plus, we had access to all the data from the rigs, textures, and materials. We had finally found our animation home.

Clip of early work done to Todd to bring the character into a 3D environment using Autodesk Maya
Similar look at early work done to bring another Ship of Fools character, Finley, into a 3D environment

A lot more could be said about the animations and animation pipeline in Ship of Fools, but that’s it for now. I hope you liked this sneak peek from us on the ways we’re constantly learning to make better games. Thank you so much for reading about and supporting this project – you’re why we do it!

Ship of Fools is available now. Continue to follow Fika Productions’s journey on Twitter or Discord, and check out more blogs from Unity developers here. Submit our Made with Unity form if you’d like to work with us to spotlight your game to the Unity community.

May 15, 2023 in Games | 10 min. read

Is this article helpful for you?

Thank you for your feedback!

Related Posts