Workflow:
- open SVG editor
- run google app engine launcher to serve frames
- use this SVG as skeleton:
<svg width="1280" height="960" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<g>
<image xlink:href="http://localhost:8896/static/A.png" id="svg_1" height="960" width="1280" y="0" x="0"/>
</g>
</svg>
- change image to be the current image (go in alphabetical order)
- trace segments in order (look at video if in doubt)
- draw rectangles for each waypoint in order, consequent segments can share same waypoint
- change color of rectangle when stroke changes
- save svg as A.svg for example
Drew half of the characters as SVG. Time consuming, but not impossibly so. A few minutes per character. Read about the SVG format. Paths are very simple to understand. How will I render these on the phone? I could either tessellate to triangles beforehand, or alternatively draw full paths with Quartz 2D. Yep, there's CGPathMoveToPoint and CGPathAddLineToPoint, so no need to do triangles. What next?
Next, to make some progress I should come up with a way to represent the data so I can easily access it from Objective C. Then, I should make a simple version where the waypoints for each stroke are shown and touching them correctly moves the user along.
Given JSON file "katakana.json" which as a test contains just
{"test" : "yeah"}
This prints out "yeah":
- (void) jsonTest {
SBJsonParser *parser = [SBJsonParser new];
NSString *fullPath = [[NSBundle mainBundle] pathForResource:@"katakana" ofType:@"json"];
NSString *jsonString = [NSString stringWithContentsOfFile:fullPath encoding:NSUTF8StringEncoding error:nil];
NSDictionary *dict = [parser objectWithString:jsonString];
if (dict) {
NSString *out = [dict objectForKey:@"test"];
NSLog(out);
} else {
NSLog(@"Could not parse JSON.");
}
}