Home -> HSP講座 -> 初級編 No.4

レイアウトを考えよう！

さて、引っ張りまくった pos 命令をやっと説明できます。
pos 命令は、カレントポジションを変更する命令です。

	print "カレントポジションは(0, 0)"
	pos 600, 400
	mes "(600, 400)"
	stop

カレントポジションとは、画面に何かを配置(?)するときの、
左上の座標のことです。
mes 命令や button 命令などは、このカレントポジション
のあるところに表示されます。
カーソルみたいなものです。

ちなみに、この pos 命令のパラメータの数値は、dot単位です。

ドット[dot] って？

ＰＣやＴＶのディスプレイ(画面)が「赤・緑・青」という
光の三原色で映し出されているのは知っていましたか？
HSPもコンピュータの画面に表示されるので、当然同じ方法で映されています。
上の図のような「赤緑青」が連続すると、こんなにきれいに映せるんですね〜。

さて、単位 Dot とは、この「赤・緑・青」の1セットの大きさです。
ちなみに、HSPのスクリプトを実行したときに出てくるウィンドウの大きさは 640dot×480dot となっています。

テレビに顔を思いっきり近づけると、見えますよ。痛いですが。

今回は画面上のレイアウトを考えていきたいと思います。
簡単なので、気楽にいきましょ〜。

一、色を付ける。

当然、真っ白な画面に真っ黒な文字は嫌ですよね。
そこで、「色」を付けていきたいと思います。
色を変える命令は……

color！！

	; 色の輝度を変数に代入
	randomize		; rnd 関数を使用する場合は、必ず前の方に置いておきます。
	red   = rnd(256)	; 0 〜 255 のいずれかが代入されます。
	green = rnd(256)
	blue  = rnd(256)
	title "色を付けよう！"
	
	objsize 640/3, 480/3	; オブジェクトの大きさを変更
	button "赤輝度変更", *Change_Red
	button "緑輝度変更", *Change_Green
	button "青輝度変更", *Change_Blue
	
*main	; メインです
	redraw 2			; 描画モードを 0 (off) にする。
	color red, green, blue		; 赤・緑・青 の順、大きいほど色が鮮やか
	boxf				; 画面を塗りつぶす。オブジェクトは消えません。
	color 0, 0, 0			; 次の文字のために、描画色を黒にする。
	pos 400, 50			; 2回目以降、ここに来るたびに位置を修整。
	
	mes "現在の赤輝度は"+ red   +"です。"
	mes "現在の緑輝度は"+ green +"です。"
	mes "現在の青輝度は"+ blue  +"です。"
	redraw 1		; 描画モードを1にもどし、画面を更新。
	stop			; いったん処理を止めます。
	
*Change_Red
	red = rnd(256)		; 適当に変えます。
	goto *main		; *main に戻ります。
	
*Change_Green
	green = rnd(256)	; 適当に変えます。
	goto *main		; *main に戻ります。
	
*Change_Blue
	blue = rnd(256)		; 適当に変えます。
	goto *main		; *main に戻ります。

ボタンを押すと色が変わるサンプルです。
いろいろ新しい命令が出てきましたね。
それに、意味不明な rnd関数というものも登場しました。
さて、頑張りましょう……

描画モードとは？？

*main の上にある objsize 命令は、ボタンなどのオブジェクトの
大きさを設定する命令、ということで理解しておいてください。

描画[びょうが]モードとは、HSPが画面に何かを「描く(= 描画する)」ときの設定です。
単純に 0 か 1 しかなく、初期設定では 1 になっています。
どう違うのでしょうか？
0 の場合、画面になにかが描画されても、ユーザーが見る画面は変わらないのです！
どういうことかというと、

	redraw 0	; 描画モードを 0 にする。
	mes "見えません！"

ということです。
なので、redraw 命令は、描画モードを変更する命令です。

	redraw 0 + 2		; +2 すると、画面を更新しません
	mes "始まってすぐに描画されたのに……"
	wait 100		; 1秒止まる
	redraw 3		; 画面を更新しない (1 + 2)
	mes	 "後続部隊"	; 現在の描画モードは1
	wait 150
	redraw 1		; 画面更新 ( 1 は省略可能 )
	stop

見ての通り、最初の mes 命令は実行されていましたが、
描画モードが 0(off) なので更新はされず、
「redraw 3(1 + 2)」で、描画モードだけを変更、
次の mes 命令は実行され、
さらに 1.5 秒経過してから「redraw 1」で画面を更新しました。

ところで、これに何の意味があるのでしょう？
無駄なことをしているようにしか見えませんが……

	title "流星" 
	
	repeat 321
	;	redraw 2	; をここに入れる場合と入れない場合と
		color		; 省略して書くと、0, 0, 0 と同じになる
		boxf		; 画面を一色で塗りつぶす命令です。
		color 255, 255, 255	; 白
		
		pos x, 50 + y
		mes "★"
		x ++		; 移動 ( x = x + 1 または x += 1 です )
		y ++		; 下にも動く
	;	redraw 1	; redraw 2 があるなら「;」を外す
		await 1		; 速度を調節( ゲーム向けのwait命令 )
	loop
	stop

redraw 命令が無い場合、けっこうちらついたと思います。
実際、もっとレベルの高い「シューティングゲーム」なんかは、
この命令を使わないと評価が
　論外
となるでしょう。

