Usability

[arcanis]

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?

[arcanis]

I went ahead and made a fork: https://github.com/arcanis/pikasprite

Let me know if you're interested into merging the efforts somehow!

[msikma]

Sorry, somehow I missed this entirely until now!

You're entirely right, the way the project is set up right now is not very useful. The code is actually extremely old, and by the time I first released it there was no other way to get it to work properly except by using JS. The latest Internet Explorer at the time simply refused to accept that many CSS rules and ceased to work properly, and using pure CSS was actually less efficient even in better browsers. Today the situation is different and we can and should totally do it that way.

I'm currently working on a complete revamp as a Node project, although the truth is I think most people are really here for the icons as individual files. I'm not sure that this repo even needs to have a script for generating an icon sprite—maybe it should just be a set of icons, and the image/CSS generation should be somewhere else. That's how I would do it today if I were starting this from scratch, and really main reason I'm still thinking of making a new script is because the repo history just happens to already have code in it. 🙂

So your new script is very welcome and I'll have a look at it more closely when I've got some time, hopefully sometime next week.

[rawr51919]

Is this still being worked on?

[msikma]

@arcanis Hi there, I'm about to release a new version with Gen 8 support. It's been modified quite a bit to make it easier to do future updates. I've also decided to remove the sprite generation from this repo to a separate project, so this repo will only contain sprite files and JSON files needed to use them.

I'm planning on making a new spritesheet generator in Node myself as well (which will take a bit more time), but I wanted to let you know about this upcoming update in case you're also still interested in updating your repo.

[msikma]

Gen 8 has just landed, so the new data files are available if you ever feel like working on an update of PikaSprite. 🙂

[rawr51919]

OK. Since this has been resolved by the Gen 8 update, this issue can therefore be closed. @arcanis, you can do the honors if you'd like

[route1rodent]

@msikma I could help you with the sprite generator I have experience doing that already with imagemagick. maybe we can find some nice npm module for imagemagick that could help.

so I am up for contributing on this. maybe pokesprite should stay only as the resources project and then having a pokesprite-css project (or whatever name) that will be exaclty that: a sprite and a CSS generator (SASS too) that doesn't require JS to work. pokesprite would be an npm dependency of that project.

we could even have separated set of sprites (items and pokemon) since not every project is interested in the whole sprite sets.

so if you start a project feel free to poke me and let's organize the work in the "Projects" section of the repository. You can find me a twitter if you want to talk about this: @ route1rodent

and then we can close this issue.

[rawr51919]

@route1rodent If you want to go that route, procedural Spinda spots could be useful, as Spinda by nature have completely random spots (the groundwork for which being covered by PR #56 and issue #26)

[route1rodent]

@coltongit I think that needs separate attention because that has nothing to do with this issue or generating a CSS sprite sheet out of the existing pokesprite icons.

I commented in those issues themselves about my opinion about spinda

[msikma]

@route1rodent thanks for your offer to help. I'm closing this issue for now. I'm planning to start working on a CSS generator for this sometime soon, probably next weekend. My plan is to make one in Node that generates static files (the static files will then be a separate npm package). It'll be simpler than the earlier version, which was complicated and used JS because back in 2014 browser support was terrible (they refused to accept that many CSS rules).