最低限の画像講座１

ぴぽ

6年前

コンテンツ

はじめに

ゲーム制作には多くの知識が必要です。
またウディタのようなオーサリングソフト(各素材をまとめて最終的な作品に仕上げる)の他にもグラフィック関連ソフトやサウンド関連ソフトなど様々なソフトウェアを使用する必要があります。

「フリーの素材をそのまま使うから、グラフィック関連ソフトは使わない」と思うかもしれませんが、せっかく良い素材を見つけても、「画像の大きさが自分の作っているゲームに合わない」「違う色なら使いたいのに」なんてことがありませんか？こんな時に画像加工ソフトで大きさを変更したり、色味を調整したりできれば非常に便利です。
※ただし、配布されている画像素材の利用条件をきちんと確認し、加工OKとなっている場合のみに行なうことができます。

また、外部の素材で用意できるものなら問題ありませんが、最低限自分で用意しておきたいゲームタイトルロゴ画像などは、デフォルトのフォントによる味気ないものではなく、多少デザインを施したものを作ってみたいところです。

そこで、ここでは自分で画像素材を作ったり絵が描けなくても、最低限知っておきたいグラフィック関連ソフトを使った作業方法を紹介していきます。

使用するソフトウェアは特に説明がない限り、無料の画像編集ソフト「PictBear」を使用した説明になります。

画像のファイル形式を変える

画像のファイル形式をウディタで扱えるファイル形式や、よりファイルサイズが軽くなるファイル形式に変換します。

ウディタで扱うことができる画像のファイル形式は PNG画像、 JPEG画像、 BMP画像の３種類になります。
それぞれの画像ファイル形式の特徴は以下のようになります。

