Optimal way of drawing hexagonal map with GWT

Question

I'm looking for best solution - I'm drawing a hexagonal map (Civilization like :) ) for my browser based game in GWT. Currently I'm drawing it on canvas which basically works.

However - I'm also able to slide map left,right,down and up to see another fragment of the map. In such situation I'm forced to redraw the whole map - which doesn't look too good, and will probaly cause preformance issues when the map gets more complex.

Is there a better approach for that? Some library? Or maybe I should make every hex a button like widget. so I could be able to move it instead creating from the scratch... but what about different resolutions then... I'm affraid the map could tear apart sometimes...

score 2 · Answer 1 · edited May 23 '17 at 12:20

2

You could try doing it will simple DIVs (FlowPanel, HTMLPanel, etc) and style the hexagons using CSS. See this tutorial: http://jtauber.github.com/articles/css-hexagon.html

There are some neat suggestions here as well: html/css hexagon with image inside and hexagonal shaped cells in html

edited May 23 '17 at 12:20

Community

1
1

answered Jul 11 '12 at 18:48

andykellr

789
6
9

Chris Lercher · Answer 2 · 2012-07-12T11:10:15.610

You could draw the entire map (usually just the relatively static background, not the animations!) in a hidden canvas, and then copy the parts you need to your visible canvas:

final Canvas hiddenCanvas = buildCanvas(1000, 1000);
drawHexPattern(hiddenCanvas);
// don't add the hiddenCanvas to your DOM

final Canvas visibleCanvas = buildCanvas(320, 200);
RootPanel.get().add(visibleCanvas); // add the visibleCanvas to the DOM

showArea(hiddenCanvas, visibleCanvas, 0, 0);
...
showArea(hiddenCanvas, visibleCanvas, 20, 10);
...

With a showArea() method like

private void showArea(final Canvas hiddenCanvas, final Canvas visibleCanvas,
      final double x, final double y) {

  final Context2d hiddenCtx = hiddenCanvas.getContext2d();
  final Context2d visibleCtx = visibleCanvas.getContext2d();

  final ImageData imageData = hiddenCtx.getImageData(x, y, 
         visibleCanvas.getCoordinateSpaceWidth(),
         visibleCanvas.getCoordinateSpaceHeight());

  visibleCtx.putImageData(imageData, 0, 0);
}

_{I created a pastebin with a working example: http://pastebin.com/tPN2093a}

Optimal way of drawing hexagonal map with GWT

2 Answers2