Sprite generator

[msikma]

Sprite generator

[msikma]

Hey there, I've put it on low prio for now but I should get back to it. I started the project but only worked on it for a little bit.

The project was a simple sprite generator using Spritesmith, which generates images and CSS, with some options like toggling shiny sprites, different forms, items, etc. I'll work on it some more soon and update this issue when something is up to look at.

[msikma]

Nearly done with it. Going to finish it up and put it on npm this week.

[msikma]

So I said this would be ready this weekend. It's not quite there yet. I'm making good progress though. There's just a few loose ends to tie up, and I still need to write at least some rudimentary documentation.

Here's the still in-progress repo: https://github.com/msikma/pokesprite-gen

Some tests:

CSS is also being generated already, but I haven't decided on a final API yet. The styles are pretty big but at least they gzip well, unlike the images.

[msikma]

Oh yes, on that note, if you have recommendations for the CSS classes, let me know.

Right now each item requires the class name pokesprite, plus a type (pokemon, or an inventory type such as pokeball, or a misc type like ribbon), plus finally a name. A red apricorn is pokesprite apricorn red, a shiny Aegislash is pokesprite pokemon shiny aegislash. Forms are indicated as per their filename, like pokesprite pokemon alcremie-salted-cream-berry.

[msikma]

Wanted to let you know I've started work on this. I actually had done a little bit of preliminary work before (per my previous comment) but it really doesn't need to be that complicated, so I'm just going to write a script that generates the spritesheets with only the core needed functionality.

[msikma]

Nearly there.

[msikma]

I also would like an early NPM release :)

Done! See the pokesprite-spritesheet package. It's released as 0.1.0 for now.

I'm gonna start working on the adjustments now.

[brunoAge]

I was looking for this

[koenigderluegner]

Looking forward to it :)

[koenigderluegner]

I looked through the CSS file you provided and think the way you picked it is optimal (in terms of development), I haven't checked the full source code but maybe allow the prefix to be changed/toggled to a shorter version? I think the naming itself is very good, the only things left might be optimization like crushing the files (maybe as part of the generator?) or shorter names somehow.
At least for me I'm happy with the outcome

[msikma]

You're right about higher level optimizations, although fortunately there's a lot of options these days for things like scoping and crushing for plain CSS files. When using a build program like Webpack you could do something like this:

import React, { Component } from 'react'
import pokesprite from 'pokesprite-spritesheet/pokemon.css'

class MyObj extends Component {
  render() {
    return <span className={pokesprite['pikachu-alola-cap']} />
  }
}

And then you could configure it to output minified or scoped classes. I'll make a demo of that as part of the docs.

The pokesprite-gen cli tool has some configuration options too, like --cls-basename which is set to 'pokesprite' by default but can be changed to something shorter or turned off. I'm kinda assuming that most people will not be manually writing HTML using the literal classnames, but I'm also not really sure if that's true.

I'll add the ability to render CSS that uses pokedex numbers rather than names, too, that probably makes things easier.

[msikma]

Been really busy this week, so I'm planning to get the last few things done this weekend.

edit: well, it's weekend, and it's still not done. 😄

However, I've done some more fixes though and the only thing left to do is write the code that generates the overview, and a usage example, plus some basic documentation. I've modified the CSS to include class names for forms that are aliases (without including duplicate sprites).

There's one question on the misc sprites, because some of them are high resolution (the Gen 8 ribbons and marks). I'm thinking they're best off in a separate sprite with their styles set so they're the same physical size as the Gen 7 and below ribbons (40x40). I still need to check if that's the most optimal way to do it.

The WIP code is here: https://github.com/msikma/pokesprite-gen

[msikma]

I've built a first version of the spritesheet project with overview: https://msikma.github.io/pokesprite-spritesheet/ (repo: https://github.com/msikma/pokesprite-spritesheet/)

It's not on npm yet, but I think I'll change the version number (right now it follows the main project) since I want the interface to be stable first.

[koenigderluegner]

Glad to hear! I think this issue can be closed? I will open an issue in your new repository if I have any

[msikma]

I did a few last minor fixes and added some documentation, which was the last work to do.

Still I'm not 100% sure about one thing, which is forwards compatibility. Right now when you ask for pokesprite venusaur you get the Gen 8 sprite. What if there's a future update that changes this sprite, or even the size? Should they be accessible through pokesprite gen-9 venusaur, and everything else is locked in to Gen 8 by default?

This is even more true of the misc sprites, like the ribbons. Right now only the smaller pre-Gen 8 ribbons are accessible through CSS because the newer ones are basically too large to efficiently make a spritesheet of (see "limitations"). But I'm planning to make them accessible using just pure CSS too, just through individual image files instead. For the misc sprites there's even more difference between generations.

So I'm thinking of doing a bit more reworking to do the following:

• Force the user to pick a gen-7 or gen-8 etc. class
• Have multiple gens accessible in multiple files (pokesprite-misc-gen-7.css, pokesprite-misc-gen-8.css, although probably more like assets/gen8/pokesprite-misc.css)

Note that browsers won't actually download the image files referenced in the CSS files until they're used, and most people can probably make do with just including assets/gen8/pokesprite-pokemon.css and ignore the rest.

Any thoughts on this? Also I'd be perfectly willing to at least send the current version to npm, as 0.1.0, so that people can at least begin working with it, and do all this stuff for 1.0.0.

[koenigderluegner]

Regarding the forwards compatibility, I think it's fine to just use the most current version, so when gen 9 releases you just use those and leave the rest as options. Forcing them would provide more transparency but I assume (purely based on my opinion) that most people will use current gen anyway except some sites that still use 32x32 images. But those wouldn't really profit from this repository except someone provides smaller versions of new sprites.

For misc stuff, I think a split version is the best (personally prefer the latter type).

I also would like an early NPM release :)