アニメーション2
前章でキャラクターが歩くアニメーションの紹介を行いましたが、
最後に述べたように余白部分もそのまま描画されてしまう問題がありました。
黒い背景だけで行っていた為に言っている内容が伝わりにくかったかもしれないので、
背景も画像でやる場合の結果をご覧ください。
Windows用の画像です
下記サンプルスクリプトの使用画像は上記のものを使用しています。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
	// 事前準備
	buffer 1
	picload "sample/demo/sky_bg.jpg" // 起動時のカレントディレクトリがHSPフォルダの場合
	buffer 2
	picload "bomb.bmp"
	gsel 0
	randomize
	// アニメーション
	repeat
		posx = rnd(500) : posy = rnd(300) // 爆発を描画する座標の決定
		repeat 9
			redraw 0
			pos 0, 0 : gcopy 1, , , 640, 480
			pos posx + 100, posy + 50 : gcopy 2, cnt * 32, , 32, 32
			redraw
			wait 5
		loop
	loop
黒い余白部分が邪魔だとは感じませんか?
背景が画像であり、どこに爆発アニメを描画するかが分からない為に、
爆発の余白部分に背景画像の一部を入れることは出来ません。
こういう時に役立つのがマスク処理です。
画像におけるマスク処理とは、特定の色・部分を透過させることを指します。
HSP上で実現させるには次の命令をご利用ください。
gmode コピーモード, コピー幅, コピー高さ, ブレンド率
コピーモードウィンドウに貼り付ける際のモード(後述)を指定する。
コピー幅貼り付けるデフォルト幅を定義する。
コピー高さ貼り付けるデフォルト高さを定義する。
ブレンド率コピーをする際、現在画面とのブレンド率を指定する。
GraphicsMODE(change)の略でしょう。
コピーモードはHSPがバージョンアップするごとに増えていっているもので、現在は下記の通りです。
モード 説明
0通常(デフォルト)コピーする。
116×16以下程度の極小サイズをコピーする場合にモード0より若干早くなる。
2黒(RGB全て0)色を透過色としてコピーする。
3ブレンド率0はコピーされず、大きさに比例して合成コピーする。256以上でモード1同様(完全なコピー)。
4現在のcolor命令で指定した色を透過色としてモード3同様のコピーをする。
5現在の描画色にコピー元画像の各輝度分を色加算してコピーする。
6現在の描画色にコピー元画像の各輝度分を色減算してコピーする。
7ピクセル毎にブレンド率の指定を制御するピクセルαブレンドコピーをする。
モード1はメモリ間コピーと呼ばれるもので
貼付元・貼付先のウィンドウモード(256色パレット、フルカラー)が同じでなければなりません。
この高速メモリ間コピーは、極小サイズの時に早くなるとありますが、
通常のコピーであっても、サイズが小さいほど処理が少ないわけで、
極小サイズであれば、メモリ間コピーでなくても普通に早いと思われ、使用頻度は少ないかもしれません。
モード2はRGB輝度全てが0の真黒を透過色としてコピーするモード。
前章のキャラクターや当章の爆発画像の余白は、このモード2で使える真黒色にしています。
モード3はガラス越しで見ているようなコピーです。
元の画像情報も若干残しつつ、その上から指定したブレンド率で半透明合成を行います。
モード4は、モード3の半透明合成にモード2同様のマスク処理機能が入ったもの。
モード2と異なり、透過させるマスクカラーは現在のcolor命令色となります。
モード5は半透明ではなく色加算を、モード6で色減算コピーを行います。
うまく説明しにくいので、後述のサンプルスクリプトを実行して確認してください。
モード7はHSP3で追加されたモード。
コピーサイズと同じ大きさのマスクをコピー元画像の右側に用意することで、
ピクセル毎にブレンド率を変えたコピーを行います。
とりあえず、下記スクリプトは、冒頭のスクリプトに透過のgmode命令を1行追加したものです。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
	// 事前準備
	buffer 1
	picload "sample/demo/sky_bg.jpg" // 起動時のカレントディレクトリがHSPフォルダの場合
	buffer 2
	picload "bomb.bmp"
	gsel 0
	gmode 2 // 画像モードを変更(黒色透過)する
	randomize
	// アニメーション
	repeat
		posx = rnd(500) : posy = rnd(300) // 爆発を描画する座標の決定
		repeat 9
			redraw 0
			pos 0, 0 : gcopy 1, , , 640, 480
			pos posx + 100, posy + 50 : gcopy 2, cnt * 32, , 32, 32
			redraw
			wait 5
		loop
	loop
7行目を追加しただけです。
これで、プチ空中爆破シーンの完成ですね…。
色加減算モードについて、わかりにくかったと思うので、スクリプトで説明します。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
	buffer 1
	boxf
	color 255, 0, 0 : circle , , 200, 200
	color 0, 255, 0 : circle 200, , 400, 200
	color 0, 0, 255 : circle 400, , 600, 200
	gsel 0
	boxf
	gmode 5, 200, 200, 256 // 色加算モード
	pos 200, 100 : gcopy 1
	pos 140, 200 : gcopy 1, 200
	pos 260, 200 : gcopy 1, 400
 
