【画像を透過したい】


【目標】

ゲームで使用する画像で、キャラチップやマップチップは、透過処理を行うのが普通です。
これを行わないと、右の画像みたいなことが発生します。
Windows付属のペイント等では、透過情報を扱えません。それなりの専用ツールが必要になります。
ここでは、フリーのドットエディタソフト「EDGE」を例に、説明します。
画像に使われているうちの1色を指定して、それを透明色として使用する(その色で塗られた箇所を透明にする)ことが、今回行うことになります。

なお、詳しい操作方法などについては、EDGE同梱のマニュアルなどを参照してください。
ちなみに、EDGE作者様のサイトはこちら(TAKABO SOFT)です。この中にEDGEのコーナーがございます。

こんなことにならないように(左のニワトリとは別の画像を使っています)

*注意!
EDGEでは、使用色が256色までの画像しか扱えません(フルカラー画像は不可となります)。
もしEDGEで開けないというエラーが発生したときは、減色ツールをご使用下さい。
公式で紹介されている減色ツールとして「最適BMPtoPNG」などがございます。

こんなエラーがでたらすいません。何らかの方法で減色お願いします。


【手順】


今回は、こちらで用意した画像で、黒く塗られている部分を透過してみましょう。
このニワトリを、ゲームで使用するときに不自然にならないように透過処理を行うのです。

まずこちらの画像を、お使いのパソコンに保存します。
「Internet Explorer」をお使いなら、画像を右クリックして、「名前を付けて画像を保存」で保存ができます。

今回使用する画像です

【1】画像を用意する。まず256色画像ですか?
 EDGEで透過させたい画像を選択し、開きます。
 フルカラー画像は、開くことができません。
 なお、今回の画像は既に256色にしております。


ひらきます

【2】透過したい色はどれですか?
 画像の中で、透過させたい色を選びます。
 EDGEでは、カラーパレットの画面(図参照)に、その画像に登録されている色が一覧で出ています。
 パレットの画面の右下にある色(番号と共に色が出ている)には、
 左に描画色(書き込むときの色)、右に背景色(今回透過に使う、背景を塗る色)が表示されています。
 背景色の部分に、透過したい色が選ばれていることを確認しましょう。
 もし違う色が選ばれているようでしたら、パレット上で、透過したい色を右クリックし、
 透過したい色が選ばれたことを確認しましょう。
 なお、画像で右クリックすると(ただし鉛筆や直線描画などが選ばれているとき)、
 描画色が、そのときにカーソルの位置にある色に変わります。
 それをもとにパレットから背景色を選ぶといいでしょう。


赤枠の番号をチェック!この画像ではこの色が背景として使われてます。
他の色では透過できません!

【3】画像を透過して保存
 「名前をつけて保存」を実行し、そのときに「背景色を透過」にチェックを入れます(形式は.pngを選ぶ)。
 これで保存すると、そのときの背景色を透過した画像が保存されます。

ここを忘れないように!

【4】確認しよう
 実際にゲームで使ってみて、テストプレイで透過されていることを確認しましょう。
 透過色として指定した部分がちゃんと透過されていればOKです。
 エディタ上で透過されていないようにみえる場合がありますが(黒以外を透過色とした場合)、ゲーム画面ではきちんと透過されます。

ちゃんと透過されてますね


【余談】


  • ◆ツクール用サイズの素材をウディタに使いたい」の記事で説明されている「tkool2WOLF+」ですが、これにも透過機能があります。
    詳しくは、そちらで説明しますので、確認してみてください。

  • また、自分で一から絵を描いて、透過を行いたいときは、256色の場合、0番の色をRGB=(0,0,0)の黒として、透過色として予約するといいでしょう。
    もちろん保存するときは、パレット0番を背景色に選んでから「背景色を透過」を忘れずに。
    もし、絵の中で黒を使いたいなら、別の番号で黒を用意するか、RGB値の異なる黒を用意しましょう。

  • 画像の形式で、透過を扱えるのは、pngです。(gifも透過を扱えますが、ウディタでは使用できません)
    bmp(ビットマップ)やjpgでは、透過情報を扱えません。



<<執筆者:ウディタ公式ガイド執筆コミュ。>>


【←にフレームが表示されていない方はここをクリック】