BGAの作り方 超上級篇 (透過画像の使い方)

ここでは、既にレイヤー?がある程度使える方を対象にしています。 (使えればOKです。使いこなせる必要はありません。) レイヤー?や、さらにその前の「BGAとは?」といった説明は、別のページをご覧ください。

また、GDAC2をお使いの場合、以下の説明では「BGAつきDTX作成用のレーンスクリプト」の「最新のもの」を使っていますので、もしこのレーンスクリプトをまだインストール/使用していない場合は、 初級篇?を参照して「BGAつきDTX作成用のレーンスクリプト」 を使えるようにしておいてください。

ここでは、 Q&A筆者が個人的に「教科書的」「王道」と感じているプロセス・考え方を説明していますが、画像編集ソフトそのものの操作にちょっと疎いため、何か思い違いをしているかもしれません。「**の説明なら、普通こうでは?」など、ご指摘がございましたら、 web拍手などでご意見いただけますとありがたいです。
なお、Pixiaでの透明度付きpng保存法について、 さくら様☆よりご助言いただきました。この場を借りて御礼申し上げます。



 ? 透過機能の使い方について

透過機能は DTXMania Release 059 以降で導入された新しい機能です。 これを簡単に書くと、 「半透明な部分がある画像を用いて、 透けるレイヤーを作るための機能」となります。 この機能を使うには、 半透明な部分がある画像を用意した上で、#BMP? の代わりに #BMPTEX? という命令を使います。

背景画像。このような、透過部分がない画像には、#BMP を使います。

上にかぶせる画像。わかりやすくするために、全体が透けている画像を使っています。 字が透けているのが分かりますか?
このように、透過部分がある画像には、 #BMP ではなく #BMPTEX を使います。
(注: 灰色と白色の縞模様は、 透明色を表します。 その手のソフトでは割と一般的な表現です)

左の二つを重ねた結果。こんな風に、透かしつつ重ねることができます。

ちなみに、#BMPTEX を使わないと、透けません。また、透過情報付の画像を#BMPで使うと、誤動作するかもしれません。


? 透過部分があるレイヤーを作るためには、まず「透過部分がある画像」を準備する必要があります。 このような画像は、通常の画像編集ソフトでは作ることができません。Photoshop や、 Pixia、 GIMP などを使う必要があります。
参考: GIMP for Windowsのダウンロードとインストール方法

ただし、 後述する理由?から、 透過関係でPixiaを使うのは、 ちょっとキツいかも・・です。


実際に透過画像をどう作るか? については、 最も簡単な超基本的なやり方 (「全体の透明度が一定」な透過画像の作り方) を別ページで説明しています。こちらをご覧ください。

  • 全体の透明度が一定な透過画像の作り方・Photoshopの場合?
  • 全体の透明度が一定な透過画像の作り方・Pixiaの場合?
  • 全体の透明度が一定な透過画像の作り方・GIMPの場合?

? このような「透明度を含んだ画像」つまり透過画像は、 最終的には必ず「24bit色のpng」で保存してください。 この形式以外では、透明度の情報が保存されません。 (png以外の形式でも透明度が保存できるものがありますが、 DTXManiaで扱えるのはpngのみです)
一方で、この透過画像をWindowsのエクスプローラーや Internet Explorer 6(以下) で見ると、絵がおかしくなることがあります。 (透明色が別の色になっていたり、そもそも絵が変だったりする。)
Firefoxなど他のブラウザを使うか、Internet Explorer 7 を使うと、ちゃんと見ることができます。

