any spriters here?

sir-knight

I'm curious as to what tools you guys use (if anyone here sprites for work)

I'm using graphicsgale... it has some awesome tools, but for some reason I can't edit an 8bit alpha channel separate of a 24bit image in it.... The software owns for 8bit and below though. I love the rest of the features .. frame by frame filmstrip, individual frame timing, layers... Importing image sequences directly into frame sequences... exporting spritesheets... importing from spritesheets... importing from AVI files even :thumbup: I'm just wondering if anyone knows of a better tool out there.

Please for the love of god don't say image ready. :poly105::poly108:

Snowfly

Graphics Gale is great for a traditional pose to pose workflow, but Image Ready has far superior editing tools. I've used both in production, GraphicsGale for blocking in motion/fine tuning palettes, and IR to polish up the assets/ping pong between Photoshop, color balance with other assets, etc.

Here's some pixel work from 2007 by me and my gf, using both programs:
http://upierzy.wordpress.com/pixel-critters-animation-gallery/
http://chrisdejoya.wordpress.com/pixels/

Game Maker actually has a pretty decent tileset editor built in. Worth checking out if you plan on doing more than just sprite animation work. Then again with today's resolutions, you're better off doing everything in Flash anyway.

sir-knight

do you know if you can edit the 8bit alpha channel of a 24bit graphic in graphics gale? the dropper just pulls the pure color, not the transparency and for the work I'll be doing I need to edit the alpha channel.

Ninjas

We made a converter for this exact type of thing that goes from TGA to PNG:
http://blog.wolfire.com/2009/02/wolfire-graphic-converter-utility/
It's great and lets you color the matte in your RGB, and edit your alpha without transparency.

[edit]

Not sure if it will help you with your tools. I am used to Photoshop

sir-knight

pretty sure at this point no. The rgb pixels I need are there, but the problem is I need to adjust the a channel on the pngs to eliminate a problem with the skin on our dude's head crawling...

we're doing a port of a game to iphone right now and the licensor requested the assets by resized up... I hate doing this because it almost never works out. The dev team thinking they can pull a fast one used a scaling algorithm to size up (usually resulting in me having to go back and fix everything in which if I had done the resizes myself and spent the time int he first place, none of this would've happened)

The sized up graphics are actually not too bad, but the output is in 24bit png with the embedded alpha, so it looks like I can't alter the alpha at all in graphics gale, when I try to eyedrop the color with alpha, it just pulls the raw color without the transpacency value.

I can split off the 8bit alpha channel from the graphic but I have no idea how to merge it back on quickly.... and I'm talking about 1500 frames of animation here for the whole game.

They've suggested I use photoshop and image ready but they are hardly tooled for animation editing, and importing/exporting the layers into frames and back as single png files is going to be a pain in the ass... especially since the tweaks are really simple, I just need to be able to flip between animation.

They don't want let me downconvert to 8bit and bake the alpha into a 1bit on or off but personally I think it would look better with sharp edges rather than a shitty muddy, fuzzy halo around everything, but down converting and editing with gale would mean it takes me 1-2 weeks of futzing around vs 2+ dealing with image ready, unless there's something to imageready that I don't know and I've been thinking it's the retarded, autistic little brother of photoshop for no good reason.

Snowfly

Well I have a few solutions for upscaling large batches of animated sprite art, bit it depends what you want the final artwork to look like. Could you show me an example of the results you're after, and the workflow you're using?

Rick Stirling

In the olden days I used ProMotion for sprites.

Slum

+1 for ProMotion. I love it

Xenobond

Yup. ProMotion and then the Photoshop.

Andreas

Anyone know of good learning materials for this sort of thing?

sir-knight

