Twitterの方で公開したMELLOWのタイトル画面の泡演出のやり方を自分用メモとして覚書。


これですね。スクリプトは1ヶ月すれば他人と言われますし、事実、自分も過去の作品のスクリプトをどう組んだのかはあまり覚えておりません。
あくまで自分用の覚書ですが、後で読み返した時にちゃんとした読み物として使えるように書いてみたいと思います。
似たような演出を考えている方がいらっしゃいましたらこういうやり方もありますよ、という参考としても。一助になれば幸いです。
やっている処理は大したことないので、ウディタでコモンイベントが扱える方なら簡単に組めるんじゃないかなと。

追記にて折りたたんでおきます。

流石にTwitterに載せた動画だと、スマホでの撮影なので何が何だかわかりづらい感じでしたので
画面キャプチャで用意しました。タイトルコールを飛ばせなくて申し訳ないです。

 


コレをやろうと思ったきっかけが、タイトル画面を凝ってみるのも面白いかも?くらいな思いつきのノリでしたが
色々と画面が動くのは楽しいですね。

ScreenShot_2015_1101_22_49_13
さて。これがタイトル画面です。泡演出込みなので1枚スクショをとっても面白い感じになったなと自画自賛。
このタイトル画面上で使っているコモンイベントは3つありまして(正確には使用コモン2つのイベントがあるので4つ)

①タイトル選択肢画像化コモン(2つ)
②背景画像アニメーションコモン
③泡演出コモン

になります。
①はWOLF RPGエディター コモンイベント集 内、とわの様の『タイトル画面を凝りたい』コモンをお借りしています。
このコモンイベントをベースに、②の背景画像を動かすコモンと③の泡演出コモンを併用して画面を構成しています。

②の背景画像を動かすコモンは、アニメーションさせたい画像を下記のようにつなげて1枚の画像にしたものを
sample


元々ウディタにあるピクチャエフェクトのパターン切り替えで動かしています。
それをコモンイベントとして組んだものを、①のコモンイベント内のタイトル画像部分に読み込ませて動く背景の完成。


さて本題の3つめ。
まずコモンイベントから見ていきます。
WS000002
↑クリックで大きくなります。
やっている処理をおおまかにわけると

①泡のパターン数だけコモンセルフ変数を用意。
②泡の初期位置&拡大率セット
③泡描画
④泡の移動幅&回転率セット
⑤泡移動描画
⑥次の泡描画に切り替え&②に戻る

です。コモンセルフ変数の名前は下記の通り
WS000004

STG系の弾幕描写を参考に作りました。
ループ回数は10回なので、各泡はそれぞれ最大10個まで作られ、10個作られた段階で最初のピクチャ番号に戻る(はず)です。
全然検証してないので、並列処理で動かしたら10以上ピクチャ番号使っていたなんてことになっていたらすみません;;

順を追って解説していきますね。

①泡のパターン数だけコモンセルフ変数を用意


※このコモンセルフ変数が後述するピクチャ描写のピクチャ番号に相当します。
今回は泡のパターンが4パターンだったのでコモンセルフ変数10番~13番にしました。
ループ処理を10回に設定しているので、変数操作で各コモンセルフ変数に格納する初期の数字は
10番飛ばしで入れていきます。(処理の最後にコモンセルフ変数+1してループするため)
ピクチャ番号の使用数の総計は画像パターン数に応じますが、このコモンを使用する場合
画像パターン数×11 
必要になると考えてください。



②泡の初期位置&拡大率セット


次に、コモンセルフ変数21番・22番に泡の初期位置を定義していきます。
X座標は画面全体にランダムにしたかったので
10~640の乱数で設定。

Y座標は下から上昇する泡の描写をしたかったので、
500固定。
にしてあります。

更に拡大率を乱数で設定すると
泡のパターン数が少なくてもパターンが多いように見えるかも。
これも設定する場合は
10~100の乱数で設定します。



③泡描画


一通りコモンセルフ変数の定義が完了したら、画面に描画していきます。
 泡画像の描画は下記の通り
WS000005
 ピクチャ番号を①で定義したコモンセルフ変数(変数呼び出し値:1600000+X)に指定します。
このほか
・X座標(コモンセルフ変数:21(呼び出し値:1600021
・Y座標(コモンセルフ変数:22(呼び出し値:1600022
をそれぞれ②で定義したコモンセルフ変数に指定します。

④泡の移動幅・回転率のセット


①・②で定義しなかったコモンセルフ変数をここで使います。
②の段階でまとめて設定してしまってもOK。
別途用意したコモンセルフ変数にそれぞれ移動幅を定義していきます。
このコモンセルフ変数の定義数が多ければ多いほど、複雑な動きの制御ができるような気がしています。
今回は
・X座標移動幅
・Y座標移動幅
・泡の回転率(角度)
・拡大率
・フレーム数
の5点を設定しています。
すべて乱数で適当な数字を入れていき、テストプレイをしながら動作の調整をします。
ここの数字で動き方が変わるので、表現の差が出やすい部分ではないかなとか。
自分は今回
X座標の移動幅を
-30~30(相対移動なので、移動幅は狭めに

Y座標の移動幅を
-1000

角度回転率を
0~3600(角度は0.1度単位なので360度回転の場合は3600

拡大率を
10~100(%)

フレーム数を
60~300(1秒~5秒)

に設定しました。
Y座標関連の設定が固定なので、必要ないようにも思えますが
Y座標の移動幅や初期位置をいじりたくなった時用にあえて用意しています。
入力するフォーマットを統一したほうが量産するときに楽かなって

⑤泡移動描画


④で定義したコモンセルフ変数を、③で描画したピクチャにそれぞれ入力していきます。
自分の設定は以下
WS000006
※ピクチャ移動の設定時、X・Y座標の移動幅を相対移動にチェックすることを忘れずに。
(表示時点に設定した位置を始点に移動させるため)


④で定義したコモンセルフ変数5つをそれぞれ入力しています。
・X座標(コモンセルフ変数:24(呼び出し値:1600024
・Y座標(コモンセルフ変数:25(呼び出し値:1600025
・フレーム数(コモンセルフ変数:14(呼び出し値:1600014
・拡大率(コモンセルフ変数:15(呼び出し値:1600015
・角度(コモンセルフ変数:26(呼び出し値:1600026


すべて定義すると、ピクチャ移動時にピクチャが回転&縮小しながら上昇します。
また、フレーム数も指定しているのでゆっくり上昇する泡と速く上昇する泡が分かれ
より視覚的なランダム性が増すわけです。


ウディタでは乱数の設定が楽なので、苦もなく乱数でいじることができました。
気をつけなければいけないのは、コモンセルフ変数に移動幅や位置の設定をする場合
WS000007
↑の画像の枠で囲ったとおり、『=』で設定することです。
 
『=』設定以外だとバグる原因になります。
後、今回上昇する泡だったのでYの初期位置を全て500に設定し、画面外にしています。
ここをいじって0にすれば上から降ってくる雪の演出にも応用できるのではないかな、とか。

この泡演出の難点を挙げるとすれば
 ・画面が重くなるのでタイトルくらいにしか使えない
・ピクチャの消去し忘れに注意

くらいでしょうか。以上、あまり親切ではない自分用覚書でした。
わかりづらい点がありましたら拍手、コメント、Twitterのリプライ等でお気軽にどうぞ!