キャンバスのタイルセットを使用して

Question

ええ、私は行方不明になりました。さて、2DトップダウンRPGゲームのために、すべてのタイルに大きなイメージがあるとしましょう。彼らはすべて同じ幅とすべてです。私が知りませんが、キャンバス上で使用するために、その画像の各タイルをそれぞれの画像データにどのように保存するのですか？基本的には、私のすべてのタイルで大きなイメージを取って、タイルからイメージを作るためにそれを通して四角形を選択し、各イメージを変数として配列に格納したいと思います。だから、どうすればいいの？

Answer 1

キャンバスdrawImageメソッドを使用すると、それぞれのタイルを新しいキャンバスに描画できます。

// assume your big source canvas is called tileSource 
var tileWidth = 64; 
var tileHeight = 64; 
var tileCols = Math.round(tileSource.width/tileWidth); 
var tileRows = Math.rounc(tileSource.height/tileHeight); 

// array to store canvas elements 
var myTiles = []; 

// loop through for each tile in the source 
for (var i=0; i<tileRows; i++) { 
    for (var j=0; j<tileColumns; j++) { 
     // This is using jQuery to create the canvas element 
     // .get(0) gets the actual canvas element from the jQuery object 
     var tile = $('<canvas height="' + tileHeight + '" width="' + tileWidth + '"></canvas>').get(0); 

     // draw the tile from the source 
     tile.context.drawImage(tileSource, j*tileWidth, i*tileHeight, tileWidth, tileHeight, 0, 0, tileWidth, tileHeight); 

     // add tile to array 
     myTiles.push(tile); 
    } 
} 

drawImageメソッドの最初のパラメータは、ImageオブジェクトまたはCanvasオブジェクトのいずれかになります。

ここでは、canvas drawImageメソッドを使用する際の参考にしています。 https://developer.mozilla.org/en/Canvas_tutorial/Using_images

Answer 2

いくつかのことを聞いているように聞こえるので、いくつか取り上げてみます。

1. マップ、タイルのセットを定義するタイルを定義する、または への画像の領域が
2. を描画するシステムを定義し
特定の順序で：あなたがしたいとしているように聞こえますちょうど私がJavaScriptと <canvas>を使用して、上記の3つのことを行い、何かを開発したキック用 <canvas>

にマップを描きます。 The source can be found here。 注意：このコードは非常に粗い/未加工で、作業には最新のブラウザが必要です（Chrome 6以降、Opera 11など）。例で

：{ x: 0, y: 0, w: 0, h: 0 }：

• タイルは、単純なJavaScriptのオブジェクトとして定義されています。タイルは、TileDataというオブジェクトにグループ化されています。これは、タイルのグループ化とそのソースイメージです。
• マップは実際にはTileDataオブジェクトのインデックスに対応する数字の大きな配列です。
• マップの描画はMapRendererの責任で、各タイルの矩形をルックアップして<canvas>に描画します。

これはあなたを始めます。