だから、ただの遊びで 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()
x
y
32
x-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を次に示します。
私の英語が理解できない場合は申し訳ありません。わからないことは何でも聞いてください。うまくいけば、私はそれを明確にしました。ありがとう。