11

HTML5で等角投影を行うことは可能<canvas>ですか？とsetTransformですか？それとも別の方法で存在しますか？

例：

ctxt.setTransform (1, -0.2, 0, 1, 0, 0);

ファームビルの視点のようなもの。

どうもありがとう。

4

2 に答える 2

33

キャンバス上で好きなものを個々のピクセルまで描くことができるので、「それは可能ですか」などの質問には「はい」の答えがあります。

3Dパイプラインがすでにキャンバスに組み込まれている場合、答えはノーです。キャンバスコンテキストは2Dであるため、コマンドは2Dです。Canvas要素は実際には完全な3Dパイプライン（webgl）をサポートしていますが、これは非常に低レベルであり、GPUへのアクセスを提供することを目的としています（より具体的には、現在のハードウェアの動作を表すように設計されています）。「高レベル」の抽象APIは代わりに2dです。正方形の描画コマンドをアイソメビューのように見せるための2Dマトリックスを設定できますが、高レベルのコマンドは2D座標しか処理しないため、その平面の上または下には何も描画できません。

もちろん、標準の3D-> 2Dマッピング手法を使用して、キャンバスの2Dコンテキストで3Dレンダリング（アイソメトリックまたはパースペクティブ）を実行できます。たとえば、キャンバスの2DコンテキストとJavaScriptのみを使用しているこの4kデモを参照してください（ブラウザがHTML5をサポートしていない場合は、同じYouTubeビデオをご覧ください）。

アイソメビューの場合、マトリックス設定部分はより単純です...たとえば

var cs = Math.cos(angle1), sn = Math.sin(angle1);
var h = Math.cos(angle2);
var a = 100*cs, b = -100*sn, c = 200;
var d = h*100*sn, e = h*100*cs, f = 200;
ctx.setTransform(a, d, b, e, c, f);

キャンバスコンテキストはctx、次のようなマトリックスを設定します。

  • XY回転角度はangle1
  • ビューの傾斜角度はangle2
  • 1〜100ピクセルの長さをマップします
  • （0、0）を200、200にマップします

このサンプルページで、これらの数式の動作の小さな例を見ることができます。

于 2011-03-03T20:26:32.053 に答える
3

等角ゲームを作成するには、キャンバス全体を歪めるほどではなく、使用するグラフィックスについて詳しく説明します。たとえば、タイルは通常h = w/2です。したがって、通常のゲームでは32x32のタイルがあり、等角ゲームでは32x16になります。また、タイルの配置は、角度を補正するために少し異なります。

簡単な答えはい等角ゲームはキャンバスを使用して完全に可能です。その一例としてFreecivを見てください。

等角ゲームの作成の詳細について質問するもう1つの良い場所は、https：//gamedev.stackexchange.com/です。

于 2011-03-03T20:16:52.730 に答える