Top > 最低限の画像講座
HTML convert time to 0.151 sec.


最低限の画像講座

Last-modified: 2018-06-18 (月) 05:41:45

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

 

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

 

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

 

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

 

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

 

【INDEX】


 

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

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

 

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

  • 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画像で保存してみましょう。

 
  1. 画像ファイルをPictBearにドラッグ&ドロップなどして開きます。
    gazou-001.jpg
     
  2. 「ファイル」>「名前を付けて保存」を選択します。
    gazou-002.jpg
     
  3. 保存する場所を選び、「ファイル名」を入力「ファイルの種類」をPNGファイルとして「保存」ボタンを押します。
    gazou-003.jpg
 

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

 
  1. 画像ファイルをPictBearにドラッグ&ドロップなどして開きます。
    gazou-004.jpg
     
  2. 「エクスポート」>「Jpegファイルの書き出し」を選択します。
    PNG画像を保存する時のように「ファイル」>「名前を付けて保存」を選択で保存しても構いませんが、画像の品質やファイルサイズを細かく調整したい場合は「エクスポート」>「Jpegファイルの書き出し」を選択します。
    gazou-005.jpg
     
  3. 「品質」を調整しながら、「保存後のイメージ」「ファイルサイズ」を確認し、「保存」ボタンを押します。
    gazou-006.jpg
     
  4. 保存する場所を選び、「ファイル名」を入力して「保存」ボタンを押します。
    gazou-007.jpg

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

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

 
  1. 画像ファイルをPictBearにドラッグ&ドロップなどして開きます。
    右下に「インデックスカラー」となっているのを確認します。「インデックスカラー」でない場合は今回の透明色の設定はできません。
    真ん中の「パレット」で「サンプル」を選択します。
    gazou-008.jpg
     
  2. もし画像が「インデックスカラー」でない場合は「イメージ」>「イメージタイプ」>「インデックスカラー」を選択し、「インデックスカラー」に変換します。
    gazou-009.jpg
     
  3. パレットで透明にしたい色を選択し、右クリックメニューから「透明色に設定」を選択します。
    gazou-010.jpg
     
  4. 指定した色がチェック模様になり、透明色に設定されたのが確認できます。
    このままPNG画像として保存します。
    gazou-011.jpg
     
  5. もし、透明色の設定を間違えてしまった場合は、現在透明色となっている色を選択し、右クリックメニューからチェックが付いている「透明色の有効」を選択すれば、透明色の設定が解除されます。
    gazou-012.jpg

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

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

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

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

WOLF RPGエディターフォーラム バグ報告スレッド
http://www.silversecond.com/WolfRPGEditor/BBS_patio.cgi?mode=view2&f=91&no=256

 

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

 

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

gazou-162.png
 

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

gazou-161.png
 

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

 

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

 
  1. 画像ファイルをPictBearにドラッグ&ドロップなどして開きます。
    「パレット」のタブで「サンプル」を選択し、画像で使用されている色を確認できるようにします。
    右クリックメニューを表示させ「パレットの編集」を選択します。
    gazou-163.jpg
     
  2. 「パレットの編集」画面が表示されたら、「追加」ボタンを押すと、色が1つ追加されます。
    今回は黒色が追加されました。
    色を追加したら「OK」ボタンを押して戻ります。
    gazou-164.jpg
     
  3. 「パレット」上で追加した色を選択して、右クリックメニューから「透明色に設定」を選択します。
    gazou-165.jpg
     
    追加した色が半透明になり、透明色に設定されたのが確認できます。
    gazou-166.jpg
     
  4. 透明色の設定が出来ましたので、あとは画像を上書き保存すれば完了です。
    gazou-167.jpg

画像の透明度を変える

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

 
  1. ウディタに初めから同梱されているウィンドウベース画像(Data\SystemGraphic\WindowBase.png)をPictBearにドラッグ&ドロップして開き、透明度を変更してみましょう。
    gazou-150.png
     
    gazou-151.jpg
     
  2. まず、今回のウディタ同梱のウィンドウベース画像の場合には必要ないですが、ネット上で配布されている画像素材などを使用する場合には、透明度を設定するのに「フルカラー」に変換する必要があります。
    「イメージ」>「イメージタイプ」>「フルカラー」を選択し、「フルカラー」に変換します。
    gazou-014.jpg
     
  3. 続いて、右側にある「レイヤー」でスライドバーを操作し、「透明度」を変更していきます。
    「透明度」は画像の表示に反映されていますので、画像を見ながら調整しましょう。
    今回は「透明度」を50%にしてみます。
    gazou-152.jpg
     
  4. このまま保存で完成と行きたいところですが、PictBearではレイヤーで指定した透明度は保存する画像には反映されないので、もう一作業します。
    「レイヤー」で「レイヤー作成」を選び、レイヤーを一つ追加します。
    gazou-153.jpg
     
  5. 「レイヤー1」が追加されています。
    今度は「レイヤー」で「表示部分の結合」を選び、現在の2つのレイヤーを一つに結合します。
    ※左隣にあるアイコン「イメージの結合」では透明度が破棄されますので、注意してください。間違えた場合にはCtrl+Zを押してやり直しましょう。
    gazou-154.jpg
     
  6. レイヤーがひとつになり、「レイヤー」上のサムネイル画像に「透明度」が反映されているのが確認できます。
    gazou-155.jpg
     
  7. これを「ファイル」>「上書き保存」か「名前を付けて保存」でPNG画像にて保存して完成です。
    gazou-160.jpg
     
    元画像透明度を変更した画像
    gazou-150.pnggazou-159.png
     
    元々のウィンドウ画像でのゲーム画面
    gazou-156.jpg
     
    透明度を変更したウィンドウ画像でのゲーム画面
    gazou-157.jpg
     
    透明度の変更でだいぶ画面の印象が変わりますねぇ。
    応用として、ウィンドウ画像の内側だけ透明度を変更したい場合には、レイヤーを2つ使い、ウィンドウの枠部分と内側部分にわけて透明度を調整し、最後にレイヤーを結合してやればOKです。

