Top > STEP+2 遠景&フォグ画像の表示
HTML convert time to 0.251 sec.


STEP+2 遠景&フォグ画像の表示

Last-modified: 2013-04-20 (土) 17:51:37

この「STEP+」は本編の「STEP1〜STEP20」とは独立した単体の機能説明や制作手順説明になります。
本編の「STEP1〜STEP20」での学習後、より多くの機能等を学びたい際に御覧ください。


 

マップを表現する方法としてマップチップを並べるのにプラスし、「遠景画像」「フォグ画像」を設定することが出来ます。
「遠景画像」「フォグ画像」を追加することによって、より奥行きのあるマップ・シーンを表現できます。

 

こちらのサンプル画像では、マップに「遠景画像」「フォグ画像」を追加しています。
「遠景画像」はマップチップの下に表示されるもので、サンプル画像でいうと青い宇宙の背景になります。
「フォグ画像」はマップチップの手前に表示されるもので、サンプル画像でいうと画面全体でキラキラとした無数の光の画像になります。実際のゲーム画面上では「フォグ画像」を縦にスクロールさせていて、光が舞い降りているような表現をしています。
このように、「遠景画像」「フォグ画像」を使うことによって、ダイナミックで印象的なシーンを演出することができますので、是非活用していきたいところです。

stepp2-001.jpg
 

【INDEX】


 

遠景画像・フォグ画像とは

遠景画像とは

「遠景画像」はマップ上でマップチップの下に表示される画像です。
「ピクチャ」機能を使って、マップチップの下に表示される「ピクチャ番号」を使用することで同様の表示状態を得ることが出来ますが、「遠景画像」は簡単にマップに紐付けして設定することができるのと、常時画像をスクロールさせることが出来ます。

 

「遠景画像」の例としては、最初のサンプル画像のように丘のシーンでの「空」や「遠くの山々」といったような「遠くにある背景」だったり、船のシーンでスクロールしていく「海原」だったりというものがあげられます。

フォグ画像とは

「フォグ画像」「遠景画像」の対比として近景画像と言ってもいいかもしれませんが、用途的にマップチップやキャラクターの上に表示される画像のため、「霧」の英語訳で「フォグ」ということで「フォグ画像」と呼びます。

 

「フォグ画像」は上記のとおり、マップ上でマップチップやキャラクターの上に表示される画像です。
「ピクチャ」機能を使って、同様の表示状態を得ることが出来ますが、「フォグ画像」は簡単に常時画像をスクロールさせることが出来ます。
また、「ピクチャ」のように「加算・減算といった表示方法」や「不透明度」を設定することも出来ます。
「遠景画像」のようにマップに紐付けして設定することはできません。「フォグ画像」を使用する場合はイベント処理で「フォグ画像」を表示するイベントコマンドを実行する必要があります。

 

「フォグ画像」の例としては、最初のサンプル画像のように丘のシーンでの「舞い降りる光」だったり、フィールドマップの上を「流れる雲」、怪しげな森のマップでの文字通りに「霧」といったものがあげられます。

 

 

「遠景画像」「フォグ画像」は1つのマップに各1枚ずつしか表示することが出来ませんが、上でも書いたように、少し複雑な処理になるかもしれませんが、「ピクチャ」と併用すれば、さらに奥行きのあるマップ・シーンの表現ができます。
また、「遠景画像」「フォグ画像」はイベント処理で使用している画像や表示・スクロールの設定などを随時変更することが出来ます。

遠景画像・フォグ画像の設定

それでは、実際に「遠景画像」「フォグ画像」を設定していきましょう。

 

まずは、「遠景画像」「フォグ画像」として使用する画像を用意します。
画像の規格に特に制限はなく、使用するゲーム画面サイズより小さいサイズでも大きいサイズでも使用することができます。
通常はゲーム画面サイズと同じサイズの画像を用意します。
「ゲーム画面サイズ320×240」で使用する場合は「320×240の画像」
「ゲーム画面サイズ640×480」で使用する場合は「640×480の画像」

 

画像が用意できたら、「Dataフォルダ」内「Pictureフォルダ」などに格納します。
「Dataフォルダ」内に新たに専用のフォルダを作成してもいいでしょう。

