［HSP］第1回 自機の表示 (シューティング・ゲームのミニ講座)

スクリプト言語の HSP については、公式ホームページの「HSPTV!」をどうぞ。


なお、このページはシューティング・ゲームのミニ講座シリーズの１つです。
今回は第1回「自機の表示」について説明します。(戻る)

自機のアニメ

自機のアニメーション処理は、シューティング・ゲームだけではなく全ての基本です。
まずは次のソースを試してみましょう。

*Main
    screen 0,600,400,SCREEN_FIXEDSIZE
    color $00,$00,$00:boxf
    color $00,$FF,$00
    font MSGOTHIC,50
    ;アニメ処理
    pos   0,200:mes "山":await 100
    pos  50,200:mes "山":await 100
    pos 100,200:mes "山":await 100
    pos 150,200:mes "山":await 100
    pos 200,200:mes "山":await 100
    pos 250,200:mes "山":await 100
    pos 300,200:mes "山":await 100
    pos 350,200:mes "山":await 100
    pos 400,200:mes "山":await 100
    pos 450,200:mes "山":await 100
    pos 500,200:mes "山":await 100
    pos 550,200:mes "山":await 100
stop

0.1秒毎に自機を表す「山」文字が左側から右側に連続して描かれました。
しかし、残像のように「山」文字が残り、綺麗なアニメーション処理とは見えませんね。
これを防ぐには「山」文字を描く前に画面を消去すれば良いのです。

*Main
    screen 0,600,400,SCREEN_FIXEDSIZE
    font MSGOTHIC,50
    ;アニメ処理
    color:boxf:color $00,$FF,$00:pos   0,200:mes "山":await 100
    color:boxf:color $00,$FF,$00:pos  50,200:mes "山":await 100
    color:boxf:color $00,$FF,$00:pos 100,200:mes "山":await 100
    color:boxf:color $00,$FF,$00:pos 150,200:mes "山":await 100
    color:boxf:color $00,$FF,$00:pos 200,200:mes "山":await 100
    color:boxf:color $00,$FF,$00:pos 250,200:mes "山":await 100
    color:boxf:color $00,$FF,$00:pos 300,200:mes "山":await 100
    color:boxf:color $00,$FF,$00:pos 350,200:mes "山":await 100
    color:boxf:color $00,$FF,$00:pos 400,200:mes "山":await 100
    color:boxf:color $00,$FF,$00:pos 450,200:mes "山":await 100
    color:boxf:color $00,$FF,$00:pos 500,200:mes "山":await 100
    color:boxf:color $00,$FF,$00:pos 550,200:mes "山":await 100
stop

上記の color:boxf が画面を消去する部分です。
ここで color 命令の３つの引数が省略されてますが、これは color 0,0,0 または color $00,$00,$00 と同じになります。
また、boxf 命令も４つの引数が省略されてますが、これは画面全体を表す boxf 0,0,600,400 と同じです。
詳しくはHSPスクリプト・エディタ上で color 命令にカーソルを合わせて「F1」キーを押します。
これでHSPのマニュアルが起動して命令の詳しい指定方法などが確認できますよ。

繰り返し命令

さて、上記のソースを見ると pos 命令の座標位置以外は同じですね。
このような場合は、座標を表す部分を変数に置き換え、共通部分を繰り返し命令の内部に書くのが普通です。
それでは書き直してみましょう。

*Main
    screen 0,600,400,SCREEN_FIXEDSIZE
    font MSGOTHIC,50
    ;アニメ処理
    x=0:y=200
    repeat 12
        color $00,$00,$00:boxf
        color $00,$FF,$00:pos x,y:mes "山"
        await 100
        x=x+50
    loop
stop

これで同じような処理を複数回書かなくても良くなりました。
また repeat 命令の繰り返しにより、アニメ処理の部分が分かりやすくもなりましたね。
さらにHSPのプログラミングらしく見えてきます。(笑)
なお、このアニメ処理は次のような構造になります。(フローチャート)

1. スクリーンの初期化
2. フォントの設定
3. アニメ処理の初期化(x=0、y=200)
4. アニメ処理を12回だけ(a)～(d)まで繰り返す
   1. 画面の消去
   2. 自機の描画
   3. ウェイトの処理
   4. 座標の計算

5. プログラムの停止

上記の方法でアニメ処理は行われますが 12 回して「山」文字が右側に来ると停止します。
これは repeat 命令で回数を 12 と指定してるからです。
そこで、今度は無限ループにして、右端から「山」文字が消えたら左端から現れるように改良します。
また、移動ドット数も 50 ドットから 5 ドットに減らして、ウエイト時間も 20 ミリ秒(0.02秒)に短くしてみました。