画像の大きさを変える1

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

 
  1. 画像ファイルをPictBearにドラッグ&ドロップなどして開きます。
    gazou-017.jpg
     
  2. 「イメージ」>「イメージのリサイズ」を選択します。
    gazou-018.jpg
     
  3. 変更したい「画像サイズ」を入力し、特に意図しない場合は「縦横比を固定する」をチェックします。
    「補間処理を行う」もチェックします。「補間処理を行う」についてはあとで説明します。
    設定ができたら、「OK」ボタンを押します。
    gazou-019.jpg
     
  4. 画像のサイズが変わったら、これを保存します。
    gazou-020.jpg
     
  5. さて、画像のサイズを変更する際にあった「補間処理を行う」ですが、これは画像を拡大縮小する際に画像が元の見え方に近くなるように滑らかにする処理です。
    文章で説明するよりも実際の画像を見てもらうのが早いですね。
    こちらは元画像です。
    gazou-013.jpg
     
  6. 元画像を「補間処理を行う」にチェックして拡大しました。右下が元画像を合成したものです。
    分かりやすくなるように、ドットがハッキリした画像を使いましたで見た目が良くありませんが、輪郭が滑らかに処理がされています。
    「補間処理を行う」にチェックしてのサイズ変更は、写真画像や精細なイラスト画像を拡大縮小する場合に最適です。
    gazou-015.jpg
     
  7. 元画像を「補間処理を行う」にチェックを外して拡大しました。右下が元画像を合成したものです。
    なんの処理も行わず、そのままの見た目で拡大されています。
    「補間処理を行う」にチェックを外してのサイズ変更は、ドット絵画像を拡大縮小する場合に最適です。
    gazou-016.jpg
     
  8. 「補間処理を行う」をチェックしての処理はフルカラーの画像の場合にだけ行うことが出来ます。
    もし「補間処理を行う」の変更ができない場合は、「イメージ」>「イメージタイプ」>「フルカラー」で「フルカラー」に変換します。
    gazou-014.jpg

画像の大きさを変える2

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

 

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

 
  1. 画像ファイルをPictBearにドラッグ&ドロップなどして開きます。
    gazou-021.jpg
     
  2. 「イメージ」>「キャンバスのリサイズ」を選択します。
    gazou-022.jpg
     
  3. 「変更するサイズ」を入力し、上下左右均等に余白をつけたいので「縦横比を固定する」をチェックし、「アンカー」(元の画像の基準をどこにするか)は上下左右に余白をつけるため、中央を選択します。
    設定ができたら「OK」ボタンを押します。
    gazou-023.jpg
     
  4. うまく上下左右に余白ができ、画像の見た目はそのままで24×24から32×32の大きさの画像になりました。
    gazou-024.jpg

画像の一部を切り抜く

使用しようと思った画像が大きかった場合に、画像の一部分を切り取って希望のサイズに調整しましょう。
「画像の大きさを変える2」でも同様のことが出来ますが、より直感的なやり方の説明になります。

 

640×480サイズの画像から一部を切り抜き320×240サイズの画像にしてみます。

 
  1. 画像ファイルをPictBearにドラッグ&ドロップなどして開きます。
    gazou-025.jpg
     
  2. 「選択範囲」>「座標を入力して選択」を選択します。
    gazou-026.jpg
    「座標を入力して選択」は「選択範囲」を選択した際にメニューの一番下にマウスカーソルを移動させると表示されます。
    gazou-027.jpg
     
  3. 「選択範囲」の座標を入力します。
    下の「選択範囲のサイズ」が320×240になるように調整していきましょう。
    「OK」ボタンを押します。
    gazou-028.jpg
     
  4. 選択範囲を移動させるため、左のツールバーで「選択範囲」のアイコンを選択します。
    gazou-029.jpg
     
  5. 選択範囲をドラッグして、切り抜きたい位置まで移動させます。
    gazou-030.jpg
     
  6. 「イメージ」>「トリミング」を選択します。
    gazou-031.jpg
     
  7. 320×240サイズに切り抜かれた画像が出来ました。
    gazou-032.jpg
     
  8. 今回はサイズを指定して切り抜きましたが、それほど正確さが必要のない場合は、2~3の手順は飛ばして、そのまま選択範囲を指定して「イメージ」>「トリミング」をすればOKです。

画像の色調などを変える

