Explain animations?

RocketBrain · January 2012

hey all can somebody explain the steps to making decent movement animations? i tried doing actor image replacements a ways back. is there a behavior now?

i've heard references to sprites and using inkscape.

The_Gamesalad_Guru · January 2012

Just use the animation behavior and put your series of still images in there.

MotherHoose · January 2012

in general, a sprite is a character/item in a game that is not part of the static background.

we think of sprites as all possible orientations/sizes of a character/item (facing L; facing R; facing Down; facing Up; and individual placement of body parts for walk, run, jump; and facial expressions, etc. … or … door closed; door opened; treasure chest closed/opened; sword swung L/R; etc.)

a character/item is at least 1 sprite … and many are 8-50+ … the different iterations are placed in a single graphic file (a spriteSheet) that is referenced by the X,Y coordinates of those images when you program … not doable in GS, at this time

** 5 Steps to Sprite Animation **… with many stumbles

1. Open a NewImage in your graphics program:

       -use the size of the screen your sprite will be in  
              (use 72 dpi … I love working in 300 dpi but hate conversion distortions)
       -make the first layer a contrastingColor that will not be used in the sprite (magenta or white or use the scene’s BG image)
       -create a newLayer
       -Draw a character/item … do so in the initial view … and try to have it the approximate final-size (just zoom in for detail work)
       -Save the file 
       -then Save As a different name for your work-Ups  (EX: treasure Chest then treasureChest-WU)
       -make copies of the work-up files for each iteration of the sprite you will need

                      work only in your WU files!

2. Open the WU file:

       -duplicate the layer with the character/item on it … move this down lower than you bg-layer
       -place guides in the image (horizontal 50%; vertical 50%)
       -duplicate the imageLayer again
       -select the part needs changed using the selectionTool and float the selection 
            (EX: head; L arm; R arm; L leg; R leg for a character … lid for a treasureChest)
       -paste each selection in a newLayer and make that layer the image size

3. In eachLayer:

       -rotate or transform the part with perspectiveTool to the position you need it to be 
                     (you can use a grid in the image)
                     (you can hide the parts you are not working with)
              (make sure that the selection is correctly aligned to the lowerLayer image)
       -clean-up with new straighter lines 
       -do sizeCorrections 
       -do area colorCorrections
       -erase extraneous pixels
       -keep working through the layeredParts you need to change
       -Save the WU

(all this sounds so easy and is the hardest part!
before you touch the Pencil/Eraser to the image: make sure you are on the correctLayer!)

4. Duplicate that WU file

       -delete the layers you do not need
if things look good:
       -select the largest area that contains all of the image
       -resize the image using that selection’s W,H for your dimensions 
       -copy the content of one layer

5. Open a New Image (set W,H correctly as above)

       -paste the copied part 
       -Save as a .png

Repeat Step 5 for each layer.

import the images to GS!

Please Note:

-never, never ever, ever crop the parts/images … that changes the Xs
-take your time;  save and take breaks!
-simple L/R changes can be made with Horizontal Flips of the layers
(since characters do not turn on a dime the X  change is okay)
(if needed, you can just use the guides to realign the flipped layer)
-for an excellent example of arms/legs/body/head for running/jumping/standing  still L/R see the little blue guy in GS ‘Platformer Template’
-remember things in the back are shorter/narrower/darker than things in the front
-2-8 walking images are great for animation
       start with 2 images (charL; charR ) 
       add images in animationBehavior
       changeAttribute self.Linear Velocity.X To: 10/-10 … L/R (+/-) 
       Hey that looks pretty good!

you can make these steps in any graphics program that utilizes layers

Enjoy yourself!

MH

Explain animations?

Comments