やさしいウディタ講座24:メニュー画面にキャラクター画像を表示させる

無料のゲーム開発ツール「ウディタ(WOLF RPGエディター)」の基本的な使い方を、初心者さん向けに紹介するこの企画。

前回「やさしいウディタ講座23:プレイ中にキャラ交代・増減させる方法」で、ゲームプレイ中に主人公キャラを交代させる、パーティーメンバーに追加・離脱させるやり方を解説しました。

今回は、ゲームのプレイ画面でメニューに表示される、キャラクター画像の作り方と表示の設定方法を紹介します。

「やさしいウディタ講座」- もくじ
現在公開中の講座をまとめたページ。「ウディタのことがよくわからない」「簡単な機能から覚えたい」などの初心者さんは、初期の講座から読むのがおすすめです。
>>WOLF RPGエディター|公式サイト
公式サイトにはウディタの使い方を詳しく解説している、マニュアルやガイドが公開されています。ウディタを学ぶ際の必須となる教科書です。ぜひ参考にしましょう。

サンプルゲームのようにキャラ画像を表示するには?

先にウディタのサンプルゲームをやってみるとわかりますが、メニューを開く(キーボードのXキー)とキャラクターの画像が表示されます。

ウディタ サンプルゲーム メニュー画面

※ウディタ「サンプルゲーム」のメニュー画面

ところが、このキャラ画像が表示されるパターンは、「サンプルゲームで仲間になるメインキャラ(ウルファール、P・G・エディ、夕一)だけ」です。

その他のキャラを主人公にしたり、パーティーメンバーに加えたりした場合、メニューにキャラ画像が表示されません

ウディタ メニュー画面 キャラ画像なし

これなんですが、データベースに画像ファイルを登録していないのが理由。

  • キャラクターの画像を用意
  • データベースに画像ファイルを登録

上の2つの作業が必要なんですね。

他のキャラクター画像も表示したい!という人は、以下で解説する手順どおりにやってみてください。

スポンサーリンク

ウディタ用のキャラクター画像を用意する

画像ファイルがなければデータベースに登録できません。先に画像ファイルを準備します。

でも、どんな画像を用意すれば良いのか悩みますよね?

とりあえず、「サンプルゲームの画像」を参考にしてみましょうか。

メニューに表示されるキャラ画像ですが、ウディタのDataフォルダの「Pictureフォルダ」に入っています。

ウディタ WOLF_RPG_Editor2フォルダの中身 Dataフォルダ

※「WOLF_RPG_Editor2」フォルダ内のDataフォルダを開く。

ウディタ Dataフォルダの中身 Pictureフォルダ

※Dataフォルダ内に「Pictureフォルダ」が存在。

Pictureフォルダを開くと、3つの画像が見つかりました。

ウディタ Pictureフォルダ 画像ファイル

サンプルゲームのDataでプレイした場合、主人公キャラクターはウルファールです。そこで、「ウルファールの画像」を細かくチェック。

ウディタ 画像ファイルの詳細

画像ファイルの詳細は以下のとおり。

  • 24×24の正方形
  • ファイル形式はpng

見た目からして、歩行用のグラフィックでしょうね。歩行用グラフィックは、マップイベントのグラフィック指定にも使える「キャラチップ」が該当します。

Dataフォルダにある「CharaChipフォルダ」を開いてみましょう。

ウディタ Dataフォルダの中身 CharaChipフォルダ

ありました。このキャラチップが使われている様子。

ウディタ CharaChipフォルダ 画像ファイル

他のキャラクターの画像ファイルも、このキャラチップ画像を使い回せばできそうです。

キャラクター画像を作成しよう!

今回の講座用として、過去講座「やさしいウディタ講座22:ゲーム開始時のキャラクターを変更する」の解説で主人公キャラとして利用した、「パイレーツさんの画像」を作ってみたいと思います。

ウディタ 主人公キャラ パイレーツさん

