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

提供: LWF Wiki
移動: 案内、 検索
(→‎半透明jpegを生成する)
(→‎画像を生成する)
 
(1人の利用者による、間の31版が非表示)
1行: 1行:
 
==特殊効果付きビットマップとは?==
 
==特殊効果付きビットマップとは?==
−
特殊効果付きビットマップとは、読み込んだ画像から新たに生成された加工画像のことです。<br/>
+
前置きとして、LWFではパフォーマンスの都合上、Flashの着色処理は適用することができません。<br/>
−
例えば、着色や加算処理された画像や、透過情報を持ったpngとjpegを組み合わせて透過jpegのような画像を作り出すことができます。<br/>
+
しかし、着色した画像を使いたい時はよくあります。<br/>
−
読み込んだ画像を元に新たに生成するので、メモリはその分消費しますが元の画像を読み込むだけで済みます。<br/>
+
キャラクターを白く光らせる場合、キャラクターの画像と白塗りにしたキャラクターの画像とで別々に用意するのは<br/>
−
なので、加工前、加工後と画像を別々に読み込む必要がなく、容量を節約することが出来ます。<br/>
+
容量的にも優しくありません。<br/>
 +
<br/>
 +
なので、代わりとしてLWFには、特殊効果付きビットマップという機能があります。<br/>
 +
再生開始時に、指定した画像を元に着色処理や加算処理等が施された画像を生成したりすることができます。<br/>
 +
Flashのようにリアルタイムに着色処理を行うことは出来ませんが、着色された画像を使用することで擬似的に<br/>
 +
着色処理を再現したりすることが出来ます。<br/>
 +
<br/>
 +
読み込んだ画像を元に新たに生成するので、元の画像を読み込むだけで済むので容量の節約になります。<br/>
 +
ただし、新たに生成する分メモリを消費してしまうので注意してください。<br/>
 +
<br/>
 +
なお、生成自体は再生開始時にされますが、Flash上で指定した画像が特殊効果付きビットマップになる。という形なので<br/>
 +
Flash上で特殊効果付きビットマップにアニメーションをつけるといったことも可能です。<br/>
 +
<br/>
 +
性質上、<b>必ず元の画像はLWF内で使用されている必要があります。</b><br/>
 +
実際にタイムラインに配置されていなくても、ムービークリップ内で使用されていればOKです<br/>
 +
※グラフィックシンボルはNG<br/>
 +
 
 +
==着色画像を生成する==
 +
===画像を生成する===
 +
まず、着色したい画像をFlashのライブラリの元の画像と同じ階層に追加します。<br/>
 +
その際、上書きするかどうか警告が出ますが、<b>置き換えない</b>を選択してください。<br/>
 +
そうすると、<span style="color:blue">(追加した画像名) のコピー</span>　という画像がライブラリに追加されます。<br/>
 +
この画像の名前(及びリンケージ名)を特定の名前にすることで、再生開始時にこの画像が特殊効果付きビットマップとして使用されます。<br/>
 +
<br/>
 +
例として、元の画像をimg.png　更に追加した画像を<br/>
 +
img.png のコピーとして説明を進めていきます。<br/>
 +
<br/>
 +
*着色画像を生成する際の命名規則
 +
**(元画像の名前) + "_rgb_[カラーコード]" + .png
 +
**(元画像の名前) + "_rgb_" + "赤(0-255)" , "緑(0-255)" , "青(0-255)" + .png
 +
<br/>
 +
元の画像を指定した色でベタ塗りにした画像を生成します。<br/>
 +
元の画像を青色でベタ塗りにした画像を生成したい場合<br/>
 +
img.png のコピー　の名前を img_rgb_0000ff.png　又は　img_rgb_0,0,255.png に変更します。<br/>
 +
<br/>
 +
※<span style="color:red">カラーコードを入力する場合は小文字で入力してください。</span><br/>
 +
 
 +
===少しだけ着色した画像を生成する===
 +
上記では、指定した色で完全に塗りつぶしてしまいますが、半透明で着色することもできます。<br/>
 +
<br/>
 +
例として、元の画像をimg.png　更に追加した画像を<br/>
 +
img.png のコピーとして説明を進めていきます。<br/>
 +
<br/>
 +
*半透明着色画像を生成する際の命名規則
 +
**(元画像の名前) + "_rgba_[アルファ付カラーコード]" + .png
 +
**(元画像の名前) + "_rgba_" + "赤(0-255)" , "緑(0-255)" , "青(0-255)" , "透明度(0-255)" + .png
 +
