タイルマップのキャンバス

私は100x100ピクセルのタイルマップを持っています。ブラウザで自分のゲームを開こうとすると、10000枚のタイルを描くためページがフリーズします。どのように問題なくタイルを描くことができますか？マイドロー（）関数：タイルマップのキャンバス

this.draws = function(){ 

    for(j = 0; j < 10000; j++){ 

     this.i = levels[1][1][j] - 17*Math.floor(levels[1][1][j]/17) 
     game.ctx.fillStyle = "red" 
     game.ctx.drawImage(game.tiileset,(this.i-1)*this.cellW,(Math.floor(levels[1][1][j]/17))*16,this.cellW,this.cellW,(j-100*Math.floor(j/100))*this.cellW-1,(Math.floor(j/100)+1)*this.cellW,this.cellW,this.cellW) 


    } 

}

出典

2017-01-05 SIMONE ESPOSITO

このとき、画面に表示されるものだけを描画する必要があります。スクロールしながら塗りつぶします。縮小すると、画像には異なるズーム範囲でレンダリングされるバージョンが少なくなります。 – Grallen

すべてのMath.floor（...）は、右の画像を切り抜いて正しい位置に配置することです。 [1] [1] [for]ループ内の現在のタイルIDです。 –

- 私やろうとしyou're何がわからないが、それはキャンバスに画像から各ピクセルを描画you'reのように見えます。

本当にそうだとしたら、イメージ全体を一度に描画することをお勧めします。

もしそうでなければ、あなたのコードの数学についてのより詳しい説明が必要です。

ああ、セミコロンを忘れないでください。

出典

2017-01-05 21:49:54 syrupsnob

イメージの各タイルをキャンバスに描画するように描画します。タイルマップ。 –

多分これはあなたに役立つでしょう（https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps）それはパフォーマンスセクションを持っています – syrupsnob

はい、ありがとう –

タイルマップのキャンバス

答えて

関連する問題