CODEWITHSUNDEEP
javascripthtmlcanvas
Roberto
Roberto

Reputation: 528

Drawing lots of hexagons and distorting them

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...

Hexagons

Upvotes: 1

Views: 811

Answers (2)

HandiworkNYC.com
HandiworkNYC.com

Reputation: 11104

You should look at www.kineticjs.com

Canvas is the way to go for drawing 100's of shapes because it doesn't write to the DOM for every path like SVG does.

It has several examples where shapes are programmatically drawn in the 1000s. I recently used it for a similar animation here:

http://movable.pagodabox.com

Upvotes: 0

Strille
Strille

Reputation: 5781

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.

Upvotes: 1

Related Questions