<br/>
 +
元の画像を指定した色と透明度でベタ塗りにした画像を生成します。<br/>
 +
元の画像を半透明の青色でベタ塗りにした画像を生成したい場合<br/>
 +
img.png のコピー　の名前を img_rgba_0000ff88.png　又は　img_rgba_0,0,255,136.png に変更します。<br/>
 +
===複数の画像に一括で指定したい===
 +
大量に画像がある場合、名前を一つずつ変更していくのは大変なので<br/>
 +
ライブラリフォルダ内の画像を一括で指定した色に着色することができます。<br/>
 +
<br/>
 +
元となる画像と同じ階層に下記の規則に則った名前のフォルダを作り、元の画像と同名にして画像ファイルを入れてください。<br/>
 +
*_rgb_(カラーコード)
 +
*_rgba_(アルファ付カラーコード)
 +
 
 +
==加算合成した画像を生成する==
 +
===画像を生成する===
 +
まず、着色したい画像をFlashのライブラリの元の画像と同じ階層に追加します。<br/>
 +
その際、上書きするかどうか警告が出ますが、<b>置き換えない</b>を選択してください。<br/>
 +
そうすると、<span style="color:blue">(追加した画像名) のコピー</span>　という画像がライブラリに追加されます。<br/>
 +
この画像の名前(及びリンケージ名)を特定の名前にすることで、再生開始時にこの画像が特殊効果付きビットマップとして使用されます。<br/>
 +
<br/>
 +
例として、元の画像をimg.png　更に追加した画像を<br/>
 +
img.png のコピーとして説明を進めていきます。<br/>
 +
<br/>
 +
*加算合成画像を生成する際の命名規則
 +
**(元画像の名前) + "_add_[カラーコード]" + .png
 +
**(元画像の名前) + "_add_" + "赤(0-255)" , "緑(0-255)" , "青(0-255)" + .png
 +
<br/>
 +
元の画像を指定した色で加算合成した画像を生成できます。<br/>
 +
元の画像を少し光らせた画像を生成したい場合<br/>
 +
img.png のコピー　の名前を img_add_444444.png　又は　img_rgba_68,68,68.png に変更します。<br/>
 +
===複数の画像に一括で指定したい===
 +
大量に画像がある場合、名前を一つずつ変更していくのは大変なので<br/>
 +
ライブラリフォルダ内の画像を一括で指定した色に着色することができます。<br/>
 +
<br/>
 +
元となる画像と同じ階層に下記の規則に則った名前のフォルダを作り、元の画像と同名にして画像ファイルを入れてください。<br/>
 +
*_add_(カラーコード)
  
−
==カラー画像を生成する==
 
−
==半透明カラー画像を生成する==
 
−
==加算合成したカラー画像を生成する==
 
 
==透過jpegを生成する==
 
==透過jpegを生成する==
 +
===はじめに===
 +
通常では減色するとなると、アルファチャンネル付きのpng8を使用することが多いと思いますが色数が限られているため<br/>
 +
グラデーションを多用すると、かなり汚い画像になってしまう時があります。<br/>
 +
Flashには、画像にjpeg圧縮をかけて容量を抑えつつもアルファチャンネルも扱えるという素晴らしい機能があります。<br/>
 +
それをHTML5でも擬似的に行えるようにした機能がLWFには搭載されています。<br/>
 +
<br/>
 +
png8の方が容量は軽いので、png8の減色で特に問題ない場合はそちらを使ってください。<br/>
 +
容量的には<br/>
 +
<br/>
 +
png8 <<< 透過jpeg <<<<<<< png32<br/>
 +
<br/>
 +
という感じになります。<br/>
 +
<br/>
 +
===透過jpegを作る===
 +
透過jpegを作る際、対象がアトラス化する画像か、単体の画像かによって作り方が変わってきます<br/>
 +
====アトラス(する予定)の透過jpegを生成する====
 +
アトラス化(する予定の)画像を透過jpegにする際はFlash上で特に行う作業はなく、LWFに書きだした後に行います。<br/>
 +
<br/>
 +
※アトラス化について詳しくはコチラ→<br/>
 +
<br/>
 +
LWF書き出し後にアトラス化を行った後、アトラス画像から2種類のファイルを作成します。<br/>
 +
*作成する画像
 +
**(元アトラス画像のファイル名)_withalpha.jpg
 +
**:アルファ情報は捨てて色情報のみの画像を作り、jpegで保存してください。(圧縮率はお好みで)
 +