I looked into pro motion but it only supports 256 colors, I need something that can edit the alpha channels of a 24bit png, which seems to be different on png than tga (tga has a separate color channel png adds a 4th value to rgb to make it rgba and color droppers won't pick up the 4th value)

Blenderhead, I was trained traditionally as an animator, I worked 2 years in production and post production using toonboom harmony. When I got this job, basically I got my hands on graphics gale (20$) and started downloading or ripping sprites from oldschool console games and rebuilding the animation sequences.. from there I just kept going, I don't think I'm terribly great at it... mobile space is very restrictive and our dev teams are small so we need to keep porting to 300 different mobile devices in mind when designing graphics.

There are a couple decent tutorial sites out there in terms of dos and don'ts but they mainly have to do with managing certain radius curves and inclined lines so that they don't look jagged.. everything else is just a matter of applying your art knowledge on a tiny scale. The best learning materials are just analyzing the old stuff, it's not exactly rocket science, and compared to 3d, it's a walk in the park.

sir-knight

Snowfly wrote: »

Well I have a few solutions for upscaling large batches of animated sprite art, bit it depends what you want the final artwork to look like. Could you show me an example of the results you're after, and the workflow you're using?

It's a several step procedure, maybe by posting it here I can figure out how to trim it down...

the original DS assets need to be resized 150% for iphone to maintain the ratio of what we show on screen between devices.

The devs thought it would be nice to use some sort of scaling algorithm, I'm not entirely sure what's it's called though.

what seems to happen is that the process creates an 8bit alpha channel and bleeds colors in the image out, using the alpha channel to clip back the shape to maintain a cleaner outline.

The algorithm is going up 300% from original

From there their automation process brings it back down to 150% of original, merging this separate alpha channel into the png.

Due to uneven pixel stretching on the grid, shapes will sometimes bubble up or down 1 pixel so there's cleanup that needs to be done on some parts of the animation.

Ideally I'd like to work in the 150% versions of the files, instead of trying to work with the 300% before scaling back down, but working at that size for 1500 frames worth of images is going to take a while.

Because I don't have a 24bit image editor that can flip quickly between frames allowing me to edit animation (imageready is the only one apparently, and the way it handles frames and layers is a pain, it slows the actual animation process down, especially when trying to determine where to add a line of pixels)

My idea was to reduce to 8bit at 150% but they want to keep their AA, which I think looks terrible because the automatically generated alpha is blurry.

It looks like though I will be converting the 300% to 8bit, baking in the alpha to work on it, fix the animation and then rexport with new 1bit alpha... then resize back down to 150% and let photoshop deal with creating a good 8bit alpha channel.

Seems like a roundabout way of doing it, but I think it might be the only solution that will allow me to quickly edit animation and all the file conversions can be batched to save time.

I don't know how you guys work with IR though, I nearly stabbed out an eye yesterday trying to animate with it.

Snowfly

Would they happen to be using one of these scaling algorithms?

HQNX - http://wiki.github.com/pdjonov/hqnx
SCALE2X - http://scale2x.sourceforge.net/
2XSAI - http://mac.softpedia.com/progDownload/2xsai-Download-13897.html

I think you can produce the crispest 8-bit alpha masks by converting the source art to black/white, scaling them up to 300% with HQ3X, and then scaling down to 150% before merging the alphas back into your animation strips. See if you can get the devs to write you a tool to do this.

Snowfly

OK I did a bit of experimenting, and here's what I came up with.

Source art
150x150 / 32-bit / 5.71 kb


Steps:


1. Save the artwork as PNG's with transparency
2. Use 2XPM to scale up the pixel art 200% or 300%

300x300 / 32-bit / 12 kb

450 x 450 / 32-bit / 16 kb

http://2xpm.freeservers.com/
3. Scale down to desired size
225 x 225 / 32-bit / 38.2 kb

4. Convert to a 256-color indexed image to flatten the alpha down to 1-bit
225 x 225 / 32-bit / 25.8 kb

5. Optimize with PNG Gauntlet

225 x 225 / 32-bit / 10 kb


Test scene

Snowfly

OK, scratch that last post, here's the absolute best method I could come up with.



1. Upscale the source art 3X using Scale2X
http://scale2x.sourceforge.net/download.html

2. Open the source art in Photoshop, if it's indexed, use Image > Mode > Color Table, and Save the color table somwhere accessible.

3. Open the upscaled art, and use Filter > Pixelate > Mosaic with a cell size of 2.

4. Scale down 50% using Nearest Neighbor

5. Use Image > Mode > Indexed Color, select Custom under Palette, and load the color table from Step 2.

Voila! Nice 150% scaled pixel art with anti-aliasing between colors, using the original palette.


Alternatively, you can convert the original upscaled version to an indexed image after applying mosaic and before scaling it down to get slightly different results.


Here's another example using Metal Slug.
Original : Upscaled 300% : 150%
All using the same palette

sir-knight

very awesome thanks.

The method is pretty much exactly what I'm doing, we are using scale2x (I think the 3x version actually) It's good to know someone else came up with a method that corroborated my thinking

From the 300% version I will be reducing the palette to 8bit with 1bit transparency and then addressing the animation tweaks with graphics gale.

From there I will reconvert to 24bit and create a 1bit alpha channel

Bring it back into photoshop and reduce to 150% of original gives us a slightly cleaner alpha than the straight up/down method the devs were using and the animation is fixed, plus we have a nicer AA edge.

There might be a couple steps I can probably skip or automate better once I get going as my first method requires a few to and from 24-8 bit conversions to ensure I have good 1bit alpha going.

Andreas

Hey awesome Snowfly! Thanks for this info.

Elhrrah

Am I the only one who is watching this thread, and wondering which person I should shanghai?

In any case, thanks for all the useful linkage.

Wheel

Wow, that is pretty amazing. I didn't think you could do that and get such great results. Beers all round, thanks for sharing.

sir-knight

[php][/php]

Elhrrah wrote: »

Am I the only one who is watching this thread, and wondering which person I should shanghai?

In any case, thanks for all the useful linkage.

:poly122: not me I suck :poly142:

Here's stuff I can show, that's not related to the current project :P







4 bit (16 color palettes)

not sure why the alphas are messed up, I'll have to fix that when I get home.

Snowfly

OK here's a Photoshop action I created that generates 8-bit paletted images with 8-bit alphas from Scale3X source art. Not exactly what you needed, but you seem knowledgable enough to throw something together that suits your workflow.

I wanted it to be fully automatic, but PS is pretty dumb with handling color tables, so instead, it prompts you to save and load them manually, and also allows you to set the option for dithering. Hope it isn't too much of a pain, and let me know if there are problems.

Grabbit here: http://chrisdejoya.googlepages.com/SirKnightUpscale.atn

Here's an example using the wrestler again (zoomed in 200%), but I tested it on Mario and Chun Li too:




They're not perfect, but they make good starting points for further touch-up work.

hobodactyl

Yeah this is very cool, I'm bookmarking this

EDIT: Holy crap, thanks for the PS action!

sir-knight

Btw, if anyone is interested, here are some resources I have used in the past:

sprite rips:
http://www.videogamesprites.net/Links/
http://www.gsarchives.net/index2.php

http://www.tkool.jp/fancontents/lecture/graphic/ <-- in japanese, you might gain a bit of understanding running it through google translate
http://www.spriteart.com/tutorials/