PNG画像
拡張子はPNG。
キャラチップ画像やマップチップ画像などウディタで使用する画像で一般的に使用されます。
256色のカラーパレットを保持した8bitPNGやフルカラーの24bitPNG,32bitPNGが存在します。
ファイルサイズも小さくなり、透明色を指定することができ、αチャンネル(透明度)付きの画像(ぼんやりとした半透明の光の表現など)も扱うことが出来ます。
ウディタで通常画像を扱う場合はこの PNG画像で扱うのが最適です。
JPEG画像
拡張子はJPEG,JPG。
イベントシーンなどの大きい画像やマップの遠景画像に使用されます。
画像が荒くなる代わりにファイルサイズを小さく保存することができます。使用するソフトウェアによりますが、画像が荒くなる度合いとファイルサイズのバランスは画像を保存する際に調整できます。
写真やグラデーションを多用したイラストなどを使用する場合は JPEG画像で扱うのが最適です。
透明色を指定することはできません。
BMP画像
拡張子はBMP。
ファイルサイズが大きくなるので、あまり使用されることはありません。
PNG画像と同様に256色のカラーパレットを保持した形式とフルカラーの形式がが存在します。
透明色を指定することができませんが、ウディタ側でカラーコード(#000000)・カラーRGB(0,0,0)の色を透明色と自動認識してくれます。

ウディタで画像ファイルを扱う場合には基本的には PNG画像を使用し、大きい写真や色数の多い大きいイラストを使用する場合は JPEG画像を使用します。

それでは、試しに適当な画像を PNG画像 , JPEG画像で保存してみましょう。

まずは、 PNG画像で保存してみましょう。

１.画像ファイルをPictBearにドラッグ＆ドロップなどして開きます。

２.「ファイル」＞「名前を付けて保存」を選択します。

３.保存する場所を選び、「ファイル名」を入力「ファイルの種類」をPNGファイルとして「保存」ボタンを押します。

今度は、 JPEG画像で保存してみましょう。

１.画像ファイルをPictBearにドラッグ＆ドロップなどして開きます。

２.「エクスポート」＞「Jpegファイルの書き出し」を選択します。

PNG画像を保存する時のように「ファイル」＞「名前を付けて保存」を選択で保存しても構いませんが、画像の品質やファイルサイズを細かく調整したい場合は「エクスポート」＞「Jpegファイルの書き出し」を選択します。

３.「品質」を調整しながら、「保存後のイメージ」「ファイルサイズ」を確認し、「保存」ボタンを押します。

４.保存する場所を選び、「ファイル名」を入力して「保存」ボタンを押します。

画像に透明色設定を加える

ネット上で配布されている素材をダウンロードしたものの、透過色が設定されていないために、ゲーム中で使用してみると背景色が表示されてしまう場合があると思います。
そうした場合は自ら透明色を設定することで解決しましょう。
ただし、元の画像の状態によっては透明色の設定が難しい場合があります。

１.画像ファイルをPictBearにドラッグ＆ドロップなどして開きます。

右下に「インデックスカラー」となっているのを確認します。「インデックスカラー」でない場合は今回の透明色の設定はできません。
真ん中の「パレット」で「サンプル」を選択します。

２.もし画像が「インデックスカラー」でない場合は「イメージ」＞「イメージタイプ」＞「インデックスカラー」を選択し、「インデックスカラー」に変換します。

３.パレットで透明にしたい色を選択し、右クリックメニューから「透明色に設定」を選択します。

４.指定した色がチェック模様になり、透明色に設定されたのが確認できます。

このまま PNG画像として保存します。

５.もし、透明色の設定を間違えてしまった場合は、現在透明色となっている色を選択し、右クリックメニューからチェックが付いている「透明色の有効」を選択すれば、透明色の設定が解除されます。

透明部分がない画像に透明色設定を加える

ウディタのマップ作成時に使用されるオートタイル画像で、オートタイル画像に透明色が指定されていないものを使用すると、マップでオートタイル画像を配置した部分が正常に表示されない問題が起こることがあります。

これはウディタの開発者のWOLF氏も認識している問題なのですが、下記の引用コメントにあるとおり、ウディタ側での解決の目処は立っていません。

これについてですが、Windowsの画像表示周りの基本機能をただそのまま使って描画しているので、何とも言えない状況です。
かヒントが掴めれば修正したいと思っているのですが、今の状況では申し訳ございませんが、チップ側を調整していただくのが手っ取り早いと思います。

WOLF RPGエディターフォーラム　バグ報告スレッド

この問題の解決方法は単純で、オートタイル画像に透明色を設定してやるだけです。

問題が出そうなオートタイル画像の見分け方も単純です。
下の山のオートタイル画像のように、山の外側に透明部分があるものには透明色が設定されていますので、この場合は問題が発生しません。

一方、こちらの濃い草原と明るい草原の境界のオートタイル画像には、透明部分がありません。
通常、画像が保存される際には画像中で使用されている色のみが保存されますので、透明部分がなければ透明色が保存されません。
こういった画像の場合には問題が起こる可能性があります。

ただし、この問題は256色PNG形式の画像において確認されている現象ですので、フルカラーPNG形式の画像では問題が発生しないものと思われます。
見分け方も難しいところがあるので、実際にテストプレイでマップを表示させて、問題が発生している場合に対処方法として今回紹介する方法を試してみてください。

さて、「濃い草原と明るい草原の境界のオートタイル画像」のように、透明色が設定されていない画像に対して、透明色を追加して保存していきます。

１.画像ファイルをPictBearにドラッグ＆ドロップなどして開きます。

「パレット」のタブで「サンプル」を選択し、画像で使用されている色を確認できるようにします。
右クリックメニューを表示させ「パレットの編集」を選択します。

２. 「パレットの編集」画面が表示されたら、「追加」ボタンを押すと、色が１つ追加されます。

今回は黒色が追加されました。
色を追加したら「OK」ボタンを押して戻ります。

３.「パレット」上で追加した色を選択して、右クリックメニューから「透明色に設定」を選択します。

追加した色が半透明になり、透明色に設定されたのが確認できます。

５.透明色の設定が出来ましたので、あとは画像を上書き保存すれば完了です。

画像の透明度を変える

主にメッセージウィンドウやメニュー画面のウィンドウなど、もう少し透明にしたいなぁ。ということがあると思います。
もちろんウディタ上で透明度を設定することもできるのですが、基本システムを使用している場合には変更箇所が多く、また変更する箇所を探すのも一苦労です。
こういう場合は画像で透明度を変更するのが賢明です。

１.ウディタに初めから同梱されているウィンドウベース画像(Data\SystemFile\WindowBase.png)をPictBearにドラッグ＆ドロップして開き、透明度を変更してみましょう。

２.まず、今回のウディタ同梱のウィンドウベース画像の場合には必要ないですが、ネット上で配布されている画像素材などを使用する場合には、透明度を設定するのに「フルカラー」に変換する必要があります。

「イメージ」＞「イメージタイプ」＞「フルカラー」を選択し、「フルカラー」に変換します。

３.続いて、右側にある「レイヤー」でスライドバーを操作し、「透明度」を変更していきます。

「透明度」は画像の表示に反映されていますので、画像を見ながら調整しましょう。
今回は「透明度」を50％にしてみます。

４.このまま保存で完成と行きたいところですが、PictBearではレイヤーで指定した透明度は保存する画像には反映されないので、もう一作業します。

「レイヤー」で「レイヤー作成」を選び、レイヤーを一つ追加します。

５.「レイヤー１」が追加されています。

今度は「レイヤー」で「表示部分の結合」を選び、現在の２つのレイヤーを一つに結合します。
※左隣にあるアイコン「イメージの結合」では透明度が破棄されますので、注意してください。間違えた場合にはCtrl+Zを押してやり直しましょう。

６.レイヤーがひとつになり、「レイヤー」上のサムネイル画像に「透明度」が反映されているのが確認できます。

７.これを「ファイル」＞「上書き保存」か「名前を付けて保存」でPNG画像にて保存して完成です。

透明度の変更でだいぶ画面の印象が変わりますねぇ。
応用として、ウィンドウ画像の内側だけ透明度を変更したい場合には、レイヤーを２つ使い、ウィンドウの枠部分と内側部分にわけて透明度を調整し、最後にレイヤーを結合してやればOKです。

画像の大きさを変える１

使用しようと思った画像が大きかったり、小さかったりしてゲーム中で使用した場合にうまく画面に収まらなかったり他の画像とのバランスが悪くなったりする場合は、画像のサイズを調整しましょう。

１.画像ファイルをPictBearにドラッグ＆ドロップなどして開きます。

２.「イメージ」＞「イメージのリサイズ」を選択します。

３.変更したい「画像サイズ」を入力し、特に意図しない場合は「縦横比を固定する」をチェックします。

「補間処理を行う」もチェックします。「補間処理を行う」についてはあとで説明します。
設定ができたら、「OK」ボタンを押します。

４.画像のサイズが変わったら、これを保存します。

５.さて、画像のサイズを変更する際にあった「補間処理を行う」ですが、これは画像を拡大縮小する際に画像が元の見え方に近くなるように滑らかにする処理です。

文章で説明するよりも実際の画像を見てもらうのが早いですね。
こちらは元画像です。

６.元画像を「補間処理を行う」にチェックして拡大しました。右下が元画像を合成したものです。

分かりやすくなるように、ドットがハッキリした画像を使いましたで見た目が良くありませんが、輪郭が滑らかに処理がされています。
「補間処理を行う」にチェックしてのサイズ変更は、写真画像や精細なイラスト画像を拡大縮小する場合に最適です。

７.元画像を「補間処理を行う」にチェックを外して拡大しました。右下が元画像を合成したものです。

なんの処理も行わず、そのままの見た目で拡大されています。
「補間処理を行う」にチェックを外してのサイズ変更は、ドット絵画像を拡大縮小する場合に最適です。

８.「補間処理を行う」をチェックしての処理はフルカラーの画像の場合にだけ行うことが出来ます。

もし「補間処理を行う」の変更ができない場合は、「イメージ」＞「イメージタイプ」＞「フルカラー」で「フルカラー」に変換します。

画像の大きさを変える２

「画像の大きさを変える１」では画像の見た目の大きさを含め、画像の大きさを変えましたが、今度は画像の見た目の大きさは変えずに画像がある範囲の大きさを変える方法になります。
ちょっとややこしいですが、例えば画像の上下左右に余白をつけたい場合や、既存のマップチップ画像の下に別のマップチップ画像を追加したい場合などに、画像の見た目は変化させずに画像にスペースを追加し、画像の範囲を大きくするという処理になります。

それでは、適当な画像の上下左右に余白がつくように画像の大きさ(範囲)を変えてみます。