Coordinate System for Hexile

Posted by fdg-developer on October 29, 2008
Developer Blog, Hexile

Our tile layout framework for Hexile is complete.  There were two noteworthy milestones in reaching this accomplishment.  First, the creation of the horizonal hexagon layout, supporting multiple layers, was finished.  The hurdle was about how to tackle multiple tiles of the same, irregular shape.  We decided on subclassing UIView (no, not CALayer) for the creation of our Tile object.  These UIView’s are out-of-the-box adept at handling internal animations and touch states.  Each one contains a UIImageView that holds the tile image.

Original dual-layered coordinate system

Original dual-layered coordinate system

Initially we thought memory management would be an issue, because of the bloat introduced when using over 100 UIViews on the stage at a given time.  Fortunately, a couple runs with Instruments proved that it was entirely possible.  The horizontal orientation was a bit tricky, but involved the following code to be placed prior to [self addSubview:aTile].

CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI/2);
Tile *aTile = [[Tile alloc] initWithCenterpoint:tileCP];
aTile .transform = transform;
[self addSubview:aTile];

The CGAffineTransform essentially rotated everything that we drew vertically to the appropriate orientation.  Of course, it set in stone the fact that the phone would have to be rotated counter-clockwise to play, and not clockwise.  This issue will be addressed after the first release.

Secondly, the hexagonal touch determination was quite a hurdle.  When a touch occurred, we performed the following steps:

  1. Broadcast to all tile layer containers, top-down, that a touch occurred.
  2. The tile layer containers broadcast to all tiles in it’s collection the touch point.
  3. Performed the following checks (per image below):
    1. A rectangular touch region was checked to see if the hexagon in questions could be affected (covers entire shape).
    2. If the touch was in the rectangular region, a second internal rectangle check was done to see if the touch occurred in the large center region of the hex (dark blue).
    3. If not, then (and only then) would TWO triangle hit tests be performed (left and right light blue).
Poly hit test explained

Poly hit test explained

The code used in the triangle hit tests calculated the barycentric coordinates of the triangles using vectors calculated from the triangle’s three points relative to the touch coordinate.

With this approach, resources were saved in NOT running full triangle hit tests on every hex.  Essentially, they only ran as a last resort.

Last 5 posts in Developer Blog

Share and Enjoy:
  • Digg
  • TwitThis
  • Technorati
  • del.icio.us
  • Mixx
  • Google
  • Facebook
  • MySpace
  • Furl
  • Print this article!

Tags: , , , , , ,