[Glaeja] Glaeja1.8.xの作例

…タイトル考えるの面倒ｗ

『Glaeja』はver.1.8.0でいくつか機能追加をおこなったんですが、それらを使った作例をいくつか続きにあげておきます。



1. ネオン管風エフェクト

文字に影をつけるってのは以前から「シャドウ」でできたんですが、ver.1.8.0で「ぼかし」の仕様が変わり、半径制限がなくなりましたので、これを使ってネオン管風のエフェクトをかけてみましょう。

まず、「テキスト」レイヤーを置いて、適当なフォントで文字を書きます。細いサンセリフがネオンらしいので、ここでは「Print-Clearly」フォントを使ってみました。

で、この文字の周りに薄ぼんやりと光彩を入れるんですが、ここで「シャドウ」レイヤーを「ぼかし半径１０、水平・垂直オフセット０」とかで置いてしまうと、なんだかノッペリとしてしまいます。

そこで、まず文字と同じ色（透過度はFF）で「ぼかし半径３」くらいの「シャドウ」を置き、

その「シャドウ」に「ぼかし半径９」くらいの大きなぼかしの「シャドウ」をかけます。
こうすることで、光彩に立体感が出てイイ感じになりました。

でも、字本体のほうがまだノッペリとしていて、ネオン管というよりELシートっぽいですね。
そこで、字に白でハイライトを入れてネオン管風に仕上げてみましょう。

元の「テキスト」レイヤーを、長押し→複製して追加し、文字の色を白にします。

この白文字を「ミラー」でぼかすことで元の文字より細く加工します。
「シャドウ」のぼかしは外へ広がるようにぼけますが、「ミラー」のぼかしは中へ縮まるようにぼける、という違いがあります。
ぼかし半径は、白い部分がある程度残るように調節してください。また、元画像は表示させません。

このままでは逆さまなので、この「ミラー」をさらに「ミラー」で反転させて、元の文字列に重ねます。
このときの「ミラー」は、ぼかし半径をゼロにしておき、元画像は表示させません。

…「キレイなエフェクトはレイヤーが多い」という格言にもある通りｗ、エラいたくさんレイヤーが必要ですが、それなりにネオン管ぽくなったのではないでしょうか。

右に、「B○bClockD3Configure」のパチモンをネオン管エフェクトで作ってみました。こうやって自分で作ってみると、見飽きたとはいえ、やはりB○bのデザインは秀逸ですよねぇ。
このスキンのZIPパッケージをココに置いておきます。フォントは同梱していませんので、自分でダウンロードしてインストールしてください。



2. 「リッチテキスト」の地味な使い方

上で作ったB○bパチモンの一番下「DEC, 24TH」の部分なんですが、ここは「リッチテキスト」を使っています。

この「DEC, 24TH」を実現するには、日の「24」を「@.../.../\o@」で序数化（1st, 2nd,3rd, 4th, ...）すればイイのですが、文字列が日だけではなく先頭に月も入っているため、実は「テキスト」レイヤーでは簡単にはできないのです。

例えば、左のように「$MMM', 'd$@0/1/\o@」とすると、２４日のような場合にはいいのですが、１１日の場合に「11th」とならず「11st」となってしまいます。

だからといって「$MMM', 'dd$@0/2/\o@」とすると、１１日の場合は「11th」と正しいのですが、７日のとき「07th」と余計なゼロがついてしまいます。

文字列が日だけなら「$d$@0/-1/\o@」で文字列先頭までを置換対象に入れてしまえるので楽チンなんですが…

というわけで、「リッチテキスト」で文字列を分けることで、「$d$@0/-1/\o@」と文字列先頭までを置換対象に入れてしまいましょう。

「テキスト」レイヤーの代わりに「リッチテキスト」レイヤーを１つ置き、文字列群の編集で新規に文字列を１つ追加し、そのフォントやサイズを整えた上で、表示文字列を「$MMM', '$」だけにしておきます。

その文字列を複製して追加し、フォントやサイズ等はそのままで、表示文字列だけを「$d$@0/-1/\o@」に変えます。「@.../.../...@」の置換対象となる文字列は、「リッチテキスト」の文字列ごとに独立ですので、「文字列先頭まで」で「$d$」だけを対象とすることができるわけです。

これで「７日」「１１日」「２４日」どれでも正しく序数にすることができました。


3. 文字のついてくるアナログ時計

デザイン性の高いアナログ時計はカッコいいんですが、パッと見たとき時間がわかりにくいのが難点ですｗ
かといって、デジタル時計を一緒に表示するのもアレなので、アナログ時計のデザインに「変形と移動」を使ったデジタル表示を混ぜ込んでみましょう。

２×２のウィジェットを設置し、「ハンド」レイヤーを
・終点の距離：50 dp.
・回転中心（水平）：80 dp.
・回転中心（垂直）：100 dp.
・現在値となる項目：$m$
・最大値となる項目：60
と設定して、アナログ時計の分針を作ります。

表示文字列を「$mm$」とした「テキスト」レイヤーを追加し、 サンプル画像をクリックして現在時刻を「00分」となるよう偽造して表示位置を分針の真上にくるよう調節します。フォントや色、サイズ等はお好みでどうぞ。

