So as I started working with my animation script I found that it lacked some functionalities. So for that reason I added 2 functions to the script. I’m going to explain it briefly and show some example code on how I worked it.
First off, here are some new variables
New function nr 1: “TriggerEvent”;
This function allows you to trigger an event wherever you want in your animation. Imagine you have a character swinging a sword. You’re going to want to trigger a damage event when the sword is hitting the monster. Which is most likely in the middle of the animation. You just can’t get an awesome effect when showing the damage done after the whole animation looped.
This function will need 2 vars from you. The x and y index of your sheet. So if you would use (2, 3), that would mean that it selects the frame that is on column 3 and row 4. Remember that you start at (0, 0). So yeah, that’s it. Two if statements to make sure it doesn’t repeat it self on an ENTER_FRAME event.
New function nr 2: “changeSheet”;
This function allows you to create just 1 sheetAnimation in your script and then change the sheet of that sheetAnimation instance. Although you now need just 1 instance, you still need to specify all the vars for the new sheet. So it has pretty much the same constructor as the class’. Not much new here.
It does allow you to say if the image should be mirrored. Imagine you have a walking character animation, you’d only have to make the sheet for making him walk 1 direction. The script mirrors the copied frame, so you don’t have a mixed up order when mirroring the entire sheet.
Example Code
After embedding images initializing vars I added an ENTER_FRAME event. Picture this to be a monster Class which has the animation looping on this ENTER_FRAME event.
greenbee is my animation object. Both new function have a return state. Which return true when they are done. So put them in an if statement and you can do whatever you want when it returns true.
[sheetAnimation.as]
I hope you enjoy my script. Hope it is more useful this way and if you have any questions, just email me or reply here.
Well I’ve found out how to animate with animation sheets. It wasn’t as hard as I had expected, but it just needs a little bit of research. Luckily there were people before me to figure it out. I took this information and scripted a class which is fairly easy to use with every size animation sheet.
And Now I’m going to share my class with you .
So this was the result with my animation sheets. As you can see, I am not that much of an 2D artist. That being said, I am going to do some practice on this, because I am going to need a lot of 2D art.
These were my sheets:
Sheet size: 150×300
Tile size: 30×60
These look a little bit weird, because I used a .PNG for transparency, which is what you going to want to use to.
Sheet size: 256×256
Tile size: 64×64
What’s the advantage of this class?
You can just import it into your project, make an instance of it, specifies some variables and your done.
So how did it work?
Let’s break it down.
This is from my sheetAnimation.as
The variables
What do we need them for?
animationSheet:Bitmap; => The sheet you have made for animation.
tileWidth:int; => We need the width for making the canvas that is eventually displayed on the screen.
tileHeight:int; => Same as tileWidth.
xTilesLength:int; => We need to specify the width of a single tile, this way we know what how much the canvas has to shift to get to the next animation tile.
yTilesLength:int; => Same as xTilesLength.
animationXIndex:int; => We need this to tell the script where to place the canvas we are going to trace out of the sheet.
animationYIndex:int; => Again, same as animationXIndex.
animationCount:int; => We need this for the delay between each tile.
animationDelay:int; => We also need this for the delay. The higher this number is, the longer the delay is. You might want to play with this number to get to the desired speed.
canvasBD:BitmapData; => This is the canvas we are going to use to more or less copy the tiles from the sheet.
canvasBitmap:Bitmap; => We copy the the bitmap data from canvasBD to this Bitmap, because BitmapData is not a Display Object, which we need for the addChild function.
tileSheet:BitmapData; => We need to convert the animationSheet to BitmapData, otherwise we can’t work with it.
tileRect:Rectangle; => This will be the actual rectangle of which we are going to copy the image tile.
tilePoint:Point; => We don’t really need this, but the copyPixels function needs a point. But we just want to put it to 0, 0 so we have a clean orgin. We specify the x and y within the contructor.
Let’s start with the constructor. As you can see it need quite some variables and it’s up to you to analyse these from your animation sheet.
x:Number => The x on your stage.
y:Number => The y on your stage.
tileWidth:int => The width of your sprite tile.
tileHeight:int => The height of your sprite tile.
xTilesLength:int => The amount of tiles on the x-axis.
yTilesLength:int => The amount of tiles on the y-axis.
animationSheet:Bitmap => the bitmap of your tile sheet. (I will explain how to embed these further on)
animationDelay:int => the animation delay which specifies the speed of your animation.
What else is in there?
Just assigning all vars from the constructor in the class’.
Besides that only initializing the canvass’.
Then two more very important thing;
addChild the canvasBitmap. Because this is what we are actually displaying.
Add an eventListener, which has to be an ENTER_FRAME event. Because we are going to need to update each frame.
Now what are we going to do each frame?
First of we are going to work with the delay. Check if the counter is the same as the delay, then we are going to shift the rectangle to the next tile, else we are going to increase the counter.
Second, if we are at the point of shifting a tile. We need to upgrade the animationXIndex, so we shift 1 tile to the right. and reset the counter.
Then we check if we are at the end of the amount of tiles and the x-axis. If so, we need to reset the animationXIndex so we start at the leftmost tile again. But we need to be a tile lower, so we increase the animationYIndex, so that we shift down.
And finally when we reach the end of the y tiles reset the y and x animation index, so we get back to the start.
Now we have told the script what tile to look at, we need to tell it where that tile is.
So because we are keeping track of the x and y index of the rectangle, we can simply multiply them with the width and the height of the tile and we’re done.
And that’s pretty much all there is to it. Only thing left to do is create an instance of the class in you’re code.
So here is an example of the Main code calling the 3 animation from the above examples.
There’s one thing that needs to be done before making the instance and that is getting the image into the code. Well I work with a program called ‘Flash Develop’, which doesn’t offer an interface like Adobe Flash Professional does. So I have to embed the image into the code which works as followed:
[Embed(source="../lib/funnyGuy1.png")]
public var funnyGuy1C:Class
public var funnyGuy1Img:Bitmap = new funnyGuy1C();
So yeah, that’s all there needs to be done to animate. All you need now is the sheetAnimation.as and your animation sheets. Download the class below and have fun animating!
I have been working in a inventory, equipment and status system for a rpg type game. I programmed this in AS3 air. At first I used regular AS3, but when I found out there was almost no way to use the right mouse button for scripting, I decided to convert to AIR.
So air player will be needed to install this game. I’ll post some screen shots for now, because it’s not all that spectacular yet. In my opinion this inventory system is pretty much done. So I will soon start with scripting some gameplay, which should be a lot of fun!
But first I am going to look in to animations. I found a tutorial on animating with an animation sheet. So that will be my first step. Might be useful to make a class for animation so it can be implemented into other classes, rather than scripting it into each class
.
Item information 
Status points also effect health and magic.
More strength allows you to carry more items.
