この章では、ＨＳＰ３から追加された、少し高度な描画処理を行う命令を紹介します。
まずは、ウィンドウ内スクロールを行う上で役に立つ描画基点を変更する命令から。

groll Ｘ座標, Ｙ座標

Ｘ座標
基点とするＸ座標を指定する。
Ｙ座標
基点とするＹ座標を指定する。

GraphicsROLLを元にしたgroll命令は、表示ウィンドウよりも大きな画像を表示する際に利用するもので、
gcopy命令やgzoom命令のコピー元座標パラメータを変更させてスクロールさせるやり方と似てますが、
コピーを行うわけではないので、スクロールさせる為にコピー元画像をバッファで用意する作業は必要はなく、
また、ginfo命令、ginfo_vxマクロ、ginfo_vyマクロでスクロール取得することが可能となっているので、
gcopy命令等のコピーのように現在どれだけスクロールさせたかのスクロール量を保持する必要もありません。
ただし、スクロールさせられるのはウィンドウ内の描画内容だけであり、
配置したオブジェクトの位置はgroll命令でスクロールさせて位置変更することはできません。


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25



	// スクロール用の描画データを作成
	screen 0, 1200, 900, , , , 400, 300
	redraw 0
	x = 0, 0 : y = -1, 0
	repeat ginfo_sx + ginfo_sy
		hsvcolor cnt / 3, 255 - cnt / 192 * 20, cnt / 20 + 150
		x = x.0 + (cnt <  ginfo_sx), x.1 + (cnt >= ginfo_sy)
		y = y.0 + (cnt >= ginfo_sx), y.1 + (cnt <  ginfo_sy)
		line x, y, x.1, y.1
	loop
	color
	repeat 100
		pos cnt \ 6 * 200 + 50, cnt / 6 * 150 + 30 + (cnt \ 2 * 80) : mes "スクロールしてね"
	loop
	redraw 1
	// ドラッグ＆ドロップ受付開始
	repeat
		p = mousex + ginfo_vx, mousey + ginfo_vy
		wait 1
		stick k, 256
		if k & 256 {
			groll p.0 - mousex, p.1 - mousey
			title "" + ginfo_vx + ", " + ginfo_vy
		}
	loop



続いて紹介する命令は、boxf命令のように矩形を任意の単色で塗りつぶす命令ですが、
ラジアン単位の任意の角度分だけ回転させることができるようになっています。
ラジアンについての簡単な説明は３５章で説明しているので改めては説明しません。

grect Ｘ座標, Ｙ座標, 角度, 横幅, 高さ

Ｘ座標
矩形の中心Ｘ座標を指定する。
Ｙ座標
矩形の中心Ｙ座標を指定する。
角度
ラジアンを単位とする回転角度を指定する。
横幅
矩形の横幅を指定する。
高さ
矩形の高さを指定する。

GraphicsRECTangleを意味するgrect命令はboxf命令のように基点は左上座標ではなく矩形の中心座標なので、
左端座標は横長の矩形において、度数法における０度・１８０度の時に最小で、「Ｘ座標−(横幅÷２)」、
右端もまた０度・１８０度の時に最大となり、位置は「Ｘ座標＋(横幅÷２)」です。
上端・下端の縦位置も同じ考えでいけますね。
その他の半透明や色加算・減算等のコピーモード、省略時のコピーサイズは通常のboxf命令と同じく
gmode命令の設定が適用されるようになっています。
下記のサンプルでは、背景のドラッグ＆ドロップによりスクロールさせることができますが、
grect命令による回転物をリアルタイムで表示して背景も再描画する必要があるために
先ほどのサンプルと似てはいるもののgroll命令でスクロールしていません。


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37



	buffer 1, 1600, 1200
	s = 100
	x = ginfo_winx / s : y = ginfo_winy / s
	repeat x * y
		color cnt \ x * (256 / x), 200 - cnt / x * (256 / x)
		boxf cnt \ x * s, cnt / x * s, (cnt \ x + 1) * s, (cnt / x + 1) * s
	loop
	gsel 0
	osize = 200, 200			// 物体サイズ
	opos  = ginfo_winx / 2, ginfo_winy / 2	// X位置, Y位置
	orad  = 0				// 回転角度
	omove = 5, 5 				// X移動量, Y移動量
	gosub *draw
	repeat
		p = mousex + vx, mousey + vy
		wait 2
		stick k, 256
		if (k & 256) ! 0 & (p.0 ! mousex + vx | p.1 ! mousey + vy) {
			vx = limit(p.0 - mousex, 0, 1600 - ginfo_winx)
			vy = limit(p.1 - mousey, 0, 1200 - ginfo_winy)
		}
		gosub *draw
	loop

