Coder Social home page Coder Social logo

msikma / pokesprite Goto Github PK

View Code? Open in Web Editor NEW
927.0 62.0 162.0 24.9 MB

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

Home Page: https://msikma.github.io/pokesprite/

License: MIT License

Python 89.38% Shell 9.59% JavaScript 1.03%
icons sprites pokemon pokedex

pokesprite's Introduction

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.

Directory Example Size Type Description
/pokemon‑gen7x /pokemon-gen7x/ example 68×56 Pokémon Gen 7 sprites, updated to Gen 8 size and contrast
/pokemon‑gen8 /pokemon-gen8/ example 68×56 Pokémon Gen 8 sprites (plus older Gen 7 sprites where needed)
/items /items/ example 32×32 Items Gen 3–8 inventory items
/items‑outline /items-outline/ example 32×32 Items Gen 3–8 inventory items with Sword/Shield style outline
/misc /misc/ example Varies Misc. 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:

Key Meaning
is_alias_of This form uses the sprite of another form and does not have its own image
is_unofficial_icon This sprite is not a verbatim original and 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 sprites (only used for Melmetal)
is_prev_gen_icon This sprite is actually from an earlier generation
has_right A unique right-facing sprite is available (e.g. Roselia—only for Gen 7 Pokémon)
has_female This Pokémon has visible gender differences (e.g. Unfezant)
has_unofficial_female_icon The 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:

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.

pokesprite's People

Contributors

5310 avatar giacomolaw avatar jeroenpastoor avatar koenigderluegner avatar liviakuenzli avatar msikma avatar ptgigi avatar qhq avatar rawr51919 avatar remiscan avatar route1rodent avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pokesprite's Issues

Icons for complete and 10% zygarde forms and Ash-greninja

Hello,

Thanks a lot for all this work and sharing.
I noticed that some icons (regular and shinies) were missing for zygarde 10% form, zygarde complete form and Ash-greninja.

Is it already planned to add them ?

Best regards,
Alex

Old Amber? Also Thunder Stone error.

I was looking through the fossils and I noticed that the Old Amber - the fossil that is used to revive Aerodactyl - is completely missing. Is it in a separate section, or was it simply forgotten?

Also, this may just be me, but the Thunder Stone sprite doesn't appear to be loading when I add it into a Google sheet. The other evolution items work just fine, but the Thunder Stone strangely isn't.

Sprite Inconsistency / Missing Sprites

Case 1: Hitmonlee

Hitmonlee had its sprite updated in SWSH, it does not use the same sprite as the one present in LGPE. Its Shiny sprite should be updated to reflect the sprite change for consistency.

Normal (SWSH sprite):
normal
Shiny (based on LGPE sprite):
shiny

Case 2: Stonjourner

Stonjourner is missing a Shiny sprite entirely. Both sprites present in the project match the vanilla sprite found in SWSH.

Sprites Not Showing

For some reason, I'm unable to display any sprite on my site. I'm using the Laravel framework and followed all the steps in the readme. Sorry if this is something simple. Both files below are included in dex.blade.php.

My meta.blade.php file:
meta blade php

My dex.blade.php file:
dex blade php

My footer.blade.php file:
footer blade php

Shiny star gone

Hi,

In this commit you got rid of status icons. I actually use Shiny and Pokerus ones. Do you have anything against bringing them back?

Thanks

Add new Alola Pokémon and forms

It's that time again. There are 81 new Pokémon, and several new forms.

I'm not sure if there is good reference material yet. In previous versions I used animated GIFs of shiny Pokémon (made from screen recordings) which were extremely useful because the color fidelity of those images is very good. Photos of 3DS screens are not very usable for this purpose.

Missing

Sprites for half of the Pokemon starting with the letter V and then through to Z are missing.

option for vertically centered sprites

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:
image

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!

Procedural Spinda

Adding to the list of barely significant variations, I made a simple script to procedurally draw spots on spinda: https://codepen.io/5310/pen/vmXONE?editors=0010

It makes no sense to statically render spinda variations. But if the sprite-sheet generator tool can host this generator as an addon then these blank and "filled-in" sprites might become useful. They may also be useful even to a user who to generate their own spinda spots manually or in-engine, they can just generate the clipping spots and composite the blank and filled-in layers.

What do you think, too trivial? @⏝@

How to display the icon when I got the Json file?

Sorry for asking this, i'm new to web-applications.
So now I can get the json output from decerate:
{ request: { slug: 'pikachu' },
attributes:
{ type: 'pkmn',
slug: 'pikachu',
color: null,
form: null,
gender: null,
dir: null },
exactMatch: true,
found: true,
data: { coords: { x: 1, y: 63 }, props: { flipped: false } },
size: { w: 40, h: 30 } }

How do I use it to display the icon? Thanks in advance!

Add new icons for Pokémon Sword/Shield

Relates to #46.

