マルチレイヤーHTML5キャンバスをレイヤーイメージに使用する

Question

Webベースのゲームエンジンを使い始めましたが、主にjQueryを使ってスプライトやアニメーションを処理していましたが、HTML5のゲームキャンバスを動かすことでHTML5のパワーを学びます。ここで私が抱いている問題は次のとおりです。http://html5.litten.com/layers/canvaslayers.htmlからレイヤーイメージにマルチプルキャンバスを使用しています。

私は999999へのzインデックスを設定していても、私のためにこの機能していません。ここに私のコード - >

http://snipt.org/xoKn

オブジェクト層は、タイルの上にはない、感謝です！

Answer 1

誰かが同様の問題を抱えている場合は、まず最初に最初のレイヤーをロードし、最後に最下位レイヤーをロードすることで解決しました。明らかに、最初にロードされたものはすべて上に表示されるようです。

私の解決方法は、タイルループの上にm個のオブジェクトループを移動することでした。私にとって興味深いのは、最初にどのような負荷がかかっているのかどうかは分かりませんでした。

Answer 2

コードが動作するはずです（少なくともキャンバス処理部分）。私はあなたのスクリプトを見て、画像の読み込みに問題があるかもしれません。あなたは

var tile = new Image(); 
tile.src = tiles[i]['bg']; 
tilesCtx.drawImage(tile, tiles[i]['col']*32, tiles[i]['row']*32); 

ですが、画像がまだ読み込まれていないため動作しません。代わりに、あなたは

tile.onload = function(){ 
    tilesCtx.drawImage(tile, tiles[i]['col']*32, tiles[i]['row']*32); 
} 

またはそのような何かを（それを変更する必要があるので、すなわち、あなたがi変数への参照を持っていません）を使用する必要があります。

チュートリアルでは、setInterval(drawAll, 20);を使用しているため、しばらくしてから作業が行われます（すべての画像がロードされるため）。

もちろん、画像の注文を失うことがありますが（これは重要ではないようですが）、preloadingすべての画像は最初からすべてを一度に描画することをお勧めします。試してみて、それがうまくいけば今すぐ私たちに教えてください！