「特殊効果付きビットマップ」の版間の差分

2013年10月22日 (火) 14:20時点における版

特殊効果付きビットマップとは?

前置きとして、LWFではパフォーマンスの都合上、Flashの着色処理は適用することができません。
しかし、着色した画像を使いたい時はよくあります。
キャラクターを白く光らせる場合、キャラクターの画像と白塗りにしたキャラクターの画像とで別々に用意するのは
容量的にも優しくありません。

なので、代わりとしてLWFには、特殊効果付きビットマップという機能があります。
再生開始時に、指定した画像を元に着色処理や加算処理等が施された画像を生成したりすることができます。
Flashのようにリアルタイムに着色処理を行うことは出来ませんが、着色された画像を使用することで擬似的に
着色処理を再現したりすることが出来ます。

読み込んだ画像を元に新たに生成するので、元の画像を読み込むだけで済むので容量の節約になります。
ただし、新たに生成する分メモリを消費してしまうので注意してください。

なお、生成自体は再生開始時にされますが、Flash上で指定した画像が特殊効果付きビットマップになる。という形なので
Flash上で特殊効果付きビットマップにアニメーションをつけるといったことも可能です。

着色画像を生成する

まず、着色したい画像をFlashのライブラリの元の画像と同じ階層に追加します。
その際、上書きするかどうか警告が出ますが、置き換えないを選択してください。
そうすると、(追加した画像名) のコピー　という画像がライブラリに追加されます。
この画像の名前(及びリンケージ名)を特定の名前にすることで、再生開始時にこの画像が特殊効果付きビットマップとして使用されます。

例として、元の画像を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 に変更します。

少しだけ着色した画像を生成する

上記では、指定した色で完全に塗りつぶしてしまいますが、半透明で着色することもできます。

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

• 半透明着色画像を生成する際の命名規則
  • (元画像の名前) + "_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 に変更します。

複数の画像に一括で指定したい

大量に画像がある場合、名前を一つずつ変更していくのは大変なので
ライブラリフォルダ内の画像を一括で指定した色に着色することができます。

元となる画像と同じ階層に下記の規則に則った名前のフォルダを作り、元の画像と同名にして画像ファイルを入れてください。

• _rgb_(カラーコード)
• _rgba_(アルファ付カラーコード)

加算合成した画像を生成する

まず、着色したい画像をFlashのライブラリの元の画像と同じ階層に追加します。
その際、上書きするかどうか警告が出ますが、置き換えないを選択してください。
そうすると、(追加した画像名) のコピー　という画像がライブラリに追加されます。
この画像の名前(及びリンケージ名)を特定の名前にすることで、再生開始時にこの画像が特殊効果付きビットマップとして使用されます。

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

• 加算合成画像を生成する際の命名規則
  • (元画像の名前) + "_add_[カラーコード]" + .png
  • (元画像の名前) + "_add_" + "赤(0-255)" , "緑(0-255)" , "青(0-255)" + .png

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

複数の画像に一括で指定したい

大量に画像がある場合、名前を一つずつ変更していくのは大変なので
ライブラリフォルダ内の画像を一括で指定した色に着色することができます。

元となる画像と同じ階層に下記の規則に則った名前のフォルダを作り、元の画像と同名にして画像ファイルを入れてください。

• _add_(カラーコード)

透過jpegを生成する

通常では減色するとなると、アルファチャンネル付きのpng8を使用することが多いと思いますが色数が限られているため
グラデーションを多用すると、かなり汚い画像になってしまう時があります。
Flashには、画像にjpeg圧縮をかけて容量を抑えつつもアルファチャンネルも扱えるという素晴らしい機能があります。
それをHTML5でも擬似的に行えるようにした機能がLWFには搭載されています。

png8の方が容量は軽いので、png8の減色で特に問題ない場合はそちらを使ってください。
容量的には

png8 <<< 透過jpeg <<<<<<< png32

という感じになります。