*draw
	title "" + vx + ", " + vy
	redraw 0
	pos 0, 0 : gcopy 1, vx, vy, ginfo_winx, ginfo_winy
	grect opos.0 - vx, opos.1 - vy, 3.14 * orad / 180, osize.0, osize.1 // 回転させた矩形を描画
	redraw 1
	if omove.0 < 0 & opos.0 - vx + omove.0 - osize.0 / 2 < 0 : omove.0 = 5
	if omove.0 > 0 & opos.0 - vx + omove.0 + osize.0 / 2 > ginfo_winx : omove.0 = -5
	if omove.1 < 0 & opos.1 - vy + omove.1 - osize.1 / 2 < 0 : omove.1 = 5
	if omove.1 > 0 & opos.1 - vy + omove.1 + osize.1 / 2 > ginfo_winy : omove.1 = -5
	opos = opos.0 + omove.0, opos.1 + omove.1
	orad += 3
	return



お次はgcopy命令・gzoom命令に回転機能が加わった命令です。

grotate ウィンドウＩＤ, Ｘ座標, Ｙ座標, 角度, 横幅, 高さ

ウィンドウＩＤ
コピー元画像が格納されたウィンドウＩＤを指定する。
Ｘ座標
コピー元の基点となる左端座標を指定する。
Ｙ座標
コピー元の基点となる上端座標を指定する。
角度
ラジアンを単位とする回転角度を指定する。
横幅
gmode命令の横幅を指定サイズに変倍する。省略時に等倍コピー。
高さ
gmode命令の高さを指定サイズに変倍する。省略時に等倍コピー。

GraphicsROTATEを意味するgrotate命令の第５、第６パラメータの横幅と高さは、
コピー元データの横幅・高さではなく、gmode命令で指定したサイズから伸縮させたサイズとなります。
つまり、予めgmode命令で縦横共にサイズ１００が指定されている場合、
grotate命令の横幅に２００、高さに１５０を指定すると、
コピー元Ｘ座標から１００ドット分を２００に、コピー元Ｙ座標から１００ドット分を１５０に伸ばすのです。
コピーサイズが横幅２００、高さ１５０であったとしても
grotate命令の第５、第６パラメータに２００、１５０と指定しないよう気をつけてください。
尚、gmode命令によるサイズやコピーモード情報が利用されるわけですが、
ＨＳＰ３から追加されたモード７(ピクセルアルファブレンドコピー)には対応していません。
その他の半透明や色加算・減算コピーには対応しています。


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16



	buffer 1
	picload "sample/demo/sky_bg.jpg"
	win.0 = ginfo_winx, ginfo_winy
	buffer 2
	picload "sample/demo/logop.bmp"
	win.2 = ginfo_winx, ginfo_winy
	gsel 0
	gmode 2, win.2, win.3 // 黒色(0,0,0)を透過させてコピーサイズを回転体に指定する
	repeat
		rad = 3.14 * cnt / 180
		redraw 0
		pos 0, 0 : gcopy 1, , , win.0, win.1
		pos win.0 / 2, win.1 / 2 : grotate 2, , , rad // ウィンドウ中央に等倍コピー
		redraw 1
		wait 1
	loop



次に紹介するのは、ニン○ンドーＤＳｉのライブカメラのように引っ張る機能の命令です。

gsquare ウィンドウＩＤ, 貼付先Ｘ情報, 貼付先Ｙ情報, コピー元Ｘ情報, コピー元Ｙ情報

ウィンドウＩＤ
コピー元画像が格納されたウィンドウＩＤを指定する。
貼付先Ｘ情報
貼付先４座標を配列変数(0:左上Ｘ 1:右上Ｘ 2:右下Ｘ 3:左下Ｘ)に格納して指定する。
貼付先Ｙ情報
貼付先４座標を配列変数(0:左上Ｙ 1:右上Ｙ 2:右下Ｙ 3:左下Ｙ)に格納して指定する。
コピー元Ｘ情報
コピー元４座標を配列変数(0:左上Ｘ 1:右上Ｘ 2:右下Ｘ 3:左下Ｘ)に格納して指定する。
コピー元Ｙ情報
コピー元４座標を配列変数(0:左上Ｙ 1:右上Ｙ 2:右下Ｙ 3:左下Ｙ)に格納して指定する。

