【PRO_002:◆JPG/PNG画像を表示したい】

JPGやPNGの画像は「ピクチャ」として表示することができます。
ピクチャをそこそこうまく使えるようになると、
イベントで一枚絵を出したり、自分でメニューを作ったり、
また自在に扱えるようになると、なんとRPGエディターなのに
シューティングゲームが作れちゃったりもします。

今回は、ピクチャを扱う上で最も基本的な動作である
表示、移動、消去の３つを順番に行い、
ピクチャの扱い方の基礎を習得します。

混乱されるかもしれませんので、手順解説の前に「画像ファイル」と「ピクチャ」の違いを。
画像ファイルは「フォルダに入っているもの(ファイル)」、
ピクチャは「(画像ファイルを読み込んで)ゲーム上に表示された画像」をそれぞれ指します。
では、まずはピクチャの表示からやっていきましょう。

「サンプルマップA」の適当な場所にイベントを 作成してニワトリの画像を設定しておきます。 イベントウィンドウの右下にある 「■ コマンド入力ウィンドウ表示 ■」をクリックしてください。
タブを「A ピクチャ」に変更してください。 設定できることがたくさんありますが、 今はすべてそのままでファイルだけ設定しましょう。 ウィンドウ中央上部の、「ﾌｧｲﾙ」を指定しますので、 その右にある「読込」ボタンをクリックしてください。
「グラフィックの選択」ウィンドウが開きますので、 ファイル一覧から「FaceGraphic_Yuichi.png」を 選択して、ウィンドウ右下の「OK」ボタンを押してください。 これで画像のファイル名が指定されました。
次に、「座標」に X「160」、Y「120」を入力してください。 入力し終えたら右下の「入力」ボタンを押してください。
これでイベントの内容は入力できました。 ではテストプレイしてみましょう。 イベントに話しかけた後、画面の中央あたりに ニワトリの画像が表示されれば成功です。 もし「表示されないんだけど！」って場合は、 以下のポイントをチェックしてみてください。 【1】不透明度が0付近でないか 「不透明度が0」＝「完全に透明」です。 不透明度は、最大値である255を推奨します。 【2】拡大率が0付近でないか(100を推奨) 拡大率が0に近いほどピクチャは縮小されて表示され、 0ちょうどだと完全に見えなくなってしまいます。 拡大率は、画像ファイルとまったく同じように 表示される100をおすすめします。 【3】カラー0,0,0でないか 表示形式が通常でないとき、 カラーがRGBすべて0であると見えないことがあります。 カラーは３つとも、基本値である100をおすすめします。

まずはピクチャを移動させるコマンドの前に、 ワンクッションを入れます。 マップイベントウィンドウのコマンドにある、 さきほど入力されたピクチャ表示の１つ下をクリックしてください。 今回はワンクッションとして文章表示を使用します。 内容は空欄でも構いませんので、文章表示を入力してください。 なお、クッションを挟むのは、変化を好きなタイミングで 起こせるようにして、その観察を楽にするためです。 （実はこの文章表示のクッションが、 イベントの実行確認などで「止めながら確認したい！」 という時に非常に便利なので、覚えて損は無いですよ！） 文章表示コマンドを入力したら、入力されたそのコマンドの さらに１つ下の位置をクリックして選択してください。 この位置に、「ピクチャの移動」コマンドを追加します。
先ほど表示させたピクチャの位置を動かしてみましょう。 コマンド入力ウィンドウを開いてタブを「A ピクチャ」に変更し、 ウィンドウ右上の「移動」ボタンをクリックしてください。 それでは「表示位置」と「処理時間」を設定します。 座標のXに「0」、Yにも「0」を入力してください。 （相対ﾓｰﾄﾞと自由変形のチェックが外れていることを確認） 処理時間に「60」、発動ディレイに「0」を入力してださい。 これでピクチャの移動設定ができました。 ウィンドウ下の「OK」ボタンを押してください。
テストプレイしてみましょう。 イベントに話しかけると、手順１で設定したピクチャと メッセージウィンドウが同時に表示されると思います。 その状態で決定キーを押して文章表示を進めるとピクチャが動きます。 1秒くらいの時間をかけて画面左上まで移動していけば成功です。 もし動かない場合は、手順を見直してみてくださいね。