ウディタ上の機能でも多少できますが、画像の明るさやコントラスト・色味を調整したいことがあると思います。
たとえば、マップやキャラをモノクロやセピア調にしたいとか、遠景で使用している空の青色をもう少し濃くしたいなど、そういったことも画像編集ソフトで調整することができますので、やってみましょう。

 

今回はPictBearではなく、画像の色調調整時にプレビューを見ながら操作できる「JTrim」というソフトを使ってみます。こちらも無料の画像編集ソフトです。

 

まずはキャラチップ画像をセピア調にしてみましょう。

 
  1. 画像ファイルをJTrimにドラッグ&ドロップなどして開き、「カラー」>「セピア色変換」を選択します。
    gazou-033.jpg
     
  2. 画像がセピア調になりました。
    gazou-034.jpg
     
  3. 画像の保存は「ファイル」>「名前を付けて保存」で行ないます。
    gazou-035.jpg
 

今度は他にあるいくつかの色調調整の機能を試してみましょう。

 
  1. 分かりやすく空の画像を読み込んでみました。
    gazou-036.jpg
     
  2. 「カラー」メニューの赤枠で囲んだ機能がすべて色調変更を行う機能になります。
    gazou-037.jpg
     
  3. それでは、いくつかの機能を試してみましょう。
    ・グレースケール変換
    gazou-038.jpg
    ・セピア色変換
    gazou-039.jpg
    ・ネガポジ反転
    gazou-040.jpg
    ・単色カラースケール(紫色で適用してみました。)
    gazou-041.jpg
    ・明るさ/コントラスト
    gazou-042.jpg
    ・HSVカラー調整
    gazou-043.jpg
    ・グラデーション
    gazou-044.jpg
     
  4. うまく希望の調整ができたら、画像を保存します。
    「ファイル」>「名前を付けて保存」を選択します。
    gazou-045.jpg
     
  5. 「保存場所」、「ファイル名」、「ファイルの種類」を設定して、「保存」ボタンを押せば保存されますが、JPEG画像の品質やファイルサイズの調整をしたい場合は「保存」ボタンを押す前に「設定」ボタンを押します。
    gazou-046.jpg
     
  6. 「保存の品質」で品質もしくはファイルサイズを指定して、「OK」ボタンを押し、ファイル保存の画面に戻ったら、「保存」ボタンを押します。
    gazou-047.jpg
 

JTrimはαチャンネル(透明度)付きのPNG画像には対応していませんので、αチャンネル付きのPNG画像を扱う場合はPictBearを使います。

 
  1. PictBearで色調の変更をする場合は、まず画像をフルカラーに変換します。
    「イメージ」>「イメージタイプ」>「フルカラー」を選択します。
    gazou-050.jpg
     
  2. PictBearで色調変更に使える機能は「イメージ」メニューと「フィルタ」>「3:カラー」メニューの赤枠で囲ったものになります。
    gazou-048.jpg gazou-049.jpg

画像に文字を入れる

ゲーム中の画像ではあまり使用することはないかもしれませんが、blogやホームページ・説明書などでゲーム画面のスクリーンショット画像に説明文章を書き込んだりしたい場合があります。

 

ゲームのスクリーンショット画像に画面の説明と著作権表記を入れてみましょう。

 
  1. 画像ファイルをPictBearにドラッグ&ドロップなどして開きます。
    gazou-051.jpg
     
  2. 「パレット」から文字の色を選択します。
    今回は白色にしてみます。
    gazou-061.jpg
     
  3. 左にあるツールバーから「文字列」のアイコンを選択します。
    gazou-052.jpg
     
  4. マウスカーソルを文字を入力したい場所に移動させ、左クリックします。
    gazou-053.jpg
     
  5. 「文字列」を入力し、「フォント名(フォントの種類)」や「サイズ」などの「書式設定」をし、「出力方法」はあとで文字の位置調整がしやすいように「新規レイヤー」を選択します。
    プレビューで表示状態を確認したら、「OK」ボタンを押します。
    gazou-054.jpg
     
  6. 画像の上に入力した文字が表示されました。
    また「レイヤー」に「文字列レイヤー」という新しいレイヤーが追加されました。
    gazou-055.jpg gazou-056.jpg
     
  7. 文字の位置を調整するために、「文字列レイヤー」を選択した状態で、ツールバーの「移動」アイコンを選択します。
    gazou-057.jpg
     
  8. ドラッグすることで位置を移動することができます。
    gazou-058.jpg
     
  9. 同じ手順で、著作権表記がわりにサイトのURLを右下に配置してみました。
    左上の文字がちょっと見えづらそうなので、おまけで文字の下に黒色の帯も配置してみました。ツールバーの「塗りつぶし長方形」アイコンで描けます。
    gazou-059.jpg
     
  10. レイヤーが複数ある状態だと、JPEG画像やPNG画像での保存ができないので、「レイヤー」にある「イメージの結合」ボタンを押して、複数のレイヤーを1つにまとめてから、保存します。
    gazou-060.jpg
     
  11. もし、あとで文字を変更したり、この画像をベースに他の画像でも同じような文字入れをしたい場合には、PictBearの独自形式の画像ファイルとして保存することで、レイヤーの状態を維持したまま保存することが出来ます。
    画像を保存する際に「ファイルの種類」で「PictBear Standardファイル」を選択して、保存します。
    また「ファイルの種類」で「PSDファイル(Adobe Photoshopファイル)」で保存してもレイヤーが維持されます。
    gazou-062.jpg