さて、この分数値を分針に追従させるように「変形と移動」レイヤーを使って回転させます。
「変形と移動」レイヤーを新規追加し、先のテキストレイヤーの１つ上に移動させます。
そして、
○マトリクス前の並進　・水平：-80 dp.　・垂直：-100 dp.
○マトリクス
・左上：$m$@p@6@p@*@x@cos@x@.3@P@
・右上：$m$@p@-6@p@*@x@sin@x@.3@P@
・左下：$m$@p@6@p@*@x@sin@x@.3@P@
・右下：$m$@p@6@p@*@x@cos@x@.3@P@
○マトリクス後の並進　・水平：80 dp.　・垂直：100 dp.
と設定します。これにより、「テキスト」レイヤーが「水平80dp. 垂直100dp.を中心に分針と同じ角度」だけ回転することになります。

あとは、「ハンド」を時針に変えて、同じように「テキスト」レイヤーと「変形と移動」レイヤーで時数値も回転させてやれば、「数値のまわるアナログ時計」の出来上がりです。
ちなみに、時針の「変形と移動」レイヤーは、
○マトリクス前の並進　・水平：-80 dp.　・垂直：-100 dp.
○マトリクス
・左上：$i$@p@2@p@/@x@cos@x@.3@P@
・右上：$i$@p@-2@p@/@x@sin@x@.3@P@
・左下：$i$@p@2@p@/@x@sin@x@.3@P@
・右下：$i$@p@2@p@/@x@cos@x@.3@P@
○マトリクス後の並進　・水平：80 dp.　・垂直：100 dp.
という設定になります。
左図では、最後に「ハンド」を消して「サークル」で円を２つ描いてみました。

まぁ、これをこのまま使われることはないかと思いますが、参考のためにスキンのZIPパッケージをココに置いておきます。

ちょっと根性入れると、右のような凝ったアナログ時計も作れたりします。中心の太陽っぽいのに日付、周りをまわる地球っぽいのが時、その周りの月っぽいのに分が表示されるようになっています。スキンのZIPパッケージをココに置いておきます。フォントは「Tondu_Beta」を使いましたが、同梱しませんので自分でダウンロードしてインストールしてください。




4. 『mCl○ck』風Weekday Bar リベンジ

以前、『mCl○ck』風の「SMTWTFS」という頭文字だけの曜日バーを作ったんですが、「マッチテキスト」レイヤー７枚も使っといて等幅フォントしか使えない、という体たらくだったので、ver1.7.2の機能を使ってリベンジしてみたいと思います。

「マッチテキスト」レイヤーを１つ置き、フォント（フォントは「Chunk」にしてみました）やサイズ・色等を設定した後、元の文字列の表示文字列を「$f$SunMTWTFS,SMonTWTFS,SMTueWTFS,SMTWedTFS,SMTWThuFS,SMTWTFriS,SMTWTFSat@0/-1/\m@」にします。
こうすると、「SMTWTFS」の現在の曜日に相当する文字が「３文字表現」になったものが表示されるようになります。左図は木曜日の場合です。

あとは、対象の文字列を同じフォント・サイズにして
・探索文字列：$EEE$
・置換して表示する：チェック
・置換文字列：$EEE$@0/2/\d@
・文字の色：赤
とでもすれば、現在曜日の「３文字表現」が赤い頭文字のみに置換されます。









5. レタープレス（型押し文字）風エフェクト

「描画済み領域」レイヤーの使い所がイマイチ分かりにくいので、これを使ったスキンとしてレタープレス（型押し文字）風エフェクトを作ってみましょう。効果レイヤーがかなり複雑に絡まり合っていますので、理解しにくいと思いますが、頑張ってくださいｗ

まず、ウィジェットを設置し、型押しする文字を「テキスト」レイヤー等で描きます。太めの文字のほうが映えるので、ここでは「Morris Roman」を使ってみました。
文字色は適当で構いません。どうせこの「テキスト」レイヤーはマスクとしてしか使いませんから。

次に、この文字列全てを覆い隠すように「バー」レイヤーを置き、文字列の下に表示されるようレイヤー位置を変更します。
「バー」レイヤーの現在値は「100」にして、全体を同じ色にしておきます。

「転送モード」レイヤーを、最初に作った「テキスト」レイヤーを対象とするように追加し、「既存領域の重ならなかった部分のみ描画」に設定します。これで「バー」レイヤーから文字列が肉抜きされたわけです。

この肉抜きされた「バー」レイヤーに、型押しっぽくみせるためにドロップシャドウをかけます。
まず「描画済み領域」レイヤーを新規追加して、上３つで描画された肉抜き「バー」レイヤーを要素レイヤー化します。
次にその「描画済み領域」レイヤーに「シャドウ」レイヤーを使ってドロップシャドウを黒で描画させます。ディスプレイ画素数にもよりますが、ドロップシャドウのオフセット量が多いとクドくなりますので、0.5dp.とかに抑えたほうが仕上がりがキレイでしょう。

「バー」レイヤーについたドロップシャドウを除去し、文字部分のドロップシャドウだけを残すため、元の文字列を複製して追加し、それに「転送モード」レイヤーを「合成後、次要素レイヤー内のみ描画」でかけます。

これでレタープレス完成、といきたいのですが、なんだか仕上がりがノッペリとしています。型押しされてできる影は表現したんですが、その反対側にできるハイライトがないのが良くありませんね。

先ほどの「テキスト」レイヤーと「転送モード」レイヤーの間に「シャドウ」レイヤーを加え、「影の色」を白にすることでハイライトを作ります。これで立体感が出てきました。

なんとなく、メタリックなテクスチャが似合いそうだったので、「テキスト」レイヤーと「シャドウ」レイヤーの間に「テクスチャ」レイヤーを挟んでみました。このスキンのZIPパッケージをココに置いておきます。フォントは同梱しませんので自分の好みのものをインストールしてください。

---

とりあえずここまで。