HSP3 ゲームのプログラミング

(2) キャラクタ（画像）の移動

　移動の処理は文字を移動した手法と同じである。すなわち、「消しては書く」である。文字の代わりに画像を移動させる処理について学習する。

(move21.hsp)
　2つの画像を並べて表示する。

・画像を用意する。
　Windows付属のペイント［スタート → すべてのプログラム → アクセサリ → ペイント］を使って次のような画像を作成する。

　32×32ドットのサイズのキャラクタを2つ用意する。
　ダウンロード　move1.bmp (58.6KB)　←右クリックして、メニューから［対象をファイルに保存(A)...］を選択し、HSPのプログラムを保存しているフォルダ内に move1.bmp というファイル名で保存する。

    buffer 1                ;※1 ウィンドウID 1番
    picload "move1.bmp"     ;※1 画像ファイル読み込み
    screen 0                ;※2 ウィンドウID 0番
    gmode 2, 32, 32         ;※3 コピーモード設定

    pos 200, 100    ;※4 カレントポジション設定
    gcopy 1, 0, 0   ;※5 画像コピー
    pos 250, 100    ;※4 カレントポジション設定
    gcopy 1, 32, 0  ;※5 画像コピー
    stop

2つの画像が並んで表示される。

　※1のbuffer命令で画像読み込み用のウィンドウを初期化する。このウィンドウは表示されない。次のpicload命令で画像ファイルがウィンドウID1番に読み込まれる。
　※2のscreen命令でウィンドウID0番としてウィンドウを初期化する。ウィンドウのサイズを指定していないので、640×480で開かれる。以後、mes命令やgcopy命令の表示対象はウィンドウID0番のウィンドウになる（カレントウィンドウがID0番になる）。

　※1の2つの命令と※2の命令の順番を入れ替えると表示対象がウィンドウID1番になる。したがって、表示されているウィンドウID0番には何も表示されない。
　この場合、カレントウィンドウを変更するgsel命令を使って次のようにする。

    screen 0                ;※2 ウィンドウID 0番
    buffer 1                ;※1 ウィンドウID 1番
    picload "move1.bmp"     ;※1 画像ファイル読み込み
    gsel 0    ;カレントウィンドウをID0番に設定する。

　※3のgmode命令でコピーモードとコピーサイズを設定する。モード2は黒色を透明色としてコピーする。
　※4のpos命令でカレントポジションを設定し、※5のgcopy命令でウィンドウID1番の(0,0)から幅と高さを32ドットのサイズでウィンドウID0番（カレントウィンドウ）にコピーする（2つ目のgcopy命令では(32,0)から幅と高さを32ドットのサイズでコピーする）。

表示位置	画像コピー

(move22.hsp)
　画像を斜めに移動させる。上下左右の壁ではね返るようにする。

    buffer 1                ;ウィンドウID 1番
    picload "move1.bmp"     ;画像ファイル読み込み
    screen 0                ;ウィンドウID 0番
    gmode 2, 32, 32    ;コピーモード設定
    x = 100 : y = 100
    dx = 8 : dy = 8
    repeat
        redraw 0    ;仮描画
        color 255, 255, 255     ;白色。背景と同じ色。
        boxf            ;ウィンドウと同じサイズの四角形を塗りつぶしで描画する。
        color 0, 0, 0   ;黒色
        pos x, y            ;カレントポジション設定
        gcopy 1, 0, 0     ;画像コピー
        x = x + dx      ;x座標加算
        y = y + dy      ;y座標加算
        if x > ginfo_winx - 32 : dx = -dx   ;右壁に衝突。
        if x <= 0 : dx = -dx                ;左壁に衝突。
        if y > ginfo_winy - 32 : dy = -dy   ;下壁に衝突。
        if y <= 0 : dy = -dy                ;上壁に衝突。
        redraw 1    ;実描画
        await 100       ;無限ループの時のお約束
    loop
    stop

画像がウィンドウ内を移動する。

　プログラムは、前の課題(move51)で作成したものを元に、太字部分を追加・修正しただけである。条件式のginfo_winx-32は画像のサイズに合わせて調整してある。

(move23.hsp)
　画像をウィンドウ内で移動させる。画像を切り替える。

    buffer 1                ;ウィンドウID 1番
    picload "move1.bmp"     ;画像ファイル読み込み
    screen 0                ;ウィンドウID 0番
    gmode 2, 32, 32    ;コピーモード設定
    x = 100 : y = 100
    dx = 8 : dy = 8
    gf = 0          ;画像切り替え用
    repeat
        redraw 0    ;仮描画
        color 255, 255, 255     ;白色。背景と同じ色。
        boxf            ;ウィンドウと同じサイズの四角形を塗りつぶしで描画する。
        color 0, 0, 0   ;黒色
        pos x, y            ;カレントポジション設定
        if gf = 0 {
            gcopy 1, 0, 0   ;画像コピー
            gf = 1
        } else {
            gcopy 1, 32, 0  ;画像コピー
            gf = 0
        }
        x = x + dx      ;x座標加算
        y = y + dy      ;y座標加算
        if x > ginfo_winx - 32 : dx = -dx   ;右壁に衝突。
        if x <= 0 : dx = -dx                ;左壁に衝突。
        if y > ginfo_winy - 32 : dy = -dy   ;下壁に衝突。
        if y <= 0 : dy = -dy                ;上壁に衝突。
        redraw 1    ;実描画
        await 100       ;無限ループの時のお約束
    loop
    stop

2つの画像が切り替わりながら、ウィンドウ内を移動する。

(move92.hsp)
　左右反転した画像を追加して、右方向へ移動するときと左方向へ移動するときとで画像を切り替える。

・画像は図のような位置に追加する。
　ダウンロード　move2.bmp (58.6KB)　（【注】ファイル名は move2.bmp に変更した。）

・左右方向で画像を切り替えるための変数gf2を追加する。初期値は0とする。
・画像切り替えの判定は次のようにプログラムする。

        if gf2 = 0 {    ;右方向へ移動
            if gf = 0 {
                gcopy 1, 0, 0   ;上段左画像コピー
                gf = 1
            } else {
                gcopy 1, 32, 0  ;上段右画像コピー
                gf = 0
            }
        } else {        ;左方向へ移動
            if gf = 0 {
                gcopy 1, 0, 32  ;下段左画像コピー
                gf = 1
            } else {
                gcopy 1, 32, 32 ;下段右画像コピー
                gf = 0
            }
        }

・右方向へ移動して右壁に衝突したとき、gf2=1にする。同じようにして、左方向へ移動して左壁に衝突したとき、gf2=0にする。

（リスト）

2007 © Hiroshi Masuda