新刊ピックアップ

アニメーションプログラミング超入門

この記事を読むのに必要な時間:およそ 1 分

「アニメーション」と言うと,いわゆる「アニメ」⁠セルアニメ)や,クレイアニメ・パペットアニメなどを思い浮かべる人が多いと思いますが,インターネットで見かける動きのあるWebページや,コンピュータゲームなどもアニメーション表現の一種です。

いずれのアニメーションも,コンマ数秒といった一定の時間ごとに異なる絵(フレーム)を表示することで,動きを表現するという点は同じです。ですが,コンピュータで作るアニメーションの場合,一般に「プログラミング言語」で作ったプログラムによって動きを作ります。

キャラクターを動かすには

コンピュータの画面にキャラクターを表示するには,画面を二次元空間に見立て,そこに座標を指定して描画します。この画面上のキャラクターを,座標を少しずつ変更しながら一定間隔で連続して描画すれば,キャラクターをアニメーションさせる(動かす)ことができます。

たとえば,Aというキャラクターを左から右へ10ドットずつ動かすアニメーションは,

  • ① Aを座標(x, y)に表示する
  • ② Aを画面から消去する
  • ③ xに10を加える
  • ④ ①に戻る

という繰り返しのプログラムを作ればOKです。また,この③の部分の計算を工夫することで,もっと複雑な動きを表現することができます。たとえば

  • ③の部分を,
  • ③-1 aに10を加える
  • ③-2 xにaを加える

という2つの計算に変更するだけで,動きに加速度をつけることができます。

キャラクター自体を動かすには

上記の方法はキャラクターの位置を動かしているだけですが,これに加えてキャラクター自体も動かす(演技させる)ことで,より豊かなアニメーションを表現できます。キャラクター自体を動かすには,⁠パターンアニメーション」という手法を使うのが一般的です。

パターンアニメーションとは,一部だけ異なる複数の絵を繰り返し表示することによって走ったり飛んだりしているように見せる手法で,クレイアニメなどでよく使われます。一連の絵の枚数が多いほどなめらかな動きになりますが,単純な動きなら2枚の絵を交互に表示するだけでも表現することができます。たとえば,同じ場所に「> 」と「-」を交互に表示すると,口をパクパクさせているように見えますね。⁠スペースインベーダー」「パックマン」などの初期のコンピュータゲームは,このような単純なパターンアニメーションを効果的に使っています。

画像

アニメーション作成に適した言語は?

アニメーションのプログラムは,ほとんどのプログラミング言語で作ることができます。ただし,C言語などの汎用言語ではプログラムが複雑になってしまいますので,アニメーション表現やイベント処理をカンタンに記述できる言語を選ぶと良いでしょう。いくつか候補はありますが,教育向け言語でありながらアニメーションやオーディオ・ビジュアル処理の機能を持っている「Processing」をお勧めします。アニメーションを作るだけでなく,音声を加えてゲームにしたり,Androidスマートフォンのライブ壁紙にしたりと,いろいろな応用が利くところも魅力です。ぜひ一度,Processingによるアニメーションプログラミングの世界を覗いてみてください。