CharaChipフォルダ」にある、パイレーツさんの歩行グラフィック画像はこれ。

ウディタ CharaChipフォルダ パイレーツさんの画像ファイル

メニューのウルファールの画像を考えると、右上角の画像を使えば良い具合に仕上がるかと思います。

画像編集アプリ(ソフト)を使う

ここでウディタから一旦離れます。画像を作るため、画像編集アプリを使いましょう。

png形式の画像ファイルを扱える&画像の切り抜き・サイズ変更できるアプリなら何でも構いません。

今回はwindows10に最初から入っている、「ペイント 3D」を使ってみます。

3Dとありますけど、普通に平面の2D画像も取り扱い可能です。操作が簡単で、初心者さんでもサクサク作業できるかと思います。個人的におすすめしたいアプリの1つです。

「ペイント 3D」でキャラ画像作成の手順

ペイント 3Dを起動します。Windows10の検索ボックスに「ペイント 3D」と入力。アプリを簡単に見つけ出せます。

Windows10 検索ボックス

Windows10 検索結果 ペイント 3D

頻繁にペイント 3Dを使うことになりそうなら、「スタート」や「タスクバー」などにピン留めしておくと次回以降の起動がラクです。検索結果のアプリの部分を右クリックして、登録してみてください。

新規作成」をクリック。

ペイント3D 新規作成

画面上部のメニューバーから「キャンバス」を選択。

ペイント3D キャンバス

キャンバスの設定で「透明なキャンバス」の部分をクリック。「オン」に変えます。

ペイント 3D 透明なキャンバスをオンにする

透明なキャンバスを「オフ」にしたままだと、白い不透明な背景のキャンバスが作られます。これだと透明部分を作れません。画像に透かせたい部分を作りたい場合、「透明なキャンバス」を必ず「オン」にしてください。
あえて透明部分を使わないなら、オフのままで構いません。

ウディタのCharaChipフォルダを開いて、パイレーツさんの画像を探します。見つけた画像をクリックしたままペイント 3Dのキャンバスに移動させた後、マウスボタンを離します。

ペイント3Dのキャンバスに画像ファイルをドラッグアンドドロップ

キャンバスに「パイレーツさん」の画像が表示されました。最初は選択状態になっているので、周囲のスペース部分を適当にクリックして解除します。

ペイント3D 選択状態

画面上のメニューバーから「トリミング」を選択。

ペイント3D トリミング

四角い枠が出たら、枠の丸い部分をクリックしたままマウスを動かしてください。枠線が縮まったり伸びたりするはず。

ペイント3D トリミング範囲の調整

画像が小さくて作業しにくい場合は、マウスホイールを動かしてみましょう。拡大または縮小の表示が可能です。

たくさん表示されているパイレーツさんの歩行グラフィック画像のうち、右上の画像だけを囲むように、枠をセットしてください

ペイント3D トリミング範囲の調整

枠にはまったら、「完了」ボタンをクリック。

ペイント3D トリミングの完了

右上の画像だけが切り取られました。

ペイント3D トリミング後

続いて、画像サイズの変更です。「キャンバスのサイズ変更」の部分で作業します。

ペイント3D キャンバスのサイズ変更

縦横比を固定するのチェックを外します。チェックがついたままだと編集前の画像の比率が適用されてしまい、正方形を作りにくいためです。

加えて、必ずキャンバスでの画像のサイズ変更のチェックも外します。ここにチェックを入れたままだと、キャンバスサイズの変更と同時に画像も伸び縮みして、見た目が悪くなります。

幅と高さの欄に、それぞれ24ピクセルと入力(ウルファールの画像と同じサイズ)。

作業が終わりました。

メニューバーから「メニュー」を選びます。

ペイント3D メニュー

名前を付けて保存」を選択した後、コピーとして保存の「画像」をクリック。

ペイント3D コピーとして保存

