option for vertically centered sprites

[ami]

hey @msikma! big fan of this repo, we use it to generate sprites for pokedextracker.com.

i would love to see an option for vertically centered sprites. the way the design is on our app, it looks much better for the icons to be vertically centered:

to get around this, we have forked your repo, written a photoshop action to vertically center each image, and saved over the original files.

it would be great if you had a vertically centered option in this repo so that we could avoid that work in the future.

thanks!

[msikma]

Hi @ami, nice to hear you are using this repo! I'm glad it's useful to you!

I just had a look at your app and I see what you mean. The sprites are normally "anchored" to the ground, so that you can get a sense of their relative height from the sprite. Huge Pokémon reach all the way to the top of the sprite and smaller ones are quite low to the ground.

There are two ways to automate this that I can see. One way is we build in an argument to the generator that moves the sprites around so that they are centered (by their visible pixels). Another is we make the generator emit the boundaries of a sprite's visible pixels so that in the JS they could be moved up/down to look centered. The latter would allow both centered and non-centered with the same image set but it seems too complicated. So the former is the proper way to go I think.

I'm not really going to have much time, maybe I can work on this a bit next weekend or so. But of course I'd be happy to accept a PR too.

[itsjavi]

Instead of vertically center the images themselves, why not using the power of CSS for that? You can style ::after and ::before elements, where you could vertically align the images.

I don't recommend to vertical-align them in the images themselves, because that would make it impossible to have them in the bottom baseline for some other situations.

I did a similar work in an old Pokemon project called PokeCSS you can check there examples for using the CSS the way I mentioned, https://pokettomonstaa.com/pokecss/docs-old/index.html

Check the sections called "Combined with wrapper" and "Fixed size".

I would be happy to collaborate and integrate those techniques into this project if you agree @msikma , so then hopefully JS decoration code won't be needed anymore, everything would be pure CSS.

[msikma]

Unfortunately, that won't work for this project as-is, because all our icons are 40x30. There is no whitespace trimming like in your example. This is a conscious decision, because that means the Pokémon icons will all seem to be standing on the same base level, allowing you to see their relative heights. This is also what the games themselves do.

However it might be possible to make a compilation option that trims all whitespace from the icons during the spritesheet generation. Then, like you say, it would be trivial to use CSS to center them vertically, either by using vertical-align or e.g. Flexbox.

[itsjavi]

Oh I see, yes the individual icons were trimmed in my case, being the background of the ::after pseudo-element of the container which is 40x30 like the original icons. That way there is no need for a nested container and there is more freedom for the image alignment as you can see with the other examples.

[msikma]

Closing this issue for now. Trimming and then bringing the image size back to 40x30 (or 68x56) is probably something best done with a custom script, since the icons are designed with a certain y-position in mind.

With ImageMagick it could be done like this:

magick mogrify -trim $i -define png:exclude-chunk=gAMA -depth 32 PNG32:$i
magick convert -background transparent -extent 68x56 -gravity Center -define png:exclude-chunk=gAMA $i -depth 32 PNG32:$i

Where $i is the file.