HSP講座5-アニメーション-1

今日は、アニメーションをしたいと思います。
これを、プレーヤーが動かせるようになればゲーム？ですからゲームプログラマーまでもう少しです。


今までは、動かない図形や文字を描いてきました。
今日は動く図形を描くわけですが、ちょっとした工夫で簡単に出来ます。

パラパラマンガを作ったことはあるでしょうか？原理はあれと全く同じです。
１コマ１コマ少しずつ変化するコマを連続的に速く切り替えることにより、人間の目にはそれが動いているように見える、というものです。

まず、このプログラムを見てください。

 x = 100 
 y = 100
 r = 10
 circle x - r, y - r,  x + r, y + r

今まで言ってきませんでしたが、パラメータを指定する時に、数式で書くことも可能です。
つまり、この「circle」のパラメータは数値に直すと「90,90,110,110」ですね。
と言うことは上のプログラムで、(x, y)つまり(100, 100)を中心に、半径r=10の円が描かれることは理解できるでしょうか？パッとみて分からない人も、今までのところを振り返りながらちょっと考えれば分かるはずです。

あと補足ですが、今回のプログラムにはあちこちにスペースが入っています。これは見易さのためで、命令とパラメータの間のスペース（今回の場合、「circle」の直後のみ）以外は必要ではありません。好みで入れても入れなくてもいいです。


で、上のプログラムで（x,y）中心の円が描けると言うことは、このxとyという変数をちょっとずつ変化させながら、描画すれば、アニメーションになると言うことです。ということで、次のプログラムにしてみましょう。

 // 変数初期化
 x = 100
 y = 100
 r = 10

 repeat

  // 背景塗りつぶし
  color 0,  0,  0 // 黒
  boxf

  // 円の描画
  color 255, 255, 255 // 白
  circle x - r, y - r,  x + r, y + r

  // x座標を5増やす
  x = x + 5

  // 50ms待つ
  wait 5  

 loop

ちょっとプログラムが長くなってきたので、コメントを入れてみました。（←用語）
コメントとは、プログラムの節々に入れるメモみたいなものです。
//や;の後なら、好きなことが書けるので、自分で分かりやすいようなコメントを是非入れておきましょう。
この癖はつけておいたほうがいいです。

コメントを見れば、どの行がどんな役割があるか分かると思います。

ちょっと付け足すと、

・repeat命令にパラメータで繰り返し数を指定していないのは、無限に繰り返すことを意味します。
こんなループのことを無限ループと言ったりします。

・boxf命令にパラメータが1つもないのは、画面全体の塗りつぶしを意味します。

プログラム全体の流れとしては、
まず、無限ループに入る前に、変数を初期化しておきます。
そして、ループに入り、次のことを繰り返します。
①背景を塗りつぶす
　これがないと、前のターンで書いたものが残ったままなので必要です。試しに消してやってみるとよく分かります。
②円を描く
　その時の変数の値で(x,y)を中心に半径rの円を描きます。実質変化する変数はxのみですが・・・
③x座標を増やす
　ちょっと円の中心位置をずらします。これで、動いているように見えます。
④50ms待つ
　wait命令が、待ち時間を作る命令です。パラメータ×10ms待ちます。
　これがないと、フリーズに近い状況になってしまうので注意しましょう。絶対必要です。

とにかく、描く→待つ→描く→待つ→・・・と繰り返すのが基本です。
ゲームでも、おおよそこんな流れなので覚えておきましょう。

この例では、xを変化させましたが、yとかrとかを変化させても面白いかもしれません。

気付いた人はいるかもしれませんが、
上のプログラムを実行すると、チカチカします。
この対策は次回します。