画像の一部にモザイク処理を行う

ゲーム中の画像ではあまり使うことがないと思いますが、ホームページやblogなどでゲーム画面の画像を公開する際に一部見せたくない(ネタバレしたくない)部分を隠す際に、その部分にモザイク処理を行う場合があるかもしれません。

 
  1. 画像ファイルをPictBearにドラッグ&ドロップなどして開きます。
    gazou-063.jpg
     
  2. ツールバーの「選択範囲」アイコンを選択します。
    gazou-064.jpg
     
  3. モザイク処理したい部分を選択します。
    gazou-065.jpg
     
  4. 「フィルタ」>「特殊効果」>「モザイク」を選択し、モザイク処理を実行します。
    gazou-066.jpg
     
  5. 選択範囲部分にモザイク処理が施されました。
    gazou-067.jpg
     
  6. 「モザイク」はフルカラー画像でないと使用できないので、フルカラー画像でない場合は「イメージ」>「イメージタイプ」>「フルカラー」でフルカラー画像に変換します。
    gazou-050.jpg
 

また、こちらの「MoZA(もざ)」という無料ソフトでもモザイク処理を行うことが出来ます。
ペンで塗るようにモザイク処理ができるのが特徴です。

 
  1. 画像ファイルをMoZAにドラッグ&ドロップなどして開きます。
    gazou-068.jpg
     
  2. 「モザイク」メニューでモザイクの各種設定を行うことが出来ます。
    gazou-069.jpg
     
  3. マウスカーソルでモザイク処理をしたい部分をなぞると、モザイク処理が施されていきます。
    gazou-070.jpg gazou-071.jpg
     
  4. 画像を保存する場合は「ファイル」>「指定形式で保存」を選択します。
    gazou-072.jpg
     
  5. 「保存場所」、「ファイル名」、「ファイルの種類」を設定して、「保存」ボタンを押せば保存されますが、JPEG画像の品質を調整したい場合は「保存」ボタンを押す前に「オプション」ボタンを押します。
    gazou-073.jpg
     
  6. 「品質」を指定したら、「OK」ボタンを押し、ファイル保存の画面に戻ったら、「保存」ボタンを押します。
    gazou-074.jpg

パーツ画像の並び替えをする

マップチップ画像やキャラチップ画像の並び替えをしたい場合や、マップチップ画像に別のマップチップ画像の一部を追加したい・キャラチップ画像に別のキャラチップ画像の一部を追加したい場合があります。

 

ネット上で配布されているツクール規格のマップチップ画像・キャラチップ画像をウディタ用に加工したい場合はウディタの公式サイトで公開されている「tkool2WOLF」を使いましょう。

 

それ以外の場合は、今回はフルカラーにも対応したドット絵エディタ「GraphicsGale FreeEdition」を使用します。
PictBearでも出来無くはないのですが、やりにくさを感じる部分があります。
またEDGEではフルカラー画像を扱うことはできません。EDGE2では可能ですが、基本的にシェアウェアのため(フリーでも使えますが、試用のためという要素です。)取り扱いません。

 

いくつかの例を上げて、作業を説明していきます。

キャラチップ画像の規格を揃える。

まずはキャラチップ画像について、8方向分用意されたキャラチップ画像と4方向分のみ用意されたキャラチップ画像はウディタ上で混在させることはできません。キャラチップ画像の規格をどちらかに合わせる必要があります。

8方向タイプ4方向タイプ
Wolfarl.pngpipo-charachip009b.png

ちなみにキャラチップ画像の方向タイプの設定は「ゲーム基本設定 キャラクター画像方向のタイプ」で行ないます。
また、4方向タイプのキャラチップのみの場合でも8方向移動自体をさせることは可能です。ウディタが自動的に8方向に対応するよう画像表示を行ってくれます。

 

