javascript - html5の2D横スクロールカメラビュー

Question

次のように、キャンバス要素内のレベルをスクロールできるカメラのようなビューを作成するにはどうすればよいのでしょうか。

http://playbiolab.com/

Answer 1

500x500 のキャンバスに、実際には 9000x500 程度の何か (ゲーム レベル) を表示する必要があります。

これで問題ありません。キャンバスをより大きなシーンの「ビューポート」と考えてください。キャンバス (またはその他すべて) を適切な場所に移動し、その場所に関連するすべてのものを描画します。

次に例を示します。

http://jsfiddle.net/hKrrY/

キャンバスをクリックし、左矢印キーを押したままにして、赤いプレーヤー ドットが「静止」している間にシーンが進むのを確認します。

100x100 のキャンバスをスクロールすると、(330,50) のように画面外の場所に描画されているオブジェクトが表示されます。キャンバスを移動すると、それらが表示されます。

---

これは、キャンバスで最適化を行うことが本当に重要になり始める場所であることを言及する価値があると思います. 上記の例は、ビューポートを作成するための非常に単純化された方法であり、コードが進行するにつれて、何を描画しているのか、どれだけ描画しているのかについて、ますます考えたくなるでしょう。たとえば、完全に画面外にあるオブジェクトを描画することは避けたいでしょう。また、ゲームやアプリの背景が 9000x500 の場合、毎回全体を描画することはおそらく望ましくありません。

したがって、ここで重要なのはコンセプトですが、それをどのように実装するか、キャンバスにどれだけの作業をさせるかについてよく考える必要があります。横スクロール アプリでパフォーマンスの問題が発生した場合は、必ずお知らせください :)

Answer 2

ビューポートの幅と高さを備えたdivでキャンバスをラップし、オーバーフローを非表示に設定してから、キャンバス全体を描画し、表示したい場所までdivをスクロールする方が効率的であることが常にわかっています。

したがって、html は次のようになります。

<div id='wrapper' style='width: 200px; height: 200px; overflow: hidden;'>
     <canvas width='1000' height='1000'></canvas>
</div>

JavaScriptは次のようになります

function scrollWrapper(x, y){
    var wrapper = document.getElementById('wrapper');  
    wrapper.scrollTop = x;
    wrapper.scrollLeft = y;
}

次に、表示したい x と y を指定して関数を呼び出します。そこにジャンプするだけでなく、そこに移動したい場合は、setTimeoutなどでラップできます。