I’m using the $1 Unistroke Recognizer in my game. The main character paints symbols to cast spells.
The library is amazing, reliable and easy to implement but I immediately noticed a problem. There’s an API call available to save a new/custom symbol in memory, but no easy way to save it to disk. New symbol definitions are essentially just a list of x and y coordinates so I went about creating a couple easy ways to do this.
Solution 1: Javascript free-hand drawing tool
The first is the easiest. It’s a simple javascript, html5 canvas implementation. This solution works best if your primary goal is getting the highest chance of getting a hand-written symbol recognized by the library. (Especially with multiple hand-written examples of the same symbol.)
Instructions:
- Go to https://jsfiddle.net/falldeaf/e41y94cz/
- Name your symbol
- Draw your symbol in the grey box with a mouse cursor
- Press the Generate code button, then the copy code button
- Now you can paste into the template definitions that $1 uses
Solution 2: Inkscape .SVG file parser
The second solution is a Python script that takes an .SVG file as input. I came up with this solution because as part of the gameplay, the more well written the drawn symbol is, the more powerful the spell will be. In this case, I’m less worried about getting an accurate identification with fuzzy input, and more interested in judging the player on how closely they got to drawing the symbol correctly. Using a Vector program, (Inkscape), I was able to carefully draw and point-by-point edit each symbol. Then a python script parses an .SVG output file.
Instructions:
- Create a new file in Inkscape
- The first layer is ignored by the script. You can use this layer for visual guides to help draw your paths.
- Create a second layer and draw a single, straight-line path
- Duplicate this step for as many symbols as you’d like to add
- Output to an .SVG file
- Go to https://repl.it/HGnT/7
- Replace the contents of ‘Gestures.svg’ with the file you saved to
- Press the ‘RUN’ button
- Copy the output to your themes area.
π