今回は8方向タイプの規格に合わせて、4方向タイプのキャラチップ画像を水増ししていきます。
逆に4方向タイプに合わせる場合は、8方向タイプのキャラチップ画像の左半分だけを切り取って保存するだけです。

 
  1. 画像ファイルをGraphicsGale FreeEditionにドラッグ&ドロップなどして開きます。
    gazou-112.jpg
     
  2. 作業がしやすいようにグリッドを表示します。
    グリッドには2種類あり、1ドットごとの「グリッド」と数種類用意された「カスタムグリッド」です。
    「カスタムグリッド」は自分で設定することもできます。
    キャラチップに合わせて、「32×32」のカスタムグリッドを選択します。
    gazou-113.jpg
     
  3. 作業がすべてグリッドに吸着して行われるよう、「表示」>「スナップ」を選択します。
    ツールバーにあるアイコンからも設定可能です。
    gazou-114.jpg gazou-126.jpg
     
  4. 8方向タイプ分の画像サイズにするため、「全フレーム」>「キャンバス拡大」で画像サイズを広げます。
    gazou-115.jpg
     
  5. 横幅が96でしたので、2倍の192を入力し、「OK」ボタンを押します。
    gazou-116.jpg
     
  6. 右側にスペースができましたので、ここに8方向タイプの規格に合うようにパターンを配置していきます。
    追加したスペースは8方向タイプの規格だと、上から左下・右下・左上・右上の順にパターンが配置されますので、左下・右下には下向きのパターンを、左上・右上には上向きのパターンをコピーしていきます。
    gazou-117.jpg
     
  7. ツールバーから「矩形選択」を選択します。
    gazou-118.jpg
     
  8. 下向きのパターンを選択し、「Ctrl+C」でコピー、続けて「Ctrl+V」でペーストします。
    選択範囲を間違えた場合は右クリックすると選択範囲が解除されます。
    gazou-119.jpg
     
  9. ペーストした部分をそのままドラッグして右側に移動させます。
    gazou-120.jpg
     
  10. また同じようにコピー&ペーストして、ドラッグ移動してパターンを配置していきます。
    gazou-121.jpg
     
  11. 右クリックで選択範囲を解除して、今度は上向きのパターンを選択します。
    gazou-122.jpg
     
  12. 先ほどと同じようにコピー&ペーストして、ドラッグ移動してパターンを配置していきます。
    8方向タイプの規格に整いました。
    gazou-123.jpg
     
  13. この画像を保存します。
    「ファイル」>「名前を付けて保存」を選択します。
    gazou-124.jpg
     
  14. 「保存場所」、「ファイル名」、「ファイルの種類」を確認し、「保存」ボタンを押します。
    gazou-125.jpg
    保存した画像がこちらになります。
    pipo-charachip009b_8.png

キャラチップ画像の配置を変更する。

ネット上で見つけたキャラチップ画像素材がウディタ用の規格でも、ツクール用の規格でもなかった場合には、使用したい規格に合うようにパターンを配置しなおす必要があります。

 
入手した元素材4方向タイプの規格にしたい
pipo-charachip019_test.pngpipo-charachip019.png
 
  1. 画像ファイルをGraphicsGale FreeEditionにドラッグ&ドロップなどして開きます。
    gazou-127.jpg
     
  2. 作業がしやすいようにグリッドを表示します。
    グリッドには2種類あり、1ドットごとの「グリッド」と数種類用意された「カスタムグリッド」です。
    「カスタムグリッド」は自分で設定することもできます。
    キャラチップに合わせて、「32×32」のカスタムグリッドを選択します。
    gazou-128.jpg
     
  3. 作業がすべてグリッドに吸着して行われるよう、「表示」>「スナップ」を選択します。
    ツールバーにあるアイコンからも設定可能です。
    gazou-114.jpg gazou-126.jpg
     
  4. 4方向タイプ分の画像サイズにするため、「全フレーム」>「キャンバス拡大」で画像サイズを広げます。
    gazou-115.jpg
     
  5. 今回は横幅はそのままで、高さだけ32×32のキャラチップが4つ並ぶ128を入力し、「OK」ボタンを押します。
    gazou-129.jpg
     
  6. このように下にスペースが広がりましたので、これから左側に4方向タイプの規格に合うよう、パターンを移動させていきます。
    gazou-130.jpg
     
  7. ツールバーから「矩形選択」を選択します。
    gazou-118.jpg
     
  8. まずは上向きのパターンを選択します。
    選択範囲を間違えた場合は右クリックで選択解除して、再度選択しましょう。
    gazou-131.jpg
     
  9. 選択範囲をそのままドラッグしてパターンを移動させます。
    gazou-132.jpg
     
  10. 他も同じように移動させて、4方向タイプの規格に整いました。
    gazou-133.jpg
     
  11. こんどはスペース部分を削除するため、4方向タイプの規格分の範囲を選択した状態で、「全フレーム」>「トリミング」を選択します。
    gazou-134.jpg
     
  12. 選択した4方向タイプの規格分の範囲だけの画像になりました。
    「ファイル」>「名前を付けて保存」を選択して、画像を保存します。
    gazou-135.jpg

マップチップ画像に別のマップチップ画像の一部を追加する。

ネット上でマップチップ画像をいくつか見つけて、元々使用しているマップチップ画像に、別のマップチップ画像の一部分だけ追加して使用したいという場合があると思います。
ウディタでは1つのマップに1つのマップチップ画像のみ使用することができますので、元々使用しているマップチップ画像に、追加したいマップチップ画像の一部を1つのマップチップ画像にまとめる必要があります。

 

