Home > Cocos2dx > Cocos2dx Extension – Vertically and Horizontally flipped Tiles

Cocos2dx Extension – Vertically and Horizontally flipped Tiles

Hey guys,

for a new game i am currently working on, I decided to use the cocos2dx library in combination with the tiled level editor. After writing several 2d engines from scratch I decided that it is just too much work to get it really really right (especially with a this cool features, that modern games must have) and that I actually wanted to start making a game. The library its just awesome and was currently released as version 1.0.

One thing I found out yesterday that there was no support for flipped tiles when exporting a map from the Tiled Map Editor. I think that this was a big shame and digger into the source codes of both, Cocos2dx and Tiled to find out the right way to to implement it. You can get the final result here:

https://github.com/MarkusPfundstein/Cocos2DX-Extensions

It was actually pretty easy. Tiled Editor stores all maps in TXML format which is actually a dialect of the XML format. When saved uncompressed, you can see that maps are stored like this:

<layer name=”Tile Layer 1″ width=”5″ height=”5″>
<data>
<tile gid=”1″/>
<tile gid=”2147483649″/>
<tile gid=”0″/>
<tile gid=”2147483650″/>
<tile gid=”2″/>
<tile gid=”1073741825″/>
<tile gid=”3221225473″/>
<tile gid=”0″/>

In this example, the tile vids with 1 and 2 are the original tiles 1 and 2 unflipped. This high integer values are the tile values for flipped tiles.

I found out, that the guy who implemented flipping in the Tiled Editor uses two bit flags to check wether a tile is flipped or not.

Horizontally Flipped = 0x80000000

Vertically Flipped = 0x400000000

So in order to determine if a tile is flipped we just have to check against these two flags and than clear the gid. Pretty easy πŸ™‚

To use it, download the two source files and replace them with those in you current cocos2dx library. It will work out of the box (supposed that you don’t have made any changes on your own) πŸ™‚

The only affected cocos2dx method is CCTXMLLayer::appendTileForGid( … )

It is a very basic implementation until now and supports the flipping of tiles at the parsing stage. If you want to change or add tiles at runtime you are on your own πŸ™‚ But I believe most of us won’t do it.

Have fun!

Markus

Hint 1: Using flipped tiles reduces the size of your tile set dramatically and allows for more proper level design.

Hint 2: Press ‘x’ or ‘y’ to flip on the respective axles.

Pictures of my new game:

  1. October 20, 2012 at 7:02 am

    How can i make a tile as a box2d body?

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: