We can now show tile images on screen, but they are not moving. Whatever image is there at the start, will be at exactly same place half an hour later too. And that is not very exciting. World is not still image, world is full of things that move and change.
Basically by animating some sprite we will simply change its image after certain time. If the next image is slighlt different, human eye gets fooled and human brain thinks something is moving. Animated movies have fooled the eye and brain for long time. We can do same.
first we need to prepare some images that would make up the animation. Here the door will be made from 3 images:
When animated, these images make the door look like this:
As you can see, we have made 5 different doors using same 3 images. From left to right: first door is not animated at all, second door swaps images in order they appear in the tilesheet (3,4,5) after 10 frames. Third doors uses same images but swaps them with double speed. Fourth door uses images in opposite order (5,4,3,2) while keeping the empty frame for 100 frames and last one is mix of different images and different speeds.
myMap = [ [ 0, 0, 0, 0, 0, 0, 0, 0], [ 0,101,101,101,101,101,101, 0], [ 0,101, 0,101,101,101,101, 0], [ 0,101,101,101,101, 0,101, 0], [ 0,106,102,103,104,105,101, 0], [ 0, 0, 0, 0, 0, 0, 0, 0] ]; tileDesc = new Object(); tileDesc.tile102 = {sprNum:1}; tileDesc.tile102.anim = [3,10,4,10,5,10]; tileDesc.tile103 = {sprNum:1}; tileDesc.tile103.anim = [3,5,4,5,5,5]; tileDesc.tile104 = {sprNum:1}; tileDesc.tile104.anim = [5,10,4,10,3,10,2,100]; tileDesc.tile105 = {sprNum:1}; tileDesc.tile105.anim = [3,10,4,5,3,10,4,5,5,10,4,5,5,10,4,5]; tileDesc.tile106 = {sprNum:1, sprNum2:5}; animatedObjects = {};
sprNum is the non-animated background image. Animation is set in the anim array which holds image numbers to be shown and times to be counted before showing next image. For example anim = [3,10,4,10,5,10] means first we show image number 3 for 10 frames, then image 4 again for 10 frames and last is image 5 again for 10 frames. For tiles that are not animated, we simply provide sprNum2 for second image.
In the buildmap function we check if the tile has anim array:
if (declaredTile != null) { bmp = getImageFromSheet (curTile, declaredTile.sprNum); drawTile (curTile, bmp); curTile.sprNum = declaredTile.sprNum2; if(declaredTile.anim != null){ animatedObjects[tileName] = new Object(); var ob = animatedObjects[tileName]; ob.anim = declaredTile.anim; ob.xtile = j; ob.ytile = i; ob.sheet = tSheet; ob.ts = ts; ob.bmp = getImageFromSheet (ob, ob.anim[0]); ob.animCount = 0; ob.animTime = 0; moveObject (ob, {dirx:0, diry:0}); myParent.addChild (ob.bmp); } }
If anim array exist we create new object in the animatedObjects, then we set the position and get the bitmap. This new object will be added to the display separately from static background image.
From rungame function, call new animate function:
animate ();
The animate function changes image for each object within animatedObjects once the timer has counted up for the object:
function animate ():void { for each (var ob in animatedObjects) { ob.animTime++; if(ob.animTime >= ob.anim[ob.animCount + 1]){ ob.animCount += 2; if(ob.animCount >= ob.anim.length){ ob.animCount = 0; } ob.sprNum = ob.anim[ob.animCount]; ob.bmp.bitmapData = getImageFromSheet (ob, ob.sprNum).bitmapData; ob.animTime = 0; } } }
The variable animTime was set to 0 when the map was built. Now we add 1 to this counter and check if the time to pass has been reached using anim[ob.animCount + 1]. If the time is not up yet, there is no need to swap image. If timer has reached required count, we add 2 to the animCount and check if the end of anim array was reached. Then we get new bitmap image and reset time counter.
You can download the source fla with all the code and movie set up here.
This example shows how to animate hero. Hero will stop the animation cycle once no keys have been pressed and the animation has reached the end.
You can download the source fla for animated hero with all the code and movie set up here.
Next: Open the door.