PokéSprite – Image Sprite Generator

This simple script generates a complete image sprite of all Pokémon in the National Pokédex, along with the icons for every single in-game item. It also generates SCSS and JS files which can then be used to efficiently display the icons from the sprite on a website.

This is a fork of msikma/pokesprite with a few key differences:

• This is optimized just for the Pokémon sprites (not items) since that's only what pokedextracker.com needs
• The sprites are vertically centered so that when they are used, the alignment and padding for all sprites are visually consistent
• The sprites don't rely on any form of JS to run, and instead uses 100% CSS
• The CSS generation is written in ruby which I'm a bit more familiar with

Usage

Displaying the sprites is a matter of adding an empty <span> or <div> element with the appropriate class attribute set. The base class is pkicon. Following the base class, you can add a number of classes that specify which icon is to be displayed.

Here are some examples:

<span class="pkicon pkicon-025"></span>
<span class="pkicon pkicon-001 color-shiny"></span>
<span class="pkicon pkicon-386 form-defense"></span>
<span class="pkicon pkicon-500 color-shiny dir-right"></span>
<span class="pkicon pkicon-003 form-mega-y"></span>
<span class="pkicon pkicon-201 form-d"></span>
<span class="pkicon pkicon-521 gender-female"></span>

To clarify, the following classes can be used:

• pkicon-number – Pokémon's National Dex number
• color-shiny – shiny icon
• dir-right – direction the icon faces if there is a special sprite for that direction
• gender-female – gender of the icon if there is a special sprite for that gender
• form-name – form of the Pokémon (e.g. defense for Deoxys, a or exclamation for Unown, orange for Flabébé, etc.)

The only item icon that is supported is the Love Ball since that's the only item icon that is used on pokedextracker.com

Compiling

To generate the spritesheet that is compressed, run the following command (assuming you have pngcrush installed):

./pokesprite.php --path-pngcrush=/usr/local/bin/pngcrush

This will generate a full sprite sheet with regular icons, shiny icons, right-facing icons (where a unique icon exists), and all other icon sets at output/pokesprite.png.

Then to generate the SCSS, run this command:

ruby pokesprite.rb > output/pokesprite.scss

License

The source icons are (C) Nintendo/Creatures Inc./GAME FREAK Inc.

Everything else, and usage of the programming code, is governed by the MIT license.