最後に、表示させたピクチャを消去させる設定をします。 手順２で行った、文章表示を用いたワンクッションを ここでもう一度挿入してください。 挿入する場所は手順２で入力したピクチャ移動の１つ下の空欄です。 クッションを入力したら、入力されたそのコマンドの さらに１つ下の位置をクリックして選択してください。
コマンド入力ウィンドウを開いてタブを「A ピクチャ」に変更し、 ウィンドウ右上の「消去」ボタンをクリックしてください。 処理時間に「60」、発動ディレイに「0」を入力して、 ウィンドウ右下の「入力」ボタンをクリックしてください。
全てのコマンド入力が終わった状態では、 このような形になります。
では、テストプレイしてみましょう。 ピクチャとメッセージウィンドウの表示が起こり、 １回決定キーを押すとピクチャが動くと思います。 ここまでは手順１と２ですね。 次に決定キーを押すと、 メッセージウィンドウが閉じると同時に ピクチャの消去が始まります。 今回は、消去が始まってから完全に消去が完了するまでに 1秒くらいかかる設定にしています。 これで設定は完了です。お疲れ様でした！

ピクチャコマンドにはたくさん設定項目がありますが、
今回は表示位置と処理時間だけを設定しました。
それ以外のもので主要なところをいくつかピックアップしてご紹介しようと思います。
余裕があれば、実際に設定してみてくださいね。

■ピクチャ番号 ピクチャは画面に複数表示できますが、ただし 「ひとつのピクチャ番号にはピクチャ１枚だけ」です。 つまり何枚も表示するには、それぞれピクチャ番号を変えてあげればいいんですね。 ピクチャ番号には999999までの整数を指定でき、 ピクチャ同士を重ねて表示したときは数字が大きいものの方が上に表示されます。
■表示形式 表示形式には「通常」以外に「加算」「減算」「乗算」があり、 これら３つは表示されるところの色の影響を受けます。 「加算」はピクチャの色を背景(下に表示されているものすべて)の 色に加算、足して表示します。光とは、色を足せば足すほど 白に近づくものなので、結果としてピクチャの加算表示は 背景より明るい色になります。 「減算」は加算の逆で、背景の色からピクチャの色を減算、引いて 表示します。色を減らすということは黒に近づきますので、 ピクチャの減算表示は背景より暗い色になります。 光の情報は赤・緑・青の３原色でできているので、 白色から赤色のピクチャを減算すると青緑色が残ります。 「乗算」は、ピクチャの暗さの分だけ背景を暗くするような 表示を行います(厳密には違いますがそんなふうに見えます)。 加算や減算ではもっとも強い影響を与える色は白色でしたが、 乗算ではこの影響は明るい色ほど薄くなり、白だと何も変わりません。
■パターン ピクチャは縦・横それぞれに分割数を指定でき、分割した 断片(パターン)の１つだけを指定して表示することができます。 パターンは画像ファイルの左から右に向かって並んでおり、 右端の次はもう一段下の左端から続きます。 例えば縦分割数と横分割数はともに３で、パターンは５を 指定すると、３×３に分割された画像の中央の断片だけを表示できるのです。
■表示タイプ 今回はファイル名を指定してのファイル読み込みで ピクチャを表示しましたが、それ以外にも、 文字列をピクチャとして表示したり、画像を自動的に 3×3に分割してウィンドウ画像のように表示したりする 機能があります。ピクチャコマンドの「表示タイプ」で 設定できますので、いろいろやってみてくださいね。

ここまではイベントコマンド「A ピクチャ」の話でしたが、
最後に「B エフェクト」コマンドで設定できることについて少しお話しします。

ここでは、すでに表示させているピクチャの色を変えたり、
光らせたり点滅させたりシェイク(振動)させたりなどなどが行えます。
イベントを作る際にけっこう便利だったりします。
キャラクターを覆うように丸を表示させて、それを
シェイクや明滅させるだけで、オーラのようなものが簡単に
それっぽく演出できたりします。

それと、実はひとつ上の余談でご紹介した「パターン」と、
この「自動パターン切替」を組み合わせれば、それだけで
ピクチャをアニメーションさせることが出来るんです。
入力する前に、エフェクトをかけたいピクチャのピクチャ番号と
同じ番号に設定できているか、忘れずに確認してくださいね。

＜執筆者：ウディタ公式ガイド執筆コミュ。＞

• トピック原案：真波
• HTML作成：ユノ