Framerator

October 3, 2011, 12:29 am

As I have mentioned, building my Numberline iOS app has involved lots and lots of animation frames. I have been doing my artwork in Inkscape and then generating the frames based on the content in layers. It has been ok generating the low res frames I have been using for testing as I went along, but when I realised I needed to go back to all my SVG files and re-generate all the animation frames in three resolutions (iPad, iPhone and Retina) it became obvious that I could no longer do this by hand in Inkscape (show appropriate frames, file export, type the correct frame file name, set the resolution, export ... ugh).

I'm a programmer right? So it makes sense to automate that stuff. I wrote this simple Python script to run through a whole pile of SVGs, generate temporary SVG files containing a set of pre-configured layers and then drive Inkscape on the command line to generate the animation frame.

Here is the code:


from svgfig import *
import os
import config
inkscape_location = '/Applications/Inkscape.app'

def generateFile (detail):

	# load it and save it using SVG fig. This will write out elements on single lines. 
	svg = load(detail[0])
	svg.save ("temp.svg")

	# now we can mess with temp.svg using regex hackery
	fileOut = open ("temp_out.svg", "wt")
	fileIn = open ("temp.svg", "rt")
	lines = fileIn.readlines ()

	for line in lines:
		# is this line a layer?
		exp = "(.*style=\\\")([^\\\"]+)(\\\".*inkscape:label=\\\")([^\\\"]+)(\\\".*inkscape:groupmode=\\\"layer\\\".*)"
		regexp = re.compile(exp, re.I)
		match = regexp.search(line)
		if (match):
			layer = match.group(4)
			if (layer in detail[4]):
				# this is a layer we want
				fileOut.write(match.group(1) + "display:inline" + match.group(3) + match.group(4) + match.group(5))
			else:
				# hide this layer
				fileOut.write (match.group(1) + "display:none" + match.group(3) + match.group(4) + match.group(5))
		else:
			# otherwise just write out the line
			fileOut.write (line)

	fileIn.close ()
	fileOut.close ()

	# run our command to generate the PNG based on our temporary SVG
	command = inkscape_location + '/Contents/Resources/script -without-gui -export-area-page --export-width='  \ 
        +str(detail[2])+' -export-height='+str(detail[3])+' --export-png='+os.getcwd()+'/'+detail[1] + ' ' + os.getcwd() + '/temp_out.svg'
	print (command)
	os.system(command)

for detail in config.config:
	generateFile (detail)

It depends on svgfig to sanitise the input and the following config file to describe the SVG files and the frames you need to generate:


# an array of tuples describing your SVG and the required output
# [0] - The SVG file in question
# [1] - The required PNG file to generate
# [2] - The width
# [3] - The height
# [4] - An array of layer numbers to show in the generated PNG

config = [

#left wobble
("monster_wobble_left.svg", "wobble_left4.PNG", 147, 201, ["Wobble3","Wobble3-bg"]),
("monster_wobble_left.svg", "[email protected]", 295, 402, ["Wobble3","Wobble3-bg"]),
("monster_wobble_left.svg", "ipad_wobble_left4.PNG", 323, 440, ["Wobble3","Wobble3-bg"]),
("monster_wobble_left.svg", "wobble_left3.PNG", 147, 201, ["Wobble2","Wobble2-bg"]),
("monster_wobble_left.svg", "[email protected]", 295, 402, ["Wobble2","Wobble2-bg"]),
("monster_wobble_left.svg", "ipad_wobble_left3.PNG", 323, 440, ["Wobble2","Wobble2-bg"]),
("monster_wobble_left.svg", "wobble_left2.PNG", 147, 201, ["Wobble1","Wobble1-bg"]),
("monster_wobble_left.svg", "[email protected]", 295, 402, ["Wobble1","Wobble1-bg"]),
("monster_wobble_left.svg", "ipad_wobble_left2.PNG", 323, 440, ["Wobble1","Wobble1-bg"]),
("monster_wobble_left.svg", "wobble_left1.PNG", 147, 201, ["standing","standing_bg"]),
("monster_wobble_left.svg", "[email protected]", 295, 402, ["standing","standing_bg"]),
("monster_wobble_left.svg", "ipad_wobble_left1.PNG", 323, 440, ["standing","standing_bg"]),

#right wobble
("monster_wobble.svg", "wobble4.PNG", 147, 201, ["Wobble3","Wobble3-bg"]),
("monster_wobble.svg", "[email protected]", 295, 402, ["Wobble3","Wobble3-bg"]),
("monster_wobble.svg", "ipad_wobble4.PNG", 323, 440, ["Wobble3","Wobble3-bg"]),
("monster_wobble.svg", "wobble3.PNG", 147, 201, ["Wobble2","Wobble2-bg"]),
("monster_wobble.svg", "[email protected]", 295, 402, ["Wobble2","Wobble2-bg"]),
("monster_wobble.svg", "ipad_wobble3.PNG", 323, 440, ["Wobble2","Wobble2-bg"]),
("monster_wobble.svg", "wobble2.PNG", 147, 201, ["Wobble1","Wobble1-bg"]),
("monster_wobble.svg", "[email protected]", 295, 402, ["Wobble1","Wobble1-bg"]),
("monster_wobble.svg", "ipad_wobble2.PNG", 323, 440, ["Wobble1","Wobble1-bg"]),
("monster_wobble.svg", "wobble1.PNG", 147, 201, ["Standing","standing_bg"]),
("monster_wobble.svg", "[email protected]", 295, 402, ["Standing","standing_bg"]),
("monster_wobble.svg", "ipad_wobble1.PNG", 323, 440, ["Standing","standing_bg"]),

]

You can find the repo on Github

Permalink - Comments - Tags: Development

Monster coloured

September 30, 2011, 12:56 pm

I realised that the black and white interface I have been building is a bit dull for Kindergarten age kids. I decided to make things a bit more interesting with a purple, blotchy skin tone for the monster.

I am looking forward to animating all my frames again and seeing the new colourful version moving around. Because I am using layers in Inkscape to generate my animation frames, the process of getting all my images was pretty painful (many files in three resolutions).

To solve the problem I need to write some code to automate the frame generation process. Once that is written, I will post it on Github.

Permalink - Comments - Tags: Development,Art

Memolane

September 21, 2011, 4:32 am

Facebook's announcement of a timeline feature is pretty cool, but it reminded me of another service that has been around for a while. Memolane takes all your Social Media stuff (not just Facebook) and sticks it in an awesome, embeddable , interactive timeline thing.

Permalink - Comments - Tags: Misc

Numberline Concept Art

September 9, 2011, 4:36 am

Concept artwork for my current iOS project. It is a little app to teach young children simple arithmetic, but I want the UI to include some fun, cartoony animations, so the bulk of the work is here.

I haven't ever done cartoon animation before, so this has been a big learning experience. Still very amateurish, but I feel like I am making progress. Here are my first two attempts at getting my monster to walk: