ゲーム制作と創作の
「語らいの一時オンライン」
へようこそ

＜第1回＞自機を作ってみる！

＜第2回＞敵を作ってみる！

＜第3回＞当たり判定とスピード変化処理を作ってみる！

完成版の実行ファイルはこちら

＜第1回＞自機を作ってみる！

2012/10/10

まずは自機の表示・移動・弾発射までを作ってみる

ゲーム作りの基本の一つと言えば、インベーダーゲームを挙げる方も多いでしょう。
元祖『スペースインベーダー』は社会現象を巻き起こしたゲームなので、コンピューターゲームをよく知らない方でも名前は聞いたことがあるはずです。
様々な亜流を生むほど大ヒットし、シューティングゲームの祖でもあり、その後の業界にも多大な影響を与えた作品です。
今回はそんなインベーダータイプのゲームを作っていきます。

第1回は自機を表示し、カーソルの左右で移動させることが出来、スペースキーで弾を発射することが出来るところまで作成します。
では、早速始めていきましょう！


今回も各行に注釈を入れていますので、分かりにくそうな部分に絞って解説します。
*main処理では開始時に「redraw 0」を入れ、実際の画面への描画をせず、自機と弾を内部処理で描画、その後「redraw 1」で実際の画面への描画を行っています。
今後大量の敵と敵の弾が表示されることになるので、結構画面の書き換えが多くなります。
直接描画処理を行っていては、画面のちらつきが目立つことになるため、このような処理にしています。
弾を撃つ処理は、スペースキーを押した時、画面上に弾が無ければ発射するようにしています。
「stick」命令を使用することで、スペースキーをジョイスティックのボタンのように扱うことが出来ます（トリガータイプと言います）。
スペースキーで弾を発射した後、押しっぱなしにしていても次の弾は発射されません。
プログラムの書き方を説明すると、「stick」命令の後に入力結果を入れる変数「st」を記述し、次の行で「st」が16なら（スペースキーが押されたら）という判定をしています。
もし、「stick」命令を使ってキーの押しっぱなしを検出したい場合には、「stick 変数,非トリガータイプにしたいキー」というように記述します。
「if s=16 & bl=0:bl=1:bx=x+3:by=y-16」という行では、スペースキーが押され、弾が出ていなければ、弾を出し、弾のX座標は自機+3、弾のY座標は自機-16という意味です。
左右に移動する処理では「stick」ではなく「getkey」を使用しています。
「getkey」は押しっぱなしのキーを検出するのに使用します。
左キーが押されたかどうかを変数「left」、右キーが押されたかどうかを変数「right」に格納します。
「x=limit(x,0,winx-16)」という部分は自機のX座標「x」の範囲を指定しています。
ここでは0からwinx-16までを範囲としています。
最後に弾を表示する処理ですが、まず、弾のフラグ「bl」が1なら処理します。
「by-=bsp:if by<-16:bl=0」では、弾のY座標「by」を弾の速度「bsp」ずつ更新し、「by」が-16より小さくなったら（つまり画面の上に消えたら）弾のフラグを0にしています。

<p class="program">
*init
title"Invader"//タイトルの表示
#define winx 320//画面のXサイズ
#define winy 240//画面のYサイズ

//自機の初期設定
x=153.0:y=220.0//自機の初期位置
bsp=4.0//弾の移動速度

screen 0,winx,winy,0//画面作成
cls 4//画面消去
pos 80,100:color 255,255,255:mes"Push space to start!"//スタート画面

*start
stick st//入力設定
if st=16:goto *start2//スペースキーで次へ
await//ウェイト
goto *start//戻る

*start2
cls 4//画面消去
pos 130,100:color 255,255,255:mes"Ready!"
await 1000//ウェイト

*main
redraw 0//画面を描画しない
color 0,0,0:boxf 0,0,winx,winy//黒で画面全体を塗り潰す

//弾を撃つ
stick s//スペースキーが押されているか判定する準備
if s=16 & bl=0:bl=1:bx=x+3:by=y-16//スペースキーが押されていて、画面上に弾がなければ弾が画面上にあるというフラグを1にして、弾の座標を自機の上に設定する

//左右に移動する
getkey left,37:if left=1:x-=2//カーソルキー左が押されていたら自機を左に移動する
getkey right,39:if right=1:x+=2//カーソルキー右が押されていたら自機を右に移動する
x=limit(x,0,winx-16)//自機のX座標の範囲を設定する

//自機表示
color 255,255,255:pos x,y:mes"凸"

//弾のフラグが立っていれば弾を表示する
if bl=1:{
	color 255,255,255:pos bx,by:mes"|"//弾を表示する
	by-=bsp:if by<-16:bl=0//弾のY座標を更新し、画面から消えたら弾が画面上にあるというフラグを0にする
}

await 2//ウェイト
redraw 1//画面を描画する
goto *main//戻る
		</p>

次回は敵を配置して、動かしていきます！
お楽しみに♪

＜第2回＞敵を作ってみる！

2012/10/13

敵と敵の弾の表示を作ってみる

今回は敵を配置し、敵が弾を撃って来るようにします。
敵の数は50匹、敵の弾は画面上に最大4つまでとします。
今回も各行にコメントを入れてありますので、ポイントを絞って解説します。
敵の初期設定のところでは、配列変数を設定しています。
ポイントとしては、X座標を51個用意しているところが挙げられます。
敵は50匹（0番から49番まで）なのですが、敵の移動ルーチン内で、生き残っている敵の中で一番端にいる敵を割り出す為に比較用の変数を作るため、最大数を50ではなく51にしています。
敵の右への移動ルーチンを見てみると、「ex.50=0:rightmax=50」のようにしているのですが、50番（50番目ではありません。0から始まるので順番的には51番目）の敵のX座標を0として、一番右にいるというフラグrightmaxを立てています。
X座標0は当然最も左側なので、この後のプログラムで「if ex.rightmax<ex.j」のように比較すると、この50番の敵は真っ先に一番右ではないと判断され、rightmaxフラグは下ろされます。
これは何の為にやっているのかというと、現在は全ての敵が必ずいるので問題ないのですが、次回当たり判定が実装され敵が消滅した時にはどの敵が生き残っているか分からないという状況になるからです。
例えば、0番の敵や49番の敵が消滅している可能性もあるので、比較する初期値を0番や49番にするわけにはいかないわけです。
当然中間の敵であっても同様です。
この問題を解決するには既存の敵ではないものと比較を開始する必要があるというわけです（あくまで今回の組み方に関しては）。 仮想的に設定した50番の敵との比較が終わってからは、現在生き残っている敵をどんどん比べていって、一番右側にいる敵の番号を割り出します。
そして、「if ex.rightmax>=300:for k,i+1,50:ex.k+=esp:next:di=1:for i,0,50:ey.i+=16:next」という処理で、一番右にいる敵のX座標が300以上になったら、他の敵のX座標も今回の移動分を移動させ、変数diを1にして方向転換、Y座標に16を足してプレイヤーに一段近づけるということをしています。

<p class="program">
*init
title"Invader"//タイトルの表示
#define winx 320//画面のXサイズ
#define winy 240//画面のYサイズ

//自機の初期設定
x=153.0:y=220.0//自機の初期位置
bsp=4.0//弾の移動速度

//敵の初期設定
dim ex,51//敵のX座標。方向転換用に+1しておく。
dim ey,50//敵のY座標
dim ef,50//敵が生きているフラグ
wt=0//ゲームスピード調整用
esp=1//敵の移動速度
di=0//敵の移動方向（0は右に移動する、1は左に移動する）
dim ebx,50//敵の弾X座標
dim eby,50//敵の弾Y座標
dim ebf,50//敵の弾フラグ

for i,0,50
	ex.i=(i\10)*24//敵のX座標
	if (i>=0 & i<10):ey.i=16//敵のY座標
	if (i>=10 & i<20):ey.i=32//敵のY座標
	if (i>=20 & i<30):ey.i=48//敵のY座標
	if (i>=30 & i<40):ey.i=64//敵のY座標
	if (i>=40 & i<50):ey.i=80//敵のY座標
	ef.i=1//敵が生きているフラグ
	dead.i=0//敵が死んでいて消滅パターンを表示するフラグ
	d_co.i=0//敵の消滅パターン表示用カウンタ
next

wtmax=5//ゲームスピード

screen 0,winx,winy,0//画面作成
cls 4//画面消去
pos 80,100:color 255,255,255:mes"Push space to start!"//スタート画面

*start
stick st//入力設定
if st=16:goto *start2//スペースキーで次へ
await//ウェイト
goto *start//戻る

*start2
cls 4//画面消去
pos 130,100:color 255,255,255:mes"Ready!"//ゲーム開始表示
await 1000//ウェイト

*main
redraw 0//画面を描画しない
color 0,0,0:boxf 0,0,winx,winy//黒で画面全体を塗り潰す

//弾を撃つ
stick s//スペースキーが押されているか判定する準備
if s=16 & bl=0:bl=1:bx=x+3:by=y-16//スペースキーが押されていて、画面上に弾がなければ弾が画面上にあるというフラグを1にして、弾の座標を自機の上に設定する

//左右に移動する
getkey left,37:if left=1:x-=2//カーソルキー左が押されていたら自機を左に移動する
getkey right,39:if right=1:x+=2//カーソルキー右が押されていたら自機を右に移動する
x=limit(x,0,winx-16)//自機のX座標の範囲を設定する

//自機表示
color 255,255,255:pos x,y:mes"凸"

//弾のフラグが立っていれば弾を表示する
if bl=1:{
	color 255,255,255:pos bx,by:mes"|"//弾を表示する
	by-=bsp:if by<-16:bl=0//弾のY座標を更新し、画面から消えたら弾が画面上にあるというフラグを0にする
}

//ゲームスピード
wt+=1:if wt>=wtmax:wt=0

//敵の移動
for i,0,50
	
	//右へ移動する
	if di=0 & wt=0:{
		ex.50=0:rightmax=50//一番右にいる敵の座標を調べる準備
	
		for j,0,50
				if ef.j=0:_continue//敵が消滅していたら次の敵
				if ex.rightmax<ex.j:rightmax=j//敵が生きている場合、X座標を比較して、より右にいる敵の番号をrightmaxに代入（X座標が同じ場合は無視）
		next
		
		ex.i+=esp//敵を右に移動
		if ex.rightmax>=300:for k,i+1,50:ex.k+=esp:next:di=1:for i,0,50:ey.i+=16:next//一番右にいる敵が右端まで行ったら、以降の敵を右に移動し、移動方向を左にして、全ての敵のY座標を更新
	}
	
	//左へ移動する
	if di=1 & wt=0:{
		ex.50=320:leftmax=50//一番左にいる敵の座標を調べる準備

		for j,0,50
				if ef.j=0:_continue//敵が消滅していたら次の敵
				if ex.j<ex.leftmax:leftmax=j//敵が生きている場合、X座標を比較して、より左にいる敵の番号をleftmaxに代入（X座標が同じ場合は無視）
		next	

		ex.i-=esp//敵を左に移動
		if ex.leftmax<=0:di=0:for k,i+1,50:ex.k-=esp:next:for i,0,50:ey.i+=16:next//一番左にいる敵が左端まで行ったら、以降の敵を左に移動し、移動方向を右にして、全ての敵のY座標を更新
	}

next

//敵表示
p_co++:if p_co>20:pt=1-pt:p_co=0//敵アニメ

for i,0,50
	if ef.i=1:{//敵が生きていたら
		color 255,0,0:pos ex.i,ey.i
		if pt=0:mes"Ｗ"//敵表示（パターン0）
		if pt=1:mes"Ｖ"//敵表示（パターン1）
	
	}
next

//敵の弾
eb_count=0//画面上の敵の弾の数を数える準備
for i,0,50
	eb_count+=ebf.i//画面上の敵の弾の数を数える
next

r=rnd(50)
	if eb_count<4 & ef.r=1 & ebf.r=0:{//敵の弾が4つより少なく、その敵が生きていて弾を発射していない場合
		ebf.r=1//敵の弾のフラグを立てる
		ebx.r=ex.r+7//敵の弾のX座標を設定する
		eby.r=ey.r+14//敵の弾のY座標を設定する
		eb_count++//敵の弾のカウントを一つ増やす
	}	

for i,0,50
	if ebf.i=1:eby.i+=2:if eby.i>320:ebf.i=0//敵の弾のフラグが立っていたらY座標を更新し、画面下に消えたらフラグを下げる
	if ebf.i=1:color 255,0,0:pos ebx.i,eby.i:mes"|"//敵の弾のフラグが立っていたら表示する
next

await 2//ウェイト
redraw 1//画面を描画する
goto *main//戻る

		</p>

次回は当たり判定を追加し、ゲームスピードや敵の移動スピードに変化を付けゲームとして完成させます！
お楽しみに♪

＜第3回＞当たり判定とスピード変化処理を作ってみる！

2012/10/14

今回でいよいよインベーダーゲームが完成します。
前回までで自機、自機の弾、敵、敵の弾の表示までが終わりました。
今回は当たり判定の追加、スピード変化処理の追加、スコアの追加などを行い、ゲームとして遊べるものになります。

当たり判定を作ってみる

for i,0,50
	if ebf.i=0:_continue
	if(abs(x-ebx.i+5)<=7 & abs(y-eby.i)<=14):gosub *gameover_sub:goto *init
next

for i,0,50
	if ef.i=0:_continue
	if(abs(ex.i-bx+5)<=7 & abs(ey.i-by)<=14):{
		ef.i=0
		dead.i=1
		bl=0
		by=320
		sc+=100:if sc>hi:hi=sc
		_break
	}
next

スピード変化の処理を作ってみる

<p class="program">

*init
title"Invader"//タイトルの表示
#define winx 320//画面のXサイズ
#define winy 240//画面のYサイズ

//自機の初期設定
x=153.0:y=220.0//自機の初期位置
bsp=4.0//弾の移動速度

//敵の初期設定
dim ex,51//敵のX座標。方向転換用に+1しておく。
dim ey,50//敵のY座標
dim ef,50//敵が生きているフラグ
dim dead,50//敵が死んでいて消滅パターンを表示するフラグ
dim d_co,50//敵の消滅パターン表示用カウンタ
wt=0//ゲームスピード調整用
esp=1//敵の移動速度
di=0//敵の移動方向（0は右に移動する、1は左に移動する）
dim ebx,50//敵の弾X座標
dim eby,50//敵の弾Y座標
dim ebf,50//敵の弾フラグ

for i,0,50
	ex.i=(i\10)*24//敵のX座標
	if (i>=0 & i<10):ey.i=16//敵のY座標
	if (i>=10 & i<20):ey.i=32//敵のY座標
	if (i>=20 & i<30):ey.i=48//敵のY座標
	if (i>=30 & i<40):ey.i=64//敵のY座標
	if (i>=40 & i<50):ey.i=80//敵のY座標
	ef.i=1//敵が生きているフラグ
	dead.i=0//敵が死んでいて消滅パターンを表示するフラグ
	d_co.i=0//敵の消滅パターン表示用カウンタ
next

//スコア
sc=0

screen 0,winx,winy,0//画面作成
cls 4//画面消去
pos 80,100:color 255,255,255:mes"Push space to start!"//スタート画面

*start
stick st//入力設定
if st=16:goto *start2//スペースキーで次へ
await//ウェイト
goto *start//戻る

*start2
cls 4//画面消去
pos 130,100:color 255,255,255:mes"Ready!"//ゲーム開始表示
await 1000//ウェイト

*main
redraw 0//画面を描画しない
color 0,0,0:boxf 0,0,winx,winy//黒で画面全体を塗り潰す

//弾を撃つ
stick s//スペースキーが押されているか判定する準備
if s=16 & bl=0:bl=1:bx=x+3:by=y-16//スペースキーが押されていて、画面上に弾がなければ弾が画面上にあるというフラグを1にして、弾の座標を自機の上に設定する

//左右に移動する
getkey left,37:if left=1:x-=2//カーソルキー左が押されていたら自機を左に移動する
getkey right,39:if right=1:x+=2//カーソルキー右が押されていたら自機を右に移動する
x=limit(x,0,winx-16)//自機のX座標の範囲を設定する

//自機表示
color 255,255,255:pos x,y:mes"凸"

//弾のフラグが立っていれば弾を表示する
if bl=1:{
	color 255,255,255:pos bx,by:mes"|"//弾を表示する
	by-=bsp:if by<-16:bl=0//弾のY座標を更新し、画面から消えたら弾が画面上にあるというフラグを0にする
}

//ゲームスピード
wt+=1:if wt>=wtmax:wt=0

//敵の移動
for i,0,50
	
	//右へ移動する
	if di=0 & wt=0:{
		ex.50=0:rightmax=50//一番右にいる敵の座標を調べる準備
	
		for j,0,50
				if ef.j=0:_continue//敵が消滅していたら次の敵
				if ex.rightmax<ex.j:rightmax=j//敵が生きている場合、X座標を比較して、より右にいる敵の番号をrightmaxに代入（X座標が同じ場合は無視）
		next
		
		ex.i+=esp//敵を右に移動
		if ex.rightmax>=300:for k,i+1,50:ex.k+=esp:next:di=1:for i,0,50:ey.i+=16:next//一番右にいる敵が右端まで行ったら、以降の敵を右に移動し、移動方向を左にして、全ての敵のY座標を更新
	}
	
	//左へ移動する
	if di=1 & wt=0:{
		ex.50=320:leftmax=50//一番左にいる敵の座標を調べる準備

		for j,0,50
				if ef.j=0:_continue//敵が消滅していたら次の敵
				if ex.j<ex.leftmax:leftmax=j//敵が生きている場合、X座標を比較して、より左にいる敵の番号をleftmaxに代入（X座標が同じ場合は無視）
		next	

		ex.i-=esp//敵を左に移動
		if ex.leftmax<=0:di=0:for k,i+1,50:ex.k-=esp:next:for i,0,50:ey.i+=16:next//一番左にいる敵が左端まで行ったら、以降の敵を左に移動し、移動方向を右にして、全ての敵のY座標を更新
	}

next

//敵表示
p_co++:if p_co>20:pt=1-pt:p_co=0//敵アニメ

for i,0,50
	if ef.i=1:{//敵が生きていたら
		color 255,0,0:pos ex.i,ey.i
		if pt=0:mes"Ｗ"//敵表示（パターン0）
		if pt=1:mes"Ｖ"//敵表示（パターン1）
	
	}
	if dead.i=1:color 255,0,0:pos ex.i,ey.i:mes"＊":d_co.i++:if d_co.i=10:dead.i=0//敵の消滅パターン表示
next

//敵の弾
eb_count=0//画面上の敵の弾の数を数える準備
for i,0,50
	eb_count+=ebf.i//画面上の敵の弾の数を数える
next

r=rnd(50)
	if eb_count<4 & ef.r=1 & ebf.r=0:{//敵の弾が4つより少なく、その敵が生きていて弾を発射していない場合
		ebf.r=1//敵の弾のフラグを立てる
		ebx.r=ex.r+7//敵の弾のX座標を設定する
		eby.r=ey.r+14//敵の弾のY座標を設定する
		eb_count++//敵の弾のカウントを一つ増やす
	}	

for i,0,50
	if ebf.i=1:eby.i+=2:if eby.i>320:ebf.i=0//敵の弾のフラグが立っていたらY座標を更新し、画面下に消えたらフラグを下げる
	if ebf.i=1:color 255,0,0:pos ebx.i,eby.i:mes"|"//敵の弾のフラグが立っていたら表示する
next

//スコア表示
color 255,255,255
pos 10,0:mes"SCORE:"+sc
pos 120,0:mes"HI-SCORE:"+hi


//自機の弾の当たり判定
for i,0,50
	if ef.i=0:_continue//敵が消滅していたら次の敵
	if(abs(ex.i-bx+5)<=7 & abs(ey.i-by)<=14):{//自機の弾が敵に当たったら
		ef.i=0		//敵のフラグを0にする
		dead.i=1	//消滅パターン表示フラグを1にする
		bl=0		//自機の弾のフラグを0にする
		by=320		//自機の弾のY座標を画面外に設定
		sc+=100:if sc>hi:hi=sc//スコア加算、ハイスコア更新
		_break
	}
next	

//敵の弾の当たり判定
for i,0,50
	if ebf.i=0:_continue//敵の弾がなければ次の弾
	if(abs(x-ebx.i+5)<=7 & abs(y-eby.i)<=14):gosub *gameover_sub:goto *init//敵の弾が自機に当たったらゲームオーバーサブルーチンに飛び、ゲーム初期化
next	

//クリア判定
cl=0//クリア判定フラグを初期化
for i,0,50
	cl=cl+ef.i//全ての敵の生きているかどうかのフラグを足す
next
if cl=0:color 0,0,0:boxf 0,0,319,219:pos 130,100:color 255,255,255:mes"Clear!":redraw 1:await 2000:goto *init//敵が全滅していたらクリア表示し、初期設定に戻る

wtmax=cl/8.0//敵の残りが少ないほどゲームスピードをアップする
if cl<5:esp=2//敵の数が5より少なくなったら敵の移動速度を2にする
if cl=1:esp=4//敵の数が1になったら敵の移動速度を4にする

//ゲームオーバー判定
for i,0,50
	if ef.i=0:_continue//敵が消滅していたら次の敵
	if ey.i>=220:gosub *gameover_sub:goto *init//敵が下に達したらゲームオーバー表示し、初期設定に戻る
next

await 2//ウェイト
redraw 1//画面を描画する
goto *main//戻る

