Tag Archives: animation

How to animate spots on Tilemap

This issue gave me a lot of headache, so just want to share it with you. If may help you, I will be more then happy šŸ˜‰

I have a large parallax background and just wanted to animate one spot on my map. What I needed you can see in iUridium video at this link (blinking hatch on Dreadnought map for spawning Torpedos). What I’ve used are Tiled and Zwoptex tools, but I can assume using other tools should make not much difference. In this procedure I asume you are familiar with these tools. So, what I did is as follows:

1. First, I have used some graphical editor and created animated frames (images) for the blinking hatch (actually, just changed the hatch color)

2. Then, I have used Zwoptex to create Texture Atlas containing animated frames (saved it as “blinkframes.plist”)

3. Using Tiled I created new Tileset with newly made Texture Atlas

4. I have created new Tilemap layer (let us call it “Blink”)

5. I selected initial image from my new Tileset and put it on new Layer on position where blinking hatch should appear

6. The most important, I have used following code to load Texture Atlas:

  1. [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:
  2.                     @"blinkframes.plist" texture:[tileMap layerNamed:@"Blink"].texture];

7. For animation, I have used standard way to animate hatch on my map (of course, do not forget to use SpriteFrames from Texture Atlas):

  1. float animationSpeed = 0.25;
  2. NSMutableArray *animationArray = [NSMutableArray array];
  3.  
  4. [animationArray addObject: [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"blink1.png"]];
  5. [animationArray addObject: [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"blink2.png"]];
  6. [animationArray addObject: [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"blink3.png"]];
  7.  
  8. CCAnimation *animation = [CCAnimation animationWithName:@"animation" delay:animationSpeed frames:animationArray];
  9. CCAction *action = [CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:animation restoreOriginalFrame:NO]];
  10.  
  11. CCTMXLayer *layer = [tileMap layerNamed:@"Blink"];
  12. CGPoint position = CGPointMake(9.0f, 8.0f);
  13.  
  14. CCSprite *tile = (CCSprite*) [layer tileAt:position];
  15. [tile runAction:action];

And, that’s it. I hope I was clear enough in this post, if not feel free to comment it.

.


Read full storyComments { 9 }