HSP小講座1 〜スクリーンセーバーの作り方〜

このページは，まだ未完成です。
このページでは, 無償で公開されている HSP(Hot Soup Processor) を用いたWindows用プログラムの作り方について， プログラミングにあまりなれていない人向けの 解説をします。 プログラム例として スクリーンセーバー （一定時間の間Windowsの操作をしないと 動作して画面の焼きつきを防止するプログラム） を取り上げています。

1. 新しいフォルダ（ディレクトリ）を作る。

どこでもかまいせんが新しいフォルダを作ってください。 名前も好きな名前で結構ですが，以下では ss1 という名前をつけた 場合について説明します。

2. 「ペイント」を起動して画像を数枚作成する。

HSPのプログラムを書き出す前に，画面表示に用いる 画像ファイルを作っておきましょう。 まず，Windowsに標準でインストールされている 「ペイント」を起動します。

（「スタート」→「プログラム」→「アクセサリ」→「ペイント」を選択）

あまり大きな絵にするとプログラムで扱いにくいので 画像の大きさを適当な大きさに設定します。

（「変形」→「キャンバスの色とサイズ」を選択）

ここでは 150点 x 150点の大きさに設定しています。 自分の書きたい絵にあった大きさにしてください。

好きな絵を書いてください。 画面の背景色は後で黒色にしますので， 画像の背景の色も黒にしておくとよいでしょう。

絵が書けたら保存します。 製作するプログラムのために新しいフォルダを作っておいてください。 「ファイル」→「名前を付けて保存」を選んでください。 保存する場所は上で作った新しいフォルダ（ss1）にします。 ファイル名は pic1 としておいてください。 ファイルの種類は「256色ビットマップ」にしてください。

同じようにして２枚目，３枚目の画像ファイルを作ってください。 （サイズは全て同じにしてください。） ここでは以下のような２枚の画像を使います。
pic1.bmp pic2.bmp

3. まずは簡単なプログラムを試しに実行してみる。

HSPスクリプトエディタ （アイコンは）を起動して， 次のプログラム prog01.as 入力してください。

prog01.as : 
	x = 5
	repeat 10
		x++
		print x
		await
	loop
	stop

入力できたら、「ＨＳＰ実行」のボタンを押して実行してみましょう。
プログラム prog01.as の実行結果が上のようになることが理解できるでしょうか? 

	repeat 10
		なんたらかんたら
	loop
という書き方は、「なんたらかんたら」の部分を 10回繰り返す、という意味です。
この場合は、 
		x++
		print x
		await
を10回繰り返すことになります。
x++は、x を1だけ増やす、 print xは、x の値を表示する、という意味ですから
実行結果は、6, 7, 8,... 15 となるわけです。

最後の行の await は何でしょうか? ここでは、 「繰り返しの処理の中に必ず含めるおまじない」 と考えておいて下さい。 (詳しくはヘルプを見て下さい。)

プログラム prog01.as の最後の行は 
	stop
となっていますが、「stopなんて書かなくてもいいんじゃないの」と 思う人がいるかもしれません。
一度、 stop を削除してプログラムを実行してみれば意味が分かります。
stop を削除すると、実行結果が見えなくなったでしょう? 最後に stop と書かないと、プログラムは画面を閉じてしまうのです。
実行結果を画面上に残しておくには、 stop という命令を 実行しないといけません。


じゃあ、次のプログラムはどうでしょうか。
prog02.as : 
	repeat 10
		rnd x, 7
		print x
		await
	loop
	stop
rnd という関数（命令）はランダムに数を選ぶ時に使います。 上の例では、 0 から 6 までの整数の内、1つを選んで x に入れてくれます。
後で、画像を表示する位置をランダムに決めるときに利用します。

それでは、上で作成した画像をHSPで表示してみましょう。
まずは、画像を表示するウィンドウをいくつか作ってみます。
prog03.as : 
	screen 2, 200, 200, 1
	screen 3, 200, 200, 1
	screen 4, 300, 200, 1
	stop
白いウィンドウが4つ開いたでしょう。 そのうち一番大きなウィンドウは、HSP が自動的に開く ウィンドウです。 残り3つの小さいウィンドウはscreen 命令で 開いたものです。 screenのすぐ後に書く数字は、ウィンドウの番号です。 後で、どのウィンドウが分かるように番号を付けておくわけです。
1から7までの好きな数字を使えばいいんですが、 ここでは 2番、3番、4番としています。 （HSP が自動的に開くウィンドウは0番になっています。）

それぞれのウィンドウには別々の文字を書くことが出来ます。
prog04.as : 
	screen 2, 200, 200, 1
	print "Test."
	screen 3, 200, 200, 1
	screen 4, 300, 200, 1
	print "テストです。"
	stop
プログラムと実行結果を比べてみると分かるように、 新しいウィンドウを開いた直後には、 そのウィンドウに文字が書かれます。

では、いよいよ画像をウィンドウに表示してみましょう。
prog05.as : 
	screen 2, 200, 200, 1
	picload "pic1.bmp"
	screen 3, 200, 200, 1
	picload "pic2.bmp"
	screen 4, 300, 200, 1
	gcopy 2
	stop
画像を表示する命令picloadについても、 新たに開いたウィンドウに画像が表示されます。
（画像の大きさとウィンドウの大きさが同じでない場合、 自動的に調節してくれます。)

最後に開いた4番目のウィンドウ(ちょっと大きめのウィンドウ)の 左上隅にちょっとだけ画像がでていますね?
これは下から2行目の gcopy (ウィンドウからウィンドウへ画像をコピーする命令) によって描かれた画像です。 gcopy 2の意味は、2番のウィンドウから画像をコピーする、 ということです。コピーする先は（直前に開いた)4番のウィンドウに になります。 画像が不完全にしかコピーされていないのは、画像の大きさを 指定していないからです。次のように書けば、ちゃんと全部が コピーされます。
prog06.as : 
	screen 2, 200, 200, 1
	picload "pic1.bmp"

	screen 3, 200, 200, 1
	palcopy 2
	picload "pic2.bmp"

	screen 4, 400, 400, 1
	palcopy 2
	gcopy 2, 0,0, 150,150

	stop
prog07.as : 
	screen 2, 200, 200, 1
	picload "pic1.bmp"

	screen 3, 200, 200, 1
	palcopy 2
	picload "pic2.bmp"

	screen 4, 400, 400, 1
	palcopy 2
	pos 50, 150
	gcopy 2, 0,0, 150,150

	stop
prog08.as : 
	screen 2, 200, 200, 1
	picload "pic1.bmp"

	screen 3, 200, 200, 1
	palcopy 2
	picload "pic2.bmp"

	screen 4, 400, 400, 1
	palcopy 2
	repeat 10
		rnd x, 200
		rnd y, 200
		pos x, y
		gcopy 2, 0,0, 150,150
		await 1000
	loop

	stop
prog09.as : 
	screen 2, 200, 200, 1
	picload "pic1.bmp"

	screen 3, 200, 200, 1
	palcopy 2
	picload "pic2.bmp"

	screen 4, 400, 400, 1
	palcopy 2
	cls 4
	repeat
		rnd x, 200
		rnd y, 200
		pos x, y
		gcopy 2, 0,0, 150,150
		await 1000
	loop

	stop
prog10.as : 
	screen 2, 200, 200, 1
	picload "pic1.bmp"

	screen 3, 200, 200, 1
	palcopy 2
	picload "pic2.bmp"

	screen 4, 400, 400, 1
	palcopy 2
	cls 4
	repeat
		rnd x, 200
		rnd y, 200
		pos x, y
		gcopy 2, 0,0, 150,150
		await 1000
		color 0,0,0  :  boxf x,y, x+150,y+150
	loop

	stop
prog11.as : 
	screen 2, 200, 200, 1
	picload "pic1.bmp"

	screen 3, 200, 200, 1
	palcopy 2
	picload "pic2.bmp"

	screen 4, 400, 400, 1
	palcopy 2
	cls 4
	repeat
		rnd x, 200
		rnd y, 200
		pos x, y
		repeat 3
			gcopy 2, 0,0, 150,150
			await 300
			gcopy 3, 0,0, 150,150
			await 300
		loop
		color 0,0,0  :  boxf x,y, x+150,y+150 
	loop

	stop
prog12.as : 
	screen 2, 200, 200, 1
	picload "pic1.bmp"
	picx = winx  :  picy = winy

	screen 3, 200, 200, 1
	palcopy 2
	picload "pic2.bmp"

	screen 4, 400, 400, 1
	palcopy 2
	cls 4
	repeat
		rnd x, 400-picx
		rnd y, 400-picy
		pos x, y
		gcopy 2, 0,0, picx,picy
		await 1000
		color 0,0,0  :  boxf x,y, x+picx,y+picy
	loop

	stop
prog13.as : 
	screen 2, 200, 200, 1
	picload "pic1.bmp"
	picx = winx  :  picy = winy

	; screen 3, 200, 200, 1
	; palcopy 2
	; picload "pic2.bmp"

	gamenx = dispx  :  gameny = dispy
	screen 4, gamenx, gameny, 1
	palcopy 2
	cls 4
	repeat
		rnd x, gamenx-picx
		rnd y, gameny-picy
		pos x, y
		gcopy 2, 0,0, picx,picy
		await 1000
		color 0,0,0  :  boxf x,y, x+picx,y+picy
	loop

	stop
prog14.as : 
	screen 2, 200, 200, 1
	picload "pic1.bmp"
	picx = winx  :  picy = winy

	gamenx = dispx  :  gameny = dispy
	bgscr 4, gamenx, gameny, 1
	palcopy 2
	cls 4
	repeat
		rnd x, gamenx-picx
		rnd y, gameny-picy
		pos x, y
		gcopy 2, 0,0, picx,picy
		await 1000
		color 0,0,0  :  boxf x,y, x+picx,y+picy
	loop

	stop
F1でヘルプ。
コメントアウトの話
実行ファイルの作成 (packfile, start.ax, ..)
（課題０：アニメーションを含んで，かつ画像のサイズ，画面のサイズに関して一般性を持たせたプログラムは？(prog11.as を prog14.as のように変更） (解答は prog24.as) .）

課題１：prog24.as は画像を２つしか扱えないが，３つの画像を切替えて アニメーションできるように改良する。

課題２：ある１方向に移動していって，周囲にぶつかったら跳ね返るように