//ゲームオーバーサブ
*gameover_sub
	color 0,0,0:boxf x,y,x+15,y+15		//自機を消去
	color 255,255,255:pos x,y:mes"＊"	//自機の爆発パターンを表示
	pos 120,100:color 255,255,255:mes"Game Over!"	//ゲームオーバー表示
	redraw 1							//画面を描画する
	await 2000							//ウェイト
	return		
		</p>

一応の完成ではありますが、UFOを追加してみたり、敵の種類を増やしてみたり色々改造してオリジナルゲームに仕上げてみて下さい！

＜第1回＞マウスクリックでスクリーンに描画してみる！

＜第2回＞綺麗な線を描画できるように改良してみる！

＜第3回＞色々な色で線を描画できるように改良してみる！

＜第4回＞消しゴム機能、スポイト機能を追加してみる！

＜第5回＞ファイル入出力機能を追加してみる！

＜第1回＞マウスクリックでスクリーンに描画してみる！

2012/7/15

はじめに

皆さん、こんにちは。ANGLEです。

今日から新連載の「HSP3.3でペイントソフトを作る！」が始まります。

そもそもの発端は、「高機能なソフトは使いこなせないなあ」「WindowsXP（何故かサブマシンは7だったりする）付属のペイントはアンドゥが1回しかないし、レイヤーがないからなあ」等などという悩みがあり、ならば自分で作ろう！と思ったことです。

私がどこまで作れるかは現段階では何とも言えませんが、あえて制作段階をリアルタイムに近い形で紹介することでライブ感を出していきたいと考えております。

せっかくなので、HSP超初心者の方向けの「講座」の形式を取っていますが、必ずしも全てがそうではありません。

私がどこまで出来るか怪しいからです（笑）

中級者以上の方も「生暖かい目」で見守って下さいね（間違い等がありましたら連絡下さい）。

それでは、開発を始める前にどのようなソフトを作るかを考えてみます。

ペンとブラシの種類についてはペイントと同数にしています。

レイヤーがたった10枚で、アンドゥもたった10回というのも物足りないと感じる方も多いと思いますが、あくまで当面の目標です。

うまく実装出来るようであればメモリの許す限り対応出来るようにしたいと考えています。

開発開始！

それでは始めに、HSPを導入していない方はこちらからダウンロードしてインストールして下さい。

インストールの詳細はこちらをご覧下さい。

インストールし終わったら、HSPスクリプトエディタを起動します。

さあ、いよいよ本題です。

まずは描画先となるウインドウを作成します。

<p class="program">
screen 0,640,480
			</p>

無難に横640ドット×縦480ドットでウインドウを作成しました。

次に

<p class="program">
*main
			</p>

と入力します。「*」を先頭に付けた文字は「ラベル」と言って、プログラムの流れをコントロールする為に作ります。

何の為に使うかは後程分かります。

次にマウス入力の下準備をしましょう。

<p class="program">
x=mousex
y=mousey
			</p>

変数xにマウスのX座標を代入、変数yにマウスのY座標を代入する処理です。

次にマウスの左ボタンを検出する為の処理を作ります。

<p class="program">
stick key,256
			</p>

stickは各種入力を検出する命令で、256というのはマウスの左ボタンに割り当てられた番号です。左ボタンを押したかどうかが変数keyに代入されます。

続いてマウスの左ボタンを押していたらカーソル位置に点を描画する処理を作ってみましょう。

<p class="program">
if (key & 256):color 0,0,0:pset x,y
			</p>

ifとは文字通り「もし～なら」という意味です。この場合マウスの左ボタンが押されていたらという処理になります。

「：」は命令と命令を繋ぐ為に使います。ここでは左ボタンが押された時の処理を続けて書いています。

「color」は色を指定する命令です。R（赤要素）、G（緑要素）、B（青要素）の順で指定します。

RGBはそれぞれ0～255で指定します。0,0,0なら黒、255,255,255なら白になります。ここでは黒を指定しているわけです。

その次に書いている「pset」は画面に点を打つ命令です。

先程colorで指定した色でx,yの位置に点を打つというわけです。

なんと、たったこれだけで本日の目標であるスクリーンに描画する処理は完成です！

でも、喜ぶのはちょっと早いです。

ここでF5を押してプログラムを実行してもすぐに終了してしまいます。

何故かというと、プログラムは基本的に上から下に向かって流れるのですが、一番下まで行くと終了してしまうからなのです。

それではどうしたらいいかというと、その答えこそが冒頭出てきた「*main」です。

ここまでのプログラムでは、ウインドウを作って、マウスのXY座標及び左ボタンクリック検出、左ボタンクリックで点を描画ということを書いてきたわけですが、プログラムの実行は一瞬で終わってしまいます。

さらに言うと、このままでは「プログラムを開始した一瞬の間にマウスを動かしたかどうか、左ボタンを押したかどうか」しか判定出来ないことになります。

つまり、この処理を繰り返さなければお絵描きは出来ないことになります。

そこで、プログラムの下まで行ったら「*main」に戻る処理を入れるのです。

<p class="program">
goto *main
			</p>

これで理論上はうまく行くはず……なのですが、ここで実行するとプログラムが固まってしまいます！

HSPでのプログラムのお約束として、ループ処理を行う場合には「await」という命令を入れなければならないのです……。

一種のおまじないみたいなものとして、「goto *main」の前の行に次の通り入れておきます。

<p class="program">
await 1
			</p>

完成したプログラムはこのようになります。

<p class="program">
screen 0,640,480

*main
	x=mousex
	y=mousey
	stick key,256
	if (key & 256):color 0,0,0:pset x,y
	await 1
	goto *main
			</p>

いよいよ実行！

それではF5を押してプログラムを実行してマウスの左ボタンを押しながら動かしてみましょう！！

・

・

・

あれれ？

描いた線であるはずのものは線ではなく点線になってしまっています！！

これはどうしたらいいでしょう？？？

プログラムは上から順番に処理され、下まで行ったところでまた上に戻るようにしました。

ということは、前回の点から今回の点を線で結べば上手く行くような気がしますね！

それでは今日のところはエディタの「ファイル」→「名前を付けて保存」を選び、「ペイントソフト」と名前を入力して保存しておきましょう。

次回に続く！

HSPの基礎固めには公認入門書がおすすめ！私もHSP2.5の頃に買って勉強しました。

＜第2回＞綺麗な線を描画できるように改良してみる！

2012/7/16

座標及び線を引く命令について

第1回で作成したプログラムでは繋がった線が描けず、点線になってしまいました。

第2回ではそれを修正してみたいと思います。

基本的な考え方としては、前回のX座標・Y座標と現在のX座標・Y座標を線で結んでいけば解決出来そうです。

前回のX座標・Y座標というのは、それぞれ変数X、Yに代入されているものです。

それでは、現在のX座標・Y座標というのはどうするかというと、リアルタイムの数値ですからそのままずばりmousexとmouseyを使えば大丈夫そうです。

線を引く処理を作る前にウインドウの座標について説明します。

今回作成したウインドウは横640ドット×縦480ドットでしたので、左上の座標が（0,0）、右下の座標が（639,479）になります。

