AuthorTopic: Sprite animation help  (Read 2627 times)

Offline Thunderbeast

  • 0001
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile

Sprite animation help

on: July 18, 2009, 05:46:30 am
I've been having a lot of trouble trying to figure something out here.  I can handle regular/normal-ish sprite animations, and even do fun/simple things like make things move to a sine wave.  My vision here has been stymied by lack of knowledge/skill, though.

I'm trying to make a blob for Space Station 13, and my first attempt at re-spriting was decent (much better than what the game has right now), but it was a static image that had a horizontal wave motion but no opacity levels (found out that animated .gifs don't support that).  Luckily since then I found that the game animates series of .pngs in-engine.

I wasn't satisfied.  I want it to act more blob-like and I'm going to add eyes/teeth that appear and disappear.



tiled:



Here's the basic tile I came up with.  I want to animate this (and hopefully variations of it to make it interesting) so that it acts blob-like: pulsing, surging from one side to another, globs of material breaking from one part and absorbing into another all mercury-like.

Now, is there a good method to use?  A trick or something?  I tried downloading a Flash trial but I don't think that's what I want.  I couldn't figure shit out in there and what I did find doesn't seem to help.  Is there some method you guys can recommend or am I stuck doing it frame-by-frame, pixel-by-pixel, all by hand?

Offline philipptr

  • 0010
  • *
  • Posts: 261
  • Karma: +0/-0
    • View Profile

Re: Sprite animation help

Reply #1 on: July 18, 2009, 08:07:12 am
I dont get what you're trying to achieve. is the blob made of various tiles, so that you have border tiles and a filling tile (the one you've posted)? Are you sure the things you ask for concern pixelart? because right now you cont have any pixel art involved.
Is it a green highlight on a grey thing?  ???

Sorry but I just don't get it.

Offline Thunderbeast

  • 0001
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile

Re: Sprite animation help

Reply #2 on: July 18, 2009, 03:23:14 pm
Sorry, here's more details.

GAME: The tiles are 32x32, no color/transparency restrictions since the game uses .png

BLOB: The blob's behavior in-game is it will spawn randomly during a round (or, during a blob round, it spawns 10 minutes in), and then spreads from there depending on the o2 level of the area.  It's multi-tile by nature.  The current blob uses three frames, is absolutely hideous, but is rotated on each tile randomly (but seamless throughout) so it doesn't look totally the same the whole way.



So anyway, there's only really one tile for the whole thing, but that may change for mine, maybe not.  Before I even think about making separate, randomizable tiles though, I need to figure out how to animate even the first one.

This first frame I made was in GIMP, basically drawing some curves to be seamless then painting different opacity levels in.  It's a concept more than anything; the art itself won't be a problem but the animation has been.  The entire blob's supposed to be green/purple, and eventually it's going to have eyes and mouths and stuff appearing and disappearing.  For every tile, the green's going to be 100% opaque and the purple at about 30-40% depending on its position.

So yeah, I'm trying to achieve a pulsating, surging kind of motion and am hoping there's another way besides frame-by-frame.  If that's the only way, then I guess that's what I'll do, but if there's a smarter way to do it I'd love to know.

EDIT: I should say that I have no animation-by-hand experience whatsoever, except for a flipbook-style thing I did in a textbook during math when I was 10
« Last Edit: July 18, 2009, 03:38:59 pm by Thunderbeast »

Offline Mathias

  • 0100
  • ***
  • Posts: 1797
  • Karma: +2/-0
  • Goodbye.
    • http://pixeljoint.com/p/9542.htm
    • View Profile

Re: Sprite animation help

Reply #3 on: July 18, 2009, 08:40:59 pm
(like phil said, is this even pixel art? some graphics in the above screencap are and some aren't. your posted blob tile certainly isn't.)

Oh I see what you're trying to do now. Geeze, it took you a few pages to communicate something pretty simple. Don't you hate it when that happens? Happens to me as well. Being concise yet properly informative is a real balance.

And oddly enough, I'm being faced with this exact same task right now, yet even more complicated because I'm attempting to create a square-tiling "total-tiling" (tiles on all four sides) texture that is supposed to emulate a fiery or electric look but that also has a leading edge because it has a beginning to it, so my tiles need to also harmoniously seam into an edge or transition tile as well, and these edge tiles that seam into the total-tiling body tiles tile with themselves vertically. It'll be like a wave of energy designed to sweep across the screen.

So you're just making a 32x32 texture designed to animate and look like some dangerous alive goo. Well mighty unrestrained beast of the unadulterated thunder and other miscellaneous atmospheric phenomena, this task can actually be pretty simple given the right tools.
I'll give you two ideas as to how you might create the desired effect, but with very robotic, non-intuitive yet delightfully functional methods.


#1

-First, think about how you want to portray the blob, don't just sit down on your computer right way and start banging out graphics with no forethought. Think first. Dig up reference material. Observe.

-Now that you've chosen how to illustrate a 32px square as slimey blobby stuff with animation in mind, create a static (1 frame; no anim . . . yet) 32x32px texture. Use full color, do not control your palette at this point, use thousands of colors if you want, auto AA, everything you wanna do, as if digi-painting.

-Tile the resulting 32px tile at least 9 times, creating a square block, so you have one fully encapsulated tile in the middle, just like your original post actually.

-Ok, now flatten the document so you've only got one layer. Now comes the sacrilege. Find a distorting filter that produces the desired throbby blobby movement you need, the filter needs to have variable controls so you can alter it's amount of effect, which is commonly called Phase.

-Create several versions of your tiled texture using this same filter but in different "phases". Because you're running a filter on a tiled texture, it's effects should be tiling as well, at least mostly.

-Now, since you're making pixel art, we need to knock the palette down to something controlled. Reduce the colors to something like 4-8 colors, depends on the rest of your game's graphics; make it integrate harmoniously. Now's also a good time to fine-tune each color after optimizing. Pick out some nice greens, try a hue shift in your ramp. Avoid maximum saturation greens like in your screencap.

-Once you've got enough filtered and optimized versions of your original texture, crop each version's inside 32x32px tile and that's what you'll feed your game-maker program. We had to work on your tile set inside of a tiled texture surounding it so that effects applied properly wrapped and affected all four sides of the tile correctly.

-But we're not done yet. You may need to touch up the edges of your tile so there aren't any obviously discernable seams to ruin the effect. Use your animation program to do this so you can test as you edit. There's a workflow to this. Find it. When doing little fixes on the edges it's also a good time to fix any internal problems. Also, it's a good time to create variations so every tiles isn't the same.


#2

-A simple hue cycle animation. Create your already optimized pixel art tile, you can use the method above if you like. And with no actual moving pixels and with just one frame you simply create frames for your animation by cycling the hue and/or lightness/darkness of all pixels equally of each frame. This is one good application for intentional pillow-shading.


That's it. You can even combine the two methods - use method 1 and throw in a little mthod 2 hue shift for some extra radioactive effect.