HTML5 Canvas：EaselJSの矢印キーを使用した移動/パンニングの世界

Question

試して試して試してみると、もう少しJavaScriptを理解し始めているように感じます。だから、今、私は単純な2Dプラットフォームゲーム（スーパーマリオワールドやソニックザヘッジホッグ）を書く際に手を入れたいと思っています。このために、私はEaselJSライブラリを採用しています。

左矢印キーと右矢印キーを使用してキャンバス内で「世界」をどのように移動/パンすることができるかを調べようとしています。私はどのように矢印キーの​​の上で機能を実行することができます知っているが、私はあまりにも私が移動/パンにアプローチする必要はありません。

キーが押されたとき、私はキャンバス内の一つ一つの位置/座標を調整する必要がありますか？ あるいは、すべてをコンテナに入れ、コンテナの位置/座標を移動する必要がありますか？

私は正しい方向に私を振りかざす何かを感謝します。 Tyvm :)

答え The chosen answer belowで更新は、私は確かに私はそのコンテナの位置を設定できるように、containerですべてを入れていたことを確認しました。これは私が作成したコードであり、動作します。

// Canvas 
var stage = new createjs.Stage('game'); 
createjs.Ticker.addEventListener('tick', tick); 
function tick(event) { 
    stage.update(); 
} 

// Cave 
var cave = new createjs.Bitmap('img/cave.png'); 
cave.x = cave.y = 0; 

// World 
// Pans World if the left or right arrow keys are pressed 
var world = new createjs.Container(); 
world.x = 0; 
world.y = 0; 
world.addChild(cave); 
stage.addChild(world); 
$(window).keydown(function(e){ 
    switch (e.which || e.keyCode){ 
     case 39: // right arrow key 
      world.regX += 10; 
      break; 
     case 37: // left arrow key 
      world.regX -= 10; 
      break; 
    } 
}); 

私はworld.xなどworld.regXを更新しようとしました。どういうわけか、world.regXはよりスムーズになるようです。

Answer 1

を、それをチェックアウト。

移動するときは、scrollableObjectContainer.regXを更新してください。

tweenJSを使用するとスムーズなスクロールができます。

Answer 2

ちょっと考えてみましょう...しかし、キャンバスの翻訳関数を見て、各描画の開始時にそれを使って他のすべてを描画するコンテキストを設定します。

http://www.html5canvastutorials.com/advanced/html5-canvas-transform-translate-tutorial/

Answer 3

通常私は、しかし、あなたが構築したいゲームの種類がmelonJSに適しだろう、ほとんどのキャンバス関連プロジェクトのためのEaselJSに同意するだろう。

は、私は最善の方法は、scrollableObjectContainer（おそらくあなたはlifebarのような静的な要素を持っている）にスクロールされるすべての表示オブジェクトを置くことだと思いhttp://melonjs.org

Answer 4

ここには、2dトップダウンスクロールとプレーヤーに続くローテーションのサンプルがあります。

https://jsfiddle.net/StaticDelvar/bt9ntuL5/

しかし、それはつまるところ：プレーヤーなど

world.regX = player.x; 
world.regY = player.y; 
world.rotation = -player.rotation; 

その後、すべてが世界のコンテナに入り、プレイヤーが移動するように回転させることになります。 GUIは世界の後になければならないので、GUIはその上に描画します。

• ステージ
  • 世界
    • オブジェクト
    • プレーヤー
  • 桂