This Is A Custom Widget

This Sliding Bar can be switched on or off in theme options, and can take any widget you throw at it or even fill it with your custom HTML Code. Its perfect for grabbing the attention of your viewers. Choose between 1, 2, 3 or 4 columns, set the background color, widget divider color, activate transparency, a top border or fully disable it on desktop and mobile.

This Is A Custom Widget

This Sliding Bar can be switched on or off in theme options, and can take any widget you throw at it or even fill it with your custom HTML Code. Its perfect for grabbing the attention of your viewers. Choose between 1, 2, 3 or 4 columns, set the background color, widget divider color, activate transparency, a top border or fully disable it on desktop and mobile.

2d Isometric land – breaking out of the grid

Home/Geometry, Graphics, Physics, Silverlight, Technical/2d Isometric land – breaking out of the grid

2d Isometric land – breaking out of the grid

Submit to StumbleUpon Share

Hello and welcome to Wildbunny blog!

In this first instalment i'm going to talk about bringing some simple technology to isometric 2d games to help them break out of the regular grid look which afflicts so many 2d games today,  on Facebook or otherwise.

Isometric Farmville

I've picked on Farmville here, but in fact even our own game, PuzzleShare is guilty of the same crime.

Why the grid?

You might ask why so many games choose the regular grid. The principle reason is that its very easy to work with - you just render everything top to bottom in screen-space to depth sort it, all the tiles are the same size so making new art isn't a problem and it makes mouse picking easy for users because everything is regular. The only real problem is how to deal with height, but very few games on Facebook even bother to tackle this problem.

So, why change?

The principle reason to stop using a regular grid is differentiation. If you can make your game look fresh and different by brining a new design ethic it will stand out from the crowd and if you do it right, it can look a whole lot better than it would have.

Small world graphics - lost garden

This is a nice example of what you can achieve if you do a little extra work, taken from the excellent LostGarden.

Break out

Of course, the real question is how do you approach this? Looking at the above image, its clear to see that the landscape could be composed of lots of overlapping circles (with a slight vertical squish applied). Seems simple enough, right?

Figure 5

The real problem, though is how to deal with collision against the interior of the set of overlapping circles. You can't just use a simple circle vs circle routine in reverse because you run into all sorts of nasty problems where the circles overlap.

Figure 1

Consider the case in Figure 1, where the character (represented by the green circle) is intersecting the land (defined by the union of circles A and B). In this case the character will be compelled to remain within B (as its closest to the character), but as the character travels up the map, there will be a point where the character is closer to A, and it will snap inside of A in a discontinuous and jarring manor.

What you actually want in this case is a smooth transition as the character is repelled from the left apex of the union of A and B - appearing to pivot around the apex.

Figure 2

Looking at Figure 2 you can see what i was getting at - the left apex of the union of the two circles appears smooth and rounded when seen from the POV of collision with the character. You may have noticed the character is now a tiny green point (it should be zero radius, actually but for the purposes of illustration its just small), and that the walls of the union of circles have expanded by exactly the radius of the character. Whats going on?

The Minkowski difference

Ok, so what happened in Figure 2 was we started to look at the problem a little differently. We've discarded the interior of the union of the circles completely, we shrank the character down to a point with zero radius and at the same time enlarged the boundary of the circles by the radius of the character.

This enables us to see the problem for what it really is using something known as the Minkowski Difference. In reality the problem boils down to being able to compute the distance between the character and the circular arc lengths which comprise the exterior of the union of circles.

Once you can compute the distance, you can tell if the character is intersecting the circles and also compute the Penetration Distance and resolution vector which allows you resolve the collision.

Figure 3

Figure 3 shows the nearest distance from the character to the circle interior d and the radius of the character r. If d is less than r there is a collision, and furthermore, the penetration distance is r-d, and the normal to use is simply the normalised vector from the closest point on the boundary to the character centre.

Distance to circular arc-length

So, how do i compute the distance from a point to a circular arc-length, you ask? Well, its actually quite easy. There are only two cases to deal with:

Figure 4

