無料のゲーム開発ツール「ウディタ（WOLF RPGエディター）」の基本的な使い方を、初心者さん向けに紹介するこの企画。
今回は、ゲームのプレイ画面でメニューに表示される、キャラクター画像の作り方と表示の設定方法を紹介します。
現在公開中の講座をまとめたページ。「ウディタのことがよくわからない」「簡単な機能から覚えたい」などの初心者さんは、初期の講座から読むのがおすすめです。
公式サイトにはウディタの使い方を詳しく解説している、マニュアルやガイドが公開されています。ウディタを学ぶ際の必須となる教科書です。ぜひ参考にしましょう。
目次
サンプルゲームのようにキャラ画像を表示するには？
先にウディタのサンプルゲームをやってみるとわかりますが、メニューを開く（キーボードのXキー）とキャラクターの画像が表示されます。
※ウディタ「サンプルゲーム」のメニュー画面
ところが、このキャラ画像が表示されるパターンは、「サンプルゲームで仲間になるメインキャラ（ウルファール、P・G・エディ、夕一）だけ」です。
その他のキャラを主人公にしたり、パーティーメンバーに加えたりした場合、メニューにキャラ画像が表示されません。
これなんですが、データベースに画像ファイルを登録していないのが理由。
- キャラクターの画像を用意
- データベースに画像ファイルを登録
上の2つの作業が必要なんですね。
他のキャラクター画像も表示したい！という人は、以下で解説する手順どおりにやってみてください。
ウディタ用のキャラクター画像を用意する
画像ファイルがなければデータベースに登録できません。先に画像ファイルを準備します。
でも、どんな画像を用意すれば良いのか悩みますよね？
とりあえず、「サンプルゲームの画像」を参考にしてみましょうか。
メニューに表示されるキャラ画像ですが、ウディタのDataフォルダの「Pictureフォルダ」に入っています。
※「WOLF_RPG_Editor2」フォルダ内のDataフォルダを開く。
※Dataフォルダ内に「Pictureフォルダ」が存在。
Pictureフォルダを開くと、3つの画像が見つかりました。
サンプルゲームのDataでプレイした場合、主人公キャラクターはウルファールです。そこで、「ウルファールの画像」を細かくチェック。
画像ファイルの詳細は以下のとおり。
- 24×24の正方形
- ファイル形式はpng
見た目からして、歩行用のグラフィックでしょうね。歩行用グラフィックは、マップイベントのグラフィック指定にも使える「キャラチップ」が該当します。
Dataフォルダにある「CharaChipフォルダ」を開いてみましょう。
ありました。このキャラチップが使われている様子。
他のキャラクターの画像ファイルも、このキャラチップ画像を使い回せばできそうです。
キャラクター画像を作成しよう！
今回の講座用として、過去講座「やさしいウディタ講座22:ゲーム開始時のキャラクターを変更する」の解説で主人公キャラとして利用した、「パイレーツさんの画像」を作ってみたいと思います。
「CharaChipフォルダ」にある、パイレーツさんの歩行グラフィック画像はこれ。
メニューのウルファールの画像を考えると、右上角の画像を使えば良い具合に仕上がるかと思います。
画像編集アプリ（ソフト）を使う
ここでウディタから一旦離れます。画像を作るため、画像編集アプリを使いましょう。
png形式の画像ファイルを扱える＆画像の切り抜き・サイズ変更できるアプリなら何でも構いません。
今回はwindows10に最初から入っている、「ペイント 3D」を使ってみます。
3Dとありますけど、普通に平面の2D画像も取り扱い可能です。操作が簡単で、初心者さんでもサクサク作業できるかと思います。個人的におすすめしたいアプリの1つです。
「ペイント 3D」でキャラ画像作成の手順
ペイント 3Dを起動します。Windows10の検索ボックスに「ペイント 3D」と入力。アプリを簡単に見つけ出せます。
頻繁にペイント 3Dを使うことになりそうなら、「スタート」や「タスクバー」などにピン留めしておくと次回以降の起動がラクです。検索結果のアプリの部分を右クリックして、登録してみてください。
「新規作成」をクリック。
画面上部のメニューバーから「キャンバス」を選択。
キャンバスの設定で「透明なキャンバス」の部分をクリック。「オン」に変えます。
透明なキャンバスを「オフ」にしたままだと、白い不透明な背景のキャンバスが作られます。これだと透明部分を作れません。画像に透かせたい部分を作りたい場合、「透明なキャンバス」を必ず「オン」にしてください。
あえて透明部分を使わないなら、オフのままで構いません。
ウディタのCharaChipフォルダを開いて、パイレーツさんの画像を探します。見つけた画像をクリックしたままペイント 3Dのキャンバスに移動させた後、マウスボタンを離します。
キャンバスに「パイレーツさん」の画像が表示されました。最初は選択状態になっているので、周囲のスペース部分を適当にクリックして解除します。
画面上のメニューバーから「トリミング」を選択。
四角い枠が出たら、枠の丸い部分をクリックしたままマウスを動かしてください。枠線が縮まったり伸びたりするはず。
画像が小さくて作業しにくい場合は、マウスホイールを動かしてみましょう。拡大または縮小の表示が可能です。
たくさん表示されているパイレーツさんの歩行グラフィック画像のうち、右上の画像だけを囲むように、枠をセットしてください。
枠にはまったら、「完了」ボタンをクリック。
右上の画像だけが切り取られました。
続いて、画像サイズの変更です。「キャンバスのサイズ変更」の部分で作業します。
「縦横比を固定する」のチェックを外します。チェックがついたままだと編集前の画像の比率が適用されてしまい、正方形を作りにくいためです。
加えて、必ず「キャンバスでの画像のサイズ変更」のチェックも外します。ここにチェックを入れたままだと、キャンバスサイズの変更と同時に画像も伸び縮みして、見た目が悪くなります。
幅と高さの欄に、それぞれ24ピクセルと入力（ウルファールの画像と同じサイズ）。
作業が終わりました。
メニューバーから「メニュー」を選びます。
「名前を付けて保存」を選択した後、コピーとして保存の「画像」をクリック。
保存先の選択画面が出ます。自分にとって管理しやすい場所を保存先に指定すればオッケーです。
今回は面倒なので、ウディタのDataフォルダにある「Pictureフォルダ」へ直接保存しちゃいましょうか。
既存の画像ファイルを上書きしないよう注意（上書きすると元画像が消えてしまいます！）。既存のファイル名とは別の名前を付ければ、上書き保存を防げます。ファイル形式のpngは変更しないで、そのままにしておきましょう。
画像ファイルでよく見かけるJPEG形式（jpg）もウディタで使えます。ただし、pngと違ってjpgは透明部分を作れません。全体が必ず不透明な画像に仕上がるため、保存するファイル形式には注意してください。
保存が完了しました。念のため、ウディタのDataフォルダを確認。
Pictureフォルダに先程作った「パイレーツさんの画像」がありますね！特に問題なさそう。
画像ファイルの準備はこれで完了。ペイント 3Dを閉じましょう。
作成したキャラ画像をウディタに登録～確認前の準備
データベースに作成したキャラ画像を登録する
続いて、パイレーツさんの画像をデータベースに登録する作業です。
ウディタのエディターを起動します。
アイコンメニューから「可変データベース」を選択。
「0:主人公ステータス」を選び、データ一覧から「パイレーツさん」を見つけます。
画面右側「顔画像[バトル・ステータス用]」にある「File」ボタンをクリック。
Pictureフォルダを指定して、先程作ったパイレーツさんの画像ファイルを選択。その後、OKボタンをクリック。
画像ファイルが表示されました。問題なければ、画面の下部にある更新ボタンをクリックします。
これで画像ファイルを登録できました。
テストプレイ前に主人公キャラを変えておく
さっそくテストプレイ！…と行きたいところですが、その前にパイレーツさんを主人公にする作業をしておきましょう。
主人公にしておけば、テストプレイ開始直後にメニュー画面でパイレーツさんの画像をすぐにチェックできるからです。
可変データベースの「6:パーティー情報」を選択。
メンバー1のプルダウンメニューから、「パイレーツさん」を選びましょう。
OKボタンを押して保存すれば、自動で画面が閉じます。
過去講座「やさしいウディタ講座22:ゲーム開始時のキャラクターを変更する」でも詳しく解説しています。
テストプレイでメニューのキャラ画像を確認
テストプレイをはじめましょう！
初期メンバーはパイレーツさん1人。さっそくXキーを押して、メニュー画面を開きます。
パイレーツさんの画像がばっちり表示されていますね。成功です！
ちなみにですが、ウディタが最初から用意するコモンイベントで作った戦闘イベントにも、パイレーツさんの画像が反映されます。
戦闘イベントの作り方は「やさしいウディタ講座8：敵と戦うイベントを作ってみよう」を参考にどうぞ。
同じやり方で、他のキャラクターの画像も作ってみました。
やはり画像があると華やかで良いですね！
人間だけでなく、動物キャラや敵キャラでも同じようにできますので、ぜひ試してみてください。
次回の講座は？
やさしいウディタ講座24はここまで。
次回「やさしいウディタ講座25:マップイベントのキャラを自動で移動させる」では、マップイベントのキャラクターをキー操作なしに、好きな方向へ移動させる方法について解説します。
※全講座の目次ページはコチラ。
