| HSP3 プログラミングの基礎Ⅲ | |
   |
| HSP3 プログラミングの基礎Ⅲ | |
| |
(2) ウィンドウと画像表示 2
◎ 画像の移動
プログラムの実行を指定時間だけ中断する。時間は10ミリ秒単位で指定する。
wait 時間 wait命令と同じであるが、高精度に処理できる。
await 時間
リアルタイムで更新される画面などの速度を一定に保つ時に使用する。
時間差をつけて2つの画像を表示する。
buffer 1
picload "gazou1.bmp"
screen 0, 640, 480
pos 200, 100
gcopy 1, 0, 0, 32, 32
wait 50 ;時間待ち(500ms)
pos 300, 100
gcopy 1, 0, 0, 32, 32
stop
座標(200, 100)に画像データを表示し、0.5秒待ってから座標(300, 100)に表示する。
wait命令の待ち時間は10ミリ秒単位で指定する。サンプルでは、50を指定しているので、50×10ミリ秒＝500ミリ秒（0.5秒）の時間待ちとなる。
ここで、1つ目の画像を消去してから2つ目の画像を表示すれば画像が移動したように見せることができる。
画像を移動したように見せる。
buffer 1
picload "gazou1.bmp"
screen 0, 640, 480
pos 200, 100
gcopy 1, 0, 0, 32, 32
wait 50
color 255, 255, 255 ;白色設定
boxf ;塗りつぶし四角形描画
pos 300, 100
gcopy 1, 0, 0, 32, 32
stop
画像が右へ移動する。（移動したように見える。）
boxf命令は指定範囲を塗りつぶす命令である。サンプルでは、座標を指定していないのでウィンドウ全体となる。白色で塗りつぶしているので、ウィンドウ全体を消去したのと同じになる。ウィンドウを消去するcls命令もあるが、boxf命令の方が処理が早い。
描画するモードを設定する。モードが0のときウィンドウには反映されない。モードが1のとき反映される。
redraw モード
モード0でウィンドウに画像を表示したり、メッセージを表示しておき、最後にモード1にすることでウィンドウの書き換えのちらつきを抑えてスムーズに見せることができる。
画像を右へ水平移動させる。X座標100から300までを移動させる。
buffer 1
picload "gazou1.bmp"
screen 0, 640, 480
kaisu = 20 ;繰り返し回数 ←※１a
x1 = 100 ;開始位置
x2 = 300 ;終了位置
y = 100 ;Y座標
dx = (x2 - x1) / kaisu ;移動量 ←※１ｂ
repeat kaisu
redraw 0 ;描画モード 0
color 255, 255, 255
boxf
pos x1 + dx * cnt, y
gcopy 1, 0, 0, 32, 32
redraw 1 ;描画モード 1
wait 50
loop
stop
画像が右へ水平移動する。
※1a～※1bの部分で初期値の設定をしている。変数kaisuは繰り返しの回数、変数x1とx2で開始と終了のX座標、変数yはY座標、変数dxは移動量（左図参照）を計算で設定している。
repeat命令は指定した回数をloop命令までの範囲を繰り返す命令である。今何回目の繰り返しかは変数cntで参照することができる。
redraw命令は画像の描画モードを指定する命令である。モード0で仮に描画し、モード1で実際に描画する。このサンプルのようにモード0で描画処理をして、最後にモード1で一度に描画させることで画像のちらつきを抑えることができる。
繰り返し回数kaisuの値を増やすと移動量が小さくなるのでゆっくりと移動する。逆に、繰り返し回数を減らすと移動量が大きくなるので速く移動する。いろいろと試してみよう。
次に、3つのサンプルプログラムを示す。変更されている部分などを確認すること。
・サンプルA … 左（X座標300から100）に移動する。
・サンプルB … 下から上（Y座標300から100）に移動する。
・サンプルC … 斜め（座標(100,100)から(300,300)）に移動するを示す。
;サンプルA 左に移動 buffer 1 picload "gazou1.bmp" screen 0, 640, 480 kaisu = 20 ;繰り返し回数 x1 = 100 ;開始位置 x2 = 300 ;終了位置 y = 100 ;Y座標 dx = (x2 - x1) / kaisu ;移動量 repeat kaisu redraw 0 color 255, 255, 255 boxf pos x2 - dx * cnt, y ;座標指定(x,y) gcopy 1, 0, 0, 32, 32 redraw 1 wait 50 loop stop
;サンプルB 上に移動 buffer 1 picload "gazou1.bmp" screen 0, 640, 480 kaisu = 20 ;繰り返し回数 x = 200 ;X座標 y1 = 100 ;開始位置 y2 = 300 ;終了位置 dy = (y2 - y1) / kaisu ;移動量 repeat kaisu redraw 0 color 255, 255, 255 boxf pos x, y2 - dy * cnt ;座標指定(x,y) gcopy 1, 0, 0, 32, 32 redraw 1 wait 50 loop stop
;サンプルC 斜めに移動 buffer 1 picload "gazou1.bmp" screen 0, 640, 480 kaisu = 20 ;繰り返し回数 x1 = 100 ;開始位置 y1 = 100 x2 = 300 ;終了位置 y2 = 300 dx = (x2 - x1) / kaisu ;移動量 dy = (y2 - y1) / kaisu repeat kaisu redraw 0 color 255, 255, 255 boxf pos x1 + dx * cnt, y1 + dy * cnt ;座標指定(x,y) gcopy 1, 0, 0, 32, 32 redraw 1 wait 50 loop stop
◎ 透明色の設定
gcopy命令でコピーした画像は四角形なので、背景に対して四角形で表示される。ここまでのサンプルでは背景が白色で、画像のまわりの不要な部分も白色なので不都合はなかった。ここでは、背景が白色以外のときに画像のまわりの不要な部分は背景が見えるように、その部分を透明色にする。
gcopy命令でコピーするモードを設定する。モードが0または省略したとき通常コピー、モードが2のとき透明色付きコピーである。
gmode モード
モード2では透明色は完全な黒色(color 0,0,0)を透明色として処理する。
背景色を緑色にして、画像を右へ水平移動させる。
buffer 1
picload "gazou1.bmp"
screen 0, 640, 480
kaisu = 20
x1 = 100
x2 = 300
y = 100
dx = (x2 - x1) / kaisu
repeat kaisu
redraw 0
color 0, 255, 0 ;緑色設定
boxf
pos x1 + dx * cnt, y
gcopy 1, 0, 0, 32, 32
redraw 1
wait 50
loop
stop
四角い画像が右へ移動する。
透明色の設定方法
画像のまわりの白い部分を表示しないように、すなわち透明にするには次のようにする。
・画像データの透明にしたい部分を黒色（RGB=0,0,0）にする。
gazou2.bmp(31KB)
・gmode命令を使ってgcopy命令でコピーするモードを2に変更する。
透明色付きで画像を表示する。
buffer 1
picload "gazou2.bmp" ;画像読み込み
screen 0, 640, 480
kaisu = 20
x1 = 100
x2 = 300
y = 100
dx = (x2 - x1) / kaisu
gmode 2 ;コピーモード設定
repeat kaisu
redraw 0
color 0, 255, 0
boxf
pos x1 + dx * cnt, y
gcopy 1, 0, 0, 32, 32
redraw 1
wait 50
loop
stop
画像が右へ移動する。
画像に透明と黒色が必要な場合は、透明をRGB=0,0,0、黒色をRGB=1,1,1などの黒色に近い色にする。
画像データのまわりが透明になったので、背景をどのような色に変更しても大丈夫である。背景色を変えて実行してみよう。
| |
|
| 2006 © Hiroshi Masuda |