Welcome, Guest. Please login or register.

Login with username, password and session length

 
Advanced search

1411641 Posts in 69394 Topics- by 58449 Members - Latest Member: pp_mech

May 14, 2024, 01:30:52 PM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsCommunityDevLogsPinny McBallface - endless pinball mobile game
Pages: [1]
Print
Author Topic: Pinny McBallface - endless pinball mobile game  (Read 311 times)
mousemob
TIGBaby
*


View Profile
« on: February 25, 2017, 10:48:23 PM »

Had been meaning to start a devlog *before* release  Facepalm but better late than never. Wanted to post a few technical writeups about the making of our latest mobile title, Pinny McBallface pinball.

In short: it's an endless scrolling pinball game with randomly generated levels and a ton of unlockable characters. You can check it out on Google Play.

The Art Pipeline

Pinny McBallface currently clocks in at 64 unlockable characters, with more planned and in development now. Therefore, it was crucial that we create a smooth, painless pipeline to create these characters so that we could pump them out quickly.

Some early examples:



For simplicity, all characters are roughly the same size, round, and share a common set of animations.

The process for creating these is as follows:

Step 1: draw the character in Inkscape

Inkscape, while it has a bit of a learning curve, is a powerful open source (read: FREE) vector graphic editor, and forms the first step of our pipeline. We have a single SVG image ("ball.svg") which contains each individual character split into one layer per independent part:



Of course, with potentially multiple layers per character x 64 characters, this thing is getting pretty massive. Generally all layers are hidden except the ones for the specific character being worked on. The "single massive SVG" approach is helpful for speed, as many characters were created by cutting up and remixing existing layers.

The graphics themselves were nothing fancy, using little more than circles, freehand drawing, and gradients.

Step 2: split the layers

Using a simple Python script (available on Github) and the Inkscape command line tool, this giant SVG is rasterized, generating a single PNG per layer. The result starts to look like an explosion at a mannequin factory:



Step 3: animate in Spine

Now that each independently moving part is its own image, we can attach them to bones in Spine:



Conveniently, since all balls are the same shape and size, they share a skeleton, mesh and animations, so none of these have to be duplicated for each character. Different characters are implemented as skins which implement the base image and any limbs the character has.

More to come...
Logged
Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic