Frozen Rescue

GAME DESIGN • PROCESSING • ILLUSTRATOR

A whimsical platformer game developed with Processing

ROLE:

Developer, Illustrator

TIMELINE:

2 weeks

Project Overview

Given a basic platformer game skeleton with mechanics and physics provided,  I created an effective and engaging interactive story on top of this basic framework, by altering the visual and audible elements of the game. I utilized Adobe Illustrator to map out all of the visuals in the game. The game was developed using the Processing environment to code within the context of visuals.

The full game can be downloaded here: https://github.com/ninalyow/frozenrescue

Story Development

Before starting this project, I first prepared by going over all of the visual and audio capabilities of Processing, such as vector line drawings, curves, shape variations, and sound manipulation. The program itself has built in examples, tutorials and libraries that you can download to get a better idea on the capabilities of the program. In the example code shown to the left, After getting a comprehensive grasp of how to use Processing, I moved on to develop the story for my platformer game.

We were given complete creative freedom to develop a story for our game. I thought back to my favorite childhood platformer games and Super Mario and Sonic were the first games that came to mind. I remembered that I loved those two games because the main character was so vibrant and silly and I loved collecting all of the hidden coins and gems to advance to the next level. I wanted my game to also feature a main character that had touch of vibrancy and a sincere earnest to champion each level

My character is a friendly neighborhood Mr.Fox who has a massive sweet tooth. He’s on a mission to fill his ice cream truck with all kinds of frozen treats from Ice Cream Land.

SPRITE STUDY

I started developing the walk cycle for my character by pouring over Youtube tutorials and going over designs by other animators. I initially started simple with a basic illustration of Mr. Fox so that I could better understand how sprites switch feet as they perform a running motion.

My initial sketch did show a walking motion but the movements were stiff and choppy. Therefore, I went back to the drawing board and modified my frames to incorporate more curvature to the fox’s limbs and included more frames that reflected small changes in the fox’s limb movements. I also added a little sweet tooth to him for added fun to his personality.

 Level Development

The game skeleton included the following starting elements: static line platforms and walls, coin objects, portals to subsequent levels and game physics to make walk and jump animations realistic. I first modified the static elements in the game to reflect the ice cream world by creating invisible platform and wall elements to match the background image of each level.

Each level was designed to get progressively harder as falls become more precarious and navigating the platforms become more challenging. It was easy for me to develop distinct themes for each level because I love ice cream, and there is nothing more exciting for me to do than to illustrate little ice cream cones, popsicles and ice cream sandwiches. I kept the color palette of each level to pastel shades to reflect the light hearted nature of the game.

Game Mechanics

I took a look at the original game physics to see how I could modify it to better suit Mr. Fox’s character. I tried out a few combination of acceleration, velocity and gravity and arrived at the final movements shown below. Mr. Fox moves quickly with a sense of urgency to collect the ice cream cone. Since he is navigating in a frozen world, there is also a bit of slip and slide to his run as he gathers the acceleration to power through the slippery surface on the platforms.

The game skeleton had a static coin object represented by an ellipse. I had initially replaced the original coin object with a static ice cream cone object, but after testing out the game, I felt that there could be more movement added to the game play to incorporate more excitement and playfulness. The code shown below depicts how I achieved the waving ice cream cone effect.

I represented a single coin object by loading an images of the coin, in this case an ice cream cone, saved at 30°, 60°, and 90°. Then, I used millis() to return the time since the game started running and synced that returned value to the three images of the coin object, so that every third time period a different image of the coin would be displayed

I also discovered a few fun transformation functions while I was adding more animation to the game objects. I used pushMatrix(), pullMatrix() to make the portal gradually grow and shrink in time with the music played at each level. The Processing website has so many more libraries of functions to choose from to make any game or any program in general come to life. I’d love to see what other animations can be achieved with these functions!

Game in Action

A play by play run through is demonstrated below. The player must navigate Frankie the fox through Ice cream world with typical keyboard actions (left/right to move and spacebar to jump) to pick up frozen treats. Then the player can advance to the next level by passing through a spinning yellow portal. 

KEY FEATURES:

• Spinning frozen treats placed at each level

• Whimsical background music unique to each level

• Smooth walking and jumping animations

• Score counter to mark the player’s progress

• Strategic wall and platform placements to increase the difficulty of each level

• Win and lose screens with the option to restart the game

Final Thoughts

I thoroughly enjoyed making this game from the story and character development to honing new development skills to make my story come to life. What intrigued me the most about working on this project was the intricacies of game design. I would love to create more levels and perhaps add in a boss level to make the game even more exciting.