その中で、前回の座標(x,y）と現在の座標(mousex,mousey）を結ぶ線を描くように処理を修正していきます。

線を描くにはline命令を使います。

「line 始点のX座標，始点のY座標,終点のX座標，終点のY座標」と入力します。

今回は

<p class="program">
line x,y,mousex,mousey
			</p>

となります。

プログラムを修正

前回の「pset x,y」と入れ替えてみましょう。

<p class="program">
screen 0,640,480

*main
	x=mousex
	y=mousey
	stick key,256
	if (key & 256):color 0,0,0:line x,y,mousex,mousey
	await 1
	goto *main
			</p>

おや、全く何も描けなくなってしまいました……。

プログラムを上からよく見てみると、xとyにそれぞれmousex,mouseyを代入して、すぐlineで(x,y)から(mousex，mousey）に線を引いています。

ということは、xとmosuex、yとmouseyは同じ値になってしまっているのでは！？

それでは、「x=mousex」と「y=mousey」をline命令の後に移動してみましょう。

<p class="program">
screen 0,640,480

*main
	stick key,256
	if (key & 256):color 0,0,0:line x,y,mousex,mousey
	x=mousex
	y=mousey
	await 1
	goto *main
			</p>

こうすれば、現在のmousexとmouseyの座標を参照した後で、xとyに代入することになるので、うまく行くはず。

おお！描けました！！

これで「一応」お絵描きツールらしくなりましたね♪

……でも、描いた線を消すことが出来ないですし、色も変えられないんですよね……。

次回はその辺りに挑戦してみようと思いますよ！

＜おまけ＞

HSPのmousexのヘルプを見ると、似たような処理が書いてありました！

ご参考まで転載。

<p class="program">	
; マウスポインタの動きに沿って線を描く
repeat
	line mousex, mousey
	wait 1
loop
			</p>

たったこれだけで同じようなこと実現出来てますが……Σ(ﾟ口ﾟ;

HSPの基礎固めには公認入門書がおすすめ！私もHSP2.5の頃に買って勉強しました。

＜第3回＞色々な色で線を描画できるように改良してみる！

2012/7/19

とりあえずインターフェース周りは既存パーツ

今回は黒以外の色で線を描画できるように改良していきます。

その為には主に下記の処理が必要になります。

1. 色を切り替えるための動作を決め、その入力を受け付ける
2. 色を選択する画面を用意する
3. 選択した色で描画するように変更する

この中で少々やっかいなのが1です。

入力を受け付けること自体は簡単なのですが、難しいのはそのインターフェースです。

例えばいきなりPhotoshopのようなカッコイイものを作ろうとするのは少々無謀です。

アイコンのデザインだけならともかく、ボタンとして機能するものを自作するのは初心者には簡単ではないからです。

そこで、今回はWindows標準のボタンを使用して、「とりあえず」の処理を作ってみます。

インターフェースはHSPに慣れた頃に他の機能を盛り込む流れで作り込むことにしたいと思います。

それでは、「色を切り替えるための動作」はどうしましょうか？

現在の画面は描画ウインドウのみという何もない更地です。

HSPではWindowsアプリケーションの標準的なメニュー表示も実現出来ますが、モジュールやプラグインという外部の仕組みを使用することになります。

少々煩雑ですので、ここでは描画先の他にもう一つウインドウを作成し、そちらに各種機能を追加していこうと思います。

ウインドウを作成するのは「screen」命令でした。

第1回ではあまり詳しく説明しませんでしたが、ウインドウを作成する際には大きさ以外に「ID」も指定していたのです。

IDは単純に複数のウインドウを管理する為の通し番号だと考えて下さい。

<p class="program">
screen 0,640,480
			</p>

という処理でしたが、このプログラムで作成したウインドウのIDは「0」という意味です。

新しいウインドウのIDは「1」とします。サイズは当面それ程大きいものは必要ありませんので、とりあえず120×200ドットとして、「screen 0,640,480」の次の行に入力します。

<p class="program">
screen 1,120,200
			</p>

これでツール類のボタンを配置するウインドウが出来ました。

続けて色を変更するボタンを作ります。

ボタンなどのオブジェクトを作る際にはサイズを設定しておくといいです。

ここでは100×20ドットにしておきます。

<p class="program">
objsize 100,20
			</p>

続けてボタンを配置します。

<p class="program">
pos 10,10:button"色",*color_change
			</p>

「pos 10,10」は座標（10,10）にボタンを置くということです。ボタンなどのオブジェクト以外では文字表示位置の指定にも使います。

「button"色",*color_change」がボタンを配置する部分です。

「button」がその命令で、「"色"」という部分ではボタンに表示される文字列を指定しています。

「,*color_change」はボタンを押した際に飛ぶラベルを指定しています。

ラベル「*color_change」はこれから作成します。

「goto *main」の下に入力していきます。

<p class="program">
*color_change
	dialog"",33:r=ginfo_r:g=ginfo_g:b=ginfo_b
	goto *main
			</p>

「dialog」はその名の通り各種ダイアログを表示する命令です。

「33」は色の設定画面を呼び出す際に指定します。

色の設定画面で選択した色はRGBでメモリに保管されます。

R（赤要素）がginfo_r、G（緑要素）がg=ginfo_g、B（青要素）がb=ginfo_bに保管されるので、「r=ginfo_r」というようにそれぞれ代入しておいて、後で使いやすいようにします。

「goto *main」はもう説明不要ですね？　メイン処理に戻るだけです。

さて、ここまでで色を選択する処理が完成しました。

ここからは実際に色を反映させる処理を作っていきます。

<p class="program">
if (key & 256):color 0,0,0:line x,y,mousex,mousey
			</p>

という処理がありました。

マウスの左クリックで黒い線を引くという処理です。

「color 0,0,0」のところを先ほどのr,g,bに置き換えれば選択した色で線を引けそうですね。

<p class="program">
if (key & 256):color r,g,b:line x,y,mousex,mousey
			</p>

これでほぼ全ての処理が出来たのですが、実はもう一つ大事な処理があります。

それは描画先の指定です。

現在ウインドウはメインウインドウとツールウインドウの2つがあります。

このままだと最後に定義したツールウインドウ側に描画されてしまうのです！

そこで、描画先をメインウインドウに設定します。

<p class="program">
gsel 0
			</p>

「gsel」は複数のウインドウ、そして今後出てくる仮想画面を管理するには必須の命令です。

ここでは描画先をID0の画面、メインウインドウに設定しています。

最後に、現在の色がどんな色か分かりやすいように、タイトルバーに表示してみましょう。

<p class="program">
title"color ("+r+","+g+","+b+")"
			</p>

「title」命令はこのように変数の値をリアルタイムで確認するのにも重宝しますので、プログラムを試す際に活用してみて下さい。

それでは、完成したプログラムを見てみましょう。

<p class="program">
//メインウインドウ
	screen 0,640,480

//ツールウインドウ
	screen 1,120,200//追加
	objsize 100,20//追加
	pos 10,10:button"色",*color_change//追加

//メイン処理
*main
	gsel 0//追加
	stick key,256
	if (key & 256):color r,g,b:line x,y,mousex,mousey//変更
	title"color ("+r+","+g+","+b+")"//追加
	x=mousex
	y=mousey
	await 1
	goto *main
			
//色の設定画面
*color_change
	dialog"",33:r=ginfo_r:g=ginfo_g:b=ginfo_b//追加
	goto *main//追加

「//」を入力すると、その後の文章はコメントとして自由に書くことができます。

プログラムが長くなってくるとどこが何の処理だか分からなくなりがちですので、このようにコメントを付ける癖をつけましょう。

いかがでしたでしょうか？

今回はちょっと難易度が上がったかもしれません。

よく分からない部分は数字を変えてプログラムを実行する等して違いを確認してみると理解が深まります。

色々試してみて下さい。

さて、次回の内容ですが、消しゴム機能、スポイト機能を追加します。

お楽しみに！

HSPの基礎固めには公認入門書がおすすめ！私もHSP2.5の頃に買って勉強しました。

＜第4回＞消しゴム機能、スポイト機能を追加してみる！

2012/8/4

消しゴム機能を追加してみる

前回から少し時間が経ってしまいました……。

先行公開していたファイルはご覧いただけたでしょうか？

予習されていると今回の内容が理解しやすいかもしれません。そうでない方も詳細に説明していくのでご安心下さい。

当初はファイル入出力までの予定でしたが、結構長くなってしまうので、今回は消しゴム機能とスポイト機能の追加をしてみましょう。

それでは始めていきましょう！

消しゴム機能を実現するにはどうしたらいいでしょうか？

現実世界では鉛筆やシャープペンシルで描いた絵を消すというのが一般的です。

白い紙に黒い線で描くということですね。当たり前ですが……。

PC上では色は自由ではありますが、現段階ではこの色の設定を使うことにします。

背景色は白を前提とし、線は……既にカラー対応しているのでそのままとしましょう。

消しゴムを動かしたら白で小さく塗りつぶす感じにすれば、とりあえずはそれらしい動きになりそうです。

今後背景色を塗りつぶしたり変更したり出来るようになった際に、また変更することにしましょう。

まず、機能の切替が必要になりますので、前回の「色」ボタン同様に「ペン」ボタン、「消しゴム」ボタンを追加します。

<p class="program">
pos 10,40:button"ペン",*pen_on
pos 10,70:button"消しゴム",*eraser_on
			</p>

もう大丈夫ですね。

X座標、Y座標を指定して、ボタンを表示、ボタンを押したらそれぞれのラベルに飛ぶという内容です。

続いて、ラベル「*pen_on」「*eraser_on」を作ります。

<p class="program">
*pen_on
	pen=1
	era=0
	spo=0
	goto *main
			<br>
*eraser_on
	pen=0
	era=1
	spo=0
	goto *main
			</p>

ペンは「pen」、消しゴムは「era」、スポイトは「spo」という変数を用意して、それぞれオンの時に値を「1」、オフの時に「0」をセットするようにします。

そして、どの機能がオンになっているかによって処理が変わってくるわけです。

「*pen_on」の場合、ペンはオン、消しゴムはオフ、スポイトはオフという設定です。

設定が終わったら、メイン処理に戻ります。

次に消しゴムの動作を作っていきます。

少々ややこしいかもしれませんが、まず元のプログラムと今回のプログラムを並べてみます。

<p class="program">
if (key & 256):color r,g,b:line x,y,mousex,mousey
			</p>

<p class="program">
if (key & 256):{
	if pen=1:color r,g,b:line x,y,mousex,mousey//変更
	if era=1:color 255,255,255:boxf mousex-4,mousey-4,mousex+4,mousey+4//追加
	if spo=1:pget mousex,mousey:r=ginfo_r:g=ginfo_g:b=ginfo_b:spo=0:pen=1//追加
}
			</p>

今回、消しゴムとスポイトを追加する為、マウス左クリックした時の処理を分けているんです。

まずは消しゴムの処理から解説していきます。

<p class="program">
if era=1:color 255,255,255:boxf mousex-4,mousey-4,mousex+4,mousey+4//追加
			</p>

変数「era」が「1」の時、color命令で白（RGB全て「255」）にしています。

続いて「boxf」命令で小さく塗りつぶしていきます。

「boxf」の後は左上のx,y座標、右下のx,y座標を設定しています。

マウスのカーソル位置を中心として、9×9ドットの白い四角で塗りつぶしているということです。

スポイト機能を追加してみる

まずはスポイト機能をオンにするボタンから作成します。

<p class="program">
pos 10,100:button"スポイト",*spoit_on
				</p>

続いて、ラベル「*spoit_on」を作成します。

<p class="program">
*spoit_on
	pen=0
	era=0
	spo=1
	goto *main
				</p>

先程追加した左クリック時の処理は、

<p class="program">
if spo=1:pget mousex,mousey:r=ginfo_r:g=ginfo_g:b=ginfo_b:spo=0:pen=1
				</p>

というものでした。

変数「spo」が「1」の時に「pget」命令を実行します。

pget命令はその後に続く、X座標、Y座標の色を取得し、RGBの値をそれぞれ「ginfo_r」「ginfo_g」「ginfo_b」に代入します。

例によって、使いやすいようにそれぞれ変数「r」「g」「b」に代入しておきます。

色を取得した後はスポイト機能をオフにし、ペン機能をオンにしています。

こうするとちょっとしたペイントソフトのようですよね。

仕上げに

一般的なペイントソフトは初期設定でペンが選択されています。

それにならって、「button」命令の次あたりに

<p class="program">
pen=1
				</p>

と設定しておきます。

というのも、この設定がないと、何の機能も選択されていない状態となり、ボタンを何か押さない限り何も出来ないのです。

次に、選択している機能が何なのか表示して分かるようにしてみましょう。

<p class="program">
if pen=1:title"ペン 色：("+r+","+g+","+b+")"//変更
if era=1:title"消しゴム"//追加
if spo=1:pget mousex,mousey:title"スポイト　色:("+ginfo_r+","+ginfo_g+","+ginfo_b+")"//追加
				</p>

前回まではペンの色表示だけでしたが、今回は現在の機能に応じて書き換えてみました。

ペンの場合はRGBで何色を選択しているかを表示します。

消しゴムの場合は単純に「消しゴム」とだけ表示します。

スポイトの場合はリアルタイムでマウスカーソル位置の色を取得して表示します。命令は今まで出てきたものだけなので割愛しますが、こうすると、目的の色が取得しやすいですよね。

では、最後に完成したプログラムを見てみましょう！

<p class="program">
//メインウインドウ
screen 0,640,480

//ツールウインドウ
screen 1,120,200
objsize 100,20
pos 10,10:button"色",*color_change


//追加
pos 10,40:button"ペン",*pen_on
pos 10,70:button"消しゴム",*eraser_on
pos 10,100:button"スポイト",*spoit_on
pen=1

//メイン処理
*main
gsel 0
stick key,256

if (key & 256):{
	if pen=1:color r,g,b:line x,y,mousex,mousey//変更
	if era=1:color 255,255,255:boxf mousex-4,mousey-4,mousex+4,mousey+4//追加
	if spo=1:pget mousex,mousey:r=ginfo_r:g=ginfo_g:b=ginfo_b:spo=0:pen=1//追加
}

if pen=1:title"ペン 色：("+r+","+g+","+b+")"//変更
if era=1:title"消しゴム"//追加
if spo=1:pget mousex,mousey:title"スポイト　色:("+ginfo_r+","+ginfo_g+","+ginfo_b+")"//追加
		
x=mousex
y=mousey
await 1
goto *main

//色の設定画面
*color_change
	dialog"",33:r=ginfo_r:g=ginfo_g:b=ginfo_b
	goto *main
	
//追加
*pen_on
	pen=1
	era=0
	spo=0
	goto *main
	
*eraser_on
	pen=0
	era=1
	spo=0
	goto *main

*spoit_on
	pen=0
	era=0
	spo=1
	goto *main
				</p>

ちょっと長くなってきましたが、一つ一つしっかり見ていけば難しいことはありません。

もし全体を見て分からない部分があったら、解説に戻って確認してみて下さいね。

さて、だいぶそれらしくなってきたペイントソフトですが、次回はいよいよファイル入出力機能を付けていきます！

お楽しみに♪

HSPの基礎固めには公認入門書がおすすめ！私もHSP2.5の頃に買って勉強しました。

＜第5回＞ファイル入出力機能を追加してみる！

2012/8/12

モジュールの利用

「ファイル入出力機能」と言うと何だか小難しく聞こえるかもしれませんが、簡単に言えば「描いた絵の保存・読込ができる」ということです。

これまでのプログラムでは、せっかく描いた絵を保存することができませんでしたので、その場の落書きにしか利用できませんでしたが、今回保存・読込ができるようになりますので、ようやく実用ソフトへの第一歩を踏み出せると言えるかもしれません。

対応するファイル形式は下記の通りです。

入力（読込）

• BMP
• GIF
• JPEG
• PNG
• TIFF

出力（保存）

• BMP

実はHSP3.3の通常の機能ではPNGとTIFFは扱えないのですが、今回「モジュール」を利用することでこの問題をクリアしたいと思います。

HSP公式サイトによると「モジュール機能は、複数のスクリプトをラベル名や変数名の衝突を気にせず結合するための仕組みです。」とのこと。

要はプログラムをいくつかに分けて作るやり方に用いられるものです。

しかし、今回モジュールを利用するのは「モジュール機能を使わない人であっても、他の人がモジュール機能を使って追加した新しい命令を使うことが可能」（同）という部分です。

HSP3.3には「mod_img.as」というモジュールが同梱されています。

このモジュールを読み込み、このモジュールで定義された命令を使用することで、PNGもTIFFも読み込むことが可能になるのです。

こうしたモジュールはHSP本体に同梱されているもののみならず数多く存在しています。

もし、自分では実現できない処理があった場合にモジュールを探してみるのもいいかもしれません。

それでは、「mod_img.as」を使ってプログラムを作っていきましょう！

まずモジュールを読み込む必要があります。

プログラムの一番上に下記のように記述します。

<p class="program">
#include "mod_img.as"
			</p>

「include」は英語で「含める」という意味です。

モジュール「mod_img.as」をこのプログラムに含めるということですね。

他のモジュールを利用する際も、「#include"ファイル名"」と記述しますので、覚えておいて下さい。

保存処理・読込処理

続いて、「保存」ボタンと「読込」ボタンを作りましょう。

前回作成した「スポイト」ボタンの下に

<p class="program">
pos 10,130:button"保存",*save
pos 10,160:button"読込",*load
			</p>

と追加します。

次にプログラムの一番下にラベル「*save」を作ります。

<p class="program">
*save
	dialog"bmp",17
	if stat=0:goto *main
	bmpsave refstr+".bmp"
	mouse x,y
	goto *main
			</p>

「dialog」命令に「17」を指定するとファイルSAVE(保存)ダイアログを開くことができます。

「""」の中は保存するビットマップの拡張子「bmp」を指定します（ダイアログが開くとフォルダ内にあるbmp形式のファイルが表示されます）。

次のif文では「stat」が「0」の時にメイン処理に戻るようにしています。

この「stat」は「dialog」命令実行時に保存を実行したのかキャンセルしたのかを保存するものです。

「0」はキャンセルを表し、保存が正常に終了した場合には「1」になります。

何故この処理を入れるのかと言えば、キャンセルした際に誤った処理をしてしまうからです。

「bmpsave refstr+".bmp"」は画像を「bmp」形式で保存する処理です。

「refstr」には「dialog」命令で選択されたファイル名が入っています。

ところがキャンセルした場合はファイルを選択していないわけですからファイル名が空白になってしまう上、保存処理を通るのでキャンセルしたにもかかわらず保存されてしまうのです。

その次の「mouse x,y」はマウス位置をx,yに移動させています。

というのも、保存処理が終わった直後にペン機能等で描画処理が行われてしまうためです。

もう少し良い方法があればいずれ直そうと思います。

続いて読込処理です。

ラベル「*load」を「*save」の下に作ります。

<p class="program">			
*load
	dialog"bmp;*.gif;*.jpg;*.png;*tif",16
	if stat=0:goto *main
	imgload refstr
	mouse x,y
	goto *main
			</p>

「dialog」命令に今度は「16」を指定しています。

ファイルOPEN(開く)ダイアログを開きます。

「""」の中身ですが、拡張子を複数並べて書く場合は「;」で区切り、2個目以降は「*.」を拡張子の前に付けて記述します。

if文は*saveの時と同じです。

その次の「imgload」命令がモジュール「mod_img.as」の独自命令で、画像を読み込みます（ちなみに、HSP標準命令の画像読込命令は「picload」です）。

以降は*saveと同じなので割愛します。

完成したプログラムはこのようになります。

<p class="program">
//モジュール
#include "mod_img.as"

//メインウインドウ
screen 0,640,480

//ツールウインドウ
screen 1,120,200
objsize 100,20
pos 10,10:button"色",*color_change

pos 10,40:button"ペン",*pen_on
pos 10,70:button"消しゴム",*eraser_on
pos 10,100:button"スポイト",*spoit_on
pos 10,130:button"保存",*save//追加
pos 10,160:button"読込",*load//追加
pen=1

//メイン処理
*main
gsel 0
stick key,256

if (key & 256):{
	if pen=1:color r,g,b:line x,y,mousex,mousey
	if era=1:color 255,255,255:boxf mousex-4,mousey-4,mousex+4,mousey+4
	if spo=1:pget mousex,mousey:r=ginfo_r:g=ginfo_g:b=ginfo_b:spo=0:pen=1
}

if pen=1:title"ペン 色：("+r+","+g+","+b+")"
if era=1:title"消しゴム"
if spo=1:pget mousex,mousey:title"スポイト　色:("+ginfo_r+","+ginfo_g+","+ginfo_b+")"
		
x=mousex
y=mousey
await 1
goto *main

//色の設定画面
*color_change
	dialog"",33:r=ginfo_r:g=ginfo_g:b=ginfo_b
	goto *main
	
*pen_on
	pen=1
	era=0
	spo=0
	goto *main
	
*eraser_on
	pen=0
	era=1
	spo=0
	goto *main

*spoit_on
	pen=0
	era=0
	spo=1
	goto *main

//追加
*save
	dialog"bmp",17
	if stat=0:goto *main	
	bmpsave refstr+".bmp"
	mouse x,y
	goto *main
	
//追加	
*load
	dialog"bmp;*.gif;*.jpg;*.png;*tif",16
	if stat=0:goto *main
	imgload refstr
	mouse x,y
	goto *main
			</p>

さあ、いかがでしたか？

画像を保存できるようになったので、このソフトでどこまで描けるか挑戦してみるのも一興ですね。

力作ができたら見せて下さい！

それでは、次回をお楽しみに♪

2013/4/13

HSPで作るスマホゲーム

HSPでスマホゲームが作れるようになるとは本当に良い時代です。
ある程度HSPをいじったことがある方であれば、最小限の労力でスマホゲームは作れます。
スマホゲームの利点は何と言っても、「皆いつも持ち歩いているゲーム機」でもあるということです。
自分でスマホアプリを作れるならば、その場で友達に配ることも可能です。
（サーバーにアップして、フリーウェアなどでQRコードを作成し、読み取ってもらうなど）
これってワクワクしませんか？
実際、私はその場で作ってその場で配るということをやったりしましたが、今までにない体験でした！
この素晴らしい体験を是非皆さんにも味わっていただきたいと思います。
では、早速始めていきましょう！


今回作るのは大ヒットした『Touch the Numbers』もどきです。
画像の作成も含めて6時間程度で完成させました（半分はバグ取り）。
タイムの算出は少々いい加減な処理をしているのは目を瞑っていただけると幸いです。

作成には「HSP3Dish」を使用します。
基本は通常のHSP3と同じですが、いくつかの仕様が若干異なります。
詳しくはこちらのページを参照して下さい。

それでは、プログラムの中身の解説です。
今回もプログラム中に注釈を入れていますので、ポイントのみ解説していきます。
「*block_ini」ではブロック（パネル）をランダムに配置しています。
まずは1から25まで順番に並べた上で、ランダムに選んだ2つのブロックを30回入れ替えることでバラバラに配置しています。
全てのブロックの場所をランダム値で置いていくということをしていないのがポイントです。
何故かというと、全てランダムに置いていくと、まだ置いていない場所に残りのブロックを置くのが困難になるからです。
こういう場合、フラグを立てて置いたか置いていないか判断することになります。
例えば、1から25まで順番にX座標とY座標をランダムで決めていくとして、最後の25番になると当然置ける場所は1か所なわけですが、なかなかランダム値がその場所にならないということが起こりえます。
ランダム値の範囲から置かれた場所を除外するという手もあるでしょうが、少々複雑な処理になってしまいます。
そのようなことをするくらいであれば、普通に並べた後で一定回数入れ替えてやった方が処理が単純で常に一定の速度で完了するというメリットがあります。

<p class="program">
#include "hsp3dish.as"
	celload "number.png",1
	celdiv 1,60,60,30,30
	
	mmload"PulseMeter.wav",0,0
	
	//セーブデータ
	exist"ranking.dat"
	if strsize=-1{
		besttime=double(20.0)

	}else{
		notesel dat
		noteload"ranking.dat"
		noteget besttime,0
		besttime=double(besttime)
	}
	
	
	dim bx,25//ブロックのX座標
	dim by,25//ブロックのY座標
	dim bf,5,5//ブロックがあるフラグ
	
	ddim r,25//ブロックの回転角度増減用
	ddim kaiten,25//ブロックの回転角度
	ddim zx,25//ブロックの大きさ（X）
	ddim zy,25//ブロックの大きさ（Y）
	
	dim anime,25//ブロックアニメのフラグ

*tit
	cls
	redraw 0
	color 0,0,0:boxf
	color 255,255,255:pos 10,160:mes"Touch the 25 panels"
	pos 20,200:mes"BEST TIME:"+besttime
	objsize 250,40
	pos 35,240:button"PLAY(SOUND ON)",*s_on
	pos 35,320:button"PLAY(SOUND OFF)",*s_off
	redraw 1	
	stop
	
*s_on
	sound=1
	goto *block_ini
	
*s_off
	sound=0
	goto *block_ini

*block_ini

	for i,0,25
		r.i=0.0//ブロックの回転角度
		zx.i=1.0//ブロックの大きさ（X）
		zy.i=1.0//ブロックの大きさ（Y）
		kaiten.i=0.0
		anime.i=0
	next
	
	cls
	
	for i,0,5:bx.i=i:by.i=0:next//1段目
	for i,5,10:bx.i=i-5:by.i=1:next//2段目
	for i,10,15:bx.i=i-10:by.i=2:next//3段目
	for i,15,20:bx.i=i-15:by.i=3:next//4段目
	for i,20,25:bx.i=i-20:by.i=4:next//5段目

	randomize
	for i,0,30
	o=rnd(25)//入れ替え1つ目のX座標保管用
	p=rnd(25)//入れ替え1つ目のY座標保管用
	
	x1=bx.o:y1=by.o//入れ替え1つ目
	x2=bx.p:y2=by.p//入れ替え2つ目
	
	bx.o=x2//入れ替え1つ目
	by.o=y2
	
	bx.p=x1//入れ替え2つ目
	by.p=y1
	
	next

*put
	
	for i,3,0,-1
		redraw 0			; 描画開始
		color 0,0,0:boxf	; 画面クリア
		color 255,255,255:pos 140,200:mes i
		redraw 1			; 描画終了
		await 1000			; 待ち時間(1/60秒)
	next
	
	redraw 0
	color 0,0,0:boxf
	for i,0,25
		pos bx.i*60+40,by.i*60+30:celput 1,i
	next
	objsize 120,30
	pos 100,350:button"Retry",*block_ini
	pos 100,410:button"Title",*tit
	redraw 1	
	
*main
	stick st
	mx=mousex:my=mousey
	xx=bx.now*60+40:yy=by.now*60+30
	if st=256{
		if (abs(mx-xx)<30 & abs(my-yy)<30){
			if sound:mmplay 0
			anime.now=1
			now++
		}
		if now=25:goto *hantei
	}
	
	tm+=1

	redraw 0
	color 0,0,0:boxf
		for i,0,25
			if i>=now:pos bx.i*60+40,by.i*60+30:celput 1,i//通常のパネル表示
	
			//アニメ処理
			if anime.i{
				pos bx.i*60+40,by.i*60+30:celput 1,i,zx.i,zy.i,kaiten.i
				r.i+=0.002:kaiten.i=r.i*180/3.14
				zx.i=1.0-r.i*5
				zy.i=1.0-r.i*5
				if zx.i<=0:zx.i=1.0:zy.i=1.0:r.i=0.0:kaiten.i=0.0:anime.i=0
		
			}
		next
	rec=double(tm*100/60)/100
	color 255,255,255:pos 10,320:mes"TIME:"+rec
	title"x:"+abs(mx-(bx.now*60+40))+"y:"+abs(my-(by.now*60+30))	
	redraw 1

	await 1000/60
	goto *main
	
*hantei
	redraw 0
	cls
	color 0,0,0:boxf
	color 255,255,255:pos 20,160:mes"YOUR TIME:"+rec
	if rec<besttime{
		besttime=rec
		pos 20,200:mes"BEST TIME!!"
	}
	
	dat=str(besttime)+"\n"
	notesel dat
	notesave"ranking.dat"
		
	objsize 120,30
	pos 100,300:button"Retry",*block_ini
	pos 100,360:button"Title",*tit
	redraw 1
	
	for j,0,5:for i,0,5:bf(i,j)=0:next:next
	n=0
	tm=0
	rec=0
	now=0
	for i,0,25:anime.i=0:next
	
	stop
		</p>

一応それなりに本家に近いものが出来ましたが、このままではただの物真似に過ぎません。
是非皆さん独自のアイディアをプラスしてオリジナルゲームに仕上げてみて下さい。