どうでしょう?
画像ではなく、光の3原色をコピーして表現していますが、おわかりになりましたか?
赤と青で紫色、赤と青で黄色、緑と青で水色。
それぞれの重なった色の各輝度を加算して行き、3つが合わさって白色になってます。
光が当たったり陰になったりして、色が変わっている状態を表現することに使えますね。
HSP3から追加されたピクセルαブレンドは、
その命名の通り、各ドット毎の合成率を予め色で定義しておけるコピーモード。
255に近いほどコピー元の情報が貼り付けられます。
1ドットのRGB各輝度単位に参照される為、
この座標のこの色要素の合成度合いはどうしようと設定しておくことが出来ます。
p2、p3のコピーサイズは、gcopy命令等のコピーサイズを指定する命令を使用する時、
サイズを省略した場合に適用されるデフォルトサイズを決めるものです。
つまり、「gmode N, 100, 80 : gcopy ID, X, Y, W, H」だと貼付サイズは(W, H)になりますが、
「gmode N, 100, 80 : gcopy ID, X, Y」だと貼付サイズが(100, 80)となります。
p4のブレンド率はp1のコピーモードが3〜7の場合に適用されるパラメータで、
例えば、半透明合成の場合はすりガラスの透明度の指定となり、先の画像をどれだけ透けさせるか設定します。
次の命令に説明を移します。
画像を変倍コピーしたい場合は、下記命令を使用してください。
gzoom 貼付幅, 貼付高さ, ウィンドウID, X座標, Y座標, 幅, 高さ, ズームモード
貼付幅実際に貼り付ける際のサイズ。元の幅からの変倍率は、貼付幅÷幅。
貼付高さ実際に貼り付ける際のサイズ。元の高さからの変倍率は、貼付高さ÷高さ。
ウィンドウIDコピー元のウィンドウID。
X座標コピー元の基点(左上)となるX座標位置。
Y座標コピー元の基点(左上)となるY座標位置。
指定した幅が貼付幅に変倍してコピーされる。
高さ指定した高さが貼付高さに変倍してコピーされる。
ズームモード変倍画像にアンチエイリアス効果を付けるもの。
p6の指定幅をp1の指定幅に、p7の指定高さをp2の指定高さにそれぞれ変倍して貼り付けます。
指定パラメータは多いですが、gcopy命令と変わるのはp1とp2の変倍サイズとp8のモードだけです。
p1とp2は、p6とp7のサイズがそのサイズになると言うことでイメージは出来ると思います。
p8のモードはHSP3から追加された機能でもあるので、説明しておきましょう。
Windows9X系では確認することが出来ないこの機能は、
画像上のギザギザ部分を目立ちにくくする為のアンチエイリアス機能です。
実際のモードありなしによる違いは、下記スクリプトを実行して確認してみてください。
 1
 2
 3
 4
 5
 6
 7
	buffer 1
	picload "sample/demo/onibtn.gif" // 起動時のカレントディレクトリがHSPフォルダの場合
	gsel 0
	pos 50,  10 : mes "ハーフトーン使用しない"
	pos 50,  30 : gzoom 136 * 4, 50 * 4, 1, , , 136, 50 // 4倍にする
	pos 50, 250 : mes "ハーフトーン使用する"
	pos 50, 270 : gzoom 136 * 4, 50 * 4, 1, , , 136, 50, 1 // 4倍にする(ハーフトーンフラグを立てる)
少しボヤけてしまいますが、トゲトゲしくなくなっていることが確認できると思います。
尚、モード0又は省略すると、以前まで同様のそのまま変倍するものとなり、
ギサギサは拡大率に比例して目立ってしまうものの、
ハーフトーン使用するモードよりかは高速に処理させることができるようになります。
さて、貼付幅と高さにはマイナス値を指定することも可能です。
もし、コピー元と同じ値にマイナスを付けたもの(絶対値の反転)だと画像も等倍で反転し、
貼付サイズを大きくすると、拡大反転、貼付サイズが小さいと縮小反転します。
また、反転する方向は、幅をマイナス値にしたなら、左右反転、
高さをマイナス値にしたなら上下反転、幅も高さもマイナスなら、上下左右反転です。
マイナス値の場合は、画像内容だけでなく貼り付けられる位置も反転することに注意してください。
「pos 200, 200 : gzoom -100, -50, 1, 0, 0, 100, 50」なら、基点座標は(101, 151)となります。
ウィンドウ毎に現在のモード状態を保持しており、gmode命令を設定しても、
設定したウィンドウと異なるウィンドウに貼り付けるとその効果は適用されません。
また、変倍コピーして余白部分を透過させようとgmode命令を使用してもうまく作動しません。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
	pattern = 1, 2, 1, 0 // 動作パターン
	zoom = 5
	buffer 1
	picload "character.bmp", 1
	gsel 0
	gmode 2 // 真黒を透過色とする
	color 255, 255, 255
	repeat
		redraw 0
		boxf 100, 50, 32 * zoom + 100, 32 * zoom + 50
		pos 100, 50 : gzoom 32 * zoom, 32 * zoom, 1, pattern(cnt \ 4) * 32, , 32, 32
		redraw
		wait 20
	loop
もし、変倍したものの余白を透過させたい場合、
メインに貼り付ける前に一旦変倍しておいて、
その変倍したものを、gcopy命令で等倍コピーすれば、変倍かつ透過付きコピーが出来ます。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
	pattern = 1, 2, 1, 0 // 動作パターン
	zoom = 5
	buffer 1
	picload "character.bmp", 1
	gzoom 96 * zoom, 128 * zoom, 1, , , 96, 128
	gsel 0
	gmode 2
	color 255, 255, 255
	repeat
		redraw 0
		boxf 100, 50, 32 * zoom + 100, 32 * zoom + 50
		pos 100, 50 : gcopy 1, pattern(cnt \ 4) * 32 * zoom, , 32 * zoom, 32 * zoom
		redraw
		wait 20
	loop
この章は以上で終了です。
他にもまだ画像操作命令が用意されていますが、高度なものとなっているため、
先延ばしとしておき、その他の重要命令を先に紹介していきます。