2011年10月13日木曜日

[Glaeja] Beam me up, Scotty.

というわけで、『Glaeja』 の [テクスチャ ][転送モード ]レイヤーのチュートリアルです。
とは言ったものの、チュートリアルが必要なほど設定項目ありませんので、使用例を2・3お見せするくらいです。

…もうね、毎回毎回エントリータイトル考えるの面倒になってきたw



○[テクスチャ ]レイヤー

これは、設定の[ファイル名 ]に画像ファイルを指定すると、次の要素レイヤー描画の透明でない部分をその画像で塗りつぶす 、というものです。

ま、実際例を見てみましょう。

例えば、下のような[テキスト ]レイヤーに、





下のような画像ファイル(白い部分は透明)をテクスチャとして適用すると、



こんな風に表示されます。





テクスチャとする画像がウィジェットサイズより小さな場合は、このようにサイズ全面にタイリングされて適用されます。

もちろん、こんな感じで大きな画像もテクスチャとすることができます。



※画像はココから拝借しました


これを応用して、壁紙のウィジェット設置領域と同じ画像をテクスチャとして、さらにシャドウをかけて縁取りすると、こんな感じに溶け込んだようにできます。






…溶け込みすぎてわかりにくいですがw

また、[テクスチャ ]レイヤーは、上記のような[テキスト ]レイヤーだけでなく、[バー ]や[サークル ]レイヤーにも適用できます。

例えば、 こんなテクスチャを、




バッテリー残量を表現した[バー ]レイヤー(バーの背景色は透明)に適用すると、






どこかで見たような残量バーの出来上がりですw

他にも、こんなテクスチャを、








バッテリー残量を表現した[サークル ]レイヤー(線の背景色は透明)に適用すると、








このようにカラフルなバッテリーサークルが出来上がります。

このときの注意点は、「テクスチャ画像はウィジェット全面の左上隅を原点として貼り付けられる」ので、テクスチャとサークルの中心を合わせるために、テクスチャ画像はウィジェットの実ピクセルサイズでサークルの位置に合わせて作成する必要がある、ということです。


○[転送モード ]レイヤー

これまでに描画されたレイヤーの上に、次要素レイヤーを描画・合成するときに、適用される転送モードを指定する効果レイヤーです。
つまり、[転送モード ]レイヤーより前に描画された全レイヤーの合成画像(既存領域)に対し、次の要素レイヤーをどのように合成するかを選べる、というものです。

選べる合成方式を、その例図とともに以下に示します。






































上図からわかるように、通常通りにレイヤーを重ねていく、ということは[次レイヤーを既存レイヤーの上に描画]という転送モードに等しいわけです。
…なので、敢えてこのモードを選ぶ意味は全くありませんw

では、他のモードについて、ウィジェットをデザインする上での使い所はどこか、と言われると、これがなかなかイイのが思いつきません…

簡単なところだと、「既存領域の重ならなかった部分のみ描画」を使って「文字抜き」をする、ってのがあります。

最初に[バー ]レイヤーを置き、その次に「既存領域の重ならなかった部分のみ描画」に設定した[転送レイヤー]、最後に抜きたい文字をバーと重なるように設定した[テキスト ]レイヤーを配置します。









こうすると、以下のようにバーから文字が抜けて、壁紙が透けて見えるようにできます。






また、「重なった部分を描画しない」をデザイン的に使うのもあります。
例えば、バッテリー残量サークルと残量数値テキストを重ねて、『PieCut Battery』っぽくしてみたり、









縦縞をテクスチャとするバーに、文字を「重なった部分を描画しない」で重ねたものも、なかなか面白い効果になります。



















ま、こんな感じで「とりあえず重ねて抜いとけ」でもそれなりに見られるんじゃないでしょうかw
























既存領域の重なった部分のみ描画」を使って、クリッピングを行うことができます。

例えば、こういう[テキスト ]レイヤーに、






こんな画像をクリッピングマスクとして「既存領域の重なった部分のみ描画」で重ねると、






こんな風に、元の文字列が黒い楕円の形にクリッピングされて表示されます。















こんな画像に、






こんな画像をクリッピングマスクとして「既存領域の重なった部分のみ描画」で重ね、








これを[スプライト ]レイヤーで水平位置をバッテリ残量と結びつけると、








こんな感じのバッテリー残量ウィジェットができます。














これだけですと、なんだかわかりにくいので、元のドロイド君画像を半透過にした、






この画像(xfer11b.png)を、新しい[転送モード ]レイヤーを使って「次レイヤーを既存レイヤーの下に描画」で重ねると、





















このようにスポットライトで照らされてる感がよりアップします。


…とりあえずここまで。
またネタを思いついたら書き加えます。

0 件のコメント:

コメントを投稿