Monday, November 9, 2009

Geomap Demo

Download (7.5Mb)


Included with the program is the Microsoft XNA 3.1 redistributable. This MUST be installed in order for the demo to run.
  1. Unzip the contents of this file into the directory of your choosing
  2. Run xnafx31_redist.msi (XNA 3.1 Redistributable, included in download)
  3. Ensure that your DirectX is up to date via Windows Update. DirectX 9.0c redistributable may be required as well if you don't have it already (if you've installed a game in the last few years, you probably have it).
  4. Run Kingdom\Kingdom.exe to run the demo


  1. A video card supporting Shader 2.0 (pretty much any video card in the past 5 years)
  2. XNA 3.1 Redistributable
  3. DirectX 9.0c Redistributable
XNA 3.1 Redistributable Information

The Demo

This executbale loads a geodesic grid containing 642 cells. 12 of these are pentagons while the rest are hexagons. The grid is derived from a subdivided icosahedron. While I am able to generate grids of arbitrary size, that's not demonstrated here (grid is built as an XNA Content Pipeline project, not at run time)


A simple first person camera is implemented. Use the keyboard arrow keys and right mouse button to move the camera. Shift + up/down will move the camera vertically.
Left clicking tiles on the map will increment their texture page.


Thanks for checking out the demo. Feel free to contact me either on Facebook or at
I'll start putting together a roadmap for future development soon.

Friday, November 6, 2009

Geodesic Map - 1 - Generating a geogrid.

So I wanted to tinker with a hex grid. I had a few ideas, but nothing really took hold until the thought of projecting the hex grid around a sphere occured. Was such a thing possible? Yes, sort of. How would the mesh be generated? With lots of work. Could it be done dynamically to allow for multiple map sizes? Yup.

The Process

Generate Icosahedron

A sphere made purely of hexagons isn't quite possible, or if it is, I couldn't find any confirming documentation. Using an icosahedron will yield 12 5-sided cells across the surface of the grid, each one being at the original icosahedron's vertices (also known as a dodecahedron).

All images curtesy of the wonderfully informative BUGS project.

  1. The base icosahedron
  2. Each face subdivided
  3. Project each new vertex out to the unit sphere
  4. This process can be repeated until you reach the total number of cells you wish

Generate Cells

Once you have reached your target cell count, it's time actually generate the cell mesh. The basic process runs as such:
  1. Foreach vertex in the subdivided icosahedron:
    1. Find all neighbor cells
    2. Foreach neighbor cell:
        Find the midpoint of neighbor cell and neighbor + 1 cell, this forms one section of the hexagon (or pentagon)

Example Subdivision Levels

Level 1 - 42 Cells Truncated Icosahedron aka, soccer ball, buckyball
Level 2 - 162 Cells
Level 3 - 642 Cells


Some of the hexagons will be warped slightly due to wrapping to a sphere and floating point errors.


Icosahedral Hexagonal Grids

Tuesday, July 14, 2009

MooTools and Double Clicks

Single and double clicks can both be handled in Javascript, but allowing for both to be fired on the same element presents some complications. There are two main ways of approaching the problem, each with problems to be aware of.

Friday, April 10, 2009

MooTools Single Level Drop-down Menus

This uses a minimal amount of Javascript - one simple class. Overall this is pretty much straight from the Son of Suckerfish Dropdowns with the only notable change being the Javascript.


Just a simple unordered list for the top level menu items, and embedded lists for each sub-menu.


This is a simple Mootools class that extends custom events onto any <li> elements. Mouseenter and mouseleave are events custom to the Mootools API. The advantage of these is that they only fire when entering or leaving the parent node, and only fire once. I still use this since older versions of IE don't recognize the :hover pseudo-class for anything but <a>.

Style Template

This is just a bare minimum framework that gets the dislay toggling properly. This works well enough in all major browsers. IE can have some small issues when it comes to spacing the first level <ul> and the second level - even small pixel gaps will cause the menu to disappear.

Having .menu a {display: block;} allows links in every list to fill the whole space. When doing color :hover's, the entire line will be colored and clickable.

Creating the Menu

Mootools adds the domready event that can be called on page load. Here we search for any element of class menu and extend the functionality of the Menu class. We could further target this by changing to $$('').