Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

| Views: 7385
When I first started looking into the HTML5 side of things for my game one of the key requirements for me was the ability to work with hexagonal grids and to be able to interact with the cells in this grid. KineticJS seemed to have the right features to do this, but I soon discovered that large grids simply did not perform, so after playing around a bit I found another solution.

The problem as it appears to me is that when you generate a grid with many cells, the browser simply cannot perform well and keep track of every single one. The solution is to generate the grid in an off-screen layer, convert it to an image, remove all the hexagons that are not needed any more and simply draw the generated image.

I created a jsFiddle to show the concept, it's available here: http://jsfiddle.net/jy7G2/
hexgridfiddle1.png




When using a grid of 80x80 hexagons and dragging it around, the lag is very noticeable. However when converted to an image, this grid can be dragged around very quickly.

This is all the code to get it running:
// hexagon dimensions
var radius = 16;
var height = (radius * Math.sqrt(3));
var side = radius * 3 / 2;
// grid size
var gridWidth = 80;
var gridHeight = 80;
// set up stage and layer
var stage = new Kinetic.Stage({
container: 'container',
x: 0,
y: 0,
width: 512,
height: 512,
draggable: true
});
var layer = new Kinetic.Layer();
// position polygons
for (var i = 0; i < gridWidth; i++) {
for (var j = 0; j < gridHeight; j++) {
mX = radius + (i * side);
mY = radius + (height * (2 * j + (i % 2)) / 2);
hexagon = new Kinetic.RegularPolygon({
x: mX,
y: mY,
sides: 6,
radius: radius,
fill: 'red',
stroke: 'black',
strokeWidth: 1,
rotationDeg: 90
});
layer.add(hexagon);
}
}
// generate an image from the current layer
layer.toImage({
width: (gridWidth * side) + radius,
height: (gridHeight * height) + radius,
callback: function (img) {
var image = new Kinetic.Image({
image: img,
x: 0,
y: 0,
});
// remove all the hexagon nodes
layer.removeChildren();
// add image to layer and draw the stage
layer.add(image);
stage.add(layer);
stage.draw();
}
});


Next time I will show how to position things on top of this grid and snap to the grid.

-i

Have comments or feedback on what I wrote? Please share them below! Found this useful? Consider sending me a small tip.
comments powered by Disqus
Other posts you may like...