※単純にマップチップ画像を繋げるだけなら、「tkool2WOLF+」に付属しているマップチップ画像を結合する機能のみの「MapMapper.exe」を使用するのが簡単です。

 
元々使用しているマップチップ画像一部分だけ追加したいマップチップ画像
『街・ダンジョン部分を追加したい』
mapchip320x240_test.pngmapchip320x240world_test.png
 
  1. 「元々使用しているマップチップ画像ファイル」と「一部分だけ追加したいマップチップ画像ファイル」をGraphicsGale FreeEditionにドラッグ&ドロップなどして開きます。
    gazou-136.jpg
     
  2. 作業がしやすいようにグリッドを表示します。
    グリッドには2種類あり、1ドットごとの「グリッド」と数種類用意された「カスタムグリッド」です。
    「カスタムグリッド」は自分で設定することもできます。
    マップチップに合わせて、「16×16」のカスタムグリッドを選択します。
    「カスタムグリッド」の設定は画像ファイルごとに独立しているので、両方の画像に設定をします。
    gazou-137.jpg
     
  3. 作業がすべてグリッドに吸着して行われるよう、「表示」>「スナップ」を選択します。
    ツールバーにあるアイコンからも設定可能です。
    「スナップ」の設定は画像ファイルごとに独立しているので、両方の画像に設定をします。
    gazou-114.jpg gazou-126.jpg
     
  4. 追加したいマップチップ分、画像サイズを広げるため、追加先となる「元々使用しているマップチップ画像」を選択した状態で、「全フレーム」>「キャンバス拡大」で画像サイズを広げます。
    gazou-115.jpg
     
  5. 追加したいマップチップはこの部分になるので、高さ3チップ分広げる必要があります。
    gazou-138.jpg
     
  6. 今回は横幅はそのままで、高さだけ16×16のマップチップ3つ分の縦幅48を元の縦幅80に追加して、128を入力し、「OK」ボタンを押します。
    gazou-139.jpg
     
  7. 「元々使用しているマップチップ画像」に追加するスペースが確保できました。
    今度はマップチップを追加する準備として、両方の画像で透過色(背景色)としている色を同じ色にしておきます。
    「パレット」で透過色(背景色)を選択して、両方の画像で使われていないような色に変更します。両方の画像でまったく同じ色になるようにしましょう。
    ※筆者の環境ではパレットの表示が一部崩れていますので、ご注意ください。
    gazou-140.jpg
    gazou-141.jpg
     
  8. もし、透過色の設定がされていない場合はツールバー「フレームのプロパティ」の「透過」部分で設定することができます。
    これは追加先部分(実際にウディタで使用するマップチップ画像)だけに設定すればOKです。
    gazou-148.jpg gazou-149.jpg
     
  9. さらにもう一つ準備として、「元々使用しているマップチップ画像」がインデックスカラー(256色)の場合には一旦フルカラーに変換する必要があります。
    そうしないと、この画像に追加したマップチップ画像に含まれている色が、正確に再現されない状態になってしまいます。
    「元々使用しているマップチップ画像」を選択した状態で、「全フレーム」>「色数」を選択します。
    gazou-142.jpg
     
  10. 「24dpp(フルカラー)」を選択し、「OK」ボタンを押します。
    gazou-143.jpg
     
  11. それでは、いよいよマップチップを追加していきます。
    ツールバーから「矩形選択」を選択します。
    gazou-118.jpg
     
  12. 「一部分だけ追加したいマップチップ画像」の追加したい部分を選択し、「Ctrl+C」でコピーします。
    gazou-144.jpg
     
  13. 「元々使用しているマップチップ画像」に移り、「Ctrl+V」でペーストすると、「一部分だけ追加したいマップチップ画像」の追加したかったマップチップ部分がコピーされました。
    gazou-145.jpg
     
  14. そのままドラッグして確保した追加スペースに移動させます。
    これで完成です。
    「ファイル」>「名前を付けて保存」を選択して、画像を保存します。
    gazou-146.jpg
     
  15. 10で色数をインデックスカラーからフルカラーに変更した場合、フルカラーのまま保存してもウディタでの使用上問題はありませんが、ファイルサイズを小さくしたいなどありましたら、「全フレーム」>「色数」で「8bpp(256色)」にしてから保存しましょう。
    gazou-147.jpg
    保存した画像がこちらになります。
    mapchip320x240_test2.png

ボタン画像を作る

このサイトの主旨とは少しズレてしまいますが、ウディタで独自のゲームシステムを開発する際にオリジナルのメニュー画面でグラフィカルなコマンドメニューを表示したい場合があるかもしれません。
それ以外でもタイトル画面の「はじめから」「つづきから」という表示をウディタの選択肢メニューによる表示ではなく、画像を使って選択できるようにしたい場合など、メニュー表示を演出してくれる画像素材をボタン作成ソフトで制作することができます。

 

無料のボタン作成ソフト「ButtonMaker」を使用します。

 
  1. ButtonMakerを起動すると、デフォルトの設定が読み込まれています。
    いくらか作業をし、ソフトを終了して再起動すると、前回の設定がそのまま残っているようになっています。
    gazou-093.jpg
     
  2. まずは、画像のサイズを設定していきます。
    横160~320、縦56~160の範囲内で指定できます。
    gazou-094.jpg
     
  3. 次にボタンに表示する文字の設定をしていきます。
    「文章」「フォントの種類」「文字サイズ」などを設定していきます。
    gazou-095.jpg
     
  4. 色の設定をしていきます。
    「物体色」はボタンのベースの色になります。「文字色」は文字の色。「反射光」「アクア」はボタンが立体時の陰影の色になります。
    gazou-096.jpg
     
  5. パーツの設定をしていきます。
    「ボタンの形状」や「文字部分の加工」を設定出来ます。
    gazou-097.jpg
     
  6. 他の部分も色々と設定を行い、ボタンが完成しました。
    gazou-098.jpg
     
  7. 保存は「pngファイルを保存します」ボタンを押します。
    gazou-099.jpg
     
  8. 「保存場所」、「ファイル名」を設定して、「保存」ボタンを押すとαチャンネル付きのPNG画像として保存されます。
    gazou-100.jpg
     
  9. このボタンの設定を保存しておく場合は「設定を保存します」ボタンを押します。
    gazou-101.jpg
     
  10. また、右側にあるbookにも設定を保存しておくことが出来、これを自由に適用することが出来ます。
    いくつか候補を作って、切り替えながら比較するのにも便利です。
    gazou-102.jpg
     
    他にも「ボタン工房」というボタン画像作成ソフトもあります。どちらも機能的にはほぼ同様のものですので、両方使い比べてみて好みのものを使ってみましょう。

