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

Software G'MIC
1

Hello,

I am working on the p5js / p5.play 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:
paddle

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:

2

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

3

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…

4

OK this turns in very handy…

image
image1369×846 384 KB

5

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?

6

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

r2dx:
    Shortcut for command 'resize2dx'.

resize2dx:
    width[%]>0,_interpolation,_boundary_conditions,_ax,_ay,_az,_ac

  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
  meaningless.
  . 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
   'ax=ay=az=ac=0'.

  Example:
    [#1] image.jpg +resize2dx 100,2 append x
2 Likes
7

Thank you! Now in use in my toolchain!

8

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.