anko/image-to-box2d-body

proof-of-concept game build pipeline for converting an image to a Box2D body

How to convert drawn images into Box2D objects

This question nerd-sniped me hard, so I went on a magical journey to figure out how to turn a drawn raster image into Box2D objects.

 → this pipeline → 

This proof of concept expects to find an input file input.png in this project root directory. Then run make.

You should find a bunch of intermediate formats in out/ and if you open game.html, you should see a Box2D debug view with your objects loaded.

See the makefile for how the build steps work.

Dependencies:

• make

• Node.js and npm

  Run npm install in the project root directory to download Node.js dependencies to the local node_modules directory.

• Inkscape

• potrace

• ImageMagick (convert and mogrify)

License

To the extent possible under law, I waive all copyright and related or neighbouring rights to this work.

image-to-box2d-body's Issues

Windows Makefile woes

Hi Anko,

So I got make up and running, as well as all the prerequisite programs (including browserify which should be mentioned in the Readme file IMO).

Now the first problem is that the -p option for mkdir does nothing special in Windows. In fact, it creates 2 local directories: -p and out (and complains that the dirs already exist when I run make multiple times).

Also, for some reason make is trying to process the comments in the recipies. I get errors like the following:

Error occurred while processing: out.
# Extract the alpha channel into a separate image.
process_begin: CreateProcess((null), # Extract the alpha channel into a separate
 image., ...) failed.
make (e=2): The system cannot find the file specified.
make: *** [out/alpha.png] Error 2

So for now I have removed the comments. If I try running again, I get a new error:

Error occurred while processing: out.
convert input.png -alpha extract out/alpha.png
Invalid Parameter - -alpha
make: *** [out/alpha.png] Error 4

It looks like it is correctly expanding the line:

convert $< -alpha extract $@

into

convert input.png -alpha extract out/alpha.png

If I paste this above line into the command prompt and run it works. Then when I run make again it gets stuck at the next target with a similar error:

Error occurred while processing: out.
convert out/alpha.png -threshold 75%% -negate out/thresholded-alpha.ppm
Invalid Parameter - /alpha.png
make: *** [out/thresholded-alpha.ppm] Error 4

Again I can just paste the command from the error message into the prompt and run it successfully. Upon running a third time it sees that the first two targets are present, and runs to the out/shapes.json target, where I get the error:

node convertToShapes.js < out/traced.ps > out/shapes.json
module.js:328
    throw err;
    ^

Error: Cannot find module 'highland'
    at Function.Module._resolveFilename (module.js:326:15)
    at Function.Module._load (module.js:277:25)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\path\to\image-to-box2d-body\c
onvertToShapes.js:20:9)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Function.Module.runMain (module.js:442:10)
 browserify -o out/visShapesBuilt.js visShapes.js
module.js:328
    throw err;
    ^

Error: Cannot find module 'C:\path\to\image-to-box2d-body\n
ode_modules\browserify\bin\cmd.js'
    at Function.Module._resolveFilename (module.js:326:15)
    at Function.Module._load (module.js:277:25)
    at Function.Module.runMain (module.js:442:10)
    at startup (node.js:136:18)
    at node.js:966:3
 make: *** [out/visShapesBuilt.js] Error 1

Upon installing the highland module (please add to prerequisites), and setting up the NODE_PATH environment variable I got more errors which informed me that I need the simplify-js, d3 and svg-pizzabase modules (please add to list).

Next I got this warning + error msg:

$(npm bin)/svg-pizzabase < out/visShapesBuilt.js > out/shapesVis.svg
cygwin warning:
  MS-DOS style path detected: C:\Program Files\nodejs/node.exe
  Preferred POSIX equivalent is: /cygdrive/c/Program Files/nodejs/node.exe
  CYGWIN environment variable option "nodosfilewarning" turns off this warning.
  Consult the user's guide for more details about POSIX paths:
    http://cygwin.com/cygwin-ug-net/using.html#using-pathnames
/usr/bin/sh: C:\path\to\image-to-box2d-body\node_modules\.b
in/svg-pizzabase: No such file or directory
makefile:22: recipe for target 'out/shapesVis.svg' failed
make: *** [out/shapesVis.svg] Error 127

This is where I'm stuck right now. I see that $(npm bin) is supposed to expand to the svg-pizzabase binary module or something, but I really don't grasp the mechanics of what's happening on that line. Anyway, I'll take a look again later, but any insight you can give would be appreciated.

Also, for some reason near the end it stopped complaining about the mkdir command, and I put the comments back in and that was fine too.

visShapesBuilt.js - error: no such file or directory

Heya -
I'm having some troubles running this. I keep getting the following error when I run $make

...
browserify -o out/visShapesBuilt.js visShapes.js
make: browserify: No such file or directory
make: *** [out/visShapesBuilt.js] Error 1

I have installed ImageMagick, Inkscape, and potrace and can access all of them from the command line and I've made sure to run my npm install as well. When it runs, I do not see a 'out/visShapesBuilt.js' file created in the 'out' directory. Is there something I happen to be missing?

Cheers,

Brady Georgen