また、いわゆる「透明色(完全に透け切る色)」は、従来(#BMP)は「真っ黒(RGB=0,0,0)」でしたが、? #BMPTEXの場合は「透明度100%(もしくは不透明度0%)」の部分になります。 従って、#BMPTEX の場合、「真っ黒(RGB=0,0,0)」は、 「真っ黒」な色として使うことができます。(透けません)

最後にもう一つだけ。この「透明度」のことを、 「α(アルファ)」とか 「α値(アルファち)」 と呼ぶこともあります。 頭の片隅に入れておくと、どこかで役に立つことがあるかもしれません。


? さて、レイヤーに入れる半透明の画像 (や、透明度が含まれている画像全般) ができあがってしまえば、 それをDTXデータで扱うのは簡単です。 透過画像を扱う場合は、#BMP? で指定する代わりに #BMPTEX? を使うだけでよく、 それ以外はこれまでのレイヤーの使い方と全く同じです。

GDAC2を使う場合、 例えば最初に示したような画像を設定する手順は以下のようになります。 ここで、チップ02の画像(上に重ねる画像)には、 ちゃんと透明度の情報が含まれている必要があります。

DTXCを使う場合は、GDAC2より多少楽に透過画像を扱うことができます。

GDAC2から透過機能を使う場合、 #BMP の場合と #BMPTEX の場合とで、 画像の指定方法を変えてください。#BMPTEX は、Free欄で指定する必要があります。

DTXCから透過機能を使う場合、 透過画像のチップのプロパティで、 「Texture」にチェックを入れてください。 こうすることで、DTXC内部で (#BMPでなく) #BMPTEX として扱われます。「自由入力」タブを使用する必要はありません。

上記の例を再生してみると、ちゃんと透けて重なってます。 DTXManiaやDTXViewerは059以降のものを使ってください。

ひとつだけ、#BMPTEX の使用に当たって注意が必要なことがあります。//**#BMPTEXで指定する画像のピクセルサイズは、 必ず1024x1024以下にしてください。**// 縦横いずれかを1024より大きくすると、環境によっては異常終了してしまいます。

詳細は、 マニュアルの#BMPTEX?の項を見てください。


透過色の基本的な説明は、以上になります。

ここまでの説明でお分かりかと思いますが、 「透明度・透明色を含む絵さえ描ければ、BGAに使うのは難しくない」 です。 ですから、 後はPhotoshopやPixia、GIMPといった画像編集ソフトの使い方次第で、 色々な表現ができるようになると思います。

例えば、画像全体を単一の透明度にするのではなく、 ちょっとずつ透明度が変化するような絵を描くこともできます(下図)。

また、この半透明のレイヤーは、1枚だけでなく複数枚重ねて使うこともできます。

このように、応用範囲は無限大です。色々と試してみてください。

DTXMania子の下に行くほど透明度が上がるようにしておいて(左図)、これを重ねると、簡単に幽霊が(右図)!? (中藤える様ゴメンナサイゴメンナサイ・・)
一応、 この例の作り方は・・・


以下、参考までに、 いくつか透過画像の典型的な活用例をご紹介します。

? 透過機能の活用法1. フェードイン・フェードアウト

画像が徐々に現れたり消えたりする、 フェードインとフェードアウト。 通常、この手法を使うときには、 フェードイン・フェードアウトしたい元画像の明るさ(*)をちょっとずつ変えては保存して・・・ ということをやるわけですが、これ、画像を作るのが非常に面倒です。

(注: 必ずしも「明るさ」を変えるとは限りません。)


徐々に暗くなる画像を作るパターンの場合、 画像毎に、中間画像をすべて作り直す必要あり。(ここでは、都合16パターンの画像を作っています)

ところが、透過機能を使うとあら簡単。 異なる透明度を持った透過画像を複数用意しておいて、 上位レイヤーでそれを順に切り替え表示していくようにすると、 その下のレイヤーの画像は 「徐々に透けていく」または逆に「徐々に消えていく」・・・ つまりフェードイン・フェードアウトになります。


夕日の画像に、フェードアウト用の画像をそれぞれ重ねると、 簡単にフェードアウトができます。ここで作ったのは、 透明度が異なるだけで後はまったく同じ真っ黒画像を8枚。


浜辺の画像でも同じことができます。 フェードアウト用の画像は夕日用のと同じ物を使い回していることに注意。

フェードイン・フェードアウトを透過機能で実現するメリットは2つあります。

  • //**下絵に合わせてフェードイン・フェードアウトな中間画像を作る必要がない**//
    • 下絵(や作品)ごとに作り直ししなくても、 一度フェードイン・フェードアウト用の画像パターンを作ってしまったら、 以後ずっと使い回し可能!! これで面倒な作業から解放されます。 また、使い回しがききますので、BGAのアーカイブサイズ的にもお得です。
  • //**下のレイヤーを #BGAPAN でスクロールさせながらでも、 画面全体をフェードイン・フェードアウトできる。**//
    • これを透過機能なしでやろうとすると、非常に面倒です。 また、レイヤーを複数組み合わせた場合はほとんど絶望的。 でも、#BMPTEX?による方法であっさり解決します。

逆に、このやり方のデメリットは、

  • 旧式のパソコンだと、再生時の処理が重くなる
  • DTXMania 055b以前では使えない
  • レイヤーを1枚余分に使用する

です。 データの再生ターゲットや、 使用できるレイヤーの枚数にはご注意ください。


? 透過機能の活用法2. 縁(境界)をなめらかにする

FROMさんが#BMPTEX?を作ったそもそもの目的がこれです。 文字でも登場キャラでもいいのですが、縁の部分だけを微妙に透過させることで、 縁の部分を背景画像と馴染ませることができ、 縁に現れがちなギザギザやゴミを無くすことができます。

? まず、簡単なところで、文字を使った例をお見せします。

従来の例。黒(rgb=(0,0,0))の上に、 普通に文字を書く。

でも他のレイヤー(ここでは赤一色)と#BMPで重ねると、 縁にゴミが出てしまって美しくない。

縁(赤枠内)を拡大した図。 縁の真っ黒でないところ(薄い黒のところ)は rgb=(0,0,0)ではないので透明色とはならず、 赤と混ざらない。ここがゴミとなる。
ただし、背景画像が黒系統のものなら、これで全然問題ないことに注意。 (黒い背景画像に対してのアンチエイリアスってことになります)

透過機能を活用した例。 透明色の上に、普通に文字を書く。 (背景を黒でなく透明色にしただけ)

これを#BMPTEXを使って他のレイヤー(ここでは赤一色)と重ねた図。 ゴミが出ず、綺麗に重なる。

同じところを拡大した図。 薄くなっているところには、透明度が設定されており、 赤とうまく混ざってくれる。

(参考)「薄い黒」や「透過色」のような中間色を無くして、 「緑」「赤」の2色だけにした、 アンチエイリアスなしの図。 #BMPだけで表示できるが、 若干ギザギザ(ジャギー)・デコボコが目立つ。


? 次に、イラストでの例です。

本質は先の文字の例?と同じで、「縁の部分の透明度を上げる」ことで綺麗に重ねることができます。

従来の例。普通に絵を切り取って重ねるとこうなる。 縁が汚い・・。

縁にうまく透明度を設定してやると、 綺麗に重なります。

頭の左上の拡大図。 縁の部分が透けているのがポイント。

本来、最初にイラストを起こすときに、 背景色を透明色にしておいて描き始めれば、 特に意識しなくても縁の部分に透過色が入って、 問題なく画像を重ねることができます。 つまり、そもそもこのようなことを意識せずに済みます。

でも、実際には、自分のお気に入りの画像編集ソフトでは透明度が使えない・・ ということもあるかと思います。 そんな場合は、例えば次のようなやり方で縁に透明度を設定できます。 (あくまで一例ですが。)

言い換えると、ポイントは

  • 最初の描き始めは透明色を背景にして行う (これができていればそもそもこんなことで苦労しなくて済む)
  • 透明色背景で描き始められないケースの場合は、 「とにかく切り抜きたい部分を選択領域にして、 その周辺を透明度込みでぼかす」

ということです。そこさえ押さえておけば、何とか手順は編み出せるかと。

ほかにも、最初イラストを大き目に作っておいて、 最後に背景色を透明色にしておいてPhotoshop/Pixia/GIMP上で縮小する・・ (いわゆるオーバーサンプリング)・・とか、 色々なやり方があります。 このあたりのノウハウはちょっとここでは書ききれませんので、 あちこちのサイトにある情報を見ながら勉強してみてください。 (画像の編集の方法は、何かと応用が利きますので、 勉強しておいて損はないです。)

最終更新: 2006.7.20

DTXMania Q&A