0

Canvas要素を使用して、jQueryを使用してJavascriptで2Dタイルベースのコンピューターゲームを作成しています。以下の画像のように、1 つのファイルに複数のテクスチャを含む画像ファイルがあります。

テクスチャファイルの例

たとえば、各テクスチャの幅が であることがわかっている場合、50 pxはdrawTexture(id, canvas)0idから始まるテクスチャの ID です (写真の赤は 0、緑は 1、青は 2、黄色は 3) でcanvas、キャンバスからの 2D コンテキストです。

4

1 に答える 1

1

のスライス機能を使用しdrawImageます。

<img id="source" src="myTileSheet.png" style="display:none"/>

var columns    = 2,   //  The amount of tile columns,
    tileWidth  = 50,  //  Tile width,
    tileHeight = 50,  //  Tile height.
    image      = document.getElementById('source'),
    canvas     = document.getElementById('myCanvas'),
    ctx        = canvas.getContext('2d');

function drawTileAt(number, targetX, targetY){
    var sx = tileWidth * (Math.floor(number / columns)); // Get the X position.
    var sy = tileHeight * (number % columns);            // Y.

    // Where you want it on the canvas.
    ctx.drawImage(image,                  // Source image,
                  sx, sy,                 // Source X / Y to get the tile from,
                  tileWidth, tileHeight,  // Source Width / Height to crop out,
                  targetX, targetY,       // Destination X / Y to place the image,
                  tileWidth, tileHeight); // Destination W / H (can be used to scale a tile)
}

ただし、これは 0 から数えることを前提としていnumberます。最初のタイルに番号を付けたい場合1は、関数の最初の行にこれを追加します。

number--;

そう：

function drawTile(number){
    number--;
    var image = document.getElementById('source');
    // etc.
于 2013-02-12T08:40:20.080 に答える