タイトルロゴ画像を作る

自分が作るゲームのタイトル画面に表示するタイトルロゴはなるべくカッコよく作りたいものです。
ウディタのピクチャ機能で文字列をタイトルロゴとして表示することも出来ますが、それでは味気ない場合もあります。ぜひゲームに合ったオリジナルのタイトルロゴを作ってみましょう。

 

無料のロゴ作成ソフト「LogoShader」というソフトを使用してタイトルロゴを作成していきます。

 
  1. LogoShaderを起動します。何もない状態です。
    gazou-077.jpg
     
  2. 「パーツの新規作成」ボタンを押します。
    gazou-078.jpg
     
  3. 「テキスト」で表示する文字を、「サイズ」で文字のサイズを、「書体」で使用するフォントを設定していきます。
    「文字間隔の補正」は文字同士の間隔の設定になります。
    すべての設定ができたら、「OK」ボタンを押します。
    gazou-079.jpg
     
  4. 設定した文字が表示されました。
    これを1つのパーツとして扱い、また「パーツの新規作成」ボタンを押すことでパーツをどんどん増やし、ロゴを構成していくことになります。
    gazou-080.jpg
     
  5. あとは色々と試行錯誤しながら、装飾していきます。
    基本的に、以下の4つのボタンを使って装飾の設定をしていきます。
    左から「シーンリモコン」「質感リモコン」「モデリングリモコン」「カラーリングリモコン」となっています。
    gazou-085.jpg
    ・「シーンリモコン」では、パーツごとの設定ではなく、パーツ全体に影響を及ぼす設定を行うことが出来ます。
    gazou-086.jpg
    ・「質感リモコン」では、パーツ個々の質感を設定することが出来ます。
    gazou-087.jpg
    ・「モデリングリモコン」では、パーツ個々に様々な処理を施してユニークな形状を作成していくことが出来ます。
    gazou-088.jpg
    ・「カラーリングリモコン」では、パーツ個々の色や模様を設定することが出来ます。
    gazou-089.jpg
     
  6. 色々と試行錯誤して3つのパーツを作ってみました。
    gazou-081.jpg
     
  7. 3つのパーツを組み合わせて、ロゴが完成しました。
    gazou-082.jpg
     
  8. 完成したロゴに合わせて、画像の大きさを変更します。
    「編集」>「台紙サイズの変更」を選択します。
    gazou-092.jpg
     
  9. 赤色の矩形を操作して画像の大きさを決めていきます。
    大きさが決まったら、「OK」ボタンを押します。
    gazou-090.jpg
     
  10. これで改めて完成です。
    gazou-091.jpg
     
  11. 画像を保存するには「ファイル」>「画像を保存」で行ないますが、今回は背景を透明にして保存したいので、「ファイル」>「画像を保存(台紙を透過)」を選択して、保存します。
    ちなみに現在のLogoShaderの作業ファイルを保存する場合は「ファイル」>「名前を付けて保存」で行ないます。
    gazou-083.jpg
     
  12. 「保存場所」、「ファイル名」、「ファイルの種類」を設定して、「保存」ボタンを押せば保存されます。
    gazou-084.jpg
 

LogoShaderでのロゴ作成は機能に慣れないと説明できない部分が多いため、だいぶ省略してしまいました。
詳しくはLogoShaderのマニュアルやLogoShaderのサイトに充実したチュートリアル(参考書)がありますので、そちらを参考にしてカッコイイロゴを作ってみてください。

 

また、他にもLogoShaderで作られたロゴ画像がLogoShaderのサイトにあるギャラリーで公開されているので、参考になると思います。

 

ロゴ作成ソフトには「LOGO!」というたいへん多機能なソフトもあるのですが、背景を透過する設定がないため、汎用性を考えてこちらは取り上げませんでした。背景画像が決まっている場合はその画像を読み込んで、その上でロゴを作成していくことでひとまず解消されますので、興味がある方はこちらも使ってみてください。

複数の画像を合成する

複数の画像をまとめて一つの画像にする方法です。ウディタ上なら別々に表示して重ねあわせて表示出来ますが、あるパーツ画像は透明な状態からじんわりと表示されていくような演出をしない場合は、一つの画像にまとめて1回で表示したほうが効率的です。
あとはホームページやblogなどに開発中のゲーム画面を作るために、画像素材を合成したい場合もあるかもしれません。

 

