Question

I’m starting a web game, and I would like to know the best way to do it.

The game is a field of hexagons seen from the above, that can be rotated/inclined.

What’s the best way to do it? What I was going to do was use a canvas and use 2d transforms to simulate 3d rotations, the problem is that:

1. The game must work on smartphones
2. For every rotation i must redraw all the canvas, and there could be 200 hexagons on the screen to redraw many times, so i think canvas are too expensive in terms of resources…

Answer 1

There’s two ways I can think of:

• Using canvas only. This means quite wide browser support, will have few quirks and generally “just work”. Potential problems: Performance on low-end machines like you mentioned. But is rotating the game critical to gameplay? If not, you could consider turning that off on slow smartphones. Users will most likely not miss that feature if it’s not important to gameplay.

• A combination of canvas and CSS3 transforms (rotating cube example). Could give you better performance than pure canvas solution. Potential problems: requires “mixing” of techniques, which always means a risc of running into unexpected problems or quirks.