How to animate spots on Tilemap

by • on 31. Aug, 2011 • in Articles

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.

.


Tags: , ,

9 Responses to “How to animate spots on Tilemap”

  1. Devin Lisle 05. Sep, 2011 at 11:51 am #

    Hi, congratulations too this page owner. It’s great.

  2. moods 12. Sep, 2011 at 9:42 am #

    Great post.

    Suggestion:
    Can you make another tutorial explaining how to make a wheel of fortune (a rotary picker/chooser)?

    like this:

    http://goo.gl/WPJLe

    Thanks!!

  3. Donna 20. Sep, 2011 at 8:03 pm #

    Much appreciated for the information and share!

  4. iphone 5 25. Sep, 2011 at 1:08 am #

    Greetings! Extremely beneficial assistance on this short article! It truly is the small modifications that make the greatest adjustments. Many thanks a whole lot for sharing!

  5. freeipad2specs 30. Sep, 2011 at 9:14 am #

    Outstanding post however I was wondering if you could write a litte more on this topic? I’d be very thankful if you could elaborate a little bit further. Cheers!

  6. Ranzini 03. Oct, 2011 at 11:32 pm #

    Very interesting info!Perfect just what I was searching for!

  7. free apple iphone 4s 05. Oct, 2011 at 2:35 am #

    Hi! I could have sworn I’ve been to this website before but after reading through some of the post I realized it’s new to me. Nonetheless, I’m definitely glad I found it and I’ll be book-marking and checking back often!

  8. odszkodowania uk 09. Jan, 2012 at 7:38 am #

    Very nice tips…

Leave a Reply

You must be logged in to post a comment.