保存先の選択画面が出ます。自分にとって管理しやすい場所を保存先に指定すればオッケーです。

今回は面倒なので、ウディタのDataフォルダにある「Pictureフォルダ」へ直接保存しちゃいましょうか。

ウディタ Pichureフォルダ

ペイント3D 保存するファイル名

既存の画像ファイルを上書きしないよう注意(上書きすると元画像が消えてしまいます!)。既存のファイル名とは別の名前を付ければ、上書き保存を防げます。ファイル形式のpngは変更しないで、そのままにしておきましょう。

画像ファイルでよく見かけるJPEG形式(jpg)もウディタで使えます。ただし、pngと違ってjpgは透明部分を作れません。全体が必ず不透明な画像に仕上がるため、保存するファイル形式には注意してください。

保存が完了しました。念のため、ウディタのDataフォルダを確認。

ウディタ Pictureフォルダ

Pictureフォルダに先程作った「パイレーツさんの画像」がありますね!特に問題なさそう。

画像ファイルの準備はこれで完了。ペイント 3Dを閉じましょう。

作成したキャラ画像をウディタに登録~確認前の準備

データベースに作成したキャラ画像を登録する

続いて、パイレーツさんの画像をデータベースに登録する作業です。

ウディタのエディターを起動します。

アイコンメニューから「可変データベース」を選択。

ウディタ 可変データベース

0:主人公ステータス」を選び、データ一覧から「パイレーツさん」を見つけます。

ウディタ 可変データベース 主人公ステータス

画面右側「顔画像[バトル・ステータス用]」にある「File」ボタンをクリック。

ウディタ 主人公ステータス 顔画像バトル・ステータス用 Fileボタン

Pictureフォルダを指定して、先程作ったパイレーツさんの画像ファイルを選択。その後、OKボタンをクリック。

ウディタ 主人公ステータス 画像の選択

画像ファイルが表示されました。問題なければ、画面の下部にある更新ボタンをクリックします。

ウディタ 主人公ステータス 顔画像の登録

これで画像ファイルを登録できました。

テストプレイ前に主人公キャラを変えておく

さっそくテストプレイ!…と行きたいところですが、その前にパイレーツさんを主人公にする作業をしておきましょう。

主人公にしておけば、テストプレイ開始直後にメニュー画面でパイレーツさんの画像をすぐにチェックできるからです。

可変データベースの「6:パーティー情報」を選択。

ウディタ 可変データベース パーティー情報

メンバー1のプルダウンメニューから、「パイレーツさん」を選びましょう。

ウディタ パーティー情報 メンバー1を変更

OKボタンを押して保存すれば、自動で画面が閉じます。

過去講座「やさしいウディタ講座22:ゲーム開始時のキャラクターを変更する」でも詳しく解説しています。

テストプレイでメニューのキャラ画像を確認

テストプレイをはじめましょう!

初期メンバーはパイレーツさん1人。さっそくXキーを押して、メニュー画面を開きます

ウディタ メニュー画面 パイレーツさんの画像表示

パイレーツさんの画像がばっちり表示されていますね。成功です!

ちなみにですが、ウディタが最初から用意するコモンイベントで作った戦闘イベントにも、パイレーツさんの画像が反映されます。

ウディタ 戦闘イベント キャラ画像の表示

戦闘イベントの作り方は「やさしいウディタ講座8:敵と戦うイベントを作ってみよう」を参考にどうぞ。

同じやり方で、他のキャラクターの画像も作ってみました。

ウディタ メニュー画面 キャラ画像の表示

やはり画像があると華やかで良いですね!

人間だけでなく、動物キャラや敵キャラでも同じようにできますので、ぜひ試してみてください。

次回の講座は?

やさしいウディタ講座24はここまで。

次回講座はまだ考え中~(最近こればっか)。新しい記事ができ次第、公開する予定です。

「やさしいウディタ講座」- もくじ
※全講座の目次ページはコチラ。