Batch-preparing photo-based sprites for a 2D food stop-motion game


I am working on the p5js / food-based video game named BerlinWallBreaker playable in WIP here (please do not announce it anywhere for now, it is unfinished).

Most of this video-game’s video content was prepared in my kitchen, with food (chocolate, crepes, apples, beetroot) as showcased in the making of screen - about info is also here

The gameplay is that of a brick breaker, except that almost each element apart from the background is a stop-motion animated cycling sprite from food photographs.

Each of the 3 levels is made up of:

  • DONE 1 food-based non-animated background, prepared in GIMP and/or Inkscape, no need for batch help
  • WIP several bricks
  • WIP 1 ball
  • WIP 1 paddle

When playing say level 1, use ESCAPE to un/pause, hit D to show hitboxes…

For each game element (eg. 1 level’s brick’s sprites), I want to setup a G’MIC CLI or gmic-py set of commands to:

  • load 1 jpg photo
  • remove its background (whitish baking paper) so it has no white surrounding
  • resize it to fit a fixed-size square (some bricks), circle (ball, some bricks) or rectangle (paddle)
  • save to a numbered transparent .png
  • optionally preview the element’s animation in some pop-up window.

Some day, if scripts are easy enough to use, participants in some food-design workshops could create their video game sprites by just cutting and photographing anything they like and load them in some batch processing software application. (I held some food-design or chocolate design workshops in France and Czech republic but never for making a quick video game for now).

The video-game has no server-side work, and no image processing per se in the browser (the vision is that of low-tech, old-computer, very poor CPU / GPU video game…).

An example of jpg input sprites that must be background-extracted, centered, resized is here on Github (the video game is open-source):

  • level 1 paddle (done with GIMP without batch script), with target size 120x46px
  • level 1 ball (WIP with Inkscape circle masking and poor background removal), with target size 30x30px.
    Finished sprites are named spritename-00N.png and picked by the game engine.

Below a finished paddle in chocolate + apple slices, as a gif for you to understand a bit:

So… I am thinking of a G’MIC one-liner… Let us think out loud in G’MIC commands if you’d be happy to, with me :tiger2:

I have found fx_extract_foreground and tried in GIMP
I have looked for documentation for that command’s parameters on Github but have not found
it is good, but I am looking for something easier to use, eg. run from a directory of sprites
I am trying to guess the parameters meaning

OK I have something, with gmic CLI and BASH on Linux…
for A in {0..11}; do gmic ball$A.jpg fx_extract_foreground 0,0,3,1,2560,1920,1104.31372,1952.62744,1049.09802,439.215698,0,0,2,1 rm[1] display resize 30,30 output ball$A.png; xdg-open ball$A.png; done

I really need to adapt interactive points (with F, B, and space for preview update), but it is much faster than contouring in GIMP…

OK this turns in very handy…

I could not find a G’MIC equivalent for ImageMagick’s -scale 100 (scale down to 100px wide, and keep height proportional…)… Does someone have an idea for that?

r2dx (width) and r2dy (height) work great for me.

    Shortcut for command 'resize2dx'.


  Resize selected images along the x-axis, preserving 2D ratio.
  (equivalent to shortcut command 'r2dx').

  'interpolation' can be { -1=none (memory content) | 0=none | 1=nearest |
  2=average | 3=linear | 4=grid | 5=bicubic | 6=lanczos }.
  'boundary_conditions' has different meanings, according to the chosen
  'interpolation' mode :
  . When 'interpolation=={ -1 | 1 | 2 | 4 }', 'boundary_conditions' is
  . When 'interpolation==0', 'boundary_conditions' can be { 0=dirichlet |
  1=neumann | 2=periodic | 3=mirror }.
  . When 'interpolation=={ 3 | 5 | 6 }', 'boundary_conditions' can be {
  0=none | 1=neumann }.
  'ax,ay,az,ac' set the centering along each axis when 'interpolation=0'
  (set to '0' by default, must be defined in range [0,1]).

  Default values: 'interpolation=3', 'boundary_conditions=0' and

    [#1] image.jpg +resize2dx 100,2 append x

Thank you! Now in use in my toolchain!

Would some people mind playing Berlin Wall Breaker in their web browser to beta test it and help me with any kind of comments to hone its gameplay / clarity for future players?

All kinds of comments are appreciated. Most sprites cutting was done with just G’MIC’s interactive foreground extraction filter.