第５回　これであなたもプログラマ「３．のこのこカメさん」

５−３　のこのこカメさん

さて、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を繰り返して返すようになります。（この手法は比較的便利ですので覚えておくと良いでしょう。）
用意した画像は、足や頭の位置の違う２つの画像(1005と1006)を用意しましたから、このサンプルでは、１歩進む毎に1005と1006が交互に現れるようになっています。

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

　　　　

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

　　　　

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

肝心の、動きの方はそれほど難しいものではありませんね。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
これでも良いですね。カメさんが４匹になりますが、ま、ここは覚えたての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の位置です。これを内側のループに入れると、外側が１回ループする間に４回実行されますね。でも、そこで時間を稼いでもあまり意味がありませんので、上の例のような１回だけ実行される位置に入れています。
入れる位置を間違えると、１匹ずつのカメさんが表示される度に「待ち」が入ってしまう訳ですね。

前へ　　　　　目次へ　　　　　次へ
第５回　これであなたもプログラマ「３．のこのこカメさん」