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

    RPGっぽい会話ボックスの作り方④ スキップを実装する

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

    会話をスキップさせることができるかどうかは、スクラッチではかなり大切。スクラッチってセーブがないゲームが多いから、最初のイントロ部分を緑の旗を押すたびに見ないといけない、なんてことも普通にある。せめてサクッとスキップできるようにしておけばストレスなく作品をプレイできるよね!

    やってみよう!

    今回のゴール

    • イントロなどの長い会話を、スペースキーやマウス操作で素早くスキップできる機能を実装する
    • アクションキーと会話スキップ用変数を使って、1文字ずつ出す処理と一気に出す処理を切り替える
    • ついでに定義の命名整理やマジックナンバーの排除など、コードをリファクタして保守性を高める

    スプライト「ふきだし」にアクションキーを作る

    会話を次に進めたり、長押しや連続押しで会話をスキップするためのボタンを決定していくよ。

    ふきだしを選ぼう。

    こんな感じのスペースキーまたはマウスが押されたときの処理をつくるよ。

    RPGっぽい会話ボックスの作り方④ スキップを実装するを語るok-scratch ok-scratch

    u003cpu003eここはキミの作品に合わせてキーを変えてもいいよ。Zで会話を進めるのが合う作品なんかもあるよね。u003c/pu003e

    変数「★アクションキー」

    全てのスプライト用にアクションキーを設ける。

    所定のキーが押されたらアクションキーが1ずつ増えるようにする。1にするのではなくて、1ずつ増えるようにするよ。そうでなければゼロに戻す。

    変数「★会話スキップ」を作る

    アクションキーが押された最初の瞬間だけ会話スキップを1にセットしよう。この値を他の場所で使って、会話を素早くスキップさせていくよ。けっこう大切。

    スプライト「文言」でアクションキーを使う

    次に文言に移ろう。

    「スペースキーが押されたら」ブロックを使っていたところをアクションキーに差し替えていくよ。

    軽くリファクタする

    このタイミングで少しだけコードを洗練(リファクタ)させておこう。

    RPGっぽい会話ボックスの作り方④ スキップを実装するを語るok-scratch ok-scratch

    u003cpu003e複雑で難解なコードがかっこいい、というのは幻想です。シンプルで効率化されたコードこそ美しい、というのがプログラミング界隈では一般論。そのためにもリファクタ(リファクタリング)は大事。u003c/pu003e

    リネーム

    定義「文字を出力する」は接頭語にアンダーバーを付けておきたい。これは一目で「再描画なしで実行される定義」って見分けるためのコツだよ。

    マジックナンバーを駆逐する

    半角スペース用に使っていたx座標を10ずらす、というコーディングの10という数字が謎すぎるので、しっかり意味のある表現に変えておきます。ここではフォントの1つ目の横幅としておきましょう。

    タテにずらす基準値を変えておく

    上でフォントの1つ目の横幅を半角スペース用に使ったよね。もしかしたら半角スペースを広げるために1つ目のフォント(コスチューム)を横長にしたり、逆に細くしたりする将来がくるかもしれない。

    そうするとY方向にずらすときにもフォントの1つ目の横幅を使っていると、横幅を変えたら縦幅も変わってしまった、なんて事態に陥る。

    そうならないように、改行するところではフォントの2つ目のサイズを使うようにしておこう。ついでにもう少し行の間隔を空けておこうと思う。

    RPGっぽい会話ボックスの作り方④ スキップを実装するを語るok-scratch ok-scratch

    u003cpu003eグリフパッチさんの動画では英語だから、文字の多くが「小文字」なんだよね。だから-5でもゆとりがあったけど、日本語だと基本的に大きな文字が多いので、もう少し行間を空けておいたほうが見やすい。u003c/pu003e

    定義「_ページをリセットする」で会話スキップを初期化する

    ページがリセットされたらスキップの状態も元に戻したほうがいいよね。

    スキップ対応のコーディング

    さて、準備は整ったので、ここからはがっつりコーディングしていく。日本語対応で一時的に変えた部分も戻したり、戻しつつまた変えたり、ややこしいけど一緒に見ていきたいと思う。しっかり付いてきてくれ!

    定義「_段落から次の文字を取得する」

    「ずっと」ブロックでまるっと囲う。

    定義「文字の描画を管理する」

    も〜、似てる名前が多くてカオスレベルが爆上がりなんですが、再描画ナシの定義を1つ増やす。

    こんな感じで整えてほしい↓

    RPGっぽい会話ボックスの作り方④ スキップを実装するを語るok-scratch ok-scratch

    u003cpu003e一段落処理する▶文字の描画を管理する▶文字を出力する、っていう構造にしておきたいu003c/pu003e

    このままでは意味がないので、文字の出力をスキップに対応した形式に変えるために、以下のようにコーディングしてほしい。

    • スキップ中なら、文リストを一気に出力する
    • スキップ中ではないなら、1文字ずつ出力する

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

    さっき付けた「アクションキーが0になるまで待つ」ブロックを外しておこう。このほうが操作感がいい。

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

    [space]っていう文字は、会話スキップ中でない場合は一瞬遅れて表示される方が小気味いい。

    会話がスキップされるかテストする

    最初の文字の出方と、後半の文字の出方に注目!しっかりスキップされているぞ。

    すばらしいぜ。実はこのスキップ機能は文字のエフェクトを実装する段階でもめっちゃ役に立つ

    たとえば文字の表示を1秒遅らせる、みたいなエフェクトを実装するんだけど、そのときにもスキップすればエフェクトを飛ばせるように実装したりできる。超すごいからお楽しみに。

    まとめ

    • アクションキー変数:押すたびに数値を加算する形式にして、押された瞬間を検出
    • 会話スキップ変数:1にセットすることでスキップ中を判定し、文字表示を一気に出力
    • リファクタ:定義名の整理、マジックナンバーの置換、縦横サイズの独立管理で将来変更に強い構造へ
    • 描画定義の改修:「_段落から次の文字を取得」「文字の描画を管理」などを追加し、スキップ中はまとめて描画する仕組みに
    • 体験向上:スペースキー表示のタイミングやリセット処理を調整し、操作感を滑らかに

    この機能により、イントロを何度も見る必要がなくなり、プレイヤーがストレスなく作品を楽しめます。今後の文字エフェクト追加でもスキップ機能が活きてきます。

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