0

複数のレイヤーで構成されるタイルベースのゲームをプログラミングしています。ただし、マップを描画し、CSS を介してキャンバスをスケーリングしようとすると、上のレイヤーのタイルが意図しない境界線を取得するという事実が発生します。タイルを描画するコードは次のようになります。

for (var key in Nodes) {
        var currentNode = Nodes[key];
        var tileProb = Math.floor(Math.random() * 10 + 1);

        if (tileProb < 2) {
            currentNode.passable = false;
            canvasLayerZero.drawImage(currentNode.img, 0, 0, tileDim, tileDim, currentNode.x * tileDim, currentNode.y * tileDim, tileDim, tileDim);
        }
        else {
            currentNode.passable = true;
            canvasLayerOne.drawImage(currentNode.img, 20, 0, tileDim, tileDim, currentNode.x * tileDim, currentNode.y * tileDim, tileDim, tileDim);
        };
    };

コードが行うことは、基本的に、岩と草の 2 種類のタイルで構成されるランダム化されたマップを作成することです。岩のタイルは下のキャンバスに、草のタイルは上のキャンバスに描かれています。描画されるタイルが岩の場合、passable プロパティが false に設定されます。すでに述べたように、私の問題は、css を介してズームインすると、上部のタイルに境界線が表示されることです。同じキャンバスにすべてを描画すると発生しません。しかし、壁などの後ろを「歩く」ことができるようにするには、複数のキャンバスが必要です。

誰かがそれを取り除く方法を説明できますか?

前もって感謝します！

4

1 に答える 1

1

これはサブピクセル化によるものです。

デフォルトでは、ピクセルは 1/2 ピクセルのオフセットで描画されるため、キャンバスを CSS で拡大縮小すると (つまり、画像として拡大縮小すると)、このサブピクセル化がより見やすくなります。

CSS を使用する必要がある場合は、タイルを描画する前にキャンバスを翻訳してみてください。

ctx.translate(-0.5, -0.5);

一般に、CSS を使用してキャンバスをスケーリングすることはお勧めできません。代わりに、scale()描画する前にコンテキスト メソッドが役立つか、タイルのサイズを変更できるかどうかを確認します (速度が重要な場合は、新しいサイズをキャッシュします)。

于 2013-11-06T07:17:17.633 に答える