試しに背景・ロゴ・スタートボタンの3つの画像を合成して、タイトル画面を作ってみましょう。

 
  1. 画像ファイルをPictBearにドラッグ&ドロップなどして開きます。
    gazou-103.jpg
     
  2. 「レイヤー」上で右クリックメニューから「レイヤーの読み込み」を選択します。
    gazou-104.jpg
     
  3. ロゴ画像を選択し、「開く」ボタンを押します。
    gazou-105.jpg
     
  4. 同じようにスタートボタン画像も読み込み、3つの素材が一つの画像上に集まりました。
    gazou-106.jpg
     
  5. ツールバーの「移動」アイコンを選択し、各素材が配置されているレイヤーの位置を調整します。
    レイヤーを選択してから、移動させるのを忘れずに。
    gazou-107.jpg
     
  6. 「レイヤー」上で各レイヤーの表示状態を調整していきます。
    スタートボタンが配置されているレイヤーはボリュームバーを動かして、「透明度70%」にして、背景に少しなじませます。
    gazou-108.jpg
     
  7. ロゴが配置されているレイヤーは「加算」で表示させます。
    gazou-109.jpg
     
  8. 調整ができたら、「イメージの結合」でレイヤーを一つにまとめます。
    gazou-110.jpg
     
  9. タイトル画面が完成しました。
    gazou-111.jpg

PictBearのよくあるトラブル

PictBearを使っていて筆者もよく引っかかるのですが(もしかしたら筆者だけかもしれませんが…)、直前に「選択範囲」ツールを使用していて、他の操作をしても画像に何も変化がおきない場合があります。
これは直前に使用していた「選択範囲」ツールで気づかないうちにとても小さい選択範囲が作成されている影響です。

gazou-075.jpg

選択範囲を解除するだけで解消される問題ですので、「選択範囲」>「選択範囲の解除」かショートカットキーの「CtrL+D」で選択範囲を解除しましょう。

gazou-076.jpg
 

※TOPページでの説明どおり、コメント受付を停止させていただきました。


  • PictBearはどこでダウンロードできるんですか? -- ソード? 2011-03-06 (日) 22:14:25
  • すいません。問題解決したんですが、パレットで色を選択して透過色に設定したあと -- ソード? 2011-03-06 (日) 22:30:12
  • 色の数値を見るにはどうしたらいいですか? -- ソード? 2011-03-06 (日) 22:31:41
  • ソードさん こちらの2番目の画像にあるようにパレットにあるカラーにマウスカーソルを合わせると、表示されます。
    最初のPictBearのダウンロードの件でも感じられますが、質問する際はご自分でよく調べることを怠らないでください。
    あと申し訳ないのですが、ウディタではない外部ツールに関しては、記事中で説明している内容以外でのご質問はご遠慮ください。際限が無くなってしまいますので、どうぞご理解ください。 -- 管理人 2011-03-07 (月) 02:08:08
  • ありがとうございます。解決しました! -- ソード? 2011-03-07 (月) 16:32:46
  • 上にある、画像の一部を追加するもので、お聞きしたいことがあるんですが -- リン? 2011-05-06 (金) 00:25:08
  • ↑間違えましたすみません。 -- リン? 2011-05-06 (金) 00:25:44
  • マップ画像の一部を追加するやつで、一マスだけコピーしようとすると、画像がちゃんと映らないのですが、どうしたら良いでしょうか? -- リン? 2011-05-06 (金) 00:28:26
  • リンさん こちらで一マスだけの場合で確認してみましたが、問題はないようです。一マス以外の場合には問題はないんですね?
    「画像がちゃんと映らない」という状況がよくわかりませんが、色がおかしくなるようでしたら、「マップチップ画像に別のマップチップ画像の一部を追加する。」の手順9~10の色数の設定を行っているか確認して下さい。一応、コピー元・コピー先でフルカラーにしてみるといいかもしれません。
    いちおう、「映らない」は「移らない」ということではないですよね? -- 管理人 2011-05-06 (金) 08:23:28
  • すいません。言い忘れましたが、自作のマップチップ画像を一マスだけコピーしようとしたのですが、ちゃんと画像が映らず、変な形になってしまって、保存してもあとで確認してみると、その部分だけ消えているんです。 -- リン? 2011-05-09 (月) 00:30:14
  • リンさん すいませんが、こちらからの質問への回答・提案した内容の結果報告もなく、状況がよくわからないので、これ以上のアドバイスはできません。
    自作のマップチップ画像ということですので、あくまでも自己責任でご対応ください。 -- 管理人 2011-05-09 (月) 07:52:50
  • はい。お手数おかけしてすみませんでした。 -- リン? 2011-05-13 (金) 17:57:00
  • ウィキで見たとおりに、画像の透明度を変えて、上のレイヤーと表示分の融合をやったのですが、透明度が変わりません;誰か知ってる方、教えてください -- キリ? 2011-05-17 (火) 03:48:23
  • >キリさん 4か月も経っていますが、一応…。僕もついさっき同じところでつまづいていました。どうやら「レイヤー作成」の3つ右にある上下の矢印アイコンでレイヤー1を下に移動すればできるみたいです。 -- 想盾? 2011-09-18 (日) 20:30:30