Case a, where the point lies inside 'pie' which is defined by the centre of the circular arc-length and the arc start and end. This is simple enough to compute; just project the point a onto the arc length by computing the vector from the centre of the 'pie' (which is actually the circle's centre before it turned into an arc-length), to the candidate point a, normalise and multiply by the radius. Once you have the point on the arc, just subtract from a and compute the length.

Case b, where the point lies outside. This is even easier; its always the distance to the closer of the two end-points of the arc!

Next time...

Ok, so you now know how to find the distance to an arc-length, calculate the normal and penetration distance, and resolve the collision!

Next time i will talk about how to actually generate the set of arc-lengths from a bunch of overlapping circles, and will provide full source code!

In the mean-time, please check our new game, PuzzleShare...

Have fun,

Cheers, Paul.

Submit to StumbleUpon Share
By | 2012-11-21T09:42:25+00:00 February 23rd, 2011|Geometry, Graphics, Physics, Silverlight, Technical|12 Comments

About the Author:

A games industry veteran of ten years, seven of which spent at Sony Computer Entertainment Europe, he has had key technical roles on triple-A titles like the Bafta Award Winning Little Big Planet (PSP), 24: The Game (PS2), special effects work on Heavenly Sword (PS3), some in-show graphics on the BBC’s version of Robot Wars, the TV show, as well as a few more obscure projects.   Now joint CEO of Wildbunny, he is able to give himself hiccups simply by coughing.   1NobNQ88UoYePFi5QbibuRJP3TtLhh65Jp


  1. […] This post was mentioned on Twitter by alexsink and Jochen Heizmann, HN Firehose. HN Firehose said: Breaking Out of the Grid in 2D Isometric Games: […]

  2. raigan February 24, 2011 at 7:35 pm - Reply

    Awesome.. I can’t wait for part 2! 🙂

  3. Andre February 26, 2011 at 5:36 am - Reply

    Hi.. the way i did it was check if the circle was in another circle.. and then return true.

    Otherwise I’d store the intersection points of where the circle collided. If ay of those points was outside a circle the collision would be false.

    Not sure how this will paste 😐

    for(i = 0; i < mLandArray.length; i++) { var result:Object = circle.IntersectsCircleObject(mLandArray[i].circle); if(result.type == "Inside") { return true; } else if(result.type == "Intersection") { pointsArray = pointsArray.concat(result.points); } } if(pointsArray.length > 0) {

    for(i = 0; i < pointsArray.length; i++) { var j:int; for(j = 0; j < mLandArray.length; j++) { var circle:Circle = mLandArray[j].circle; if(!circle.ContainsPoint(pointsArray[i].x, pointsArray[i].y)) { return false; } } } } return true;

  4. Jon Watte February 26, 2011 at 10:46 pm - Reply

    Why wouldn’t you just build your 2D level like any other level? Use a ground plane, obstacles (placed in 2D), boundaries (expressed as polyline outlines, meshes, or whatnot), and run collision detection like any other “real” game?
    As soon as the grid is not good enough, I’ve found that just going “full level” is by far the most straightforward.

    • paulfirth February 28, 2011 at 10:07 am - Reply

      Hi Jon,

      This is what i was trying to describe in the article – the boundaries you mention are the exterior of the union of ground circles… So in a very real sense it is ‘full level’ as you describe 🙂

      Hopefully it will become a bit clearer as i delve into parts 2 and 3 (part 2 on the way)…

      Cheers, Paul.

  5. […] PuzzleShare ← 2d Isometric land – breaking out of the grid […]

  6. Easetamma March 10, 2011 at 6:03 am - Reply

    Nice site . 🙂

  7. Tactireerceli March 14, 2011 at 4:33 pm - Reply

    Apple now has Rhapsody as an app, which is a great start, but it is currently hampered by the inability to store locally on your iPod, and has a dismal 64kbps bit rate. If this changes, then it will somewhat negate this advantage for the Zune, but the 10 songs per month will still be a big plus in Zune Pass’ favor.

  8. […] you actually need to do in order to collide with a landscape composed of overlapping circles in part 1 and part […]

  9. […] 2d Isometric land – breaking out of the grid […]

  10. Lianne Comiskey April 8, 2011 at 4:34 pm - Reply

    I wanted to let you know, I do think there exists a problem with your RSS feed, it isn’t showing right in my Feed reader. It simply began occurring yesterday, did you adjust some thing on the webpage?

    • Paul Firth April 8, 2011 at 4:38 pm - Reply

      I didn’t know i had an rss feed! 🙂

Leave A Comment