GoogleAnalytics

SyntaxHighlighter

2012年3月6日火曜日

[Glaeja] ♫Layer! Layer!

前回のエントリで『(多分)お終い』とか書いたんですが、1つ大事なのを書き忘れてました。
その存在が当たり前すぎて詳細解説が必要という意識すらなかったんだけど、よく考えてみると動作詳細がよくわかってないもの…

それは『Glaeja』のレイヤーシステムです。

レイヤーシステムは、エスケープキャラクタとともに『Glaeja』の根幹をなすものです。
『Glaeja』では、「何を描画するか」をエスケープキャラクタで設定し、それを「どのように描画するか」をレイヤーシステムが決定します。
特に、スキンに含まれる複数の要素レイヤーや効果レイヤーをどんな順序で重ねて描画していくか、という描画順序の決定はレイヤーシステムの重要な機能の1つであり、それを知ることは複雑なウィジェットをイメージ通りに作り上げるためには欠かせないものです。

以下では、このレイヤーシステム、特に「描画順序」について解説していくことにします。


さて、レイヤーシステムの「描画順序」アルゴリズムについて、フローチャートを示して「はいお終い」としてもイイんですが、それではわかりにくいと思いますので、ここでもおなじみ棒人間に少し活躍してもらいましょう。

レイヤーシステムの「描画順序の決定」に関わる道具立ては、以下のような感じです。

レイヤーシステムが上図に描かれているレイヤーをどのような順序で重ね描きしているのか、動作を追ってみましょう。

0.[効果レイヤーのスタック]を空にし、[レイヤーのリスト]のカーソル位置を先頭にあわせる。

1.カーソル位置のレイヤーが(「描画済み領域」以外*1の)要素レイヤーなら、その内容を新品の「透明シート」に描き、[作業用画像]台に置く。
*1描画済み領域」だった場合は、下記11.の処理をおこなう。

2.[効果レイヤーのスタック]が空なら、[作業用画像]台に置いてある「透明シート」を全てそのまま[描画済み画像]台の上に移し、[レイヤーのリスト]のカーソルを1つ進める。

3.1.2.を繰り返す。


4.カーソル位置のレイヤーが(「キャンバス」以外*2の)効果レイヤーなら、そのレイヤーを複製して[効果レイヤーのスタック]にプッシュし、[レイヤーのリスト]のカーソルを1つ進める。

*2キャンバス」だった場合は、以降の『[描画済み画像]台の上に移す』ときの重なりをオフセットさせる。

5.4.を要素レイヤーが出てくるまで続ける。

5.要素レイヤーが出てきたら、1.と同様にその内容を新品の「透明シート」に描き、[作業用画像]台に置く。

6.2.と同様の処理をするところだが、[効果レイヤーのスタック]が空ではないので、[効果レイヤーのスタック]から1つ効果レイヤーをポップする。

7.ポップした効果レイヤーがシャドウ」「ミラー*3転送モード*4以外なら、[作業用画像]台の一番下に置かれた「透明シート」を、それに効果レイヤーの効果を与えたものと交換する
これを[効果レイヤーのスタック]が空になるまでおこなう。

*3シャドウ」「ミラー」だった場合は、下記8.の処理をおこなう。
*4転送モード」だった場合は、下記12.の処理をおこなう。

8.ポップした効果レイヤーが「シャドウ」「ミラー」で、[元画像を表示する]オプションがオンだったならば、[作業用画像]台の一番下に置かれた「透明シート」を複製し、複製したものに「シャドウ」「ミラー」の効果を与えて一番下に追加する。
この場合、「シャドウ」は「設定された色で塗りつぶされたボカシ処理を施す」、「ミラー」は「設定された軸で画像を反転する」という処理をおこなう。

[元画像を表示する]オプションがオフだった場合には、「透明シート」の複製はおこなわずに、上記7.と同様の処理(「シャドウ」は「設定された色で塗りつぶされたボカシ処理を施す」、「ミラー」は「設定された軸で画像を反転する」)をおこなう。

9.[効果レイヤーのスタック]が空になったら、2.と同様に[作業用画像]台に置いてある「透明シート」を全てそのまま[描画済み画像]台の上に移す。このとき[作業用画像]台に置いてある「透明シート」が複数である場合には、[作業用画像]台上の重なり順をそのままに、[描画済み画像]台の一番上に重ねて、[レイヤーのリスト]のカーソルを1つ進める。

10.[レイヤーのリスト]のカーソルが進められなくなったら(最後のレイヤーに到達したら)終了。[描画済み画像]台の上の「透明シート」を全てまとめてウィジェットに描画する。

11.*1カーソル位置のレイヤーが 「描画済み領域」だった場合は、現在の[描画済み画像]台の上の全ての「透明シート」を1枚の新しい「透明シート」にまとめて描き写し、それを[作業用画像]台に置く。そして2.6.に遷移する。このとき[描画済み画像]台の上の全ての「透明シート」は破棄される。


12.*3[効果レイヤーのスタック]からポップしたのが「転送モード」だった場合は、9.の『[描画済み画像]台の上に移す』ときの重ね方が通常とは異なり、その「転送モード」に従って、重ねる順を変更したり、[描画済み画像]台上の「透明シート」の描き直しをおこなう。

重ねる順を変更したり、[描画済み画像]台上の「透明シート」の描き直しをおこなった後、[効果レイヤーのスタック]を空にして、[レイヤーのリスト]のカーソルを1つ進める。よって「転送モード」より上(スタックでは下)に効果レイヤーがあっても、それらは全て無視される。



以上で、レイヤーシステムの「描画順序」の解説は終了です。

「なんかイマイチわかんない」という方は、実際の『Glaeja』で実験してみてください。

このレイヤーシステムの「描画順序」、特に「転送モード」の描画順が把握できると、今まで以上に複雑なウィジェットを作成することができるようになるはずです。

0 件のコメント: