アニメーション
本章はキャラクタと爆発画像を使用しています。初めにダウンロードしてください。
魔法のエフェクトやモンスターが動くアニメーション、美麗なムービーを作りたいと思いますよね。
アニメーションはパラパラ漫画のやり方であたかも動いているように見せます。
一枚物の絵を何枚も用意して変えていくのも良いのですが、キャラクターの様に小さいものであれば、
キャラ一つをチップとして、いくつ物チップを集めて一枚物の絵とした方が処理が楽になります。
…ということで、キャラクターを動かす前に画像の一部分(チップ)を処理するやり方から入ります。
HSPウィンドウ内に表示した画像の一部分をコピー(切り取る)にはgcopy命令を使用します。
書式は「gcopy ウィンドウID コピーしたい部分の左上x座標,左上y座標,コピーしたい幅,高さ」です。
p1で指定したウィンドウの(p2,p3)座標から横幅p4、高さp5ドットをカレントポジションに貼り付けます。
うーんちょいヤヤコシイですかね?
ウィンドウIDというのは、0〜31まであり、実行した時最初に起動するウィンドウがID0です。
「百聞は一見に如かず」ということで、試すのが1番手っ取り早いですね。
ウィンドウ内の一部をコピーする命令ですので、別に表示させた文字でも良いわけです。
mes "ココに表示させている\n文章の一部分を\n別の位置にコピーしたいと\n思います。"
pos 300, 200
gcopy 0, 10, 5, 80, 50 ; カレントポジションに(10,5)座標から80*50ドットコピーして張り付ける
stop
それでは応用としてお待ちかねのアニメーションに入ります。
まず画像をロード。ウィンドウサイズが画像のサイズにならないようにpicload命令のp1を1にしましょう。
そしてカレントポジションを任意の位置に変更し、その場所でアニメーションさせます。
(例) キャラを足踏みさせる (画像ダウンロード後実行すること)
picload "character.bmp",1
repeat
pos 200, 100
if cnt \ 4 = 0 : gcopy 0, 0, 0, 32, 32 ; cntを4で割った余りが0の時(0,0)から32*32コピー
if cnt \ 4 = 1 : gcopy 0, 32, 0, 32, 32 ; cntを4で割った余りが1の時(32,0)から32*32コピー
if cnt \ 4 = 2 : gcopy 0, 64, 0, 32, 32 ; cntを4で割った余りが2の時(64,0)から32*32コピー
if cnt \ 4 = 3 : gcopy 0, 32, 0, 32, 32 ; cntを4で割った余りが3の時(32,0)から32*32コピー
wait 50
loop
わかりやすいように崩して書いてみました。
左足・両足合わせ・右足・両足合わせ…と4枚で1回(ターン?)をしています。
もっと大雑把でも良いと言うのでしたら、左・右・左・右…と2枚で1回の繰り返しでも十分でしょう。
picload "character.bmp",1
repeat
pos 200, 100
if cnt \ 2 = 0 : gcopy , , , 32, 32 : else : gcopy , 64, , 32, 32 ; 2パターン
wait 50
loop
何度も書くようですが、gcopy命令はウィンドウ上の画像をコピーする命令です。
ということは、実際ゲームを作る場合、キャラをどこかに表示させて一部をコピーしなければなりません。
画面上にアニメーションの元となる画像が見えているのは滑稽ですよね?
こういった場合は仮想画面と呼ばれる、パソコン内部(メモリ上)だけ表示する画面を利用します。
またヤヤコシイことを書いてますが描画してるけどディスプレイに表示しないウィンドウ、ということです。
書式は「buffer ウィンドウID,横幅,高さ,画像モード」です。
またウィンドウIDがでてきました。もちろんgcopy命令のウィンドウIDと同じモノです。
HSPが使用できるウィンドウのことで、最大32個まで持つことが出来るのです。
0から順番に、と言う決まりはなく、いきなり31を使用することもできます。
ID0は先に述べたように、実行時に何も命令しなくても起動するウィンドウです。
ID1はHSPがシステムで使用するものらしいので、1だけは使用しないようにしてください。
p2,p3のウィンドウサイズは通常のウィンドウと同じで省略するとp2は640、p3は480となります。
画像モードと言うのは、使用可能な色数を決めるもので、0か1の2種類あります。
0または省略で色数約1677万色(パソコンで使用可能な全色)を使用するフルカラーモードとなります。
1はパレットモードと呼ばれ1677万色中の任意の256色が使用できます。
それぞれメリット・デメリットがありますのでどちらが良いかとは一概に言えません。
buffer 2 ; buffer 2, 640, 480, 0 と同じ意味
picload "character.bmp"
stop
上記のスクリプトで画像は見えませんがロードしました。
この仮想画面の一部を先程のgcopy命令でメイン画面にコピーすればよいわけですね。
gcopy命令のp1のウィンドウIDは「buffer 2」を使用したので、ID2となります。
buffer 2
picload "character.bmp"
pos 10, 10
gcopy 2, 0, 0, 32, 32
stop
実行すると…何も表示されません。
表示されないのは「pos 0, 0」が非表示なウィンドウID2の(0,0)座標だからです。
新しくウィンドウを作成すると、それ以後は画像の処理(描画)先はそのウィンドウになるのです。
この画像処理先ウィンドウを変更するにはgsel命令を使用します。
書式は「gsel ウィンドウID」で、p1で指定したウィンドウIDに描画先を変更します。
buffer 2
picload "character.bmp"
gsel 0 ; 描画先をウィンドウID0に変更
pos 10, 10
gcopy 2, , , 32, 32
stop
でもコピーしたい部分が四角形でなく丸型や人の形にだけコピーするといったことは出来ません。
余白部分は背景画像・背景色に合わせないといけないの?となってしまいますがそんなことはありません。
実は透過処理といって、一部の色を透かせることが出来るのです。
コレをする(透過命令ではないです)のがgmode命令です。
書式は「gmode モード,横幅,高さ,合成時ブレンド率」となってます。
p1のモード0は、最も一般的なモードで、初期起動時は0になってます。
モード1は、フルカラーならフルカラー、パレットならパレットモードのウィンドウのみコピーできます。
色数モードが統一されていなければなりませんが、モード0よりも高速にコピーが可能となります。
モード2は、今回使用したい透過色付きコピーで、RGBすべての輝度が0(黒)の時、透過されます。
モード3は、半透明合成コピーと言い、フルカラーモード時のみ使用可能なモードで、
p4のブレンド率でコピーします。0をブレンド率0%、256がブレンド率100%となります。
モード4は、透明色付き半透明合成コピーと言い、現在のcolorで指定したRGB輝度が透過色となります。
buffer 2
picload "character.bmp"
gsel 0 ; 描画先をウィンドウID0に変更
gmode 2 ; 現在の描画先(ID0)のモードを透明色付きコピーモードに変更
pos 10, 10
gcopy 2, , , 32, 32
stop
さて、なぜ画像の一部分を切り出してコピーする方が処理が楽になるのでしょう?
それは、先程の様にパターンが少ないと良いですが、10パターンともなってくると書く量も増えます。
コレをrepeatを使った繰り返しでやることで手間が省けるからですね。
buffer 2
picload "bomb.bmp"
gsel 0
gmode 2 ; 現在の描画先(ID0)のモードを透明色付きコピーモードに変更
repeat
color 50, 150, 50 : boxf
pos 100, 50
gcopy 2, cnt \ 9 * 32, 0, 32, 32 ; cntを9で割った余り*32ドット位置からコピー
wait 3
loop
上のスクリプトを実行して気づく方もいたと思いますが、画面がチカチカしていますね。
ありがちな質問ですのでFAQにも載せているのですが、頻繁に画面を書き換えるとチラついてしまいます。
実際は1回でもちらつくのですが、繰り返しをすることで目立ってしまいます。
こういった場合redraw命令を使用し後でまとめて描画する、といったことでチラつきは改善されます。
redrawの書式は「redraw モード,描画する左上x座標,y座標,描画する横幅,高さ」です。
モードは0〜3ありますが、
0・2は仮想画面の書き換えだけで実際のウィンドウは書き換えません。
1・3は仮想画面と実際のウィンドウの両方を書き換えるモードです。
1は初期のモードで仮想も含めて全て再描画させることが出来ます。
一方3は仮想画面のみに描画されている画像はまだ表示させないまま再描画させます。
p2〜p5を省略すると範囲をウィンドウ全部とします。
buffer 2
picload "bomb.bmp"
gsel 0
gmode 2 ; 現在の描画先(ID0)のモードを透明色付きコピーモードに変更
repeat
redraw 0 ; ここからは仮想画面だけ書き換える
color 50, 150, 50 : boxf
pos 100, 50
gcopy 2, cnt \ 9 * 32, 0, 32, 32 ; cntを9で割った余り*32ドット位置からコピー
redraw 1 ; ここでまとめて描画する
wait 3
loop
書き換える範囲が広い場合、redrawを使った方がかなり高速です。