遠景画像・フォグ画像の登録

画像の準備ができたら、今度は「システムデータベース」「遠景画像」「フォグ画像」として登録します。

 

「システムデータベース」を開きます。

stepp2-002.jpg
 

「システムデータベース 13:遠景画像」を選択します。
登録には「遠景画像」「フォグ画像」の区別はなく、どちらもこの「システムデータベース 13:遠景画像」に登録していきます。

stepp2-003.jpg
 

今回は「遠景画像」として「空」の画像、「フォグ画像」として「黒い靄」の画像を登録していきます。

pipo-bg001.jpgpipo-fog004a.png
 

まずは「空」の画像。
「画像ファイル名」で画像ファイルを選択します。
「X移動速度」「Y移動速度」は画像を自動スクロールさせる場合に設定します。
この画像はスクロールさせないので、どちらも「0」です。
「マップと位置連動する?」は、キャラクターが移動するなどでマップがスクロールする場合に、それに連動して「遠景画像」「フォグ画像」もスクロールするかどうかの設定になります。
この画像はスクロールさせたくないので、「位置連動なし」とします。

stepp2-004.jpg
 

次に「黒い靄」の画像。
「画像ファイル名」で画像ファイルを選択します。
「X移動速度」「Y移動速度」は画像を自動スクロールさせる場合に設定します。
この画像は右上にスクロールさせたいので、「X移動速度」は「10」、「Y移動速度」は「-5」とします。
「マップと位置連動する?」は、キャラクターが移動するなどでマップがスクロールする場合に、それに連動して「遠景画像」「フォグ画像」もスクロールするかどうかの設定になります。
この画像は連動してスクロールするように、「位置連動あり」とします。

stepp2-005.jpg
 

設定ができたら、「OK」ボタンを押します。

stepp2-006.jpg
 

これで「遠景画像」「フォグ画像」の登録は完了です。

遠景画像の表示

「遠景画像」の表示方法は2種類あります。
マップと紐付けして設定する方法と、後述する「フォグ画像の表示」と同じようにイベント処理の中でイベントコマンドで表示する方法です。
「イベントコマンドで表示する方法」については、下にある「フォグ画像の表示」を参考にしていただき、ここでは「マップと紐付けして設定する方法」を説明します。

 

まずは、マップを新規作成時に「遠景画像」を設定する場合。

stepp2-010.jpg
 

「マップの新規作成」画面が表示されます。
この画面の下の方に、「遠景設定」という項目がありますので、ここで「使用する」をチェックし、「ファイル」で「システムデータベース 13:遠景画像」に登録した画像を指定します。
「システムデータベース 13:遠景画像」に登録していない画像を使用したい場合は、右の「ファイル名指定」をチェックして画像ファイルを指定します。
設定ができたら、「OK」ボタンを押します。

stepp2-007.jpg
 

今度は作成済みのマップに「遠景画像」を設定する場合。
「マップの基本設定」を開きます。

stepp2-011.jpg
 

「登録先」の「登録する」をチェックします。
「遠景設定」という項目がありますので、ここで「使用する」をチェックし、「ファイル」で「システムデータベース 13:遠景画像」に登録した画像を指定します。
「システムデータベース 13:遠景画像」に登録していない画像を使用したい場合は、右の「ファイル名指定」をチェックして画像ファイルを指定します。
設定ができたら、「OK」ボタンを押します。

stepp2-008.jpg
 

それでは、実際にマップを作成して、「遠景画像」を設定していきます。
作成済みのマップに「遠景画像」を設定する場合の手順になります。

 

わかりやすいように下図のようなマップを作成してみました。
黒い部分は透明色のマップチップが配置されていますので、ここが透明になり、「遠景画像」が見えるようになります。

stepp2-009.jpg
 

「マップの基本設定」を開きます。

stepp2-011.jpg
 

「登録先」の「登録する」をチェックします。
「遠景設定」で「使用する」をチェックし、「ファイル」で「システムデータベース 13:遠景画像」に登録した「空」の画像を選択します。
「OK」ボタンを押します。

