スクラッチコーチキャンプ スクラッチで使える無料素材集
  • 素材
  • 修行
  • はじめての方へ
  • スクラッチゲームの作り方

    RPGっぽい会話ボックスの作り方⑤

    RPGっぽい会話ボックスの作り方⑤
    この記事は スクラッチコーチで掲載されているオリジナル記事 のバックアップです。
    スターター作品
    なし
    今回の完成サンプル
    なし

    今回のゴール

    • スプライト「キャット」に**/speaker コマンド**を追加して、会話中に話者を切り替えられるようにする。
    • スプライト「ふきだし」と「文言」に必要な改修を加え、無駄な改行や半角スペースの欠落などのバグを修正
    • セリフが終わったあとにふきだしが自動的に消え、会話が正しく終了する仕組みを完成させる。

    スプライト「キャット」にコマンドを追加する

    手始めに話者を切り替えるコマンドを作っていくよ。

    コマンドを書くときのルールは、

    • 必ずスラッシュから始めること
    • 必ず半角スペースで区切ること

    っていう2つを守ろう。

    コマンドに慣れてない人には、ちょっとイメージしづらいよね!マイクラでもコマンドを使ったことがある、っていう人なら分かるかも? でも大丈夫、1つ1つ解説していくから一緒に進めていこう。

    まずは話者(speakerスピーカー)を切り替えるコマンドをセリフに追加してみて。

    /speaker キャット 

    この「キャット」というのは、スプライト「ふきだし」のコスチューム名だよ。

    RPGっぽい会話ボックスの作り方⑤を語るok-scratch ok-scratch

    u003cpu003eもし他のキャラにしたいならコスチュームを追加して /speaker テラ みたいにすればOK。u003c/pu003e

    さらにセリフの途中でナノに切り替わるコマンドも追加しておこうか。

    /speaker ナノ

    スプライト「ふきだし」を改修する

    今度はふきだしにコードを追加していくよ。

    リネーム

    定義名がおかしいので、ちょっと直しておきたい。

    「_話者を追加する」という名前に変えて、1つ目の引数をコマンドに合わせて「speaker」にしておこうか。そうするとコマンドと連動している感じが分かりやすい。

    これからはパッパッとふきだしが切り替わる挙動になるので、最初に「隠す」ようにしておく。

    メッセージ「話者を切り替える」を作る

    イベントを受け取ったらコスチュームを話者の番号にしてから表示しよう。

    RPGっぽい会話ボックスの作り方⑤を語るok-scratch ok-scratch

    u003cpu003e話者の番号を変える処理自体はこのあと実装していくよ。u003c/pu003e

    スプライト「文言」にコマンド対応を追加する

    いよいよコマンドを処理していくぞ。

    定義「一段落ずつ処理する」を改修する

    「ずっと」ループ内に条件ブロックを挿入するよ。

    条件式は少し複雑なので、以下を見て作ってほしい。

    文リストの1文字目がスラッシュで、さらに2文字以上あることを条件式で確認しているよ。

    定義「コマンドを処理する」を作る

    再描画アリで実行するよ。

    とりあえず条件ブロック内から実行する。中身はすべてを止めるにしておいて、ちゃんと定義が動いているかデバッグする。

    プレビュー

    こんな感じですべてが止まると思う!ふきだしも消えてるね。まだメッセージ送ってないからこれでOK。

    文リストの中身を見てみる

    文リストをクリックすると「/speaker」になっていると思う。ナイス。

    次の文字を取得してみる

    定義「_段落から次の文字を取得する」をクリックしてから文リストを確認してみると「キャット」になっている!ナイス〜!

    リネーム

    「_段落から次の文字を取得する」を「_段落から次の文を取得する」にしておこう。

    /speakerコマンドを処理するロジックを組む

    条件式でコマンドが/speakerのときに何をしたいか作っていく。まるっと書いておくから慎重に真似してくれ。

    RPGっぽい会話ボックスの作り方⑤を語るok-scratch ok-scratch

    u003cpu003eイベントは「送る」じゃなくて「送って待つ」にしておいてねu003c/pu003e

    話者が切り替わるかテストする

    プレビューしてみると……

    うん、なんか気になるけどスペース押してみる。

    おお!ちゃんとナノに切り替わったね!スピーカーコマンドは成功しているようだ!

    なんか変

    でもちょっとおかしいよね。無駄な改行が発生している。

    ナノに至っては横幅が極端に短い……。

    バグを直す

    いくつかバグっているから直していく!久しぶりにBBB出動!(BBB……バグ・撲滅・部隊)

    スプライト「ふきだし」

    ここの値が間違っていたぁ!ごめんね。1が正解。

    横幅が極端に短い問題は解決

    でも改行は無駄に発生しているね。

    スプライト「文言」に変数「出力中か」を作る

    文言に切り替えよう。

    このスプライトのみのローカル変数を作る。

    定義「コマンドを処理する」で待機処理に使う

    /speakerのところで使うよ。

    定義「_文字を出力する」ところで1にする

    定義「_ページをリセットする」でゼロにする

    メッセージ「セリフを最初から最後まで出力する」で使う

    改行する前に条件ブロックを追加しよう。

    変数「出力中か」が1、または段落が空白のとき

    無駄な改行が消えたか調べる

    プレビューしてみよう!

    ナイス!元通りに無駄な改行がなくなったぜ!

    続けてナノは……

    おおっとぉ!ナノには改行が残っているじゃないか。なんでナノ!?(寒)

    定義「一段落ずつ処理する」でも出力中か調べる

    ここにも改行処理が使われていたね。ここでもさっきと同じように「出力中か」と「段落」を調べる条件ブロックで「改行する」を囲おう。

    ナノの改行がなくなったかプレビューする

    どきどき……

    よし!直ったナノ!(誰?)

    半角スペースが消えてしまってた

    あ、待って。いつの間にか半角スペースが無効になっている。新たなバグを見つけてしまった。BBBの名に賭けて、バグは一匹残らず駆逐する(それは無理かも?)

    誤)みんなスクラッチ
    正)みんな スクラッチ

    定義「一段落ずつ処理する」から半角スペース処理を除去する

    半角スペース処理を別の場所に移動させるよ。

    定義「_文字を出力する」の最後に移動する

    こっちで半角スペース処理を実行すれば反映される。

    プレビュー

    よし!単なる半角スペースもちゃんと反映されるようになったぁ!

    セリフ後にふきだしが消えるようにする

    今ってセリフが終わってもふきだしが残ってて終わらないから、このままだとゲームやアニメーションに組み込めない。そこで、セリフが終わったらちゃんと会話が終了するようにしていく。

    メッセージ「セリフを最初から最後まで出力する」を改修する

    「ずっと」ループをやめよう。代わりにリスト「★セリフ」の長さの回数だけ繰り返すループに差し替える。中身は一緒だよ。

    そしてチラッとスプライト「ふきだし」を見て、コスチュームに「空白」の名前を持つものがあるかチェックしよう。これを使ってふきだしを消す。

    RPGっぽい会話ボックスの作り方⑤を語るok-scratch ok-scratch

    u003cpu003e実際には何もないコスチュームに着替えさせて「消えたように見せる」処理を作る。幽霊効果や隠すブロックを使うよりも、処理がシンプルになるから今回はおすすめだよ。u003c/pu003e

    出力が終わってから、変数「★話者の番号」を空白にして各イベントを送ろう。

    会話が終わるようになったかテストする

    ここまでの修正なんかもまとめて見ていこう。

    ナイス!ちゃんと会話が終わったし、バグもなさそうだね。ふぅ!

    まとめ

    • /speaker キャット/speaker ナノ といったコマンドを文中に入れることで、話者を自由に切り替えられる機能を実装した。
    • スプライト「ふきだし」には話者番号でコスチュームを切り替える処理を追加し、セリフ完了後にふきだしを自動で隠すコードを組み込んだ。
    • スプライト「文言」では「出力中か」変数を導入し、無駄な改行や半角スペースの欠落を防止
    • これらの修正により、会話がスムーズに切り替わり、最後は自然に終了するダイアログシステムが完成した。

    次回は、もっといろんなコマンドを追加していきたい!たとえば文字の色が変わったり、文字が踊りだしたりするコマンドなんてどう!?

    ブクマよろしくお願いします!という口コミを寄せてくれた方 ブクマよろしくお願いします!
    どんどん追記・更新していくので、ブックマークやシェアよろしくお願いします!