*Main
    screen 0,600,400,SCREEN_FIXEDSIZE
    font MSGOTHIC,50
    ;アニメ処理
    x=0:y=200
    repeat
        color $00,$00,$00:boxf
        color $00,$FF,$00:pos x,y:mes "山"
        await 20
        x=x+5:if(x>=600):x=0
    loop
stop

どうですか？
かなり滑らかに左から右に移動してますよね。
これこそがアニメーション処理の基本です。

ちらつき防止

それでは、どれぐらい高速な移動が可能なのでしょうか。
一番早くするには、ウエイト時間を最小の 0 にすることでしょうね。
また、移動ドット数も最小値の 1 ドットにしてみます。
それでは試してみましょう。

*Main
    screen 0,600,400,SCREEN_FIXEDSIZE
    font MSGOTHIC,50
    ;アニメ処理
    x=0:y=200
    repeat
        color $00,$00,$00:boxf
        color $00,$FF,$00:pos x,y:mes "山"
        await 0
        x=x+1:if(x>=600):x=0
    loop
stop

どうですか？
この速度がHSPでアニメーション処理を行う最高速度の限界です。
早いですね。

しかし、何だかちらつきませんか？
ちらつかない場合は、[F5]キーをもう一度押して、２つのウインドウを実行してみましょう。
このちらつきが発生するのは、画面を消去して「山」文字を描いてますよね。
ここの部分で「山」文字がチョー短い時間で消えてるのが原因です。
これを防ぐには、ウインドウの再描画を制御する必要があり次のようにします。

1. 再描画の停止
2. 画面の消去
3. 自機の描画
4. 再描画の開始
5. ウェイトの処理
6. 座標の計算

ウインドウの再描画の停止と開始は redraw 命令で行います。
この命令を使ってちらつきが防止できるか試してみましょう。

*Main
    screen 0,600,400,SCREEN_FIXEDSIZE
    font MSGOTHIC,50
    ;アニメ処理
    x=0:y=200
    repeat
        redraw 0
        color $00,$00,$00:boxf
        color $00,$FF,$00:pos x,y:mes "山"
        redraw 1
        await 0
        x=x+1:if(x>=600):x=0
    loop
stop

上記の redraw 0 が再描画の停止で redraw 1 が再描画の開始です。
前回のちらつきバージョンと今回のちらつき防止バージョンを比べてみて下さい。

どうですか？
２つのウインドウを見比べれば、明らかに今回の方がちらつきがなく滑らかですよね。
このちらつき防止対策が、アニメーション処理の一番重要な部分です。

自機の表示

それでは第1回目の「自機の表示」ソースを紹介します。

//------------------------------------------------------------------------------
// シューティング・ゲームのミニ講座 for HSP(Ver.3.3.2)
//==============================================================================
// 第1回「自機の表示」by 科学太郎
//------------------------------------------------------------------------------

//--------------------------------------
// メイン部
//--------------------------------------
*Main
    screen 0,600,400,SCREEN_FIXEDSIZE
    font MSGOTHIC,50
    repeat
        redraw 0
        color $00,$00,$00:boxf
        color $00,$FF,$00:pos x,y:mes "山"
        redraw 1
        await (1000/60)
    loop
stop

//------------------------------------------------------------------------------
// End of lesson-1.hsp
//------------------------------------------------------------------------------

上記のソースは、自機の表示のみですから座標計算の x=x+1:if(x>=600):x=0 の行は記述してません。
また、ウエイト時間が await (1000/60) となってますが、これはゲームのフレーム・レートが1秒間に 60 回を意味してます。
多くのゲームは、画面(ディスプレイ)の更新周期の 60 回に合わせて滑らかに表示できるようにしてます。
ここでは分かりやすく (1000/60) という数式にしてます。

なお、HSPの標準命令の await では正確な 60 フレームにすることは出来ません。
これは await 命令の引数に整数しか渡せず 1000÷60＝16.6666 という小数を扱えないからです。
正確な 60 フレーム(60FPS)にするには工夫するか、DirectX の命令である HSPDXFIX と呼ばれるプラグインを使います。
しかし、今回はミニ講座であるため標準命令だけでシューティング・ゲームを作成するので利用しませんよ。

これで「自機の表示」は終わります。
次はキーボードで「自機の操作」を紹介します。(次を読む)

［←前へ］ ［目次］ ［次へ→］

---