ウディタ講座
パーティクルを使用したエフェクトの作り方を紹介します。
パーティクルというのは粒の集合という意味合いです。(たぶん…)
変数の意味合いを理解している方が対象になっています。
まずは簡単にコモンイベントを実行出来る環境を用意しましょう。
スタート地点に話しかけられるNPCを用意して、コモンイベントを呼び出します。
それから使用する画像の準備を。
今回はこちらで用意した画像を使ってみましょう。フリー素材として使用して頂いて構いません。
それではまず、ピクチャの表示を行います。
コモンイベントに、先ほどのピクチャを分割数7:8で表示するよう入力します。
ただしく表示されたでしょうか。
丁寧に解説してしまいましたが、このぐらいは当たり前に表示出来るのが前提です。
では、変数を使ってピクチャの表示番号と座標をコントロールしてみましょう。
コモンイベントに以下のコマンドを入力します。
■変数操作: CSelf10 = 1
■変数操作: CSelf21 = 160
■変数操作: CSelf22 = 120
今回はコモンセルフ10番をピクチャ番号、
21番をＸ座標、22番をＹ座標として扱います。
ピクチャの表示コマンドは以下のように変更します。
1600000〜はコモンセルフの値を呼び出す数値です。
今後多用するので覚えておきましょう。0の数に注意して下さい。
それではイベントを実行してみます。
画面中央に光の弾が表示されましたね。
ウディタではゲームサイズを変更出来ますが、今回は320x240ですすめています。
なので単純に数値を半分に割った値…
横幅は160
縦幅は120
が画面の中心になるわけです。
テストプレイ中はゲーム画面にマウスを当てると座標が表示されますので、
表示したい位置を確認する時はウィンドウ情報を見てみましょう。
さて、次のステップに移る前に
このままではどの変数がどこに使用されているのかわからなくなってしまいます。
名前を付けてあげましょう。
イベント内で使用している変数は■で表示されます。
○になっているのは、どこにも使用されていない変数です。
名前を付けたところで、次に弾を複数個表示させてみましょう。
とっても便利な回数付きループを使います。
今回はとりあえず10個です。
そして、回数付きループの中に先ほどのイベントを突っ込み、
変数操作を追加して上げましょう。
赤枠が追加箇所です。
21番と22番は座標を管理する変数でした。
そこにランダムな値を加えてやれば座標もランダムに動くはずです。
10番はピクチャ番号を管理する変数でした。
同じ番号に表示しようとすると、いままで表示されていた画像は消えてしまいます。
番号を変えてやる事で複数のピクチャを表示させる事が出来ます。
注意するのは、最初のコモンセルフ10=1をループの外に出す事です。
これがループ内に入っていると、イベントは上から順番に実行されますので
ピクチャが1番で表示される → 変数が+1されて2になる → 1を代入される → またピクチャが1番で表示される
となってしまい、永遠に一つの画像しか表示されません。
ではイベントを実行してみましょう。
画像の表示位置はランダムですので、何度も話しかける事で毎回違う位置に画像が表示されます。
上手くいったでしょうか？
ではいよいよ本番、ピクチャを動かしてみましょう。
とりあえずキラキラさせるために、中央から光がパーッと散ばるようにしてみたいと思います。
そのためにはどうしたらいいか？
１、中心にピクチャを表示させる
２、外側に移動する
３、消える
こんなところでしょうか。
ピクチャを移動させるには、コマンドを一つ足してやる必要があります。"ピクチャの移動"ですね。
移動先はさきほど既に変数でしてあるので、それを少しいじってやるだけです。
さきほどのイベントを少しいじってみました。
追加されたのは赤線のイベントだけです。あとは既存のイベントを多少移動させただけ。
まず、ピクチャの表示を座標指定直後に移動させています。
これで全ての画像は160,120から表示されますね。
｜■変数操作: CSelf21[X座標] = 160 + 0
｜■変数操作: CSelf22[Y座標] = 120 + 0
｜■ﾋﾟｸﾁｬ表示：CSelf10[ピクチャ番号] [中心]ﾌｧｲﾙ｢ピクチャ/Battle_Effect-02.png｣ ←移動したイベント
この部分で、全てのピクチャは画面中央からスタートすることになります。
では次に、画像の移動です。
さきほど表示位置をズラすために、変数に±30の値を加えたコマンドが残っているとおもいます。
今回はそこを移動先にする事にしましょう。
やり方は簡単です、ピクチャの表示コマンドをコピペして以下の用に書き換えてください。
面倒な変数入力はいりません。
表示から移動に変更して、その他の箇所は同値にチェックを入れてやっただけです。
さて、処理時間の項目が出てきました。
これはどのぐらいの時間でピクチャを移動させますか？という数値です。
画像では60の数値が入っていますね。
面倒なので簡単に説明すると、ゲーム内の1秒は60フレームという値で処理されています。
つまり今回は1秒かけてピクチャを動かしますよ、と命令したわけです。
ではイベントを実行してみましょう。
gifを用意するのが面倒だったので画像は省きますが、画面中央に表示された光の弾が
じわじわと外側に広がっていったでしょうか？
これで先ほどのステップ１、２はクリアしました。
問題は3です、徐々に画像を消去するにはどうしたらいいか。
それには不透明度の項目を調整してやればいいのです。
ピクチャの移動コマンドを修正してやりましょう。
不透明度は255がMAXで、100%の濃さになります。
ここを0にしてやれば…
見事に消えてくれましたね。
これがパーティクル作成の基本的な流れになります。
しかしこのままではゆっくりすぎてなんだか微妙です。
移動フレーム数を減らしてやれば素早く移動してくれるのですが、せっかくですので
パッ！と開いてシュワッと消えるように変更してみましょう。
ピクチャの移動を2個使い、ディレイをセットしてやることにします。
まず、さきほどのピクチャ移動を書き換えてやりましょう。
やや複雑になっていきますが、落ち着いて一つづつ消化しましょう。
相対モードにチェックが入り、座標を指定する変数がコモン23とコモン24に変更されています。
ここはとりあえずそういうものだと思ってこの通りにしてください。後で解説します。
次に、不透明度を128にして、処理フレーム時間を20にしました。
これだけだと、薄くなっただけでピクチャは止まってしまいますね。
そこで、このピクチャ移動コマンドをコピペして二つにしましょう。
二つ目の方(下側)を、以下のように書き換えます。
ここで発動ディレイの項目が出ました。
これは、○○フレーム後にこの移動を実行します。というもの。
今回は発動ディレイに20の値が入っていますね。
これは1つ目のピクチャ移動にかかる時間が20フレームだったからです。
これが20よりも大きいとピクチャは一瞬止まってから動き出してしまいます。
逆に20よりも小さいと、ピクチャは移動の途中で2つ目の命令に切り替わります。
さて、これでとりあえず透明度の設定は終わりました。
次に動かし方を変えてやります。
さきほど、相対モードにチェックを入れて
座標にコモン23と24を指定してやりました。
相対モードとは何か？
今までは、指定した場所にピクチャーを移動させてやっていました。
画面中央に表示して、±30した場所へ移動する。
今回は少し変わって、
画面中央に表示したピクチャーを、そこから○○の値だけ動かすという命令に書き換えています。
それが相対モードです。
そのため、動かす値を別の変数で指定してやる必要があったのです。
今回はコモン23番に「X移動幅」、コモン24番に「Y移動幅｣と名前を付けてあげてください。
では移動幅に数値を入力してやりましょう。
ピクチャイベントは上から表示、移動、移動です。
ややこしいですが、順番に考えていけば原理は簡単です。
1、まず画面中央に座標がセットされ、ピクチャが表示されます。
2、次に指定された移動幅で、ピクチャが移動します。透明度は半分になります。
3、先ほどよりも少ない移動幅で、ピクチャが消滅します。
イベントを実行してみると、ピクチャが徐々にゆるやかに消えていくはずです。
上手く動作しましたか？
上手く動作していれば、イベントを少し自由にいじってみましょう。
ループ数を増やしたり、移動幅を大きく・小さくするだけでも変わって見えます。
これで基本的な流れは終わりです。
次は他のパラメータをいじります。
さてまだまだ美しいエフェクトとは言えません。
美しいエフェクトを目指すために、もう少しパラメータをいじりやすくしてみましょう。
フレームとディレイを管理するための変数を用意しました。
それから、拡大率をいじるための変数を1つ。
では既存のイベントを書き換えていきます。
まずピクチャ移動に変数をセットしてやります。
フレームとディレイは明らかに横幅が足りてませんが、変数で指定する事が可能です。無理やり押し込んでください。
拡大率にもｾﾙﾌ15をセットするのを忘れずに。
赤丸部分は二つあるピクチャ移動の両方にセットしてください。
フレームもディレイも同じ変数で構いません。
ピクチャ表示部分もちょこっと書き換えてやりましょう。
拡大率を変数指定しておきます。
では最後に変数に数値をセットして完成です。
青は拡大率の変更による追加部分。
赤はフレームとディレイの管理の追加部分です。
さて、イベントを実行してみましょう。先ほどのものより、随分綺麗に見えるようになったのではないでしょうか？
拡大率の変更は毎回＝で指定するのではなく、割り算や引き算で設定してやると
最初に設定した値に応じてサイズが変動するため、調整しやすくなるかもしれません。
フレームとディレイの管理は今後を楽にするための設定なので、見た目に影響はありません。
しかしこのように、あらゆるパラメーターを変数で指定してやることで後の調整が格段に楽になるのです。
今回はピクチャ移動が二つしかないのでまだ楽です。
しかしこの先、何度もピクチャ移動を追加していった時に移動速度が気に入らなかった場合、
一つ一つのディレイ・フレームを計算しながら手動で数値入力する事になってしまいます。
とても考えたくないですね。
さて簡単な説明になってしまいましたが、ここでこの講座は終わります。
パターン番号を変えたり、回転させてみたり、移動幅を変えることで特定の方向に移動させてみたり
もやを表示して全体的に光らせるなど、やり方は様々です。
これ以上の事は解説されるよりは楽しく遊びながら覚える所で、本人の力次第でどうにでもなる部分です。
試行錯誤して、オリジナリティ溢れる素敵なパーティクルを作ってください。
■注意
慣れたらピクチャの消去やディレイリセットを学んで下さい。
また、ループを多用、回数を増やす事でゲーム自体が重くなります。
使用する画像数は50以下に抑えると良いです。