This blog post was also published on my tumblr.
Cut-scenes are important to set the stage of a game. In Ludo’s Quest, I really wanted to explain a few things before the player starts the game. For instance why is a little boy battling spiders, bats and zombies? Why is there no other human around? You can of course read the synopsis but a picture is worth a thousand words. Not to mention a picture need not be localized.
Angry Birds is in my mind the most famous mobile game to leverage comic strips as cut-scenes. The strips are augmented with camera pans and music. I think they did a memorable job. I wanted to reproduce that effect in Ludo’s Quest.
Fortunately, I had bumped into comic artist Sophie Bédard in 2013. Sophie has produced Glorieux Printemps, a web-comic series with an astounding 44 chapters. She hand-draws all her comic strips, then scans them and finally fills them in with color in Photoshop. The result is a hybrid human-computer style I really enjoy. So I asked her to draw me up two strips that I would use as cut-scenes. One for the introduction, and another for the ending.
Step 1 - Sketch it out
First Sophie sets out to sketch the scenes on paper. She first uses pencil to lay out the shapes. When satisfied she uses a pen with India ink to outline the shapes. Here is the first draft she sent me:
Compare that to the story I had given her:
A long time ago lived a small boy called Ludo. Ludo lived in Piedmont, a small village at the foot of mount Massif. The mountain was a scary place upon which was erected castle Montfort, a relic from the past. Legends speak of an evil man who lived in the castle and had the ability to bring back people from the dead and control them.
One day, an army of living dead kidnapped all villagers. All but one. Ludo escaped unnoticed napping in a stack of hay. He fell asleep after an exhausting knight-training session with sword and armor. Only to be awakened by the screams of the villagers being hoarded away to castle Montfort. Ludo is brave, resilient and resourceful. So starts his quest to free the villagers of Piedmont, to free his friends and family.
Not bad! The comic-strip perfectly represents that story. I was impressed.
Step 2 - Color
In Photoshop, Sophie fills in color. If the shapes are well outlined this part is simple enough. The trick is not to leave gaps to prevent color from leaking out. Every shape must be enclosed.
Step 3 - Animation and sequence
This is where I take over. This comic strip is rather large. On an iPhone screen, it would be very difficult to see. So I broke the strip in three, introducing one image at a time. This also allows me to break the story and introduce one frame at a time. Here is the animation.
Step 4 - Adding music
Finally, I asked Zach Striefel to compose music to perfectly convey the appropriate feelings, and time it with the appearance of each frame. The music and its timing is essential to provide the theatrical effect I wanted. Zach really did an outstanding job. Here is the final result. See how Sophie’s comic strip comes to life.
Conclusion
I am really happy with this cut-scene. The ending cut-scene is also great. However if you want to see it you’ll have to complete all 16 levels :)