stepp2-012.jpg
 

マップエディット画面で「遠景画像」がそのまま表示されますので、設定がうまくいったかすぐに確認できます。

stepp2-013.jpg
 

これで「遠景画像」の表示ができました。

フォグ画像の表示

「フォグ画像」「遠景画像」のようにマップと紐付けして設定することが出来ませんので、「イベントコマンド」で表示します。

 

そのマップが表示されるのと同時に「フォグ画像」が表示されるように、マップ上の適当な場所に「自動実行イベント」を設置します。
今回は、そのマップにいつも「フォグ画像」が表示されている場合で説明しますが、イベントシーンの途中で「フォグ画像」を表示させることももちろんできます。急に霧がかってきたりなど、色々と使えるシーンがあると思います。

stepp2-014.jpg
 

「イベントコマンド 変数操作」を使用し、「システム変数 61:フォグ番号」に「システムデータベース 13:遠景画像」で設定した「フォグ画像」として表示させたい画像の番号を指定します。
指定ができたら、「入力」ボタンを押します。

stepp2-016.jpg
 

「フォグ画像」を表示する「イベントコマンド」が実行されたら、マップ内にいる場合に再度このイベントが実行されないように「イベントコマンド イベントの一時消去」を加えておきます。

stepp2-017.jpg
 

テストプレイをして確認します。
「フォグ画像」が表示されました。
スクロール設定をしている画像ですので、自動で「フォグ画像」がスクロールしていきます。
※画像ファイルの容量が大きくなるので、簡単なアニメGIFにしています。実際にはなめらかにスクロールしています。

stepp2-018.gif
 

また、「フォグ画像」はマップに紐付けされたものではないため、別のマップに移動しても表示され続けます。
「別のマップに移動する直前」か「別のマップに移動した直後」のタイミングで「フォグ画像」を消去する必要があります。
「フォグ画像」を消去するには、表示する場合と同様に「イベントコマンド 変数操作」を使用し、「システム変数 61:フォグ番号」-1など「システムデータベース 13:遠景画像」で何も設定がされていない番号を指定します。

stepp2-019.jpg

遠景画像・フォグ画像の設定変更

「遠景画像」「フォグ画像」の設定をイベントなどで途中変更するには、「遠景画像」「フォグ画像」の設定が保存されている「システム変数」に変更したい値を、「イベントコマンド 変数操作」を使用して代入することで、いつでも変更することができます。

stepp2-015.jpg
 

変更できる内容は下記のとおりです。

  • 「システム変数 61:フォグ番号」
    「システムデータベース 13:遠景画像」に登録した画像番号を指定することで、「フォグ画像」の表示を変更できます。
  • 「システム変数 62:フォグX速度」
    「フォグ画像」の横方向のスクロール速度を変更できます。
  • 「システム変数 63:フォグY速度」
    「フォグ画像」の縦方向のスクロール速度を変更できます。
  • 「システム変数 64:フォグ描画タイプ」
    「フォグ画像」の描画方法(0:通常,1:加算,2:減算)を変更できます。
  • 「システム変数 65:フォグ不透明度」
    「フォグ画像」の不透明度(0(透明)〜255(不透明))を変更できます。
  • 「システム変数 66:遠景番号」
    「システムデータベース 13:遠景画像」に登録した画像番号を指定することで、「遠景画像」の表示を変更できます。
  • 「システム変数 67:遠景X速度」
    「遠景画像」の横方向のスクロール速度を変更できます。
  • 「システム変数 68:遠景Y速度」
    「遠景画像」の縦方向のスクロール速度を変更できます。
     

遠景画像・フォグ画像の設定をコモンイベント化してみよう

「遠景画像」の表示はマップの設定で行うことができ、そのマップが表示されるとマップに紐付けされた「遠景画像」が勝手に表示されますが、「フォグ画像」をマップ表示と同時に表示させるには上記のとおりマップ表示直後に実行されるイベント内で「フォグ画像」を設定して表示する必要があります。
また、通常は「システム変数 61:フォグ番号」「フォグ画像」の画像だけ設定すれば「フォグ画像」は表示されますが、演出上印象を変えたい場合には「システム変数 64:フォグ描画タイプ」「システム変数 65:フォグ不透明度」も同時に設定することが多々あります。
このようにマップ表示の際に「フォグ画像」を設定する処理はほとんど決まり文句のようなものですので、簡単な処理ではありますが、「コモンイベント」化しておくと便利です。

 

