mirror of
https://github.com/msikma/pokesprite.git
synced 2026-09-08 02:15:11 -05:00
New readme containing information about the icons and data format
This commit is contained in:
Michiel Sikma
@@ -1,4 +1,4 @@
|
||||
The MIT License (MIT)
|
||||
#### The MIT License (MIT)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
154
readme.md
154
readme.md
@@ -1,116 +1,72 @@
|
||||
PokéSprite – Image Sprite Generator
|
||||
===================================
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
|
||||
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.
|
||||
# PokéSprite
|
||||
|
||||
This is a collection of the box sprites of every Pokémon from the main game series, and the icons for every collectable and bag item. Also included are custom shiny versions of the box sprites that are not available in-game.
|
||||
|
||||
Some examples of the custom shiny sprites:
|
||||
|
||||
<p align="center">
|
||||
<img src="https://raw.github.com/msikma/pokesprite/master/resources/wiki/pokesprite-banner.png" alt="PokéSprite icon example" />
|
||||
</p>
|
||||
|
||||
Usage guide
|
||||
-----------
|
||||
These icons can be used as individual files, or combined into a single image and CSS file for efficiently displaying them on a website.
|
||||
|
||||
Displaying the sprites is a matter of adding an empty `<span>` or `<div>` element with the appropriate `class` attribute set, and then running the JS decoration code. The base class is `pkspr`. Following the base class, you can add a number of classes that specify which icon is to be displayed.
|
||||
## Icons and metadata
|
||||
|
||||
Here are some examples:
|
||||
The icons included in this project can be found in the `/icons/` directory. They are separated by type (e.g. **"berry"**, **"evo-item"**, **"valuable-item"**, etc.), and the Pokémon sprites can be found in `/icons/pokemon/` and `/icons/pokemon-gen8/`.
|
||||
|
||||
```html
|
||||
<span class="pkspr pkmn-pikachu"></span>
|
||||
<span class="pkspr pkmn-bulbasaur color-shiny"></span>
|
||||
<span class="pkspr pkmn-deoxys form-defense"></span>
|
||||
<span class="pkspr pkmn-clauncher color-shiny dir-right"></span>
|
||||
<span class="pkspr pkmn-charizard form-mega-y"></span>
|
||||
<span class="pkspr pkmn-unown form-d"></span>
|
||||
<span class="pkspr pkmn-pyroar gender-female"></span>
|
||||
The Pokémon sprite files use a simplified version of their English name, e.g. `mr-mime.png` for *Mr. Mime*. To programmatically process the files (e.g. to easily link some piece of data, like the dex number, to a sprite file), the data in `/data/dex.json` can be used.
|
||||
|
||||
Up to and including *Pokémon Sun/Moon* (Generation 7), all Pokémon sprites had a size of **40×30**—starting with *Pokémon Let's Go* (Generation 8), they are **68×56**. Items are all **32×32**.
|
||||
|
||||
Previous generations of games (Generation 1–2 and Generation 3–4) had their own collections of sprites, but these are not included in this database.
|
||||
|
||||
## Data files
|
||||
|
||||
Developers who want to use these sprites programmatically might want to look at the `/data/dex.json` and `/data/item-export.json` files; the former contains a list of all Pokémon and their associated icons, and the latter links all icons in the repo to their internal IDs used in-game.
|
||||
|
||||
Each item in the `dex.json` file contains the following data (example):
|
||||
|
||||
```js
|
||||
{
|
||||
idx: 658,
|
||||
slug: {
|
||||
eng: "greninja",
|
||||
jpn: "gekkouga"
|
||||
},
|
||||
icons: {
|
||||
_: {
|
||||
"has_right": true
|
||||
},
|
||||
ash: {
|
||||
"has_right": true
|
||||
},
|
||||
"battle-bond": {
|
||||
"is_alias_of": "ash"
|
||||
}
|
||||
},
|
||||
name: {
|
||||
eng: "Greninja",
|
||||
jpn: "ゲッコウガ",
|
||||
jpn_ro: "Gekkouga"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
To clarify, the following classes can be used:
|
||||
The `icons` item contains a list of all icon types that are related to a Pokémon. It always contains at least a value `_` (underscore), which means the regular form or default icon. Each form object can contain the following details:
|
||||
|
||||
* <code>pkmn-<strong>name</strong></code> – Pokémon name* or Pokédex number
|
||||
* <code>color-regular</code>, <code>color-shiny</code> – shiny or regular icon
|
||||
* <code>dir-left</code>, <code>dir-right</code> – direction the icon faces (some Pokémon, such as Roselia, have a different icon when facing right—by default, those that do not have a separate icon will be flipped using the CSS `transform` attribute)
|
||||
* <code>gender-male</code>, <code>gender-female</code> – gender of the icon (in case of gender differences, such as Meowstic)
|
||||
* <code>form-<strong>name</strong></code> – form of the Pokémon (e.g. `defense` for Deoxys, `a` or `exclamation` for Unown, `orange` for Flabébé, etc.)
|
||||
| Key | Meaning |
|
||||
|:----|:--------|
|
||||
| `is_alias_of` | This form uses the icon of another form |
|
||||
| `is_unofficial_icon` | The original (non-shiny) icon has been edited in some way (e.g. *Pumpkaboo* and *Gourgeist*) |
|
||||
| `is_unofficial_legacy_icon` | As above, but only for the smaller legacy 40×30 icons |
|
||||
| `has_right` | A unique right-facing icon is available (e.g. *Roselia*) |
|
||||
| `has_female` | A unique female icon is available (e.g. *Unfezant*) |
|
||||
|
||||
\**Note: for Pokémon names, simplified versions without special characters are used, e.g. "flabebe" rather than "Flabébé". See the [icon overview page](http://msikma.github.io/pokesprite/build/overview.html) for a full list of supported names.*
|
||||
The `name` field also contains `jpn_ro`, which refers to the official romanization of a Pokémon's name.
|
||||
|
||||
The tag name used is also important: if a `<span>` is used, the icon is displayed as an `inline-block`. If a `<div>` is used, it's a `block`.
|
||||
|
||||
### Item icons
|
||||
|
||||
The item icons have been organized in a set of collections. To display an icon, first the collection name must be used, followed by the item itself. For example, an Oran Berry is named `oran` and is in the `berry` collection, so the full class name would be `pkspr berry-oran`. Some more HTML examples follow:
|
||||
|
||||
```html
|
||||
<span class="pkspr berry-oran"></span>
|
||||
<span class="pkspr body-style-bipedal-tailed"></span>
|
||||
<span class="pkspr fossil-helix"></span>
|
||||
<span class="pkspr gem-bug"></span>
|
||||
<span class="pkspr medicine-potion"></span>
|
||||
<span class="pkspr mega-stone-charizardite-y"></span>
|
||||
<span class="pkspr ball-dive"></span>
|
||||
<span class="pkspr tm-ice"></span>
|
||||
```
|
||||
|
||||
There are many different icons that can be displayed. See the [icon overview page](http://msikma.github.io/pokesprite/build/overview.html) for a complete overview.
|
||||
|
||||
### Decorating the icons
|
||||
|
||||
The icons will not yet show up until you run the decoration JS code. There are two ways to activate the code: either with a single command that is added before the closing `</body>` tag (or, anywhere after the last icon):
|
||||
|
||||
```html
|
||||
<script type="text/javascript">
|
||||
PkSpr.process_dom();
|
||||
</script>
|
||||
```
|
||||
|
||||
Or, you can add the following after each individual icon. This ensures the icons show up as soon as possible, rather than showing them all at once after loading is complete:
|
||||
|
||||
```html
|
||||
<span id="icon_1" class="pkspr pkmn-bulbasaur color-shiny"></span>
|
||||
<script type="text/javascript">
|
||||
PkSpr.decorate('icon_1');
|
||||
</script>
|
||||
```
|
||||
|
||||
Compiling the sprite
|
||||
--------------------
|
||||
|
||||
Running the script to generate a sprite image with default settings is a simple matter of running the program.
|
||||
|
||||
```
|
||||
./pokesprite.php
|
||||
```
|
||||
|
||||
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. It also generates SCSS and JS files and an overview HTML page for previewing your build. Everything is saved to the `output/` directory.
|
||||
|
||||
Normally you don't need to do this, since you can just use a pre-compiled version instead.
|
||||
|
||||
### Compiling SCSS to CSS
|
||||
|
||||
PokéSprite does not generate CSS—it only generates SCSS (which can't directly be used in a website). You'll have to compile the CSS yourself using [SASS](https://github.com/sass/sass). See the SASS manual for a more complete usage guide.
|
||||
|
||||
Once you have SASS installed, the CSS file can be compiled using the following terminal command:
|
||||
|
||||
```
|
||||
sass --style compressed output/pokesprite.scss output/pokesprite.css
|
||||
```
|
||||
|
||||
The generated SCSS is currently not SassC compatible. This is planned for a later release.
|
||||
|
||||
### Compiling the JS using the Closure Compiler
|
||||
|
||||
The JS file can be optimized with the Closure Compiler. The easiest way is to use the [Closure Compiler Service](http://closure-compiler.appspot.com/home). Make sure to set the optimization level to *advanced*.
|
||||
|
||||
In case you have a local binary, the following command can be used:
|
||||
|
||||
```
|
||||
java -jar closure-compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS \
|
||||
--js output/pokesprite.js --js_output_file output/pokesprite.min.js \
|
||||
--charset UTF-8
|
||||
```
|
||||
|
||||
License
|
||||
-------
|
||||
## License
|
||||
|
||||
The source icons are © Nintendo/Creatures Inc./GAME FREAK Inc.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user