Tiles and cocos2d-x

Tiles and cocos2d-x
0.0 0


I’ve been doing some reading, and every tutorial I’ve come across that deals with cocos2d-x and tilemaps has something to do with tmx, or open source tilemap programs… However I’m currently trying to build myself an engine so I can create my own rpg, and I don’t want to use someone elses program to manage my sprites. I would much rather load all my 16x16 textures into a larger sheet of say 160x320 and then have cocos2d-x slice it up and place what tiles I want where I want them. I know how I would store what tiles would go where, and how I would place them, but I don’t know how to manipulate an image(slice/rotate/flip/etc).

I want to know if there’s a way to load a large tile sheet in png format, and slice it up into individual tiles using xy coords (example, split a 160x320 png file into 200 individual 16x16 tiles), then place the tiles using an array. I would much rather do this than store hundreds if not thousands of textures into individual files. Is there any way to do this as of now? If so, what functions should I be doing homework on?


I use CCSpriteBatchNode to do this with objects in the world (walls, trees, obstacles, etc). TexturePacker takes my many small files and packs them into a single image.

A repeating ground texture can be done using a power of 2 image. Example:
cocos2d::CCSprite* sprite = cocos2d::CCSprite::createWithTexture(pTexture, cocos2d::CCRect(0, 0, pTexture->getContentSize().width * repeatx, pTexture->getContentSize().height * repeaty));

cocos2d::ccTexParams params = {GL_LINEAR,GL_LINEAR,GL_REPEAT,GL_REPEAT};



Yeah, I understand how texture packer works… but what I want to do is take something like but in png format, and slice it up with code. Something similar to this http://www.lazyfoo.net/SDL_tutorials/lesson29/index.php.


Oh, well that is a deep subject that is not really related to cocos2d and you will most likely not find all of the information you are looking for on this forum.

A simple way to do it would be to create a key using an array of integer/string pairs, where the integer is the tile id and the string is the sprite frame name. Then create a 2d array of integers like the SDL example shows the “lazy.map” contents. Iterate over the 2d array building sprites with the frame name that was retrieved using the tile id.

The SDL tutorial you linked could very easily be adopted to cocos2d if you put a little effort into it.
Another good resource for this type of information is located here: http://www-cs-students.stanford.edu/~amitp/gameprog.html

Edit: If you are familiar with TexturePacker you will know that cocos2d “slices” the image using sprite frames defined in a plist.


Actually there is a simpler way : you can use CCSprite::setTextureRect to manually set which part of the sprite you want on the screen. Since it seems every tile have the same size, you can do a simple calculation to know their positions. You’ll probably have to be careful about a few more things :

  • using a CCSpriteFrame for performance
  • be careful the texture isn’t too big for some devices
  • transparency, I guess you have some on your png image :wink:

Unless you mean creating different png for each tile (as opposed to just displaying a tile at a time), which is not recommended, and a whole other problem.


Yeah I was looking at the ccsprite function and was thinking that settecturerect was probably the most efficient way to go. Normally I would use texture packer, but the game I’m building is more of an engine which i’ll pass on to some teammates and they will probably want to use sprite sheets rather than mess with a program that they don’t know.

Thanks for the info guys!