gravity.inked v1.3

I released version 1.3 today on all app stores.  I’ve redone the hats and beards and think they’ve improved a lot.  Adam Kik’s and Jonathan Hall’s beards in are in there somewhere.

-main menu back color changes w/ dark back
-guy preview in unlock screen
-new hats/beards
-fb/twitter/google links
-big guy/small guy
-“blow up” effect on gravity sources
-added support for xlarge screen

hat adjuster

So I’ve been preparing for a new release which includes a lot of new hats, beards and a second character. Each hat and beard require unique coordinates and sizes for each of the characters and so I created a web UI to help speed the process of positioning all of the accessories. Check it out:

hat adjustment for the masses

Development Thoughts

Anyone who has spent time in software development is probably cringing when they see that I’m copying and pasting auto-generated code into my Android application. Cringe away. I spent 7 years writing maintainable, extendable, reliable, well-designed software for YUM Brands. At the beginning of this project I decided that learning the Android platform, having fun and trying to create something unique were the goals of the code at the expense of all else.

Also my usage of AngularJS is pretty crappy. There are a large number of javascript frameworks with overlapping functionality that are designed to speed up development of web applications. I’m trying to get started with some of these frameworks and it was a first try with Angular. I intend to use it with another project in the near future and this was just an opportunity to screw it up once before I needed to use it correctly.

creating the art in gravity.inked

Although it was often very tedious work, I enjoyed creating the graphics for my gravity.inked game. It took a long time to work out a process of taking an image drawn on notebook paper and get it ready to appear in game so I thought I’d share. If you’re looking to create similar graphics for a game, something like these steps may work.

tools

Almost all of the drawings for the game were done on college ruled paper. Although I’m sure there’s some really nice drawing papers out there, I’ve been doodling on notebook paper since high school and am most comfortable using it.

doodlesdoodlesdoodlesspace3

Some of the graphics were drawn specifically for the game and some were lifted from the margins of notes from work and school. Although almost all of the graphics were drawn on notebook paper, when I was working on hats and beards I started printing out a grid of alien guys to draw on.

grid of alien guys

My favorite pen has always been this guy. It has a very fine point and puts out a lot of ink.

pens

Throughout the project I tried to find other pens I liked using as much as the pilot. Nothing really stood out, but I did eventually start using a sharpie pen for outlining. It’s more like a very fine tipped marker than a pen.

software

Aside from Microsoft Windows all of the software used to create the graphics in gravity.inked and clock.inked was free. I used both Inkscape and Paint.NET extensively.

Paint.NET is a free raster image manipulation program. It was used in the creation of every image in gravity.inked, on the website, and all of the promotional graphics on the various app stores. If you want to try Paint.NET, there are loads of free plugins that extend its functionality. Here are the ones I use. Raster images are defined pixel by pixel and are the most common type of image (jpg, png, bmp, etc).

Inkscape is a free vector image manipulation program which was used to smooth out the graphics I used in the game. Vector images are graphics files defined using mathematical equations.

process

The process for creating the graphics was developed over the course of the project and so some of the earlier images were created using different techniques. The following steps will give you the general idea used towards the end of the project, but exact steps often varied slightly from image to image.

step1-star

Sketch

The general shape of what I want is sketched out using the pilot pen. When drawing this example I let the pen sit on one of the points which created the dot. oops.

step2-star

Trace

The outline is filled in using the sharpie pen. This helps give the image a more defined edge once it is scanned. For some reason drawing a consistent star was difficult for me. I’m not really a great drawer, but I’m better at longer lines and shading.

Shade

Texturing is added to the image using the pilot pen again. For a single in game graphic steps 1 – 3 were often repeated 20 to 30 times. Here are some of the stars I drew to create the one in game.

stars1stars2

step4-star

Scan

Pages are scanned in at 300 dpi and the drawing I want to use is isolated. This was increased to 600 dpi toward the end of the project, but I don’t really think it made much difference.

step5-star

Level

Levels are adjusted to increase contrast and make pen lines more obvious. Often the Paint.NET Adjustments->Auto Level option was sufficient, but this was also performed manually at times.

step6-star

Isolate

The background is removed. In order to remove the background the wand select with lower tolerance was used as well as some careful work with the eraser tool.

step7-star

Smooth

For this step I needed to find an automated way to reduce the complexity of the image by smoothing the lines. This could be done manually image by image, but it would take forever.

Instead I experimented with a number of different Paint.NET plugins and other image editing programs and settled on using Inkscape’s bitmap tracing capability. This functionality is meant to translate a raster image into a series of curves so it can be stored as a vector image, but I just used for its smoothing properties.

Resize

The image is reopened in Paint.NET and is resized to its in game size on a 1280×720 screen. In the case of our star we’re resizing to about 80×80. The default bicubic sampling algorithm worked fine throughout the project.

Touch up

At this point the image was often ready to be imported into the game, but sometimes it still required a bit of work. In the case of this star I did a small amount of editing in order to make it appear more symmetrical. This step was often very tedious as it required adjusting the image pixel by pixel in order to maintain its hand drawn look.

final product

You can see the star as well as some of the other hand drawn assets here.

dark-screen9dark-screen3nexus-screen5

gravity.inked v1.2

Released gravity.inked v1.2. This was a really small update to add a dark background option to the Settings screen. More screenshots on the media page.

dark-screen2 dark-screen1

The second image includes an effect trail that I’ve been using, but isn’t a preset. To create it start with Triangle Power -> Change shape to Star -> Change start color to yellow -> Then mess with lifetime/pattern/whatever. I was thinking it’d be cool to make a way to upload custom trails people made, but that’s a lot of work for another day.

dev overview

eclipse

gravity.inked is written in the Java programming language using an IDE called Eclipse. An IDE is specialized software for writing other software (kind of like photoshop for images). gravity.inked is composed of 15000+ lines of code across 26 code files and 2 data files. Here’s what it looks like when I’m working on the code that creates gravity.inked.

eclipse

sketch animator

I also had to write two pieces of support software from scratch: a level editor and an image animator. Both of these pieces of software were created using Java and Eclipse as well. I created the image animator because my original idea was to have all of the elements draw themselves on the screen at the beginning of the level. Unfortunately, due to time constraints, that didn’t happen. This program tracks and records your mouse movements across an image so it can animate it back later. I used it to create the drawing animation at the start of the level.

sketchanimator