{"id":277,"date":"2011-08-31T19:37:01","date_gmt":"2011-08-31T17:37:01","guid":{"rendered":"http:\/\/www.iuridium.com\/?p=277"},"modified":"2012-01-14T10:06:54","modified_gmt":"2012-01-14T09:06:54","slug":"how-to-animate-spots-on-tilemap","status":"publish","type":"post","link":"https:\/\/www.iuridium.com\/?p=277","title":{"rendered":"How to animate spots on Tilemap"},"content":{"rendered":"

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 \ud83d\ude09<\/p>\n

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<\/u><\/a> (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:<\/p>\n

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

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

3. Using Tiled I created new Tileset with newly made Texture Atlas<\/p>\n

4. I have created new Tilemap layer (let us call it “Blink”)<\/p>\n

5. I selected initial image from my new Tileset and put it on new Layer on position where blinking hatch should appear<\/p>\n

6. The most important<\/strong>, I have used following code to load Texture Atlas:<\/p>\n

\n
    \n
  1. \n
    [<\/span>[<\/span>CCSpriteFrameCache sharedSpriteFrameCache]<\/span> addSpriteFramesWithFile:<\/span><\/div>\n<\/li>\n
  2. \n
                        @"blinkframes.plist"<\/span> texture:<\/span>[<\/span>tileMap layerNamed:<\/span>@"Blink"<\/span>]<\/span>.texture]<\/span>;<\/div>\n<\/li>\n<\/ol>\n<\/div>\n

    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):<\/p>\n

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

      And, that’s it. I hope I was clear enough in this post, if not feel free to comment it. <\/p>\n

      .<\/a><\/p>\n\r\n\t

      \r\n\t\tTweet<\/a>\r\n\t<\/div>\r\n\t\r\n\t