FOCUSING ON GAMEPLAY

To differentiate the app in an already mature and competitive market, I knew that I needed to define a desirable gameplay for the app. I was thrilled by the opportunity to create something fresh, fun and new.

After much consideration I decided to create a puzzle game with a simple objective: match pairs of socks and get the highest score possible.

THE TOOLS

The game was built using Corona SDK, because I wanted to support all the main platforms and it enables everything from animation to the physics engine. Development was done in Lua, a lightning-fast and easy to learn scripting language.

I created most of the visual design in Illustrator. Photoshop was also used for combining vector drawing with text, bitmaps, sketches, and photographs. These are some examples of the artwork I created of the backgrounds for the different levels and screens of the game.

SKETCHING

I took a top‐down approach to defining the overall structure of the experience. Sketching and storyboarding, I generated stacks of ideas about the arrangement of UI, game elements, and interactive behaviors. Here is an early whiteboard sketch, where I mapped the user flow and the basic features of the game.

LEVEL DESIGN

After sketching the basic navigation for the app, I started to explore gameplay. This is a sketch showing the basic positions of the items for some of the levels. I created a simple visual language to depict the socks as geometric shapes. This helped to speed up the planning of the 100 different levels.

Starting broad, our vision began evolving into something tangible. The design language, interactions, and the app’s anatomy began to piece together.

MOTION MATTERS

SPRITES

Using sprites has two major uses. The first is for sprite-style animations, showing individual sprites sequentially as frames. The second is to place several images on one sprite sheet to keep the number of individual image files to a minimum. Here are some example of the sprites I made for the game. Sprite sheets were also animated in AE and then exported using Sprite Helper.

PHYSICS

Physics body shapes had to be created for every shape that had collisions. This is an example of a cloud, the shape is traced on a software called Physics Editor and then exported to Lua code. After that, the code is added to the project and connected to the objects.

ADAPTIVE CONTENT SCALING

The nice thing about allowing the content width and height to change is that you can optimize for pixel perfection (or near perfection) via whole number pixel scales or simple fractions thereof. The variable aspect ratio also means that you can eliminate the bleed regions which are inconvenient in certain types of apps.

For iOS, we achieve this by setting the content width and height to match the width and height of the device in iOS points. This works out because iOS points are roughly the same physical size.

For Android, we set the content width and height to match the dp (device-independent pixel) units, using the approximate PPI of the general screen type (hdpi, xhdpi, etc.) and actual screen pixel width/height to calculate the content screen size. This similarly works out because Android dp values are approximately the same physical length.

MONETIZATION

RELEASE