「コモンイベント」の基本については「STEP18 コモンイベントの作成」を参照してください。

 

それでは、「フォグ画像」の設定をする処理を「コモンイベント」にしていきましょう。
あまり使用することはないかもしれませんが、「遠景画像」の変更もできるようにしてみます。

 
コモンイベントの処理の流れ
変更するのは「フォグ画像」か?「遠景画像」か?
「フォグ画像」なら「遠景画像」なら
「システム変数 61:フォグ番号」,
「システム変数 64:フォグ描画タイプ」,
「システム変数 65:フォグ不透明度」を設定
システム変数 66:遠景番号」を設定

上記のように条件分岐が1つあって、あとはその分岐内で各「システム変数」を設定していくだけの単純な処理です。

 

それでは、さっそく「コモンイベント」を作っていきましょう。
まずは、「コモンイベント」の初期設定から。
「コモンイベントエディタ」を開き、空いている適当なところに今回の「コモンイベント」を作っていきましょう。
名前を付けて、「コモンイベント」を呼び出す際に「遠景・フォグ画像番号」や「フォグ画像の不透明度」などの設定を入力する必要があるため、「入力の数」を今回の入力させたいものは「フォグ画像か遠景画像かの判定用」「遠景・フォグ画像番号」「フォグ画像の描画タイプ」「フォグ画像の不透明度」なので制す数にを'「4」''とします。
続いて、入力の詳細を設定するため「▼特」ボタンを押します。

stepp2-020.jpg
 

4つの入力値の設定を1つずつ行っていきます。
まずは、「フォグ画像か遠景画像かの判定用」。
「数値1」の部分に名前を付けます。
「選択肢を手動作成」をチェックし、「コモンイベント」を呼び出す際に項目リストから入力する値を選択できるようにします。
「挿入」の部分から数値と項目名を入力していきましょう。「0:フォグ画像」「1:遠景画像」というように設定しました。
「初期値」は「0」にします。おそらく、この「コモンイベント」を使う場合には「フォグ画像」を変更するためがほとんどなので、デフォルトで「0:フォグ画像」が選択されるようにしておきます。
また、この「数値1」の値はこの「コモンイベント」「コモンセルフ変数0」に代入されます。

stepp2-021.jpg
 

続いて、「遠景・フォグ画像番号」。
「数値2」の部分に名前を付けます。
「特殊指定」の右にある「入力[数値2]」ボタンを押してから、「データベース参照」をチェックし、「コモンイベント」を呼び出す際に「システムデータベース 13:遠景画像」に登録した画像リストから入力する値を選択できるようにします。
「「-1」〜「-3」の項目を追加する」にチェックし、それぞれ「消去」と名前を付けておきましょう。「フォグ画像」を消すときには画像が設定されていない番号を設定しますので、「-1〜-3」は「システムデータベース 13:遠景画像」に存在しませんので、確実に「フォグ画像」を消すことができます。
「初期値」は「-1」にします。「フォグ画像」を表示する場合にはどの画像にするか選択しますので、デフォルトの値は決められませんが、「フォグ画像」を消去したい場合をデフォルトにしておきます。
この「数値2」の値はこの「コモンイベント」「コモンセルフ変数1」に代入されます。

stepp2-022.jpg
 

「フォグ画像の描画タイプ」。
「特殊指定」の右にある「入力[数値3]」ボタンを押してから、「選択肢を手動作成」をチェックし、「コモンイベント」を呼び出す際に項目リストから入力する値を選択できるようにします。
「0:通常」「1:加算」「2:減算」というように設定しました。
「初期値」は「0」にします。「0:通常」がデフォルトです。
この「数値3」の値はこの「コモンイベント」「コモンセルフ変数2」に代入されます。

stepp2-023.jpg
 

