なんか作って載せます

おお、動いた。

第14回:アニメーションの基本



 画面上で絵が動くことをアニメーションと呼びます。
 HSPのスクリプトを使って、アニメーションを作ってみようというのが今回の内容です。

 1コマ目の絵、2コマ目の絵、……というように、絵を一定時間おきに切り替えることで、絵が動いているように見せられます。


 画像の表示には、picload命令を使いました。
 ですが、picload命令は画面全体を一度に置き換えてしまうため、絵を動かすことには向いていません。

 そこで代わりに使うのが、「celload命令」です。
 celload命令は、「celload "画像ファイル名" , ウィンドウID」のようにパラメータを指定します。

 「画像ファイル名」とは、文字通り読み込ませる画像ファイル名のことです。
 「ウィンドウID」は、HSPが管理するウィンドウや画像素材を保存しておくための場所を示すもので、0から始まる数字を指定することができます。
 最初に表示されているHSPのウィンドウがID0なので、ユーザーはID1から自由に使うことができます。

 例えば、「celload "chara.bmp",1」とすると、「chara.bmp」という画像ファイルを、ウィンドウID1に読み込んで素材として使う準備を行うということになります。

 そして、読み込んだ素材を表示する場合は、「celput命令」を使います。
 「celput 1」と指定すれば、ウィンドウID1に読み込まれた画像を表示します。
 パラメータは、ウィンドウIDです。

 では、実際に画像ファイルを読み込んで表示してみます。

 ちなみに、上に出ている「chara.bmp」はこれです。付属CD-ROMに入ってました。
キャラクタ画像

キャラクタを表示するだけ

 celput命令で表示される位置は、pos命令で指定されたカレントポジションになります。

キャラクタ画像・表示

 実行すると、このように表示されます。

 キャラクタ画像を読み込み、画面全体を黒く塗りつぶした後、(300,200)の位置に読み込んだキャラクタ画像を表示しています。


 では次に、絵を動かしてみます。

キャラクタを動かす1

 これを実行すると、キャラクタ画像が画面左から右へじりじりと動いていきます。
 なぜなら、「x=x+2」で、x座標に2を加算し続けるからです。
 キャラクタ画像は、画面右へと永久に動いていくことになります。

 画面全体をboxf命令で塗りつぶし、以前に描いた絵が残ってしまうのを防いでいます。
 cls命令でも画面全体を塗りつぶせますが、いろいろな設定もクリアされてしまうので、アニメーション作成時には使わない方がいいみたいです。

 await命令もアニメーション作成時には必須になる命令で、wait命令よりも細かい精度で待ち時間を調整することができます。


 この例では、実行時に動くキャラクタ画像がちらつきます。
 なぜなら、画面全体を塗りつぶしてからキャラクタ画像を描いているため、一瞬だけその部分がちらついて見えるのです。当然、見栄えはあまり良くありません。

 そこで、1コマを完全に描画するまで画面には反映させないようにするため、「redraw命令」という命令を使います。

 redraw 0 … 描画命令の実行結果をすぐに反映させない
 redraw 1 … 描画命令の実行結果をすぐに反映させる

 「redraw 0」を実行した後は描画命令を実行してもすぐには画面に反映されず、「redraw 1」を実行した時にまとめて反映されるということになります。


 celput命令は、読み込んだ画像素材を描画しますが、単純な画像のコピーだけでなく、透過などいくつかの方法を選ぶことができます。
 そのための設定を行うのが、「gmode命令」です。
 「gmode コピーモード」のように指定します。

 コピーモードは8種類ありますが、ここでは今回の内容で使うものだけ紹介します。

 モード0…通常のコピー
WindowsのシステムAPIを使った画像コピーを行います。
最も標準的なモード。
多くの場合、ほかのモードよりも高速で処理されます。

 モード2…透明色付きコピー
RGBが全て0(完全な黒)のドットは透明色とみなされ、コピーされません。

キャラクタを動かす2

 ウィンドウID1にキャラクタ画像、ID2に背景画像を読み込みます。
 そして、ラベルkuriの中を延々とループします。
 最初に背景画像をそのまま表示し、次にキャラクタ画像を黒を透明色とみなすモードで表示します。
 x座標に2加算し、redraw 1で全ての描画を反映させます。その繰り返し。

キャラクタを動かす2・実行

 実行するとこのように表示され、キャラクタ画像が左から右へとじりじりと動いていきます。もちろん、ちらつきはありません。

 なるほどなぁ、って感じです。


 今回はこれで終わり。


2012/05/25/Fri 更新

inserted by FC2 system