gsquare命令はGraphicsSQUAREの名前通り、左上・右上・右下・左下の４点からなる矩形を操作するもので、
画像内にある任意の点を基準に引っ張るものではないために少々期待してるものと異なるかもしれませんが、
複数組み合わせることでクリックした点等のある一点を基準に伸縮させることも可能でしょう。
命令の使い方ですが、第２〜５パラメータは４要素を持つ数値型配列変数を指定する形となっており、
０番目に左上座標、１番目に右上座標、２番目に右下座標、３番目に左下座標情報を格納します。
２番目に左下、３番目に右下座標を指定する方が扱いやすかったのに、
何故か左上から時計回りに指定する形となっているためにプログラムで一括指定がしにくくなっています。
愚痴はさておき、画像の伸縮以外に、第１パラメータのウィンドウＩＤにマイナス値を指定することで
フルカラーモードではカレントカラー、パレットモードではパレットコードカラーで塗り潰すこともできます。
画像コピーではなく、塗り潰しを行う場合は第３、４のコピー元座標情報を指定する必要はありません。
現時点のヘルプには「ｐ１で指定した値−１がパレットコード」と書かれていますが、
ｐ１はマイナスなので、使用されるパレットコードは「(ｐ１＋１)×−１」となります。


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30



	buffer 1
	picload "sample/hspdx/testchr.bmp"
	gsel 0
	zoom = 4
	gpos = 200, 100
	cx = 256, 320, 320, 256
	cy = 64, 64, 128, 128
	px = gpos.0, zoom * (cx.1 - cx.0) + gpos.0, zoom * (cx.1 - cx.0) + gpos.0, gpos.0
	py = gpos.1, gpos.1, zoom * (cy.2 - cy.0) + gpos.1, zoom * (cy.2 - cy.0) + gpos.1
	gosub *draw
	repeat
		p = mousex, mousey
		wait 1
		stick k, 256
		if (k & 256) ! 0 {
			x = (zoom * (cx.1 - cx.0) / 2 + gpos.0 < mousex)   // 画像中心より右側か
			y = (zoom * (cy.2 - cy.0) / 2 + gpos.1 < mousey)   // 画像中心より下側か
			no = x + y * 2 + (x = 0 & y ! 0) - (x ! 0 & y ! 0) // 左上:0 右上:1 右下:2 左下:3
			px.no += mousex - p.0
			py.no += mousey - p.1
			gosub *draw
		}
	loop

*draw
	redraw 0
	color 255, 255, 255 : boxf
	gsquare 1, px, py, cx, cy // 伸縮させた画像を貼り付ける
	redraw 1
	return



最後に紹介するのは、Ｔｉｐｓで紹介しているような矩形をグラデーションで塗り潰す命令について。

gradf 左上Ｘ, 左上Ｙ, 横幅, 縦幅, モード, 開始色, 終了色

左上Ｘ
矩形左上のＸ座標を指定する。
左上Ｙ
矩形左上のＹ座標を指定する。
横幅
塗り潰す横幅サイズを指定する。
縦幅
塗り潰す縦幅サイズを指定する。
モード
グラデーションする方向(0:横, 1:縦)を指定する。
開始色
矩形左上の色をＲＧＢカラーコードで指定する。
終了色
矩形右下の色をＲＧＢカラーコードで指定する。

ＨＳＰ３．２で追加されたgradf命令は、パラメータ１と２の座標から、
パラメータ３と４のサイズ分をパラメータ５で指定したグラデーション方向で、
パラメータ６の色からパラメータ７の色で終わるように徐々に色を変えながら塗り潰します。
パラメータ１と２を省略するとウィンドウ左上(０,０)を指定したことになります。
パラメータ３と４はヘルプに矩形の右下座標と書いていますが、
座標ではなく、gcopy命令同様のサイズ指定となっていることを確認しました。
省略するとサイズ(０,０)ではなく、(ウィンドウ幅−左上基点Ｘ座標,ウィンドウ高さ−左上基点Ｙ座標)です。
Ｔｉｐｓでは斜め方向のグラデーションにも対応させていましたが、
gradf命令は縦または横方向のどちらかのみしか対応してません。
省略すると０…即ち、縦縞となる横方向のグラデーションになります。
パラメータ５と６はＲＧＢを１つにまとめたＲＧＢカラーコードで指定しますので、
例えば紫(２５５,０,２５５)を指定する場合、通常の色輝度同様に０〜２５５の範囲で１０進数指定すると、
「(255 << 16) + (0 << 8) + 255」のように面倒な書き方となりますが、
数値の頭に$または0xを付けた１６進数で指定すると、
「$ff00ff」や「0xFF00FF」のようにスッキリとしていてわかりやすいのでコチラで書くほうが良いでしょう。
尚、省略するとカレントカラーを指定したことになります。
開始色と終了色が一緒の場合はboxf命令で塗り潰す方が高速ですので、
単色塗り潰しする場合はgradf命令ではなくboxf命令を使うようヘルプに記載されています。
しかし、場合によってはgradf命令の方が高速となる場合があります。
boxf命令で塗り潰す色を指定する場合はcolor命令も使用する必要があり、
処理時間を計測すると管理人の環境でboxf命令を使う方が平均２０％程遅くなっていました。
また、処理的にも塗り潰しは背景であり、塗り潰した後に前景色を指定することを考えれば、
gradf命令で指定する方がパラメータ６と７で色指定をしていても、
カレントカラーに影響はなく、塗り潰し色とは別に前景色のまま保持することができますので便利です。


 1
 2
 3
 4
 5



	gradf  50, 100, 50, 300 // 「boxf 50, 100, 99, 399」と同じ
	gradf 150, 100, 50, 300, 0, 0xFF
	gradf 250, 100, 50, 300, 0, , 0xFF
	gradf 350, 100, 50, 300, 1, 0xFF
	gradf 450, 100, 50, 300, 1, , 0xFF