【ウディタ】下から上にスクロールするメッセージコモンを作成する

レビニアよ。今回解説するのは「下から上に向かって流れる(スクロール)メッセージを表示するコモン」の作成なのよ。オープニングとかエンドロールとかスタッフロールとかのアレね。

Twitterで前に「そのうち解説する」と言って放置したいたのだけど、ちょっとコモンの構文が長すぎて躊躇していたのよ。なので今回は機能を絞って、割と簡単なものを作っていくわ。

盛り込む機能は以下のとおりよ。物足りなかったから各自でアレンジしてね。

  • 入力値で「文字サイズ」「表示するメッセージ」を指定できる
  • 表示中に決定orキャンセルキーでスクロール速度を早くできる
  • メッセージが全て流れると止まり、決定orキャンセルキー押下で消える

※ちなみにこのコモンはサンプルゲームのエンドロール処理のパクリを大いに参考にしているわ。興味があれば見てみて頂戴。

「下から流れるメッセージ」コモンを作成する


それじゃコモンを作っていくのよ。以下の通り新規作成してね。
→コモンイベント作成:名前「〇下から流れるメッセージ」、起動条件「呼び出しのみ」


入力設定では、実際に表示するテキスト文字サイズを指定するわ。画像のように設定してね。


セルフ変数はこんな感じで。


最初は初期設定から。まずメッセージに使うピクチャ番号を指定。まぁ他に作っているコモンとの兼ね合いで好きに入力していいわ(今回は13000で)。
→■変数操作: CSelf20[PN.テキスト] = 13000 + 0


次はピクチャとして表示するメッセージのサイズを取得(スクロールさせるのに必要だからね)。そのためにメッセージを透明表示してサイズ取得しましょう。
→■ピクチャ表示:CSelf20[PN.テキスト] [左上]文字列[\f[\cself[0]]\cse] X:0 Y:0 / 0(0)フレーム / パターン 1 / 透 0 / 通常 / 角 0 / 拡 100% / カラー R[100] G[100] B[100]
→■変数操作+: CSelf12[テキスト長さX] = ピクチャ:CSelf20[PN.テキスト] の 画像サイズ(横)
→■変数操作+: CSelf13[テキスト長さY] = ピクチャ:CSelf20[PN.テキスト] の 画像サイズ(縦)


ピクチャ番号は冒頭で指定したセルフ変数20番を変数呼び出し値で指定するのよ。それと、透明で表示するには「不透明度」という項目を0にすればいいわ。

なんでピクチャサイズを取得したのかというと、メッセージの初期表示位置を算出するためよ。大きさが分からないと「まず最初にどこへ表示して、どのくらいスクロールしたら止めればいいのか」が分からないでしょ?


ということで、まずは取得したピクチャの大きさから表示するX座標を算出。ピクチャは左上起点で表示するから、「(画面サイズX-ピクチャサイズX)÷2」でちょうど中央に表示できるわ。
→■変数操作: CSelf14[テキスト座標X] 絶対値= Sys116:[読]画面サイズX – CSelf12[テキスト長さX]
→■変数操作: CSelf14[テキスト座標X] /= 2 + 0

※画面の横サイズをオーバーしてる場合の対応として「絶対値」で算出してるけど、そもそもはみ出てる時点で横幅大きすぎ問題だし、あまり意味はないかもね。


次に起点として表示するY座標(開始位置)だけど、これは「メッセージが画面の縦サイズより短いか長いか」で変わってくるわ(条件分岐で判断してね)。
→■条件分岐(変数): 【1】 Sys117:[読]画面サイズY が CSelf13[テキスト長さY] 以上

まずはメッセージの縦長が画面サイズより短い場合だけど、メッセージがちょうど画面の上に到達したところで止めなければいけないわね。


そのためには「縦サイズの分だけ下」から表示開始すればいいわ。でもそれだと画面の上ピッタリまで流れちゃうから1文字分だけ隙間を空きておきましょう。
→◇分岐: 【1】 [ Sys117:[読]画面サイズY が CSelf13[テキスト長さY] 以上 ]の場合↓
→▼ テキスト縦長が画面サイズ以下=テキスト縦サイズ+文字サイズの位置からスタート
→■変数操作: CSelf15[テキスト座標Y] = CSelf13[テキスト長さY] + CSelf0[文字サイズ]
→◇上記以外

次にメッセージの縦長が画面サイズより長い場合。これは「すべてのメッセージが流れ切ってから止まればいい」から、起点は「1行目だけ画面下から見えている状態」でいいわ。


画面サイズの縦長から文字サイズをマイナス。この位置を起点にすれば一行だけ見えている状態で開始できるわ。
→◇上記以外
→■変数操作: CSelf15[テキスト座標Y] = Sys117:[読]画面サイズY – CSelf0[文字サイズ]
→◇分岐終了◇

これで初期設定はOK。次は実際にメッセージを描画して流す処理を作っていくわ。