Pokémon Sword/Shield is nearing release (only a few more days), but somehow part of it has apparently already leaked and so I have an early release of the box sprites.

The new sprites are 68x56. Most have been changed, which means I'll have to redo most. The old Pokémon sprites will remain where they are, and the new icons will go to /icons/pokemon-68x56. I can never change the location of the old sprites anymore, because I'll be breaking approximately a billion trade excel sheets 😄

This may not be the definitive list of new icons. The image I linked has some confusing things, like Alolan Raichu and Alolan Dugtrio being smaller than their Kanto counterparts, for example—possibly indicating that their old box sprites are just there for compatibility and they don't actually appear in the game? Or, possibly indicating that their sprites will be updated later. We'll see. In any case, the old icons did get updated (the old ones had 15 colors, the new have 63 colors).

Also, I don't have a dump of the item icons yet. I'll see if I can get one. If you have it, let me know on Twitter.

I don't think anybody cares about the sprite sheet generator, but I'm remaking it in Node/Javascript right now and the new larger icons will become the defaults.

Edit: I've got a full dump of items and Pokémon icons named by ID numbers now, which will be a massive help.

Size of sprites ?

Are all the sprites the same size, or are they different sizes ? If thy are the same, what are the dimensions. I would like to know because I need the dimensions to access them from my java project.

Gender differences not working

As you can see on the compiled overview in this repo and when you try to compile it for yourself, gender differences are not working at all.

[SWSH] Dhelmise Shiny Sprite

image image

As you can see in the above comparison, the wooden part of the anchor remains brown when Shiny.

The Gen 7 sprite correctly replicates the official coloration: image

10% Zygarde Form

How is the sprite of 10% Forme Zygarde? I only can put 50% and complete Formes.

Gen8 icons aren't aligned the same

Please see the following two examples:
https://raw.githubusercontent.com/msikma/pokesprite/master/pokemon-gen8/regular/grookey.png
https://raw.githubusercontent.com/msikma/pokesprite/master/icons/pokemon/regular/pikachu.png

As you can see the grookey sprite seems to have extra space which can be seen easily if you copy image and paste it next to gen 1-7 ones in paint - https://prnt.sc/rfqcsf

This causes Pokemon to not be aligned and not displaying properly in tabs as seen here: https://tinyurl.com/Kanimi-Pokemon

Any reason for the extra space on the new sprites?

Also unless I am blind there's no koffing-galar or weezing-galar.

Shiny Cap Pikachu color error / Busted Mimikyu request (and maybe Totems?)

The shiny Cap Pikachu sprites shouldn't have regular Pikachu's shiny colors. They're based on Ash's (non-shiny) Pikachu and aren't supposed to be obtainable in shiny form, but shiny Partner Cap Pikachu is possible due to an oversight and has the same colors as the non-shiny form (as do the rest if hacked into the game):

screenshot-2018-2-25 dvza_n3voaaft8k

Also, can we get a custom sprite for Busted Form Mimikyu? Looks like it's the only non-Totem alternate form without its own sprite. I'm not sure if it's worth the effort making separate sprites for the Totems too, some like Kommo-o already take up most of the image space so I don't know if it's feasible to make them any bigger.

Sprite generator

There was a sprite generator mentioned while the gen 8 sprites were made, is this still worked on or got this one dropped?

Shiny changes as of Pokémon Home

Apparently, as of Pokémon Home, the following shiny Pokémon changed designs:

I'm not sure if this is a full list. Anybody know of other changes besides these?

For Minior and Magearna, I think we should make a copy of their current shiny sprites and name them "gen7" (or maybe "original"?) so that we can keep the images around, and then add the new versions. PP doesn't seem to have all Minior images yet, though, so we might need more screenshots.

Thanks to Wordeur for alerting me to this by email.

Genesect forms

Hi msikma,

I noticed you added different forms for Silvally and Arceus, that's great !
Would it be possible to do the same thing for Genesect (with the different drives: Shock, Burn, Chill, Douse) ?

Unfortunately I'm not able to see the new icons you added on http://msikma.github.io/pokesprite/overview.html
Is it a refresh issue ?

Kind regards,
Alex

Hippopotas and Hippowdon

Hey mate.

First off, amazing work. Big fan of the shiny sprites.

I noticed there's something wrong with the Hippopotas and Hippowdon sprites. These guys have different forms (colours) based on gender, but here the male are listed as the regular sprite, while the regular female is listed as the shiny. Neither the male of female shinies are included.

A friend of mine recoloured the regular sprites to the shiny colours and said you could use them if you wanted.

Shiny Male Hippopotas
Shiny Female Hippopotas
Shiny Male Hippowdon
Shiny Female Hippowdon

Sprites look blurry on retina display

Sprites look blurry due to the fact that they're upscaled on a retina display. Figure out if we can change the upscale to a point upscale rather than the browsers' standard bilinear/bicubic algorithm, and check whether we can get this to work correctly with global zoom values other than 200%.

