any spriters here?
polycounter lvl 10
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:
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:
Replies
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.
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
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.
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.
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.
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.
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
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
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.
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.
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.
EDIT: Holy crap, thanks for the PS action!
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/