8

1 年間試行錯誤しながら勉強と実験を重ねた結果、JavaScript が少しずつ理解できるようになってきていると感じています。そこで、単純な 2D プラットフォーム ゲーム (スーパー マリオ ワールドやソニック ザ ヘッジホッグなど) を作成してみたいと思います。このために、EaselJS ライブラリを使用します。

左矢印キーと右矢印キーを使用して、キャンバス内で「世界」を移動/パンする方法を理解しようとしています。矢印キーで機能を実行する方法は知ってkeydownいますが、移動/パンにどのようにアプローチすればよいかわかりません。

視覚化

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

私を正しい方向に向かわせてくれるものは何でも感謝します。ティヴム:)

回答で更新 以下の選択された回答は、そのコンテナの位置を設定できるように、実際にすべてをコンテナに入れる必要があることを確認しました。これは私が作成したコードで、動作します。

// 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スムーズに進みそうです。

4

4 に答える 4

1

単なるアイデアですが、キャンバスの変換機能を見て、各再描画の最初にそれを使用して、他のすべてを描画するためのコンテキストを設定してください。

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

于 2013-06-21T18:56:55.313 に答える
0

通常、ほとんどのキャンバス関連プロジェクトでは EaselJS に同意しますが、構築したいゲームのタイプには melonJS の方が適しています。

それをチェックしてください http://melonjs.org

于 2013-06-21T18:58:08.623 に答える
0

これは、プレーヤーに追従する 2D のトップダウン スクロールと回転のサンプルです。

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

しかし、それは次のように要約されます。

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

次に、プレーヤーを含むすべてが World コンテナに入り、プレーヤーの移動に合わせて回転します。GUI は世界の後にある必要があるため、その上に描画されます。

  • ステージ
    • 世界
      • オブジェクト
      • プレーヤー
    • グイ
于 2017-06-22T13:55:18.643 に答える