{"id":548,"date":"2012-04-15T17:46:33","date_gmt":"2012-04-15T15:46:33","guid":{"rendered":"http:\/\/www.iuridium.com\/?p=548"},"modified":"2021-12-26T08:42:20","modified_gmt":"2021-12-26T07:42:20","slug":"how-to-create-box2d-collision-from-a-tiled-map","status":"publish","type":"post","link":"http:\/\/www.iuridium.com\/?p=548","title":{"rendered":"How to create Box2D collision from a Tiled Map"},"content":{"rendered":"

Initially I just implemented plain bounding box collision detection between my main game player and Tiled Map objects (obstacles on the map), but realized it is not perfect solution since obstacles are not always tailored by tile size. So, I decided to do it using Box2D. When I started working on it and searching for similar implementations or tutorials, I realized that there hard to find any explaining this very common requirement which motivated me to write this tutorial. Note that in my case collision means main game player hits the obstacles on the Map and explodes, not collision in sense of moving on some kind of platform. Also, Tiled Map is placed on top of Parallax, but should not be much of difference in case your Tiled Map is child of main scene layer whatsoever.<\/p>\n

This tutorial builds upon basics of using Box2D for collision detection covered in great Ray Wenderlich tutorial<\/a><\/u>, so I suggest reading it first. I will not talk here again about Box2D bodies and ContactListeners.<\/p>\n

First, you need to define your collision objects on Tiled Map using Object Layer (I am calling it CollisionOL).
\n\"\"<\/a><\/p>\n

On Tiled Map initialization, we need to create Box2D bodies for collision objects on Tiled Map we have just created on our Object Layer. Note that in my case Tiled Map is not sized over complete scene, and I have more then 1 Tiled Map on it, so needed to do some more calculations (getWorldPosition). If you are not using it on such way, your _point should be defined with x, y as got from Object Layer.<\/p>\n

\n
    \n
  1. \n
    –<\/span>(<\/span>void<\/span>)<\/span> drawCollisionTiles:<\/span>(<\/span>CCTMXTiledMap *<\/span>)<\/span>tiledMap<\/div>\n<\/li>\n
  2. \n
    {<\/span><\/div>\n<\/li>\n
  3. \n
     CCTMXObjectGroup *<\/span>collisionObjects =<\/span> [<\/span>tiledMap objectGroupNamed:<\/span>@"CollisionOL"<\/span>]<\/span>;<\/div>\n<\/li>\n
  4. \n
     NSMutableDictionary<\/span> *<\/span> objPoint;<\/div>\n<\/li>\n
  5. \n
     <\/div>\n<\/li>\n
  6. \n
     int<\/span> x, y, w, h; <\/div>\n<\/li>\n
  7. \n
     for<\/span> (<\/span>objPoint in [<\/span>collisionObjects objects]<\/span>)<\/span> {<\/span><\/div>\n<\/li>\n
  8. \n
      x =<\/span> [<\/span>[<\/span>objPoint valueForKey:<\/span>@"x"<\/span>]<\/span> intValue]<\/span>;<\/div>\n<\/li>\n
  9. \n
      y =<\/span> [<\/span>[<\/span>objPoint valueForKey:<\/span>@"y"<\/span>]<\/span> intValue]<\/span>;<\/div>\n<\/li>\n
  10. \n
      w =<\/span> [<\/span>[<\/span>objPoint valueForKey:<\/span>@"width"<\/span>]<\/span> intValue]<\/span>;<\/div>\n<\/li>\n
  11. \n
      h =<\/span> [<\/span>[<\/span>objPoint valueForKey:<\/span>@"height"<\/span>]<\/span> intValue]<\/span>; <\/div>\n<\/li>\n
  12. \n
      <\/div>\n<\/li>\n
  13. \n
      if<\/span> (<\/span>y < 0<\/span>)<\/span> y =<\/span> 0<\/span>;<\/div>\n<\/li>\n
  14. \n
       <\/div>\n<\/li>\n
  15. \n
      CGPoint _point =<\/span> [<\/span>self getWorldPosition:<\/span>x withY:<\/span>y withTiledMap:<\/span>tiledMap]<\/span>;  <\/div>\n<\/li>\n
  16. \n
      CGPoint _size  =<\/span> ccp(<\/span>w, h)<\/span>;  <\/div>\n<\/li>\n
  17. \n
      _point =<\/span> ccpAdd(<\/span>_point, ccp(<\/span>_size.x\/<\/span>2<\/span>, _size.y\/<\/span>2<\/span>)<\/span>)<\/span>;<\/div>\n<\/li>\n
  18. \n
      <\/div>\n<\/li>\n
  19. \n
      [<\/span>self makeBox2dObjAt:<\/span>_point withSize:<\/span>_size dynamic:<\/span>false<\/span>]<\/span>;<\/div>\n<\/li>\n
  20. \n
     }<\/span><\/div>\n<\/li>\n
  21. \n
    }<\/span><\/div>\n<\/li>\n
  22. \n
     <\/div>\n<\/li>\n
  23. \n
    –<\/span>(<\/span>void<\/span>)<\/span> makeBox2dObjAt:<\/span>(<\/span>CGPoint)<\/span>p withSize:<\/span>(<\/span>CGPoint)<\/span>size dynamic:<\/span>(<\/span>BOOL<\/span>)<\/span>d<\/div>\n<\/li>\n
  24. \n
    {<\/span> <\/div>\n<\/li>\n
  25. \n
     b2BodyDef bodyDef;<\/div>\n<\/li>\n
  26. \n
     <\/div>\n<\/li>\n
  27. \n
     if<\/span>(<\/span>d)<\/span> bodyDef.type =<\/span> b2_dynamicBody; <\/div>\n<\/li>\n
  28. \n
     bodyDef.position.Set(<\/span>p.x\/<\/span>PTM_RATIO, p.y\/<\/span>PTM_RATIO)<\/span>;<\/div>\n<\/li>\n
  29. \n
        <\/div>\n<\/li>\n
  30. \n
     CollisionGameObject *<\/span>obstacle =<\/span> [<\/span>[<\/span>CollisionGameObject alloc]<\/span> init]<\/span>;<\/div>\n<\/li>\n
  31. \n
     [<\/span>obstacle setType:<\/span>kGameObjectObstacle]<\/span>;<\/div>\n<\/li>\n
  32. \n
     obstacle.position =<\/span> p;<\/div>\n<\/li>\n
  33. \n
     bodyDef.userData =<\/span> obstacle;  <\/div>\n<\/li>\n
  34. \n
     <\/div>\n<\/li>\n
  35. \n
     b2Body *<\/span>body =<\/span> _world–<\/span>>CreateBody(<\/span>&<\/span>bodyDef)<\/span>;<\/div>\n<\/li>\n
  36. \n
     <\/div>\n<\/li>\n
  37. \n
     \/\/ Define another box shape for our dynamic body.<\/span><\/div>\n<\/li>\n
  38. \n
     b2PolygonShape dynamicBox;<\/div>\n<\/li>\n
  39. \n
     dynamicBox.SetAsBox(<\/span>size.x\/<\/span>2<\/span>\/<\/span>PTM_RATIO, size.y\/<\/span>2<\/span>\/<\/span>PTM_RATIO)<\/span>;<\/div>\n<\/li>\n
  40. \n
     <\/div>\n<\/li>\n
  41. \n
     \/\/ Define the dynamic body fixture.<\/span><\/div>\n<\/li>\n
  42. \n
     b2FixtureDef fixtureDef;<\/div>\n<\/li>\n
  43. \n
     fixtureDef.shape =<\/span> &<\/span>dynamicBox; <\/div>\n<\/li>\n
  44. \n
     fixtureDef.density =<\/span> 0<\/span>.0f;<\/div>\n<\/li>\n
  45. \n
     fixtureDef.friction =<\/span> 1<\/span>.5f;<\/div>\n<\/li>\n
  46. \n
     fixtureDef.restitution =<\/span> 0<\/span>; <\/div>\n<\/li>\n
  47. \n
     fixtureDef.isSensor =<\/span> true<\/span>;<\/div>\n<\/li>\n
  48. \n
     <\/div>\n<\/li>\n
  49. \n
     body–<\/span>>CreateFixture(<\/span>&<\/span>fixtureDef)<\/span>;<\/div>\n<\/li>\n
  50. \n
    }<\/span><\/div>\n<\/li>\n<\/ol>\n<\/div>\n

    That’s it. Now, the tricky part. You need to assure that your collision objects (obstacles) are moving with your scene layer, or in my case Parallax Node. So in your tick method, together with scene movement, we should move Box2D objects accordingly.<\/p>\n

    \n
      \n
    1. \n
      \/\/ parallax movement<\/span><\/div>\n<\/li>\n
    2. \n
      CGFloat velx =<\/span>  backgroundXVelocity *<\/span> aDelta;<\/div>\n<\/li>\n
    3. \n
      CGPoint newPos =<\/span> ccp(<\/span>currentBackgroundPos.x +<\/span> velx, currentBackgroundPos.y)<\/span>; <\/div>\n<\/li>\n
    4. \n
      [<\/span>parallaxBackground setPosition:<\/span> newPos]<\/span>;<\/div>\n<\/li>\n
    5. \n
       <\/div>\n<\/li>\n
    6. \n
      \/\/ moving collision objects as well<\/span><\/div>\n<\/li>\n
    7. \n
      [<\/span>self updateBoxBodyPosition:<\/span>aDelta vel:<\/span>velx]<\/span>;<\/div>\n<\/li>\n<\/ol>\n<\/div>\n

      Here I am distinguishing my main Game player (Manta) from obstacles. For obstacles, I am updating its world position according to scene movement and then updating the position of all Box2D objects based on the position of the Cocos2D sprites as is nicely explained in Ray tutorial<\/a><\/u>. Note that my world has only X movement. You will need to take care about Y axe as well.<\/p>\n

      \n
        \n
      1. \n
        –<\/span>(<\/span>void<\/span>)<\/span> updateBoxBodyPosition:<\/span>(<\/span>float<\/span>)<\/span>dt vel:<\/span>(<\/span>float<\/span>)<\/span>v<\/div>\n<\/li>\n
      2. \n
        {<\/span><\/div>\n<\/li>\n
      3. \n
         int32 velocityIterations =<\/span> 10<\/span>;<\/div>\n<\/li>\n
      4. \n
         int32 positionIterations =<\/span> 10<\/span>;<\/div>\n<\/li>\n
      5. \n
         <\/div>\n<\/li>\n
      6. \n
         _world–<\/span>>Step(<\/span>dt, velocityIterations, positionIterations)<\/span>;<\/div>\n<\/li>\n
      7. \n
         <\/div>\n<\/li>\n
      8. \n
         for<\/span>(<\/span>b2Body *<\/span>b =<\/span> _world–<\/span>>GetBodyList(<\/span>)<\/span>; b; b=<\/span>b–<\/span>>GetNext(<\/span>)<\/span>)<\/span> {<\/span><\/div>\n<\/li>\n
      9. \n
          if<\/span> (<\/span>b–<\/span>>GetUserData(<\/span>)<\/span> !=<\/span> NULL<\/span>)<\/span> {<\/span><\/div>\n<\/li>\n
      10. \n
           CCSprite *<\/span>sprite =<\/span> (<\/span>CCSprite *<\/span>)<\/span>b–<\/span>>GetUserData(<\/span>)<\/span>;   <\/div>\n<\/li>\n
      11. \n
           if<\/span> (<\/span>sprite !=<\/span> nil<\/span>)<\/span> {<\/span><\/div>\n<\/li>\n
      12. \n
                <\/div>\n<\/li>\n
      13. \n
            \/\/ Handling obstacle position according to Parallax movement<\/span><\/div>\n<\/li>\n
      14. \n
            if<\/span> (<\/span>sprite.tag !=<\/span> LevelLayerNodeTagManta)<\/span> {<\/span>     <\/div>\n<\/li>\n
      15. \n
             sprite.position =<\/span> ccpAdd(<\/span>sprite.position, ccp(<\/span>v, 0<\/span>)<\/span>)<\/span>;       <\/div>\n<\/li>\n
      16. \n
            }<\/span><\/div>\n<\/li>\n
      17. \n
            <\/div>\n<\/li>\n
      18. \n
            b2Vec2 b2Position =<\/span> b2Vec2(<\/span>sprite.position.x\/<\/span>PTM_RATIO, sprite.position.y\/<\/span>PTM_RATIO)<\/span>;<\/div>\n<\/li>\n
      19. \n
            float32 b2Angle =<\/span> -1<\/span> *<\/span> CC_DEGREES_TO_RADIANS(<\/span>sprite.rotation)<\/span>;     <\/div>\n<\/li>\n
      20. \n
            b–<\/span>>SetTransform(<\/span>b2Position, b2Angle)<\/span>;                    <\/div>\n<\/li>\n
      21. \n
           }<\/span>  <\/div>\n<\/li>\n
      22. \n
          }<\/span><\/div>\n<\/li>\n
      23. \n
         }<\/span>  <\/div>\n<\/li>\n
      24. \n
        }<\/span><\/div>\n<\/li>\n<\/ol>\n<\/div>\n

        I am sure there are other, maybe better, ways of doing it, so if you have any suggestion of improvement, or this tutorial is not clear enough for you, just write the comment. <\/p>\n

        I will not include sample project including this code since you could get complete iUridium source from here<\/a><\/u> \ud83d\ude09
        \n        .<\/a><\/p>\n\r\n\t

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