How do I use an animated GIF as an actor?

IntelligentDesigner

I'd like to have some built in animation while the actor is being moved. I have animated GIF for walking right, left, forward, backward, up and down.

Please help?

IntelligentDesigner

What do you recommend for separating the images? And won't that add bloat to the app size and slow things down? With multiple images, you've got to run rules for cycling as well as movement, etc...

Any plan for updating the tool to use GIF89 animations as is?

firemaplegames

I haven't heard gif89 used in a long time! That brings back memories!
It's the same principle as gif89, though.

The iPhone uses .pngs, which have a better compression algorithm than GIF. They also support full transparency, not just a single color transparency. Plus Apple has code to further optimize them once they are on the device.

What tool did you use to create the gifs? I used to use ImageReady, which used to come with Photoshop, but they got rid of that years ago.

There should be a way to export each image in a gif89 to a separate image.

All of the instructions that you used to create the gif need to be recreated with an Animate behavior. There's settings for animation speed, looping, etc. If you have delays on certain images in the gif89, i.e frame 5 holds for 5 seconds - then yes, you will need to recreate that with Rules.

The file size should pretty much match an animated gif, it won't add extra bloat.

IntelligentDesigner

GIF's fell out of favor when UNISYS hijacked the format and thus created the need for PNG.

But png spritesheets I create from the animated GIF's are bigger and it would seem to be easier to just support the rolling built into the GIF format. I quess I'll have to seperate the GIF's to individual cells. Do you have any recommendation for (MAC) software that has that capability?

Thanks for your input!

firemaplegames

I just use Photoshop for everything.

design219

Photoshop.

IntelligentDesigner

Isn't there anything that is less pricy? We are talking about a small feature here.
There are tons of such applets for PC.

Thanks for any suggestions.

firemaplegames

There's GIMP, which is free. It's sort of an open-source Photoshop.

synthesis

Photoshop is the absolute best...no questions asked.

I believe Corel has a cheaper product that does similar things...but photoshop beats it hands down when it comes to ease of use and graphics options.

Photoshop elements is a Lite version...but I've never used it.

IntelligentDesigner

GIMP has no animation interface built in and neither does Adobe Elements...



Any other ideas? What does every one use?

firemaplegames

What did you use to create the gifs?

I haven't made a gif89a in at least 8 years...

synthesis

"Any other ideas? What does every one use?"
Photoshop!!!

adado

@GoodMag: I still use some of my PC's paint programs for certain image issues and then just network transfer the images across. A minor inconvenience but I am very familiar with the PC paint programs so it probably actually save me time. Although I am liking Pixelmator and Pixen on the Mac (don't know if they support animated gif deconstruction though - although Pixen might since it supports animation).

Hunnenkoenig

Please, please, please let me say something! *jumpsintheair*

use google!
You see, that people here have no clue, what you could use for your problem.
If you use medieval technology AND you are cheap to buy photoshop, then do some research.

I never understood, why people want everything served on a silver tablet!?

Dhondon

Photoline is an cheap and good altervative to Photoshop.

jonmulcahy

what about pixen? I know that's been recommended here a few times.

CodeMonkey

Doesn't Preview break up animated gifs into its separate elements where you can copy and paste individual frames into a new image?

QuinnZoneStudios

Yes CodeMonkey you are correct.
Preview does show each gif frame and you can save each one out as a .png!
The only thing I'm not sure about is if there's no transparency around the character already it will retain it's white background.

JamesZeppelin

I use photoshop and have for a long time but when i first got my mac i didnt have it for a month or so.

IMO gimp is about the closest to photoshop. I tried them all. Pixen really falls short if you doing much other than editing something that already exists.

The only thing is with gimp it is by nature a PC program and it runs in a simulator so you have to use cntrl x instead command x for example.

maniraptor

I was talking to a friend the other day about doing a game for his band ("Rat Babies"), and he mentioned that he had made a game a while ago... using HTML, a little javascript and animated gifs. I thought it was a clever, though odd way of making a game outside the traditional means.

Kind of like "outsider art" for games.

More on topic: in Photoshop it would be easy to use the Wand tool to take out the white background left over from saving to PNG in Preview. I think GIMP can do this, too.

design219

I've never tried it, but I understand there is now a version of Gimp called "Gimp Shop" that has the interface redesigned to be like Photoshop.

synthesis

Just found this linked on the GS reference section:
http://www.tomaweb.com/buttons.asp

adado

@Hunne: People could say the same about you and your hackintosh! ;-p

IntelligentDesigner

I've got "Pixelmator", "Adobe Elements" and "Pixen", but none of these makes an easy job of deconstructing the GIF89a cells like ULEAD did on the PC. Basically that utility allowed a "filmstrip" of included cells to be viewed and scrolled through, with the ability to double-click and edit each individual cell; while you were doing that you could save it. You could then add images with small changes to the filmstrip, and save it as a GIF89a. This was a $39 application, and very closely approximates how traditional animation is done. Creating an animated actor that was self contained.

Not something you can do in "Preview". Try lining up the cells, if you think you can rely on screen captures. PNG SpriteSheets are good for OpenGL programming, but not useful in GameSalad, since GameSalad unfortunately requires separate images with rule based rotation.

I am not afraid to research, or "cheap" contrary to what the "hackintosh guy" implied; in fact I have been trying for several months to get the right tools. Maybe one needs to be created for the MAC, which I had thought was the epitome of graphics development. Maybe I need to write an onionskin MAC OSX app myself, but I hate reinventing the wheel.

As to being "too cheap to buy PhotoShop", why would I need it since it does not have the feature I need and "Pixelmator", "Adobe Elements", and "Pixen" together do a better job for 70 percent less money?

Again: has anyone seen a tool that can do the job?

the Good Magician

netdzynr

@GM -- GraphicConverter might be a good option for you:
http://www.lemkesoft.com/

Hunnenkoenig

Edited out, becuase it doesn't matter...

design219

Just out of curiosity, are you reverse engineering a previous game you've made?

QuinnZoneStudios

Adobe Elements will do exactly what you need.
Sure you have to edit each frame one at a time but that's okay. I just edited hundreds of animation frames, then redid them all because I wanted to change the resolution and frame rate lol!
To get each frame to line up properly. I painted a little brush of black in each corner for each frame and pasted it into a new PSD file, then erased the black corners of the frame. That way the character lined up perfectly from my original animation. Then I exported "Save For Web" as PNG24 with alpha channel.
Now if I were really smart, I would have automated that process as an action and gone and made coffee, ha ha!
I've been a professional animator for thirteen years and lead animator in games for over three.
If you need any additional explanations regarding this process, feel free to contact me.
Good luck with it as the is a way for you to get what you need.
Cheers!

Pas976

For anyone reading this I would like to point out you CAN animate with the gimp defaults. I have made all my animated sprite sequences /or gifs with gimp.

BrettRoeder

To extract the individual images from the animate GIF do the following:
1. open in preview
2. show sidebar
3. select all images
4. drag-&-drop into a folder