トップへ

自機のアニメーションを作る

自機が歩いているように見せるため、アニメーションをつけます。

先程追加したキャラクタパターンには、３つのパターンが用意されていますので
このパターンを次々に切り替えることでアニメーションを実現します。



extends SpriteChar;

$map.setBGColor(color(0,200,255)); // 背景色を設定
anim=newAnimation();
while (1) {
  if (getkey(39) && $map.getAt(x+16,y)!=$pat_Block+0) {
    x+=3;
    f=0;
     anim.swing($pat_player+0,$pat_player+2,5);
}
  // ↑ カーソルキー右が押され、さらに右側が壁でなければ右へ移動
  if (getkey(37) && $map.getAt(x-16,y)!=$pat_Block+0) {
    x-=3;
    f=1;
anim.swing($pat_player+0,$pat_player+2,5);
  }
  // ↑ カーソルキー左が押され、さらに左側が壁でなければ左へ移動
  y+=vy; // vy: y 方向の速度。 yにvy を加える
  if ($map.getAt(x,y+24)==$pat_Block+0 ) { // ブロックに当たっていたら
     vy=0; // 落下速度を0にする
     if (getkey(32)) vy=-10; // スペースキーを押したらジャンプ
  } else { // ブロックに当たっていなかったら
     vy+=0.5; // 落下速度を上げる
  }
  update();
}

実行すると、自機が歩いているようなアニメーションがみられます。

anim=newAnimation();

これは、アニメーションを使うときに書いてください。
こうすることにより、変数anim がアニメーションアダプタ (アニメーションを行うための特別な仕組み) になります。
"anim"の部分は別の名前でもかまいませんが、その後の anim.swing の部分などもanimの代わりにその名前を使ってください。

anim.swing($pat_player+0,$pat_player+2,5);

アニメーションアダプタanimに対して、アニメーションの実行を指示します。
最初の $pat_player+0 と $pat_player+2 は、アニメーションに使うキャラクタパターンを指定します。 2番目のほうに大きい値を指定してください。
最後の 5 はアニメーションの速さを指定します。大きいほど遅くなります。

ところで、実行すると気づくのですが、カーソルキーを離してもずっと歩いているようなアニメーションをしています。この問題を解決するには次のようにします。

extends SpriteChar;

$map.setBGColor(color(0,200,255)); // 背景色を設定
anim=newAnimation();
while (1) {
anim.pause();
  if (getkey(39) && $map.getAt(x+16,y)!=$pat_Block+0) {
    x+=3;
    f=0;
    anim.swing($pat_player+0,$pat_player+2,5);
  }
  // ↑ カーソルキー右が押され、さらに右側が壁でなければ右へ移動
  if (getkey(37) && $map.getAt(x-16,y)!=$pat_Block+0) {
    x-=3;
    f=1;
    anim.swing($pat_player+0,$pat_player+2,5);
  }
  // ↑ カーソルキー左が押され、さらに左側が壁でなければ左へ移動
  y+=vy; // vy: y 方向の速度。 yにvy を加える
  if ($map.getAt(x,y+24)==$pat_Block+0 ) { // ブロックに当たっていたら
     vy=0; // 落下速度を0にする
     if (getkey(32)) vy=-10; // スペースキーを押したらジャンプ
  } else { // ブロックに当たっていなかったら
     vy+=0.5; // 落下速度を上げる
  }
  update();
}

anim.pause();

これは、アニメーションを停止する命令です。なにもキーがおされていないと、毎回このpauseだけが実行されるため、アニメーションが作動しませんが、キーを押している間はswingが実行され、アニメーションが作動します。

次へ