2

私は最善の解決策を探しています-GWTでブラウザベースのゲーム用に六角形のマップ(文明のようなもの:)を描いています。現在、基本的に機能するキャンバスに描画しています。

ただし、マップを左右上下にスライドして、マップの別のフラグメントを表示することもできます。このような状況では、マップ全体を再描画する必要があります。これは見栄えがよくなく、マップがより複雑になるとパフォーマンスの問題が発生する可能性があります。

そのためのより良いアプローチはありますか？どこかの図書館？または、すべてのヘックスをウィジェットのようなボタンにする必要があるかもしれません。そのため、最初から作成する代わりに移動することができます...しかし、異なる解像度はどうですか...マップが時々バラバラになるのではないかと心配しています...

4

2 に答える 2

2

非表示のキャンバスにマップ全体 (通常はアニメーションではなく、比較的静的な背景のみ) を描画し、必要な部分を表示されているキャンバスにコピーできます。

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

のようなshowArea()方法で

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);
}

実際の例でペーストビンを作成しました：http://pastebin.com/tPN2093a

于 2012-07-12T09:43:45.763 に答える
2

DIV (FlowPanel、HTMLPanel など) を単純化し、CSS を使用して六角形のスタイルを設定してみてください。このチュートリアルを参照してください: http://jtauber.github.com/articles/css-hexagon.html

ここにもいくつかのすてきな提案があります: html/css 六角形の内部に画像があり、html の六角形のセル

于 2012-07-11T18:48:28.527 に答える