まずは普通にメッセージを表示。
→■ピクチャ表示:CSelf20[PN.テキスト] [左上]文字列[\f[\cself[0]]\cse] X:CSelf14[テキスト座標X] Y:CSelf15[テキスト座標Y] / 0(0)フレーム / パターン 1 / 透 255 / 通常 / 角 0 / 拡 100% / カラー R[100] G[100] B[100]


初期設定で入力した各種変数を、変数呼び出し値や特殊文字を活用して入力するのよ。あと不透明度を0じゃなく255(通常表示)にするのも忘れないでね。


次は表示したメッセージを上に向かってスクロールさせる処理。変数の初期値やループを設定しましょう。
→■変数操作: CSelf11[テキスト進行度] = 0 + 0
→■ループ開始
→|■ウェイト:4 フレーム

※セルフ変数11番の「スクロール進行度」は、テキストが何ピクセル移動した(流れた)かを判定するための変数よ。


ループの中にはキー入力判定と条件分岐を置くわ。冒頭で言った通り決定orキャンセルキーでメッセージの流れる速度を早くできるようにするから、そのための処理ね。
→■キー入力:CSelf10[キー入力判定] 決定(10) キャンセル(11)
→■条件分岐(変数): 【1】 CSelf10[キー入力判定] が 0 と同じ 【2】 CSelf10[キー入力判定] が 10 以上


キーが押されていない場合は1ピクセルずつスクロールさせるわ(通常の速度ということね)。セルフ変数11番「テキスト進行度」にも、前述のとおり移動させるピクセル数をプラスしていくわ。
→◇分岐: 【1】 [ CSelf10[キー入力判定] が 0 と同じ ]の場合↓
→■変数操作: CSelf11[テキスト進行度] += 1 + 0
→■ピクチャ移動:CSelf20[PN.テキスト] 相対X:0 Y:-1 / 4(0)フレーム / パターン 1 / 透 255 / 通常 / 角 0 / 拡 100% / カラー R[100] G[100] B[100]


メッセージをスクロールさせるには「ピクチャ移動」を使うのよ。Y座標を-1すれば1ピクセル上に移動するわ。処理時間は4フレームくらいでいいかな?


決定orキャンセルキーが押されている場合はスクロール速度を早くするわ。
→◇分岐: 【2】 [ CSelf10[キー入力判定] が 10 以上 ]の場合↓
→■変数操作: CSelf11[テキスト進行度] += 12 + 0
→■ピクチャ移動:CSelf20[PN.テキスト] 相対X:0 Y:-12 / 4(0)フレーム / パターン 1 / 透 255 / 通常 / 角 0 / 拡 100% / カラー R[100] G[100] B[100]
→◇分岐終了◇


スクロール加速時には4フレームで12ピクセル移動させるわ。早すぎると思ったら後で減らしてもいいわよ。


そして、スクロール量(セルフ11番「テキスト進行度」)がテキストサイズYを超えたらスクロールストップ。条件分岐で判別してループを中断してね。
→■条件分岐(変数): 【1】 CSelf11[テキスト進行度] が CSelf13[テキスト長さY] 以上
◇分岐: 【1】 [ CSelf11[テキスト進行度] が CSelf13[テキスト長さY] 以上 ]の場合↓
|■ループ中断
◇分岐終了◇


ループを出たらキー入力待ちにして、決定orキャンセルキーが押されたらメッセージを消去して終了よ。
→■キー入力:CSelf10[キー入力判定][入力待ち] 決定(10) キャンセル(11)
→■ピクチャ消去:CSelf20[PN.テキスト] / 0(0)フレーム


※キー押下待ちにするには「キーが押されるまで待つ」にチェックすればいいわよ。

これでコモンの作成は終了。お疲れ様でした。

「下から流れるメッセージ」コモンを試してみる


それじゃ、マップイベントから呼び出して試してみるわ。文字サイズはお好みで。スクロール表示させるメッセージはセルフ文字列5番に入力するのよ。


表示するメッセージは往年の名作RPGの冒頭メッセージを拝借したわ。


マップイベントから起動したところ。メッセージが表示されて流れているわ。決定orキャンセルキーで高速化されるはずよ。


このメッセージは縦長が画面サイズ以下だから、ちょうど一番上までスクロールしたところでストップしたわ。


後は決定orキャンセルキーで消去されてイベント終了よ。


次はメッセージの縦長を画面サイズ以上にして試すわ。往年の名文を2倍にして入力。


すると1行だけ見えている状態から開始して、


メッセージが一番下まで流れ切った時点でスクロールストップ。決定orキャンセルキーで高速化&スクロール後に消去されるのは一緒よ。

下から上にスクロールするメッセージを表示するコモンの作成解説は以上よ。ちょっとややこしかったけどうまくできたかしら?

冒頭で言った通り機能は絞ったから、フォントを変えたいとか画面を暗くしたいとかあれば各自で改造に挑戦してみてね。