無料のゲーム開発ツール「ウディタ（WOLF RPGエディター）」の基本的な使い方を、初心者さん向けに紹介するこの企画。
今回は、ウディタのゲーム画面に画像ファイルを表示する方法について、基本的なやり方を解説します。
現在公開中の講座をまとめたページ。「ウディタのことがよくわからない」「簡単な機能から覚えたい」などの初心者さんは、初期の講座から読むのがおすすめです。
公式サイトにはウディタの使い方を詳しく解説している、マニュアルやガイドが公開されています。ウディタを学ぶ際の必須となる教科書です。ぜひ参考にしましょう。
目次
イベントコマンド「ピクチャ」を使う
ゲームのプレイ画面に好きな画像を映し出す方法です。
使用するのは「ピクチャ」のイベントコマンド。マップイベントやコモンイベントで、ピクチャのコマンドを打ち込みます。
今回は初心者さんでも扱いやすい、「マップイベント」でやってみましょう。
ウディタのゲーム画面に画像を表示するまでの手順
ゲーム画面に表示する「画像ファイル」を用意
フリー・有料・自作・イラスト・写真など、画像なら何でも構いません（著作権には気を使いましょう）。
注意したいのがファイル形式。ウディタで表示できる画像のファイル形式は、以下の3種類です。
- png
- jpg
- bmp
今回はフリー素材を拝借。以下の「ニワトリの親子」の画像を、ウディタのゲーム画面に表示させてみます。
- ファイル形式はpngですが背景は白色で。透明部分なし。
- サイズは横320ピクセル×縦240ピクセル。
- 解像度は72dpi。
ディスプレイへの表示なので、画像の解像度はウェブサイト向けの72dpiで十分。印刷向けの350dpiなど、理由もなく高解像度の画像を使うのは避けましょう。ファイルサイズが大きすぎて、ゲームの処理が重くなる原因につながります。
データは極力軽くするのがマナー。快適なゲームプレイを考えて作りたいですね。
解像度が高い画像をウディタに使いたい場合には、画像編集ソフトなどを使って解像度を下げれば大丈夫です。
画像ファイルをウディタのDataフォルダに入れる
用意した画像ファイルを、ウディタで読み込めるようにします。
ゲーム開発で使用中のウディタの「Dataフォルダ」を開いて…
「Pictureフォルダ」の中に画像ファイルを放り込めばオッケー。
ちなみにウディタのエディターでファイルを読み込みできれば良いだけなので、保存先をPictureフォルダにこだわる必要はありません。ただ、管理を楽にするためにも、画像ファイルはPictureフォルダにまとめたほうが良いと思います。
マップとマップイベントを作成
ゲームを起動したと同時に、画像を表示させてみます。
適当なマップを作ります。画像表示だけでキャラ操作なしの場合、デフォルトの真っ黒な画面のままでも構いませんが、今回は簡単なマップを作ってみました。
基本的なマップの作り方は、「やさしいウディタ講座1：マップを作ってみよう」を参考にどうぞ。
続いて、適当な場所にマップイベントを配置（いくらなんでも適当すぎる位置かもしれない…）。
マップイベントの設定は以下のとおりです。
- 管理しやすいイベント名をつけます。今回は「画像_ニワトリ親子」に決定。
- 移動ルートは「動かない」。
- 起動条件は「自動実行」にしてみました。
【自動実行とは？】
最優先でイベントを実行させるための起動条件です。自動実行イベントが発生している間、他のイベントは停止します。但し、同じ他のイベントでも「並列実行」にしたものは実行可能です。
基本的なマップイベントの作り方は「やさしいウディタ講座2：人を配置・看板を調べるイベントの作り方 – マップの中に人を配置してみよう」を参考にどうぞ。
イベントコマンド「ピクチャ」を設定する
マップイベント「画像_ニワトリ親子」のコマンド欄をダブルクリック。もしくは、コマンド入力ウィンドウ表示ボタンをクリック。
早速ピクチャコマンドを入れたいですが、今回は起動条件に「自動実行」を選択したので、冒頭に「ウェイト」のコマンドを入力しました。
コマンド一覧から「H イベント制御」を選択。「ウェイト」にチェックを入れ、「1フレーム」でコマンドを入力。
自動実行でウェイトのコマンドを入れる理由ですが、これがないとウディタの処理能力を超えてしまい、エラー画面が出やすくなるからです。
ループコマンドの処理エラーと似たような理由だと思ってください。詳しくは過去講座「やさしいウディタ講座12：ループを使ってイベント内容を繰り返す」をどうぞ。
続いて、ピクチャコマンドの入力です。イベントコマンド一覧から、「A ピクチャ」を選択。画面右側で細かな設定をします。
「ピクチャ番号」は表示させる画像に割り当てられる、IDのような存在です。番号が大きいほど、前面に表示されます。
取り扱うピクチャ番号が多い場合、忘れないようにエクセルなどにメモして管理すると楽かもしれませんね。
今回はとりあえずピクチャ番号を「1000」にしてみました。
単純に画像を表示させるだけなので、「ピクチャ表示」ボタンを凹んだ状態に設定します。
【表示した画像を消したい場合は？】
消したい画像のピクチャ番号を指定し、「消去」ボタンを凹んだ状態にした後、コマンド入力します。
表示タイプで画像ファイルを読み込む
画像ファイルの読み込み方法を決めるのが「表示タイプ」の部分です。Pictureフォルダに保存した、ニワトリの親子の画像を直接表示させるには…
[1]ファイル読み込み（直接ファイル指定）
この方法を選択。
表示タイプを決めたら、ファイルの「読込」ボタンをクリック。
Dataフォルダ内から、表示させる画像ファイルを指定しましょう。今回の場合だと「Picture」フォルダを選んで、ニワトリの親子の画像ファイル名をクリックすれば大丈夫です。
選択後、OKボタンで反映されます。
簡単にですが、その他の表示タイプについても解説してみます。
[2]ファイル指定（文字列変数）：
データベースに登録中の、画像ファイル名で選択する方法。数値でデータベースの場所を指定します。やや上級者向けですが、使いこなせるようになると便利に感じるはず。
[3]文字列をピクチャとして描画：
キーボードで打ち込んだ文字を、画像としてゲーム画面に表示する方法。変数などの特殊文字も入力できます。
[4]お手軽ウィンドウ：
メッセージ表示や選択肢、メニューなどで使われる、ウィンドウ画像を表示できます。
[5]お手軽ウィンドウ（文字列変数）：
[2]と同じような方法で指定するやり方です。画像の表示位置を決める
「座標」の部分で指定できます。
- X：横軸
- Y：縦軸
ゲーム画面の左上角を起点に、表示場所を数値で指定します。X0、Y0なら左上角に表示されるということ。
「位置」の部分で、画像ファイルのどの部分を指定座標に合わせるのか決めることが可能です。
左上が最も基本的な位置。画像の左上角を座標にピッタリと合わせます。
その他の設定項目も変更することで、画像の見た目や動作を変えられます。
単純に画像を表示させたいだけなら「ファイルの読み込み方法」と「座標」あたりをいじれば、とりあえず大丈夫。各項目の説明はウディタ公式のマニュアルを参考に、少しずつ覚えてみてください。
設定が終わったら、OKボタンをクリック。マップイベントのコマンド欄でピクチャの表示を確認。
問題なさそうならセーブし、内容を保存します。
テストプレイで画像表示をチェック
ニワトリの親子の画像が無事に表示されるのか？確かめるためにテストプレイ開始。
テストプレイのために主人公キャラの初期位置をこのマップにする場合、「やさしいウディタ講座2：人を配置・看板を調べるイベントの作り方 – 主人公キャラを自作マップ上で操作できるようにする」を参考に、作業してみてください。
スタート直後、ゲーム画面に画像が表示されました！
不透明な画像を一番上に表示したので、ウディタのエディターで作ったマップや主人公キャラが見えません。実際には表示されているんですが、画像ファイルが覆いかぶさり、隠れて見えないだけです。
とりあえず成功ですね。
今回は自動実行の起動条件にしました。もちろん、並列実行や決定キーで実行など、他の起動条件でも画像表示は可能です。いろいろいじってみてください。
画質が悪い？ゲームの基本設定「画面サイズ」に注意
ところで先程、テストプレイで表示させたニワトリ親子の画像。少し見た目が粗くないでしょうか？
線のフチ部分がぼやけているような…。
元画像よりも品質が低くて気になります（今回使ったニワトリ親子の画像だとわかりにくいですが、もっと繊細な画像を表示させると粗さがわかると思います）。
これなんですが、画像が2倍に引き伸ばされているのが理由です。
当サイトのやさしいウディタ講座では、「サンプルゲームのData」を使用しています。
このDataのゲームの基本設定を見てみると（エディター画面上のメニューから、「ゲーム設定」→「ゲーム基本設定を開く」）、ゲーム画面サイズに最も小さな320×240が設定されています。
実は320×240のゲーム画面サイズを選択した場合、画像ファイルの表示が2倍で扱われるんです。
見た目を元の画像のようにキレイにしたいなら、イベントコマンドのピクチャで表示の拡大率を50％にしましょう。
倍率を2分の1にしたので、元の画像サイズとぴったり一致。本来の画質で表示できました。
代わりに表示サイズは小さく変化。位置合わせがちょっと難しいかも知れませんね。
ちなみに320×240以外のゲーム画像サイズであれば、元のサイズ（1倍）で画像ファイルが表示されます。
次回の講座は？
やさしいウディタ講座27はここまで。
次回「やさしいウディタ講座28:ピクチャで設定する画像表示の基本技」も、画像表示の内容です。今回紹介しなかった設定について、いろいろと解説しています。
※全講座の目次ページはコチラ。
