Generate Tilemap Physics Collision Shapes with Cocos2D

On June 1, 2013, in idevblogaday, by Steffen Itterheim

Screen Shot 2013-05-31 at 00.59.01 You have a tilemap and you want physics collisions on it? The solution seems obvious: create a rectangle shape for every blocking tile.

But ouch! This solution is not just hugely wasteful and unnecessarily slows down the physics collision code, it also introduces the well known problem of characters getting stuck even on flat surfaces.

This is in particular a problem for Box2D because its collision mechanic doesn’t work well with flat surfaces subdivided into smaller segments (rectangle shapes in this case).

A workable but still very awkward solution to work around this behavior is to create characters with bevelled edges at the character shape’s bottom at the risk of bopping characters as they walk about the map.

Lupines in the Moore Neighborhood

A good solution to generate physics collisions is to implement the Moore Neighborhood algorithm to generate chain shapes which are more suitable for tilemap collisions. The downside is that adding or removing individual blocking tiles at runtime requires updating the shapes – this is not implemented in this project.

Every flat surface, no matter how many tiles form the surface, will then consist of only one straight collision segment. Here’s a quick demo video of the project discussed in this post that shows the algorithm at work and the resulting “game”:

Continue reading »

Chapter 12 – Physics Engines: Box2d & Chipmunk

This chapter gives you an introduction to physics engines and what they can do. Since cocos2d supports two physics engines out of the box, Box2d and Chipmunk, I will explain how to do the same things in both physics engines and I aim to cover at the very least the basic elements like shapes, joints and collisions.

Because choosing either physics engine is often done on subjectively. Some developers may prefer the Object-Oriented C++ nature of Box2d while others may feel more comfortable with the C-based interface of Chipmunk (*). At the very least I want to present both and show their strength and weaknesses by example.

(*) Note: there is an Objective-C binding for Chipmunk made by Howling Moon Software. It’s free to use on Mac OS X and iPhone Simulator but costs $200 per title if you want to publish to the App Store. I believe that most cocos2d developers wouldn’t mind spending up to $30 on a tool or library that is essential, that is why I included Zwoptex and Particle Designer in the book. This product however is in a different ballpark price-wise.

On the other hand, the free Chipmunk SpaceManager also aims to offer better integration with cocos2d-iphone and promises a simplified Objective-C interface. I will have a look at the SpaceManager and then decide whether I’ll discuss it in the book, I say it’s likely. Another physics tool that has gotten some attention is the VertexHelper which I’ll at the very least will refer to.

Summary of working on Chapter 11 – Isometric Tilemaps

Isometric tilemaps rock! That is, if you can get all those nasty issues solved. Even though all the issues like graphics glitches at tile edges, correct z-ordering and the proper blend functions have all been discussed and solved by now, it’s still very challenging to get an isometric tilemap on the screen and a player walking over it, with no glitches at all. I believe this chapter will give a lot more developers the chance to delve into the exciting world of isometric tilemaps. I too learned a lot making this example game, and part of me now wants to write an old-school isometric RPG game. Again. For the n-thousand-th time. Sigh. Some day, some day …

Anyhow, the project I made over the course of this chapter features properly z-ordered tiles and a player sprite, which moves tile-by-tile over the isometric tilemap. You control the player by simply touching in the direction relative to the player that he should move to. One specialty of this project is that the player always remains centered on the screen, he doesn’t move at all! It’s simply the tilemap that is moved under him, which makes a couple things much easier.

Nevertheless you also learn how to find the tile coordinates for a tile that you touch on the screen. And how to avoid the isometric, diamond-shaped tilemap to show the “outside” of the world by adding a border around the tilemap and limiting movement to the playable area. Similarly, the blocking tiles like walls, mountains and houses all block the player’s movement by drawing over the map with a collision layer and a tile whose property is set to “block_movement”.

In the meantime, if you want to gain a better understanding of how isometric tilemaps work, I can recommend the Isometric Projection article by Herbert Glarner. And in case you’re wondering how I suddenly and dramatically increased my art skills, I’ll be honest: I didn’t. I used the terrific tilesets from David E. Gervais which are published under the Creative Commons License. It means you are free to to copy, distribute and transmit those tiles as long as you credit David Gervais as their creator. You can download these tiles from Pousse Rapiere’s website or you can directly download them all at once as 6.4 MB ZIP file here. If you like to hear it from the man, here’s a bit of insight and history from David explaining how these tiles were made.

cocos2d Book, Chapter 11: Isometric Tilemaps

On September 6, 2010, in Announcements, book, cocos2d, by Steffen Itterheim

Chapter 11 – Isometric Tilemaps

After Chapter 10 introduced Tiled and working with orthogonal tilemaps it’s time to step things up a notch and delve into isometric tilemaps. It starts with basic principles of isometric tilemaps and editing before going into detail on what’s different code-wise compared to orthogonal tilemaps. Obviously this has to include how to determine which isometric tile was touched and how to move a character across an isometric tilemap.

Summary of working on Chapter 10 – Working with Tilemaps

This chapter introduces you to tilemaps, what they are and what benefits and tradeoffs they provide. Without a doubt the most popular editor for tilemaps for use with cocos2d is the Tiled Map Editor. I explain how to use it over several pages before going into code and actually loading your first tilemap using cocos2d’s CCTMXTiledMap class.

Loading a tilemap is just half the story. You’ll also learn how to manipulate the tilemap layers and individual tiles, as well as scrolling the tilemap and centering the touched tile on screen. The code takes care that the tilemap is never scrolled outside its boundaries.

While working with the Object Layer feature of Tiled (CCTMXObjectGroup in cocos2d) I noticed it’ll be handy to display the rectangles on the screen. So you’ll also learn a little custom drawing using OpenGL ES respectively cocos2d’s wrapper functions in CCDrawPrimitives.

Tagged with:  

cocos2d Book, Chapter 10: Working with Tilemaps

On August 28, 2010, in Announcements, book, cocos2d, by Steffen Itterheim

Chapter 10 – Working with Tilemaps

This chapter dives into the depths of the CCTMXTileMap class and how to create, iterate and modify tilemaps in code, including isometric and hexagonal tilemaps. Of course there will be an introduction to the Tiled Map Editor as its the primary tool to create TMX tilemaps that cocos2d supports.

The chapter 11 will then use this newfound information and I’ll walk you through making a scrolling tilemap game, since simply loading, modifying and displaying a tilemap would just be half the story.

Summary of working on Chapter 9 – Particle Effects

This chapter was fun. Particle effects are fun indeed. That is, unless you need to tweak them in code only. I did do that an did my best to describe what each CCParticleSystem property does to a visual effect, although some things you’ll have to see for yourself. You’ll find a lot of detailed information on how to setup or simply modify a particle system in code and a couple tips for designing good particle effects.

Of course with Particle Designer everything changes. Designing a cool particle effect suddenly goes from a treadmill to a mesmerizing activity that you can waste countless hours on. If you check Particle Designer’s Online Library you’ll find four of the Particle Effects that I designed and submitted, starting with the “Colorful Burst” effect. Have a look!

Obviously these cool effects needed to go somewhere, so I added them to the Shoot ’em Up game as you can see in the screenshot (the boss just exploded into purple smudge). Along the way you learn how to load the particle effects created by Particle Designer of course.