**(元アトラス画像のファイル名)_alpha.png
 +
**:Adobe fireworksやpngquantを使用してアルファチャンネル対応のpng8で保存してください。
 +
**:(彩度を下げて白黒の状態にし、色の情報は捨ててください。)
 +
上記の2つの画像を元のアトラスの代わりに置きます。<br/>
 +
その後、jsonファイルの下の方にあるmetaデータを変更します。<br/>
 +
*(元アトラス画像のファイル名).png => (元アトラス画像のファイル名)_withalpha.jpg
 +
そうすることで、LWFの方で自動的にファイルを認識して、再生時にアトラス画像から透過jpegを生成し使用してくれます。<br/>
 +
 +
====単体の画像の透過jpegを生成する====
 +
単体の画像の透過jpegを作る際は、Flashのライブラリ上で画像の名前を下記のように変更します。<br/>
 +
*(元の画像ファイル名)_withalpha.jpg
 +
そして、LWFの書き出しを行った後、上記の変更を行ったファイルを使って2種類の画像を作成します。<br/>
 +
*作成する画像
 +
**(元の画像のファイル名)_withalpha.jpg
 +
**:アルファ情報は捨てて色情報のみの画像を作り、jpegで保存してください。(圧縮率はお好みで)
 +
**(元の画像のファイル名)_alpha.png
 +
**:Adobe fireworksやpngquantを使用してアルファチャンネル対応のpng8で保存してください。
 +
**:(彩度を下げて白黒の状態にし、色の情報は捨ててください。)
 +
上記の2つの画像を元の画像の代わりにbitmapフォルダに置きます。<br/>
 +
そうすることで、LWFの方で自動的にファイルを認識して、再生時に画像から透過jpegを生成し使用してくれます。<br/>

2014年2月19日 (水) 18:34時点における最新版

目次

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

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

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

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

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

性質上、必ず元の画像はLWF内で使用されている必要があります。
実際にタイムラインに配置されていなくても、ムービークリップ内で使用されていればOKです
※グラフィックシンボルはNG

着色画像を生成する

画像を生成する

まず、着色したい画像を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

という感じになります。

透過jpegを作る

透過jpegを作る際、対象がアトラス化する画像か、単体の画像かによって作り方が変わってきます

アトラス(する予定)の透過jpegを生成する

アトラス化(する予定の)画像を透過jpegにする際はFlash上で特に行う作業はなく、LWFに書きだした後に行います。

※アトラス化について詳しくはコチラ→

LWF書き出し後にアトラス化を行った後、アトラス画像から2種類のファイルを作成します。

  • 作成する画像
    • (元アトラス画像のファイル名)_withalpha.jpg
      アルファ情報は捨てて色情報のみの画像を作り、jpegで保存してください。(圧縮率はお好みで)
    • (元アトラス画像のファイル名)_alpha.png
      Adobe fireworksやpngquantを使用してアルファチャンネル対応のpng8で保存してください。
      (彩度を下げて白黒の状態にし、色の情報は捨ててください。)

上記の2つの画像を元のアトラスの代わりに置きます。
その後、jsonファイルの下の方にあるmetaデータを変更します。

  • (元アトラス画像のファイル名).png => (元アトラス画像のファイル名)_withalpha.jpg

そうすることで、LWFの方で自動的にファイルを認識して、再生時にアトラス画像から透過jpegを生成し使用してくれます。

単体の画像の透過jpegを生成する

単体の画像の透過jpegを作る際は、Flashのライブラリ上で画像の名前を下記のように変更します。

  • (元の画像ファイル名)_withalpha.jpg

そして、LWFの書き出しを行った後、上記の変更を行ったファイルを使って2種類の画像を作成します。

  • 作成する画像
    • (元の画像のファイル名)_withalpha.jpg
      アルファ情報は捨てて色情報のみの画像を作り、jpegで保存してください。(圧縮率はお好みで)
    • (元の画像のファイル名)_alpha.png
      Adobe fireworksやpngquantを使用してアルファチャンネル対応のpng8で保存してください。
      (彩度を下げて白黒の状態にし、色の情報は捨ててください。)

上記の2つの画像を元の画像の代わりにbitmapフォルダに置きます。
そうすることで、LWFの方で自動的にファイルを認識して、再生時に画像から透過jpegを生成し使用してくれます。

「http://lwf-users.org/index.php?title=特殊効果付きビットマップ&oldid=1023」から取得