2

キャンバスの画面にタイル マップと戦車をレンダリングしました。

http://www.exeneva.com/html5/movingTankExample/

ただし、戦車のアニメーションの動き (トラックの移動) が定期的に発生していることに気付くでしょう。戦車が移動したときにのみ戦車の履帯の動きが発生するようにするには、どのように変更しますか? 現時点では物理学はありません。

4

2 に答える 2

1

state machineタンクの実際の状態を制御する基本を実装する必要があります。

例えば。

  1. STOPPED 状態では、タンクはアニメーション化されず、この状態で開始されます。
  2. キーを押すと状態が MOVING に切り替わるため、アニメーション関数はこのフラグを使用してスプライトをアニメーション化するタイミングを認識します。
  3. キーを放すと、状態が STOPPED に戻ります。

このリンクを見てください (ほとんどは実際のアクションの 2 番目の部分で、最初の部分はより理論的なものです): http://active.tutsplus.com/tutorials/actionscript/the-power-of-finite-state-machines-コンセプト・アンド・クリエーション/

Flashの話ですが、コンセプトは普遍的です。

于 2012-05-20T01:06:51.817 に答える
1

startUp関数はdrawScreen、タンクの動きがアニメーション化される 100 ミリ秒ごとに呼び出しています。drawScreenアニメーション ロジックを独自の関数に抽出する必要があります。たとえば、ハンドラanimateMovementから呼び出す必要があります。onkeydown何かのようなもの：

function animateMovement(){
    var int = setInterval(function(){
        // Tank tiles
          var tankSourceX = Math.floor(animationFrames[frameIndex] % tilesPerRow) * tileWidth;
          var tankSourceY = Math.floor(animationFrames[frameIndex] / tilesPerRow) * tileHeight;    
          // Draw the tank
          context.drawImage(tileSheet, tankSourceX, tankSourceY, tileWidth, tileHeight, tankX, tankY, tileWidth, tileHeight);
          // Animation frames
          frameIndex += 1;
          if (frameIndex == animationFrames.length) {
            frameIndex = 0;
          }
    },100);
    setTimeout(function(){clearInterval(int);}, 1000);
}

drawScreenこれを関数の直前に置き、を呼び出したdocument.onkeydown直後にハンドラーから呼び出しますdrawScreen。drawScreen明らかに、関数からアニメーション コードも削除する必要があります。

function drawScreen() {
  // Tile map
  for (var rowCtr = 0; rowCtr < mapRows; rowCtr += 1) {
    for (var colCtr = 0; colCtr < mapCols; colCtr += 1) {
      var tileId = tileMap[rowCtr][colCtr] + mapIndexOffset;
      var sourceX = Math.floor(tileId % tilesPerRow) * tileWidth;
      var sourceY = Math.floor(tileId / tilesPerRow) * tileHeight;

      context.drawImage(tileSheet, sourceX, sourceY, tileWidth, 
        tileHeight, colCtr * tileWidth, rowCtr * tileHeight, tileWidth, tileHeight);
    }
  }
  /*tank animation was here*/
} 
​
于 2012-05-20T01:11:57.933 に答える