トップへチュートリアルWikiトップ

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

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

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



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が実行され、アニメーションが作動します。

    次へ