Type icons

[Azuriru]

Hey, would it be possible to extract the category type icons such as physical, special and status too? I found the type-type icons but so far no luck with the one I mentioned. Thanks if you can!

[msikma]

Hi there, generally icons like this are not included in this project because they're UI elements. But I suppose you can make the argument that these would still be useful to have because they can be reused in many different contexts.

The difficulty is that UI elements usually need to fit into a UI. Which is why usually you'd make custom ones to fit into the specific design for your application. Like say, these ones by Smogon are made to fit their design:

If we include icons for physical/special/status, would that be just the star and circle icons or should they include the background? Should they be ripped from Sword/Shield? In that case they'll be slanted to the right, since that's what makes sense for that specific UI design:

I'm not saying these icons should not be included in the project, but we need to think a bit about what would be most useful for users, and how they'll be used.

[Azuriru]

If we include icons for physical/special/status, would that be just the star and circle icons

Yup

Should they include the background?

Nope

Should they be ripped from Sword/Shield?

Yep

Setting a background wouldn't be hard, especially with css.

Well if it's not too much trouble, I do need those icons, and the Dynamax ones too if you can rip those too. I have neither the tools nor expertise to do them myself and so far.. google hasn't been much help either.

[msikma]

Alright, fair enough. I'm actually looking into the move type icons (physical/special/status), but I haven't been able to find nice versions of these. So I'm thinking I'll just make screenshots from in-game and mask them out. Aside from that I think I'll make a vector custom one since the in-game ones are rather small.

I'm also looking into type icons, both white transparent ones and colored ones.

My aim is to provide a couple of different options to fit multiple use cases.

[koenigderluegner]

This might help for type icons: https://www.spriters-resource.com/nintendo_switch/pokemonswordshield/sheet/123715/

I'm not sure if that fits to this topic but since we got the Gmax icon, would it make sense to get other pokemon related icons like shiny stars or origin, too?

[msikma]

This might help for type icons: https://www.spriters-resource.com/nintendo_switch/pokemonswordshield/sheet/123715/

I've looked into using this image, but I've actually gotten them from Bulbapedia instead because they're higher resolution there. I'm not sure how they were ripped. I'm adding the type icons verbatim (with color) and masked out versions (just pure white on transparent).

Also, the reason why I'm generally a bit reluctant to add UI elements is because each one is going to have limited use cases. Things like box sprites are immutable, but whether e.g. a shiny star works is very dependent on circumstances. For example, I'm planning on making the transparent type icons white so you can put a background behind them or use it as mask, but eventually someone is going to say "my interface is white, can we have black versions of these?" There are a lot more variables.

That's also why I asked those questions earlier. It's not that I'm not open to adding more UI elements, but I'm just trying to figure out what would work the best for most people.

edit: Also, for the type icons, and the move type icons, in the long run I think the most sensible thing would be to have vectors. Someone actually made vector versions of these that are not 100% identical to the game's designs but are very, very close, and would be perfect for designing UIs (you can find them on the Spanish Bulbapedia). That's the sort of thing that would be good to start a separate project for. But, of course, I'm adding the ripped raster versions to this project in the meantime.

[koenigderluegner]

That makes totally sense. I'm not a Photoshop expert (or whatever you use) but did you consider making them as SVG when you redraw them? This would solve all scaling and coloring problems

Edit: just saw your edit, I guess this answers my question.

[msikma]

I'm not actually redrawing the images, all I'm doing is masking them out of the background so that the background color becomes transparent. Making SVG versions would be a lot of work and I'm not really cut out to do it anyway.

In any case, I've added the type icons and transparent type logos to master: https://msikma.github.io/pokesprite/overview/misc.html#types

The move type icons will be coming later.

[Azuriru]

"my interface is white, can we have black versions of these?"

filter: invert(1);

[msikma]

filter: invert(1);

But there are a thousand different potential situations, such as where you can't use CSS filters. This is not an issue with all of the non-UI sprites because they are used verbatim.

That's why I need to be selective and find what's likely to work in most situations, and why I won't always be able to simply accommodate someone who comes around and requests things to be put in the project.

[msikma]

On another note, \@edcrfv in the PP Discord tipped me off to this:

Official SVG versions of the type icons, even both diapositive/dianegative versions. This is what was used to create the Bulbapedia images (if only they'd mention these things in the image descriptions...)

They even knew the font used for the type names:

• https://fontworks.co.jp/fontsearch/udkakugoc80pro-b/?word=NORMAL
• https://fontworks.co.jp/fontsearch/rodinntlgpro-b/?word=%E3%83%8E%E3%83%BC%E3%83%9E%E3%83%AB

[Azuriru]

filter: invert(1);

But there are a thousand different potential situations, such as where you can't use CSS filters. This is not an issue with all of the non-UI sprites because they are used verbatim.

That was a joke lmao. I know there's a lot of ways, that was just one of them.

What happened to the category type icons if I may ask?

[msikma]

What happened to the category type icons if I may ask?

Coming soon 🙂

[msikma]

I've made a few changes.

• New png renders for the type icons from the original SVG files
• The type logos have been replaced with 128x128 versions (just like the icons) of the inverted SVG versions, and they're now in their proper color rather than white since this is more flexible
• I've added the physical/special/status icons

The larger versions are from Pokémon Home (256x256, also somewhat cleaned up due to compression artifacts). Then there's the version from Gen 8, which I've had to clean up a little since I'm only able to get screenshots using the Switch's regular screenshot method which makes jpg files. But I think they look OK now. They're black on transparent. Home calls these "seals" so I've copied this name.

The docs have been updated and I've made this version 2.2.3.

Let me know if this works for your purposes.

[msikma]

Oh yes, and the original SVG versions of the type icons are here: https://github.com/msikma/pokeresources

I figured it would be easier to keep this repo PNG only for the moment, but we can change that in the future.

[msikma]

Assuming this is all good, so closing.