5.画像の重ね順

複数のキャラクターを画面上に表示するとき、注意しなくてはいけないのが画像の重ね順です。
この順番は、原則としてタイプとバンクで決まります

チュートリアル

1.背景と複数の立ち絵を重ねる

背景に3人の立ち絵を並べてみましょう。

	bg 0 bg21a
	cg 1 ba01,3,1,2,1,1 200 //1=春姫
	cg 2 bb01,3,1,3,1,1     //2=杏璃
	cg 3 bc01,3,1,0,1 600   //3=小雪
	rdraw
	\n

【実行例】

画面キャプチャ

このとおり、バンクの数が大きいほど手前(上)になります。
この重ね順のことを「プライオリティ」と呼びます。

立ち絵より奥(下)になる背景画像は、今までずっと「bg 0」に読み込んできました。
では、次の場合はどうなるでしょう。

	bg 5 bg24a //「bg 5」に背景を読み込む
	bg 0 bg21a
	cg 1 ba01,3,1,2,1,1 200
	cg 2 bb01,3,1,3,1,1
	cg 3 bc01,3,1,0,1 600
	rdraw
	\n

【実行例】

画面キャプチャ

bgのバンク「5」に読み込んだのに、cg 1〜3よりも奥に表示されます。
背景用の「bg」タイプは、バンクに関わらず「cg」より手前に来ることはありません。

ただし、このbg 5はbg 0よりは手前に表示されています。
(Qキーモードにしてbg 5を動かすと、下からbg 0が現れます)

同じタイプ同士ならば、バンクの数が大きいほうが手前に表示されます。
今後紹介するすべてのタイプにもいえることなので、覚えておいてください。

2.キャラにエフェクトをつける

今まではずっと背景と立ち絵だけを表示してきました。
今回は初めて、立ち絵よりも手前に画像を表示します。

2人のキャラクターに、それぞれエフェクトをつけてみましょう。
タイプは「fg」を使用します。

	bg 0 bg53a
	fg 1 fgb32bs 280 200 //杏璃の怒りエフェクト
	cg 1 bb03,b,1,0,4 280
	fg 2 fga31a 495 110 //春姫の驚きエフェクト
	cg 2 ba01,b,1,0,7 600
	rdraw
	\n

【実行例】

画面キャプチャ

プライオリティが分かるでしょうか。

「背景 < 杏璃 < 杏璃のエフェクト < 春姫 < 春姫のエフェクト」の順に重なっています。
使用しているタイプとバンクに置き換えると「bg 0 < cg 1 < fg 1 < cg 2 < fg 2」となります。

キャラエフェクト用の「fg」は、同バンクのcgより手前、高位バンクのcgより奥になります。
奥にいるキャラなのに、エフェクトだけが最前面に来てしまうようなことはありません。

3.画面にエフェクトをかける

最後は、おもに画面全体にエフェクトをかけるときに使用する「eg」です。
これを使って画面を瞬間的に光らせてみましょう。
一般的に「白フラッシュ」と呼ばれる効果です。

単色で矩形(四角形)を塗りつぶすコマンドを使い、白一色の画像を擬似的に作成します。
これを短時間で表示して、すぐに消すように指定します。

このコマンドには特に名前がありません。
$の後の「FFFFFFFF」で、「不透明度100%・白」という指定になります。

	bg 0 bg53a
	fg 1 fgb32bs 280 200
	cg 1 bb03,b,1,0,4 280
	fg 2 fga31a 495 110
	cg 2 ba01,b,1,0,7 600
	rdraw
	\n

	eg 5 $FFFFFFFF 800 600 //画面サイズの白い矩形を作る
	rdraw 10
	wait
	eg 5
	rdraw 30
	\n

それでは実行してみてください。
クリック後、画面全体が白フラッシュしたでしょうか。
※この実行例は省略します。

白い矩形を作った「eg 5」のバンクを「1」にしたらどうなるでしょう。

	bg 0 bg53a
	fg 1 fgb32bs 280 200
	cg 1 bb03,b,1,0,4 280
	fg 2 fga31a 495 110
	cg 2 ba01,b,1,0,7 600
	rdraw
	\n

	eg 1 $FFFFFFFF 800 600 //バンクを1に
	rdraw 10
	wait
	eg 1 //バンクを1に
	rdraw 30
	\n

【実行例】

画面キャプチャ

実行例はフラッシュの瞬間です。
春姫と春姫のエフェクトだけがフラッシュより手前になりました。

プライオリティは「背景 < 杏璃 < 杏璃のエフェクト < 白矩形 < 春姫 < 春姫のエフェクト」となっています。

画面エフェクト用の「eg」は、同じバンクのcg・fgより手前になります。
高位バンクのcgよりは奥になります。

解説

プライオリティ

プライオリティとは「描画優先順位」のことです。
各タイプが値として持っていて、この値が高いものほど画面の前面に表示されます。

イメージタイプのプライオリティを整理すると以下のようになります。

bg 0 < (bg 1〜4) < bg 5 < cg 0 < fg 0 < eg 0 < (各1〜4) < cg 5 < fg 5 < eg 5


  • bgはどのバンクでも、他タイプより手前になることはない
  • 同じタイプならばバンクの数値が大きいほうが手前(上)になる
  • バンクが同じならば「cg < fg < eg」

イメージタイプの中でプライオリティが一番高いのは、上記のとおり「eg 5」です。
画面全体に効果をかける場合、eg 5を使用しておけば間違いなく他イメージを覆えることになります。
逆に、bg 0で背景しか表示していないようなときは、bg 1で画面効果をかけることもできます。

単色矩形の作成

白・黒・ピンクなど、一色で塗りつぶされた矩形ならばコマンドで作成することができます

矩形の大きさも自由に決められます。
コマンド内容は、順に「タイプ/バンク/色(不透明度+rgb)/サイズ」となっています。
イメージロードコマンドと違い、表示位置はposコマンドで指定することを忘れないで下さい。

	bg 0 bg01a0
	cg 1 bk01,1,1,2,2,1
	fg 1 $FF000000 125 20 //黒い横長長方形
	fg 1 pos 320 130
	rdraw
	\n
画面キャプチャ

→詳細:コマンドリファレンス「(c_image)」

まとめ

  1. 画像の重なり順は「プライオリティ」で決定する
  2. 単色矩形はコマンドで作成できる