RPGっぽい会話ボックスの作り方 ③ ページ送りを実装する

スクラッチに挑戦している皆さん、どうも！スクラッチコーチです。

どんな感じの会話が作れるか、ショート動画を貼っておきますね↓

けっこうすごくない？でも未完成。ここから文字に色を付けたり文字を動かしたり、いろんなエフェクトを付けられるようにもしていく。

実際に動かせるスクラッチサンプルも公開しておいたので見てみてね！

RPG風の会話ボックスで、まさかのテラが……

by ok-scratch

今回のゴール

Scratch で長いセリフをエレガントに表示・切り替えできる会話システムを完成させること。
具体的には次の要素をすべて実現することが目標です。

1. 自動改ページ
   • 会話ボックスから文字がはみ出したら、次のページに自動で移行する。
   • スペースキー（または他の操作）でユーザーがページ送りできる。
2. セリフの整理と削除
   • 前のセリフを確実に消去して、文字が重ならないようにする。
   • メッセージ送信や条件ブロックで処理を制御。
3. エレガントな演出
   • 表示と退場の際にスライドやフェードなどのアニメーションを付けて、見た目を洗練させる。
4. ユーザーへの案内
   • 「スペースを押して進む」など、プレイヤーが直感的に操作できるガイドを画面に表示し、点滅などで分かりやすくする。

スプライト「キャット」にセリフを追加する

めっちゃ長いセリフを追加しておこう。会話ボックスから溢れてしまっても自動で次のページに表示されるようにプログラミングしていくからね。

スプライト「文言」を改修する

次のセリフが表示されるように改修していくよ。

「ずっと」ブロックをここに追加しよう。

そこでセリフの削除と改行処理を加える。

なんと、これだけで次のセリフが表示される！

ッと言っても全然読めないね(^_^;)

まぁ最初の一歩としてはいい感じ。

改行を修正する

いまは文字がゴチャゴチャっと重なってしまっているよね。これは横の改行を実装する前にも起きていた現象だよね。それが今度はY方向でも起きたにすぎない。それならやることは似ているはず。

条件ブロックで「Y座標が会話ボックスの下側に達したかどうか」を調べて、YESならスペースキーが押されるまで待機してからページをリセットすれば、ちゃんと整理できるよ。

プレビュー

よし実行！っと……あれ？

うん、しっかり整理はされたけど、前のセリフが消えてないから同じ座標に文字が重なってしまったね。

ってことは単純に前のセリフを消せばいいか。よし。

メッセージ「会話ボックスの文字を消す」を作る

これを呼び出そう。ただし「送って待つ」ブロックを使う点にだけ注意してね。

メッセージを受け取ったとき

このメッセージでは単純に文字を消すのではなく、ちょっとエフェクトを付けてみよう。エレガントに退場していただく。

さらに、表示されるときには画像の効果をもとに戻すようにしておくのも忘れずに。

スペースキーで文字が消えて次のセリフが表示されるかテストする

では実行！

エレガントぉぉぉ！

すごくエレガントです。

表示するときもエレガントな演出にする

退場のときだけではなくて表示するときもエレガントに文字を出したい。

変数「ターゲットX」「ターゲットY」を作る

これをクローンされたときに初期化して、文字が少しだけスライドしながら表示されるようなエフェクトにしてみる。（幽霊を100にしている点も注意）

エレガントな表示になったかテストする

文字がスーーって表示されて滑らか。こういうギミックがゲームやアニメーションを「他と違う」作品に仕上げる細工になる。

ユーザーに指示を出す

さて、初めてプレイするヒトにとってはスペースキーで会話を次に送るというのは分かりづらい。予想はできるけど、分かりづらいので、ちゃんと「スペース押してね」的な表示を出す。

定義「スキップされるまで待つ」を作る

再描画はアリの定義を作るよ。

今まで「スペースキーが押されるまで待つ」があった場所で実行する。

「◯まで待つ」を「◯まで繰り返す」に差し替えよう。

で、このスプライトのコスチュームの一番下に「more」っていうコスチュームがあると思う。

表示させたいのは会話ボックスの下の方だよ。

ただ表示するだけではなく、滑らかに点滅するような演出も付け加えたい。

スペースキーを押すって分かりやすくなったかテストする

むちゃくちゃ分かりやすいやんけ！驚いたで！

まとめ

Scratchで長いセリフをエレガントに表示・切り替える会話システムを作る手順を解説しました。

• 自動改ページの仕組み
  • 「ずっと」ブロックでセリフの位置を監視。
  • 文字が会話ボックス下端に達したら、スペースキーが押されるまで待ってページをリセット。
• セリフの削除と重なり防止
  • メッセージ「会話ボックスの文字を消す」を作り、送って待つブロックで確実に文字を消去。
  • 前のセリフを消してから次のページを描画することで、重なりを解消。
• 表示・退場のエフェクト
  • 変数「ターゲットX」「ターゲットY」を活用して、文字を滑らかにスライド表示。
  • 消えるときもフェードアウトなどのエレガントな演出を付与。
• 操作ガイドの追加
  • 「スペース押してね」などの案内を下部に点滅表示し、プレイヤーが直感的に次のセリフへ進めるよう改善。

仕上がりのポイント

単に文字を表示するだけでなく、
整理されたレイアウト＋演出＋操作ガイドの三拍子が揃った会話システムに進化。
これにより、ゲームやアニメーション作品をより魅力的で他と差がつく仕上がりにできるね。

次回は、会話をスキップさせる実装もやっていく。スキップできないと2回目以降のプレイがしんどかったり、せっかちな人にはプレイしてもらえなかったりするから、けっこう大切な機能だったりする。一緒にやっていこうぞ。