【機能】着色された状態の画像を生成する

※2013/6/4にLWFSがアップデートされています。最新版はこちらから

---

今回は、着色された状態の画像を生成する方法に触れていきたいと思います。
そもそもLWFではパフォーマンス面の問題から、Flashにあるようなリアルタイムでの着色に
対応していません。
しかし、それを少しでも補うために予め着色処理を施した画像を生成することができます。

↑このような着色状態の画像を生成します。

この機能を使うことで、擬似的に着色効果を出すことができます。
例えば、画像をゆっくり赤色に着色したい場合、元の画像の上に着色処理をした画像を
透明にして乗せて、徐々に透明度を下げていくことで実現します。

タイムラインで赤色に着色された画像の透明度を徐々に0に

この機能を使えば1枚の画像容量で様々な着色効果をもった画像を生成することができます。
ただし、生成した分だけメモリは消費するので生成のしすぎには注意しましょう。

【着色画像生成機能】

webkitcss	○
canvas	○
webgl	○

---

この機能の使い方に入りたいと思います。
まずは、ライブラリに元となる画像を追加します。
追加したあと、更に同じ画像を追加します。
そうすると、上書きするかどうか警告が出ますが、置き換えないを選択してください。

置き換えないを選択

img.png のコピーが追加される

そうすると、xxxxxx.png のコピー　という画像が追加されると思います。
この画像の名前(及びリンケージ名)を特定の名前にすることで、着色機能が反映されます。

---

では、使い方の説明に入ります。例として、元の画像をimg.png　更に追加した画像を
img.png のコピーとして説明を進めていきます。

【着色】

・  (元画像の名前) + "_rgb_[カラーコード]" + .png
・  (元画像の名前) + "_rgb_" + "赤(0-255)" , "緑(0-255)" , "青(0-255)" + .png

元の画像を指定した色でベタ塗りにした画像を生成します。
元の画像を青色でベタ塗りにした画像を生成したい場合
img.png のコピー　の名前を img_rgb_0000ff.png　又は　img_rgb_0,0,255.png に変更します。

このように設定をしてLWFSで書き出しを行うとLWF上では下記の図のように表示されます

【半透明着色】

・(元画像の名前) + "_rgba_[アルファ付カラーコード]" + .png
・(元画像の名前) + "_rgba_" + "赤(0-255)" , "緑(0-255)" , "青(0-255)" , "透明度(0-255)" + .png

元の画像を指定した色と透明度でベタ塗りにした画像を生成します。
元の画像を半透明の青色でベタ塗りにした画像を生成したい場合
img.png のコピー　の名前を img_rgba_0000ff88.png　又は　img_rgba_0,0,255,136.png に変更します。

このように設定をしてLWFSで書き出しを行うとLWF上では下記の図のように表示されます

【加算合成】

・(元画像の名前) + "_add_[カラーコード]" + .png
・(元画像の名前) + "_add_" + "赤(0-255)" , "緑(0-255)" , "青(0-255)" + .png

元の画像を指定した色で加算合成した画像を生成できます。
元の画像を少し光らせた画像を生成したい場合
img.png のコピー　の名前を img_add_444444.png　又は　img_rgba_68,68,68.png に変更します。

このように設定をしてLWFSで書き出しを行うとLWF上では下記の図のように表示されます

---

サンプルのLWFとソースはこちらになります。
様々な着色効果を使っていますが実際に使用されている画像は元の画像1枚だけになります。
逆に元の画像がない状態で着色効果を使うとエラーになりますので、必ず元の画像は
残しておきましょう。

webkitcss　canvas　webgl

ソース

---

次回は、複数の画像素材を一つの画像素材に纏めた状態にする
いわゆるアトラス化、スプライト化と呼ばれるものの方法について触れていきたいと思います