Convert Figma logo to code with AI

msikma logopokesprite

Database project of box and inventory sprites from the Pokémon core series games

1,020
167
1,020
20

Top Related Projects

1,152

Repository containing many Pokémon sprites

1,461

more than you ever wanted to know about Pokémon

Quick Overview

PokéSprite is a collection of Pokémon sprites and icons, including shiny variants, forms, and gender differences. It provides a comprehensive set of images for all Pokémon up to the latest generation, along with item sprites and other game-related icons. The project aims to be a complete resource for developers and designers working on Pokémon-related projects.

Pros

  • Comprehensive collection of Pokémon sprites and icons
  • Regular updates to include new Pokémon and forms
  • Includes both standard and shiny variants
  • Provides CSS and JavaScript utilities for easy integration

Cons

  • Large file size due to the extensive collection of images
  • May require frequent updates to stay current with new Pokémon releases
  • Limited customization options for sprite styles
  • Potential copyright concerns when using in commercial projects

Code Examples

  1. Using the CSS classes to display a Pokémon sprite:
<span class="pkspr pkmn-bulbasaur"></span>
  1. Displaying a shiny Pokémon using JavaScript:
PkSpr.decorate({
  sprite: 'pkmn',
  pokemon: 'charizard',
  shiny: true
}).mount(document.getElementById('pokemon-container'));
  1. Showing an item sprite:
<span class="pkspr item-pokeball"></span>

Getting Started

To use PokéSprite in your project:

  1. Clone the repository:

    git clone https://github.com/msikma/pokesprite.git
    
  2. Include the necessary CSS and JavaScript files in your HTML:

    <link rel="stylesheet" href="path/to/pokesprite.css">
    <script src="path/to/pokesprite.js"></script>
    
  3. Use the provided classes or JavaScript functions to display sprites:

    <span class="pkspr pkmn-pikachu"></span>
    
  4. Initialize the sprites:

    PkSpr.process_dom();
    

Competitor Comparisons

1,152

Repository containing many Pokémon sprites

Pros of PokeAPI/sprites

  • Comprehensive collection of official Pokémon sprites from various games
  • Regular updates with new Pokémon and forms as they are released
  • Well-organized directory structure for easy navigation

Cons of PokeAPI/sprites

  • Limited to official sprites only, lacking custom or fan-made designs
  • Larger file size due to the extensive collection of sprites
  • Less flexibility in terms of sprite customization or variations

Code comparison

pokesprite:

const pokesprite = require('pokesprite-images');
const bulbasaurSprite = pokesprite.getPokemonSprite('bulbasaur');

PokeAPI/sprites:

const pokeapi = require('pokeapi-js-wrapper');
const P = new pokeapi.Pokeapi();
const bulbasaurSprite = await P.getPokemonByName('bulbasaur').sprites.front_default;

Summary

Both repositories offer Pokémon sprite resources, but they cater to different needs. pokesprite provides a more customizable and lightweight solution with a focus on programmatic usage, while PokeAPI/sprites offers a comprehensive collection of official sprites from various games. The choice between the two depends on the specific requirements of your project, such as the need for official sprites, customization options, or integration with other Pokémon-related data.

1,461

more than you ever wanted to know about Pokémon

Pros of Pokedex

  • Comprehensive database with extensive Pokémon information
  • Includes data beyond just sprites (e.g., stats, moves, abilities)
  • Supports multiple game generations and languages

Cons of Pokedex

  • Larger project size, potentially more complex to use
  • Less focused on sprite assets specifically
  • May require more setup and dependencies

Code Comparison

Pokesprite:

const pokesprite = require('pokesprite');
const sprite = pokesprite.getPokemonSprite('pikachu', { gen: 'gen-8' });

Pokedex:

from pokedex.db import connect
session = connect()
pikachu = session.query(Pokemon).filter_by(name='Pikachu').one()
print(pikachu.stats.hp)

Summary

