1

コードの基礎は、JohnE.Grahamのブログhttp://johnegraham2.com/blog/2010/09/25/project-javascript-2d-tile-engine-with-html5-canvas-part-4-using-からのものです。さらに最適化するためのゾーン/

画面に相当するタイルを描画するのに最適ですが、上、下、左、または右のキーを押して、一度に1行/列ずつ調整する方法を一生理解することはできません。

ゾーンを視覚化するのに役立つ透明度の例を次に示しますhttp://simplehotkey.com/Javascript/canvas.html（1,188タイルの位置をロードしますが、画面全体に数百を描画するだけです）70,000の配列をロードしましたエントリとそれは画面上に何を描画しているだけなので、それでも迅速でしたが、入力に基づいてすべてをスライドさせる方法を理解することはできません...

私はいくつかのアイデアを思いついたが、何が最善の方法かわからない。

1画面分のタイルがここに表示されます。

 tilesArray = [ 
              0,0,0,0,0,0,0,1,2,9,6,0,0,7,0,0,1,0,
              0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,
              0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,9,0,
              0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,9,0,
              0,9,9,9,9,9,9,0,7,2,0,0,0,0,0,1,2,0,
              0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,
              0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,
              0,9,0,7,2,9,9,9,9,9,9,9,9,9,9,9,9,0,
              0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,
              0,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,0,
              0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
              ];

ここで、0は壁タイル（周囲）、9は床タイル、7はドア、その他いくつかのランダムなタイルです。

これはまさに画面に読み込まれるものですが、入力、上、下、左、右に基づいて、すべてを1タイルずついずれかの方向にシフトする方法がわかりません。

私が今傾倒しているアイデアの1つは、上記の配列をレンダリングの基礎として使用し、キーボード入力に基づいて別の配列から新しい値をその配列にフィードすることです。たぶん、別のはるかに大きな配列からスライスし（レベル全体のすべてのタイルを保持）、そのスライスを使用して実際にレンダリングされた配列にデータを入力しますか？

ただし、フレームごとにすべてのタイルが置き換えられます...

私が使用していたプレーヤーの入力を取得するために：

//Key listener 
document.onkeydown = function(e){
e = e?e:window.event;
console.log(e.keyCode + "Down");
switch (e.keyCode){
    case 38:
    //UP KEY
    Game.inputReaction('up');   
    //Game.moveDir('up');
    break;
    case 40:
    //DOWN KEY  
    //Game.inputReaction(40);
    //Game.moveDir('down');
    break;
    case 37:
    //Left Key  
    //Game.inputReaction(37);
    break;
    }
}

もう1つの方法は、画面に既に表示されているタイルを調整して新しいタイルを追加することですが、このエンジンはグローバル変数を使用していないため、入力に基づいてプログラムでタイルエンジンに影響を与える方法がわかりません。別のメソッド（inputReaction（num））を追加し、キーボード入力（console.log（））からいくつかのアクションをトリガーしますが、実際にタイルを描画している他のメソッドにアクセスできません。または、オブジェクトのコピーを作成し、変更して返す必要がありますか？しかし、それはかなり複雑です。

エンジンが描画されているものを計算する方法を変更するよりも、「エンジン」（上の配列）に供給されている配列値を調整する方が簡単かもしれないと思います。これを確認できますか？

4

1 に答える 1

0

マップ上を移動できるカメラの抽象化を追加し、カメラの位置に応じて描画位置をシフトします。カメラが南に10ピクセル移動すると、すべてのタイルが東と西と同じように北に10ピクセル移動します。表示されているタイルのみを描画するため、パフォーマンスが大幅に低下することはありません。

レンダラーはカメラを見て、何を描画する必要があるかを判断し、カメラオブジェクトを外部に公開して操作できます。そうすれば、画面に表示されるものを変更するためにカメラの位置を変更するだけで済みます。

これは、1年前に概念実証タイリングエンジンで行い、巨大なタイルマップをスムーズにスクロールおよびスケーリングすることができました。

配列自体を変更し始めると、パフォーマンスが低下し、1ピクセルではなく、1タイルのステップでしか移動できないため、スムーズにスクロールできなくなります。

于 2012-02-19T21:33:33.923 に答える