Numberline

October 10, 2011, 1:20 pm

Simple addition and subtraction questions with a numberline to pick the answer.

Permalink - Comments - Tags: Development,iPad,iPhone,App

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

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:

Still a long way to go ...

Permalink - Comments - Tags: Development,iPhone,iPad,Art?

StackOverflow DevDays

September 1, 2011, 1:40 pm

Cancelled

It looks like DevDays have been cancelled this year. There is a post mortum on the StackExchange blog.

I have felt privileged to be included in the organising committee for the StackOverflow DevDays on the 25th and 26th of October this year. I am proud of the awesome collection speakers we have pulled together and am looking forward to hearing from all of them.

Also, the 25th is my birthday, so don't forget to bring my present. I like unicorns. Just sayin.

If you have more than 5000 rep on SO you will have seen the ads on the site, otherwise you use the code 'blog' for a discount on your ticket.