dex number slug not working

According to the docs and #2, I should be able to do something like:

<span class="pkspr pkmn-004"></span>

But when I try to decorate the node, I just get the following warning message:

Couldn't decorate icon with the following properties: { slug: "004", type: "pkmn" }

I thought maybe this was just a problem with the npm build, but I get the same issue on the overview page. You can reproduce this with a very big hack on the console there:

document.body.innerHTML = '<span class="pkspr pkmn-004"></span>'
PkSpr.decorate(document.body)

Gourgeist

Hey there!

Thanks for everything you have done for this. This is an amazing project.

I noticed you finished your update but I can't find the shiny Gourgeist Alternate Forms. Would it be possible for them to be added when you get a chance?

Shiny Darkrai color error

It's not as noticeable when viewing it in its regular size, but I've noticed just now that the darkey grey "outline" color from the regular Darkrai sprite was (I assume unintentionally) left untouched when the shiny sprite was made, making it look a little odd:

Darkrai

(To the right, how it looks when I use colors from Shiny Darkrai's Gen. 5 sprite.)

Enhancement: Ability to reference a Pokemon based on Pokedex number instead of name

It would be great to be able to reference a Pokemon based on its national Pokedex number (like '025' for Pikachu) instead of by name. Pokemon naming schemes aren't well defined, and it may be difficult for a web application to generate names that work with pokesprite. For example:

  • Is Nidoran Female Nidoran-F? Nidoran F.? Nidoran ♀?
  • What about Mr. Mime? Mr-Mime, Mr.Mime?

Ribbons

Pokesprite is great, and I love using it. However, there's something it still needs: images for ribbons.

At least the most common ribbons from event Pokémon like the Classic, Premier, Wishing could be implemented on the script.

I made DexTool and it uses PokéSprite

Hello,

I made a DexTool in order to help people manage their Pokémon living dexes with the correct box ordering. It also has features for shiny living dexes, image exporting, encounter counting and output for streaming services.

All of the Pokémon sprites are from PokéSprite, so I thought you'd like to know.

Shiny Naganadel error

The icon for shiny Naganadel shows yellow wings, but it actually has black wings.

Icon

Image

Usability

I'm going over the documentation, and while I find the project super useful I also find it slightly hard to use, from a developer experience point of view.

  • The npm module doesn't seem up-to-date, and doesn't even seem to be referenced here so I'm not sure whether it's meant to be used or not (I'd suggest to make it first-class citizen, as that's the main way JS modules are consumed nowadays).

  • The need to call a JS function in order for the icon to be properly displayed isn't great. I think it's because the CSS stylesheet doesn't list all the information, and the elements are instead dynamically generated to save size. Is that it? If so, have you tried listing the background-position for each of the 8k+ class names? I would expect web browsers to optimize most of the cost (both runtime and space, thanks to gzip).

Basically, what would be really interesting imo would be to import the css style in the page, and just be able to create the icons by creating only one element with the right class. Given that various icon fonts operate like this I would expect this to be possible for pokesprite?

[Feature Request] Refactor icon names to add veekun/pokedex DB compatibility / interoperability

In an attempt to bring cross-project compatibility, I had to struggle a bit in order to find all images for the Pokemon, Pokemon forms and items listed in the database generated from the well known veekun/pokedex project. Still after my attempt in one of my projects there are a lot of mismatches that I could not solve.

The Veekun Pokedex project is an effort to rip the data directly from the games and is used by numerous projects including https://veekun.com/dex, http://pokeapi.co, https://pokedextracker.com/ (if I am not wrong) and many more (the project has ~300 forks).

Veekun Pokedex has also its cons because the "slugs" or string identifiers they use are neither fully compatible with other well known projects: Pokemon Showdown and Smogon.

My goal is to bring naming consistency to all these projects, including this one, so they will be interoperable.
I think that the best thing to do first is to make this project compatible with Veekun Pokedex, then make that one compatible with Smogon and Showdown, so at the end this project will be compatible with all of them, via the Veekun Pokedex.

What do you think? Are you interested? I will be happy to offer my help in form of pull requests.

Sprites with transparent pixels trimmed?

Wondering if it's possible to have the new sprites with the transparent pixels cropped out. I understand that having them all conform to a standard of 68 by 56 pixels makes sense for a lot of use cases, but trying to use them in Google Sheets makes a lot of sprites tiny and hard to see.

For example, Grookey's actual height is about 25 pixels, but since the image height is 56, it shrinks down to half the size of the row. On the other hand, Eternatus's Eternamax form takes up the entire 56 pixels, so it's also not possible to simply crop all sprites to half the height in Google Sheets.

Image cropped to actual sprite height (taken from serebii.net):
Screen Shot 2020-06-15 at 18 45 00
Sprites in 68x56 box:
Screen Shot 2020-06-15 at 18 45 20

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.