Pokesprite focuses specifically on Pokémon sprite assets, offering a straightforward way to access and use sprites in projects. It's lightweight and easy to integrate, particularly for front-end applications.

Pokedex, on the other hand, provides a more comprehensive Pokémon database. It includes extensive information beyond just sprites, making it suitable for projects requiring in-depth Pokémon data. However, it may be more complex to set up and use, especially for simple sprite-only needs.

Choose Pokesprite for quick access to sprite assets, or Pokedex for a full-featured Pokémon database with broader information and multi-generation support.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

MIT license npm version Updated for

PokéSprite

This is a collection of the box sprites of every Pokémon from the main game series, and the sprites 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 sprites:

Pokésprite Gen 8 examples banner

These sprites can be used as individual files, or accessed programmatically using the included sprite database files.

Sprites and metadata

This project contains both Pokémon box sprites and item sprites. For Pokémon, both the old style sprites from Pokémon Sun/Moon (Gen 7) and the new style sprites from Pokémon Sword/Shield (Gen 8), including the DLC, are included, as well as a number of unofficial sprites for Pokémon Legends: Arceus. Item sprites are available with Gen 8 style white outlines and without.

DirectoryExampleSizeTypeDescription
/pokemon‑gen7x/pokemon-gen7x/ example68×56PokémonGen 7 sprites, updated to Gen 8 size and contrast
/pokemon‑gen8/pokemon-gen8/ example68×56PokémonGen 8 sprites (plus older Gen 7 sprites where needed)
/items/items/ example32×32ItemsGen 3–8 inventory items
/items‑outline/items-outline/ example32×32ItemsGen 3–8 inventory items with Sword/Shield style outline
/misc/misc/ exampleVariesMisc.Miscellaneous sprites from multiple gens

The item and miscellaneous sprites are separated by type in subdirectories (e.g. "berry", "evo-item", "valuable-item", "ribbon", etc).

Previous generations of games (Gen 1–2 and Gen 3–4) had their own collections of sprites, but these are not included in this project. The original 40×30 Pokémon sprites from Gen 6–7 are kept for legacy purposes in the /icons directory.

See the Pokémon sprite overview page for a full list of sprites.

Data files

Developers who want to use these sprites programmatically might want to look at the /data/pokemon.json and /data/item-map.json files; the former contains a list of all Pokémon and their associated sprites, and the latter links all sprites in the repo to their internal IDs used in-game.

Pokémon sprite list

Each entry in the dex.json file contains the following data (example):

// ...
{
  "idx": "006",
  "name": {
    "eng": "Charizard",
    "jpn": "リザードン",
    "jpn_ro": "Lizardon"
  },
  "slug": {
    "eng": "charizard",
    "jpn": "riza-don",
    "jpn_ro": "lizardon"
  },
  "gen-7": {
    "forms": {
      "$": {
        "has_female": false,
        "has_right": false
      },
      "mega-x": {
        "has_female": false,
        "has_right": false
      },
      "mega-y": {
        "has_female": false,
        "has_right": false
      }
    }
  },
  "gen-8": {
    "forms": {
      "$": {
        "is_prev_gen_icon": false
      },
      "gmax": {
        "is_prev_gen_icon": false
      },
      "mega-x": {
        "is_prev_gen_icon": true
      },
      "mega-y": {
        "is_prev_gen_icon": true
      }
    }
  }
},
// ...

The name and slug objects contain the Pokémon's name in various languages, including a romanized version of the Japanese name. The jpn_ro item contains GAME FREAK's official rōmaji names that are mainly used in merchandise. For example, for カメール (Wartortle), the jpn slug is "kame-ru", while the jpn_ro slug is "kameil".

The forms object contains a list of all sprites pertaining to a Pokémon. It always contains at least a "$" (dollar sign) value, which means the regular form or default sprite. Each form object can contain the following details:

KeyMeaning
is_alias_ofThis form uses the sprite of another form and does not have its own image
is_unofficial_iconThis sprite is not a verbatim original and has been edited in some way (e.g. Pumpkaboo and Gourgeist)†
is_unofficial_legacy_iconAs above, but only for the smaller legacy 40×30 sprites (only used for Melmetal)
is_prev_gen_iconThis sprite is actually from an earlier generation
has_rightA unique right-facing sprite is available (e.g. Roselia—only for Gen 7 Pokémon)
has_femaleThis Pokémon has visible gender differences (e.g. Unfezant)
has_unofficial_female_iconThe female version of this Pokémon's sprite was custom made (e.g. Pikachu)

†: only applies to non-shiny sprites, as shiny sprites are always unofficial.

There are a few cases where a Pokémon's shiny design changed in an update. For example, Minior's shiny form was originally gray but became colorized with the release of Pokémon HOME. This project always uses the latest designs, with the old ones renamed to their gen of origin.

Inventory items list

Several files are available for processing the sprites for inventory items:

  • /data/item-map.json – a 1:1 map of item IDs and sprite files, e.g. "item_0017": "medicine/potion"
  • /data/item-unlinked.json – all inventory sprites not linked to an item ID—these are mostly duplicates (e.g. the Metal Coat sprite is in both "hold-item" and "evo-item", and so one goes unused) and legacy files
  • /data/item-legacy.json – a list of old item sprites from previous gen games

See the inventory overview page for a list of items.

Miscellaneous sprites

For all other sprites that are neither Pokémon nor inventory items, see /data/misc.json. Notably, the ribbons can be found there. Each group of miscellaneous sprites has its own unique data format. See the miscellaneous overview page for all included images.

Sprite dimensions

Since Gen 8, the Pokémon box sprites have become 68×56 (up from 40×30 in Gen 7) to accommodate larger sprite designs.

   

Most Pokémon did not get a new sprite as of Gen 8, meaning their old sprite was padded to the new size. Sprites were padded from below, with one extra pixel of space on the bottom (see left).

Since most Pokémon take up a very small amount of pixels of the allotted space, they'll look far more spaced apart than in Gen 7 if they're displayed adjacent to each other. This effect is especially noticeable for not-fully-evolved Pokémon.

To somewhat mitigate this, the sprites can be made to overlap each other. In nearly all cases, only the empty space around the sprite will overlap—if there are multiple large sprites next to each other (like several Gigantamax forms) the sprites themselves will overlap, but only a little.

The recommended overlap is -24px left and -16px top, which is a compromise between bringing the smaller sprites closer together and not letting the larger sprites overlap. Here's an example of what that looks like:

Sprite offset example

With this setup, the larger sprites are quite close together but not uncomfortably so, and the smaller sprites are not too far away from each other. There is some small overlap for the largest sprites (the special Gigantamax forms), but not excessively so, and in most cases it should be rare to see multiple Gigantamax forms next to one another since it's not a permanent form.

For a better example of what many adjacent sprites look like with this setup, see the banner image at the top of the readme, which also uses the same amount of spacing.

Related projects

Projects using PokéSprite:

  • PKHeX – Pokémon save file editor
  • PokéSprite spritesheet – spritesheet of all Pokémon box sprites and inventory items for use in websites
  • PikaSprite – a different interface for PokéSprite sprites
  • DexTool – management tools for a Pokémon living Dex, shiny hunting and streaming
  • Spinda Painter – proof of concept for displaying accurate Spinda spots on its box sprite
  • pokemonsay – version of cowsay with Pokémon sprites
  • pokemonshow – another project that shows Pokémon in the terminal
  • Random Pokémon Generator – generates Pokémon teams by a given list of filters
  • Pokémon Type Swap Generator – a Pokémon type swapping app
  • Many Google Sheets used by Pokémon traders

If your project uses PokéSprite and you'd like to be added to this list, feel free to open an issue to request it.

Other Pokémon artwork related links:

License

The sprite images are © Nintendo/Creatures Inc./GAME FREAK Inc.

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

This project couldn't have been made without the help of numerous contributions from the community. See the contributors file for further information and full credits.

NPM DownloadsLast 30 Days