7

私は HTML5 Canvas と JavaScript の初心者ですが、HTML5 Canvas 要素で等角投影を行う簡単な方法はありますか?

私は真の等角投影を意味しています - http://en.wikipedia.org/wiki/Isometric_projection

返信ありがとうございます。

4

3 に答える 3

12

まず、ゲームの世界を通常の X X Y グリッドの正方形のタイルとして考えることをお勧めします。これにより、衝突検出、パスファインディング、さらにはレンダリングまで、すべてがはるかに簡単になります。

マップを等角投影でレンダリングするには、投影行列を変更するだけです。

var ctx = canvas.getContext('2d');

function render(ctx) {
    var dx = 0, dy = 0;
    ctx.save();

    // change projection to isometric view
    ctx.translate(view.x, view.y);
    ctx.scale(1, 0.5);
    ctx.rotate(45 * Math.PI /180);

    for (var y = 0; i < 10; y++) {
        for (var x = 0; x < 10; x++) {
            ctx.strokeRect(dx, dy, 40, 40);
            dx += 40;
        }
        dx = 0;
        dy += 40;
    }

    ctx.restore(); // back to orthogonal projection

    // Now, figure out which tile is under the mouse cursor... :)
}

これは、初めて機能するときはワクワクしますが、実際のアイソメ マップを描画するのにはそれほど役に立たないことがすぐにわかります...タイル画像を回転させて、角を曲がったところを確認することはできません。変換は描画のためではなく、スクリーン空間とワールド空間の間の変換のためのものです。

ボーナス: マウスがどのタイルの上にあるかを把握する

あなたがしたいのは、「ビュー座標」（キャンバス原点からのピクセルオフセット）から「ワールド座標」（対角軸に沿ったタイル0,0からのピクセルオフセット）に変換することです。次に、ワールド座標をタイルの幅と高さで割り、「マップ座標」を取得します。

理論的には、「ビュー位置」ベクトルを上記の射影行列の逆数で射影して「世界の位置」を取得するだけです。何らかの理由でキャンバスが現在の射影行列を返す方法を提供しないためです。setTransform()メソッドはありますが、ないためgetTransform()、ここで独自の 3x3 変換マトリックスを展開する必要があります。

実際にはそれほど難しくありません。これは、オブジェクトを描画するときにワールド座標とビュー座標を変換するために必要になります。

お役に立てれば。

于 2011-10-10T05:52:05.357 に答える