TiledBox is an interface between Tiled, Box2D, and Sparrow. It is capable of rendering graphics and Box2D world based on a TMX file.

TiledBox is pretty young right now. A lot of box2d functions are not yet support. The design of it is being based around a platform game.

Graphics rendering, body placement, collisions and movement are currently supported.

Implementation is very simple.

        mBXWorld = [BXWorld sharedWorldWithGravity:b2Vec2(0.0, 25.0) edgeInsets:BXWorldMakeEdgeInsets(-0.1, 10.0, -0.1, -0.1)];
        mBXWorld.autoAnimate = YES;
        mBXWorld.contactDelegate = self;
 
        SXTileMap *tileMap = [self tileMapForWorld:_world];
        //NSLog(@"%@", tileMap);
 
        SXTileViewport *viewport = [[SXTileViewport alloc] initWithLayer:[tileMap layerNamed:@"Background"]];
        [self addChild:viewport];
 
        mViewport = viewport;
 
        TATom *tom = [[TATom alloc] initWithPosition:CGPointMake((self.width / 2.0) - 15.0, 100.0)];
        tom.canJump = NO;
        tom.canMove = YES;
 
        SXTileViewport *levelViewport = [[SXTileViewport alloc] initWithLayer:[tileMap layerNamed:@"Forground"] detectObjects:YES];
        levelViewport.automaticallyDrawObjects = YES;
        levelViewport.delegate = self;
        levelViewport.actor = tom;
        [self addChild:levelViewport];
 
        mLevelViewport = levelViewport;
 
#if BX_DRAW_WORLD
 
        SXDebugDraw *debugDraw = [[SXDebugDraw alloc] initWithWorld:mBXWorld];
        [self addChild:debugDraw];
 
#endif

From there you just have to handle movement and collisions on your own.

TiledBox supports the drawing of interactive tile objects through call backs via a delegate:

 
- (SPDisplayObject *)displayObjectForObject:(SXTileObject *)object viewport:(SXTileViewport *)viewport {
    if ([object.name hasPrefix:@"Nut"]) {
        CGPoint location = [mLevelViewport locationInViewport:object.rect.origin];
 
        TACoin *coin = [[TACoin alloc] initWithPosition:location bodyType:BXStaticBody];
        coin.x = location.x;
        coin.y = location.y;
 
        return coin;
    }
 
    return nil;
}

The limitation is that the custom object must be placed in Tiled in a specific format under one of two distinct object groups.

DisplayObjects - Custom objects for display that will not interact with the player. (Currently only “Text” types are supported)

b2Objects - Custom objects that can interact with the player. (Currently only “StaticBody” types are supported)

When you layout your object group ensure you label the object group name and object types correctly. It is also important to make sure all your objects have a different name.

Here is an example of what the object output should look like:

<objectgroup name="DisplayObjects" width="100" height="10">
  <object name="Sign" type="Text" x="160" y="128" width="128" height="32">
   <properties>
    <property name="fontColor" value="ffffff"/>
    <property name="fontName" value="Verdana-Bold"/>
    <property name="fontSize" value="16.0"/>
    <property name="text" value="World 1-1"/>
   </properties>
  </object>
  <object name="Nut6" type="Callback" x="667" y="183" width="16" height="16"/>
  <object name="Nut2" type="Callback" x="708" y="135" width="16" height="16"/>
  <object name="Nut3" type="Callback" x="734" y="121" width="16" height="16"/>
  <object name="Nut4" type="Callback" x="762" y="132" width="16" height="16"/>
  <object name="Nut5" type="Callback" x="787" y="150" width="16" height="16"/>
  <object name="Nut1" type="Callback" x="685" y="159" width="16" height="16"/>
  <object name="Nut7" type="Callback" x="849" y="94" width="16" height="16"/>
  <object name="Nut8" type="Callback" x="893" y="79" width="16" height="16"/>
  <object name="Nut9" type="Callback" x="921" y="79" width="16" height="16"/>
 </objectgroup>
 <objectgroup name="b2Objects" width="100" height="10">
  <object name="Ground1" type="StaticBody" x="0" y="224" width="672" height="96"/>
  <object name="Ground3" type="StaticBody" x="768" y="192" width="224" height="128"/>
  <object name="Platform1" type="StaticBody" x="832" y="128" width="64" height="16"/>
  <object name="Platform2" type="StaticBody" x="880" y="112" width="80" height="16"/>
  <object name="Ground5" type="StaticBody" x="1216" y="192" width="128" height="128"/>
  <object name="Ground4" type="StaticBody" x="1088" y="224" width="128" height="96"/>
  <object name="Platform3" type="StaticBody" x="1024" y="80" width="32" height="16"/>
  <object name="Platform4" type="StaticBody" x="1088" y="112" width="32" height="16"/>
  <object name="Platform5" type="StaticBody" x="1152" y="112" width="32" height="16"/>
  <object name="Platform6" type="StaticBody" x="1216" y="128" width="32" height="16"/>
  <object name="Step2" type="StaticBody" x="1200" y="192" width="16" height="32"/>
  <object name="Step1" type="StaticBody" x="1184" y="208" width="16" height="16"/>
  <object name="Ground6" type="StaticBody" x="1472" y="224" width="160" height="96"/>
  <object name="Ground7" type="StaticBody" x="1952" y="256" width="96" height="64"/>
  <object name="Ground8" type="StaticBody" x="1952" y="128" width="192" height="32"/>
  <object name="Ground9" type="StaticBody" x="2240" y="224" width="128" height="96"/>
  <object name="Ground10" type="StaticBody" x="2496" y="256" width="96" height="64"/>
  <object name="Ground11" type="StaticBody" x="2592" y="160" width="192" height="160"/>
  <object name="Ground12" type="StaticBody" x="2784" y="224" width="64" height="96"/>
  <object name="Platform7" type="StaticBody" x="1664" y="176" width="64" height="16"/>
  <object name="Platform8" type="StaticBody" x="1760" y="160" width="64" height="16"/>
  <object name="Platform9" type="StaticBody" x="1888" y="144" width="32" height="16"/>
  <object name="Platform10" type="StaticBody" x="1856" y="256" width="64" height="16"/>
  <object name="Platform11" type="StaticBody" x="2176" y="128" width="32" height="16"/>
  <object name="Platform12" type="StaticBody" x="2112" y="256" width="32" height="16"/>
  <object name="Platform13" type="StaticBody" x="2208" y="256" width="32" height="16"/>
  <object name="Platform14" type="StaticBody" x="2912" y="240" width="32" height="16"/>
  <object name="Platform15" type="StaticBody" x="3008" y="240" width="32" height="16"/>
  <object name="Platform16" type="StaticBody" x="3072" y="208" width="32" height="16"/>
  <object name="Platform16" type="StaticBody" x="3136" y="176" width="32" height="16"/>
  <object name="Step3" type="StaticBody" x="2560" y="224" width="32" height="32"/>
 </objectgroup>

Here is the end result:

Note: The below screen shot is with box2d debug draw enabled.

• 2013/02/06 03:29: First public version

https://github.com/matt62king/TiledBox

Source includes the box2d source as well

No comments so far. Feel free to edit this part of the page.