さて、話をサンプルに戻してと。

始めのサンプルにある rnd関数 とは、
0 〜 (引数-1) の内どれかの整数を返す関数です。
関数とは、詳しくは後でやりますが、ちょっと変わった命令と覚えておいてください。

	関数名(引数1, 引数2, …)

という形で書きます。
ただし、命令のように書いてはいけません。
必ずパラメータの中や、変数に代入するときの右辺に記述してください。( つまり式の中 )

randomize 命令は、rnd関数を、ランダムにするために必要な命令です。
一つのスクリプトの中に1つだけ実行すればいいので、先頭にでも置いておいてください。

文字の大きさ

ずーっと同じ大きさの文字。これはちょっと嫌ですよね。
大きさを変えられないとレイアウトもへったくれも無いです。
と言うわけで、文字のフォント(書体、大きさ)を変えてみましょう。
それには、効果そのまま font 命令を使用します。

	mes "通常フォント"
	
	print ""		; 改行っぽい事が出来ます。"" は省略可
	font "ＭＳ 明朝", 20	; 明朝体に変更
	mes "明朝体で〜す"
	
	print
	font "ＭＳ ゴシック", 32		; フォント名に注意
	mes "大きさは第二パラメータに指定"
	
	print
	font "ＭＳ ゴシック", 70, 1
	mes "ビバ・プログラ広場"
	
	print
	font "ＭＳ ゴシック", 30, 4	; 第三パラメータで文字を装飾
	mes "ここテストに出まーす。"
	stop

font 命令については、特に難しいことが無いので、ワンキーヘルプに目を通しておけばＯＫだと思います。(テキトー)

輝度ってなんだ！？

さっき無視してしまった輝度について、ちょこっとだけ触れておきましょう。
輝度には 赤輝度・緑輝度・青輝度 があります。
これは単なる数値で、0 〜 255 までしかありません。
この数値が大きいほど、色が濃いという事になります。
ただし、色が暗くなるのはその真逆で、数値が小さいほど黒に近い色になります。

※間違い、訂正などあれば掲示板の方で指摘してください。

色の三属性で色を付ける。

※2008 9/14 追記分

↑のcolor命令は、RGB という「色の３原色」を使って、描画色を変更しました。
今度は、「色の三属性」というものを使って、描画色を変えてみます。

1. 色相
2. 彩度
3. 明度

; 色相サンプル ( いくつか説明してませんが、気にしない方向でお願いします )

	redraw 2
	repeat 640
		hsvcolor cnt, 255, 255
		line cnt, -1, cnt, 480
	loop
	redraw 1
	stop

彩度は、色の「鮮やかさ」です。これが小さいと、色が薄くなります。
逆に大きすぎると、先ほどのサンプルのように変になります。
hsvcolor のパラメータを「0, cnt / 2, 255」 にしてみてください。

明度は見たとおり色の「明るさ」です。
これが小さければ、どんなに鮮やかでも、暗い色になります。
hsvcolor の p3 を 128 にしてみてください。

hsvcolor 命令が、三属性を用いて描画色を変える命令です。
この命令は、色の指定が若干難しいですが、color 命令よりも鮮やかな描画が可能です。
グラデーション、といいますよね。
ゲームでは重要になることでしょう。( と、ゲーム作らない僕が言ってみる )
最近では、ツールにもグラデーションが取り入れられて、格好良くなっているものも多いです。

その他の描画命令たち

※2009 01/19 追記分

画面に描画する命令がboxfだけではさすがに不便なので、
他もいくつか紹介しておきます。

	// 画面一杯の楕円
	circle
	
	// 謎の矩形
	color , 255
	boxf 400, 200, 600, 400
	color ,, 255
	boxf 450, 250, 550, 380
	
	// 平行四辺形を描画
	color 255, 255, 255
	line 130, 130, 360, 360
	wait 50
	line 130, 170
	line 360, 400
	line 360, 360
	
	// 各頂点を赤い点にする
	color 255
	pset 130, 130
	pset 130, 170
	pset 360, 360
	pset 360, 400
	
	// 指定座標の色を得るループ
	repeat
		pget mousex, mousey
		title "RGB = ("+ ginfo_r +", "+ ginfo_g +", "+ ginfo_b +")"
		await 12
	loop

circle

矩形に内接する楕円を描画します。p5 が偽( 0 )なら、縁の線だけを描画します。
サンプルのように引数を全部省略すると、画面一杯の楕円になります。

line

直線を描画します。(p3, p4) と (p1, p2) を結びます。
実行後はカレントポジションが p1, p2 に変更されます。
p3, p4 を省略すると、カレントポジションから直線を引くので、
連続して線を引くことが出来ます。

pset

点を描画します。座標 (p1, p2) のドットの色を変えます。

pget

画面の座標(p1, p2)のドットの色を読み取り、設定します。
( color命令を使ったときのようになる )

ginfo_r, ginfo_g, ginfo_b

※ginfo 16, 17, 18 のマクロ
設定されている色の輝度を返すシステム変数です。

mousex, mousey

マウスカーソルの位置を返すシステム変数( 後述 )です。
マウスが画面の外に出ると、正確ではなくなるので、気を付けてください。

ではでは、相当長くなってしまったんで、
そろそろお開きとしましょうか。

命令まとめぇ〜〜〜〜。

by 上大