だから、ただの遊びで HTML5 RPG を作っています。マップは<canvas>(幅 512 ピクセル、高さ 352 ピクセル | 横に 16 タイル、上から下に 11 タイル) です。もっと効率よく塗る方法があれば知りたいです<canvas>。
これが私が今それを持っている方法です：
マップ上でのタイルのロードとペイントの方法
Image()地図はピースを使ってタイル (32x32) で描かれています。画像ファイルは単純なforループを介してロードされtiles[]、使用時に PAINTEDと呼ばれる配列に配置されdrawImage()ます。
まず、タイルをロードします...
そして、これがどのように行われているかです：
// SET UP THE & DRAW THE MAP TILES
tiles = [];
var loadedImagesCount = 0;
for (x = 0; x <= NUM_OF_TILES; x++) {
var imageObj = new Image(); // new instance for each image
imageObj.src = "js/tiles/t" + x + ".png";
imageObj.onload = function () {
console.log("Added tile ... " + loadedImagesCount);
loadedImagesCount++;
if (loadedImagesCount == NUM_OF_TILES) {
// Onces all tiles are loaded ...
// We paint the map
for (y = 0; y <= 15; y++) {
for (x = 0; x <= 10; x++) {
theX = x * 32;
theY = y * 32;
context.drawImage(tiles[5], theY, theX, 32, 32);
}
}
}
};
tiles.push(imageObj);
}
当然のことながら、プレイヤーがゲームを開始すると、最後に中断したマップが読み込まれます。しかし、ここでは、すべての草のマップです。
現在、マップは 2D 配列を使用しています。マップの例を次に示します。
[[4, 1, 4, 1, 4, 1, 4, 1, 4, 1, 4, 1, 1, 1, 1, 1],
[1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1],
[13, 13, 13, 13, 1, 1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 1],
[13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1],
[13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1],
[13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1],
[13, 13, 13, 13, 1, 1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 1],
[13, 13, 13, 13, 13, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1],
[13, 13, 13, 13, 13, 11, 11, 11, 13, 13, 13, 13, 13, 13, 13, 1],
[13, 13, 13, 1, 1, 1, 1, 1, 1, 1, 13, 13, 13, 13, 13, 1],
[1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1, 1, 1]];
if単純な構造を使用してさまざまなマップを取得します。上記の 2 次元配列が になると、各配列の対応する数値は、内部returnに格納されているに従って描画されます。次に、正しい座標にペイントするために発生し、時間に従ってペイントします。Image()tile[]drawImage()xy32x-y
複数マップ切り替えの仕組み
currentID私のゲームでは、マップには、leftID、rightID、 、の 5 つのものがupIDありbottomIDます。
- currentID:現在のマップの現在の ID。
- leftID:
currentID現在のマップの左側で終了するときにロードするID 。 - rightID:
currentID現在のマップの右側に出るときにロードするID 。 - downID:
currentID現在のマップの下部で終了するときにロードするID 。 - upID:
currentID現在のマップの上部で終了するときにロードするID 。
注意事項: leftID、rightID、upID、または のいずれかbottomIDが特定されていない場合、それは0. つまり、彼らはマップのその側を離れることはできません。それは目に見えない封鎖にすぎません。
そのため、人がマップの側面を出ると、どこから出たかに応じて...たとえば、下に出た場合、ロードbottomIDする数がmapマップに表示されます。
以下は、視覚化を容易にするための .GIF です。
ご覧のとおり、遅かれ早かれ、多くのマップで多くのID を扱うことになります。そして、それはおそらく少し混乱して多忙になる可能性があります.
明白な長所は、一度に 176 個のタイルをロードし、小さな 512x352 キャンバスを更新し、一度に 1 つのマップを処理することです。短所は、多くのマップを扱う場合、MAP ID が時々混乱する可能性があることです。
私の質問
- これはマップを保存する効率的な方法ですか (タイルを使用する場合)、またはマップを処理するためのより良い方法はありますか?
私は巨大な地図の線に沿って考えていました。マップサイズは大きく、すべて 1 つの 2D 配列です。ただし、ビューポートは 512x352 ピクセルのままです。
視覚化するために（この質問のために）作成した別の.gifを次に示します。
私の英語が理解できない場合は申し訳ありません。わからないことは何でも聞いてください。うまくいけば、私はそれを明確にしました。ありがとう。