「フォグ画像の不透明度」。
「特殊指定」の右にある「入力[数値4]」ボタンを押してから、「特殊な設定方法を使用しない」がチェックされているのを確認しましょう。
この値は数値を直接入力して設定できるようにします。
「初期値」は「255」にします。一切透明になっていない元画像のままの状態がデフォルトです。
この「数値4」の値はこの「コモンイベント」「コモンセルフ変数3」に代入されます。

stepp2-024.jpg
 

これで「コモンイベント」の初期設定は完了しましたので、「入力」ボタンを押します。

 

それでは、「コモンイベントエディタ」のイベント入力エリアにイベント処理を作っていきましょう。
処理内容は上で表にした「コモンイベントの処理の流れ」に沿って作っていきます。

 

まずは、変更するのが「遠景画像」か「フォグ画像」かでの分岐を作ります。
「フォグ画像か遠景画像かの判定用」の値が「コモンセルフ変数0」に入ってきますので、「コモンセルフ変数0」が「0」の場合は「フォグ画像を変更する処理」、「コモンセルフ変数0」が「1」の場合は「遠景画像を変更する処理」という分岐にします。

stepp2-025.jpg
 

次はもう簡単な処理で、「フォグ画像を変更する処理」の分岐内では、「フォグ画像番号」「フォグ画像の描画タイプ」「フォグ画像の不透明度」を設定する処理を作り、「遠景画像を変更する処理」の分岐内では、「遠景画像番号」を設定する処理を作っていきます。
それぞれ、対応した「システム変数」の値に「コモンセルフ変数1〜3」の値を代入していくだけの処理です。

stepp2-026.jpg
 

こちらがこの「コモンイベント」の全処理になります。
「分岐:【1】」が「フォグ画像を変更する処理」、
「分岐:【2】」が「遠景画像を変更する処理」です。
非常に短くシンプルな内容の「コモンイベント」ですが、こういったものでも都度都度で行う設定の手間を軽減してくれますので、いつも行っているようなイベント処理を見直し、「コモンイベント化」できそうな部分は「コモンイベント」にしていきましょう。

stepp2-027.jpg
 

さて、これでこの「コモンイベント」は完成しましたので、さっそく通常のイベントから呼び出して確認してみましょう。
「イベントコマンド その他2」から「イベントの挿入」でこの「コモンイベント」を選択すると、「コモンEv入力」に入力値の項目が反映されています。

[tip]ウディタ2では?
 イベントコマンド「コモンイベント」

「画像番号」などは「システムデータベース 13:遠景画像」に登録した画像リストから画像名で選択できるようになったので、非常に便利になりました。

stepp2-028.jpg
 


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


  • 空の遠景を入れてみたんですけど、画像が何個も分かれて、一つにならずに出てきてしまいます。どうしたらいいですか? -- ソード? 2011-02-24 (木) 23:09:21
  • ソードさん 「画像が何個も分かれて」というのがどういう状態なのか詳細が分かりかねますので、ウディタ公式サイトの質問スレッドなどでスクリーンショット画像を添えて、右下の【良い質問の例】を参考に質問してみてください。
    ちなみにエディター画面上では画像がタイル上に並べられて表示されますが、テストプレイ時には正しく表示されます。
    また、システムデータベースに遠景画像を登録する際に「マップと位置連動する?」は空などの場合は「位置連動なし」に設定しましょう。 -- 管理人 2011-02-25 (金) 05:38:27
  • ウディタ初心者です。雨のフォグ画像を自作してこちらの手順通りにやったのですがゲームテストで実行するとフォグ画像がものすごく拡大されて「1フレーム辺りの処理が500000個を越えました」と、エラーが出てしまいます。この場合どうしたら良いんでしょうか -- とくめー? 2011-04-08 (金) 15:53:28
  • とくめーさん 拡大するという現象が不明ですが、おそらくフォグを設定した後にイベントを消し忘れているものだと思います。
    こちらを参考に「フォグ画像の表示」、フォグを設定したあとに「イベントの一時消去」が抜けていないか確認してみてください。 -- 管理人 2011-04-09 (土) 05:52:08