第5回 これであなたもプログラマ「3.のこのこカメさん」

5−3 のこのこカメさん

さて、For Nextを使って、ちょっとしたアニメーションを作ってみましょう。
ボタンをタップすると、カメさんが左から右に歩くだけのものです。

配置は次の通りです。

    

ボタンには次のコードを記述します。
    Dim x as Integer
    
    For x=0 to 129 
        DrawBitmap 1005+Mod(x,2),x,80
        Delay 0.05
    Next
カメさんは、これです。

   1005  1006

プログラムは、For Nextを使って、カメさん画像の座標を左から右、つまり、0〜129まで変化させています。
スクリーンの右端はX=159のはずですが、カメさん画像の幅が30ピクセルあるので、その分差し引いての最大で129です。
また、Mod()は、割り算の余りを返す関数でしたね(確か、どこかで出ましたよね?)
Mox(x,2)とすると、x=0,1,2,3,4,...,128,129 と変化するにつれ、Mod(x,2)=0,1,0,1,0,...,0,1 と 0と 1を繰り返して返すようになります。(この手法は比較的便利ですので覚えておくと良いでしょう。)
用意した画像は、足や頭の位置の違う2つの画像(1005と1006)を用意しましたから、このサンプルでは、1歩進む毎に1005と1006が交互に現れるようになっています。

もう1つ重要な点があります。これは、画像の動かし方です。
アニメーションを作る場合の基本的な動作は、次の通りです。

    

このように位置を変えながら、画像の表示と消去を繰り返すだけで、原理は簡単です。しかし、キレイに見せるにはちょっとしたコツがあります。
描いて、消して、描いて、消して、を繰り返した状態は、正確に言えば「点滅」させていることと変わりありませんので、画面のチラツキが発生します。 そこで、このチラツキを無くすためには、「前の状態の消去と次の描画を出来るだけ同時に行う」と言うことです。
例えば、
  {消去}
  {次の座標の処理}
  {描画}
という流れではなく、
  {消去}
  {描画}
  {次の座標の処理}
という手順が望ましくなります。
究極的には、消去と描画を同時に行うわけですが、これが、今回のカメさんで使った手法です。
カメさんのアップは、次のようになっています。

    

後ろに1ピクセル分の空白を含んでいますので、カメさんが右に1ピクセル動くと、この空白部分が前のカメさんを結果的に消すことになります。結果的に、消去と描画が同時に行われるためチラつきが無く、また、比較的早く動くようになっています。
この方法は、あまり移動量が大きいと、用意すべき余白が大きくなり、画像が大きくなってしまうので、移動量が比較的少ない場合に有効です。
移動量が多い時は、同じ大きさの空白画像で消去するか、動いた分だけ消すか、と言った方法を取ります。
(こちらの方法は、また、そのうち、お目にかかると思います。)

肝心の、動きの方はそれほど難しいものではありませんね。For Nextを使って画像を表示する座標を変えているだけなので、わかりやすいのではないでしょうか。
さて、次は、このカメさんの数を増やしてみましょうか。
    Dim x as Integer
    
    For x=0 to 129 
        DrawBitmap 1005+Mod(x,2),x,30
        DrawBitmap 1005+Mod(x,2),x,60
        DrawBitmap 1005+Mod(x,2),x,90
        DrawBitmap 1005+Mod(x,2),x,120
        Delay 0.05
    Next
これでも良いですね。カメさんが4匹になりますが、ま、ここは覚えたてのFor Nextを使って、
    Dim i as Integer
    Dim x as Integer

    For x=0 to 129
        For y=30 to 120 Step 30
            DrawBitmap 1005+Mod(x,2),x,y
        Next
        Delay 0.05
    Next
ずいぶんと、スッキリしました。
注意する点は、Delayの位置です。これを内側のループに入れると、外側が1回ループする間に4回実行されますね。でも、そこで時間を稼いでもあまり意味がありませんので、上の例のような1回だけ実行される位置に入れています。
入れる位置を間違えると、1匹ずつのカメさんが表示される度に「待ち」が入ってしまう訳ですね。



前へ     目次へ     次へ

第5回 これであなたもプログラマ「3.のこのこカメさん」