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

RPGっぽい会話ボックスの作り方④ スキップを実装する
グリフパッチ(動画)
ok-scratch(解説)

和訳解説は動画作者のグリフパッチさんご本人から許可をいただいて掲載しております。
チャンネルはYOUTUBE ( by griffpatch )からどうぞ。

会話スキップ機能を追加して、イントロを何度も見るストレスを解消。アクションキーやスキップ用変数の実装、コード整理のポイントを一気に学べます。
スターター
プロジェクト
リミックス用プロジェクトへ
難しさ

任意)自分の作業中のスクラッチ作品URLを記録しておこう!再開するときに便利だよ。

LOADING...

※ この記録は今使ってるPCに保存されます。別のPCで作業するときは表示されません。

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

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

やってみよう!

今回のゴール

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

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

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

ふきだしを選ぼう。

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

ok-scratch ok-scratch

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

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

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

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

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

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

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

次に文言に移ろう。

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

軽くリファクタする

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

ok-scratch ok-scratch

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

リネーム

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

ok-scratch ok-scratch

接頭語で変数やブロック定義などの種類をパッと見で分かるようにする方法は、コーディング規約としてまとめてあるよ。興味がある人はチェックしてね。

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

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

  • マジックナンバーとは? マジックナンバーとは?

    マジックナンバーというのはカンタンに言うと「パッと見では何を意味しているのか分からない数字」のこと。例えばいきなり「変数を10ずつ変える」とあったら「この10って何?いったいどこから来たの?勝手に変えていいの?」とよく分からないけど、10をジャンプ力という変数に入れておけば「10はジャンプ力ってことね」と見ただけで分かるようになる。

    マジックナンバーが多いプロジェクトは、リミックス難易度が高くなりがち。後日、自分で修正するときも困るから、どこかのタイミングでマジックナンバーを変数化しておくと便利。

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

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

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

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

ok-scratch ok-scratch

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

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

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

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

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

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

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

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

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

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

ok-scratch ok-scratch

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

このスクラッチゲームの作り方への質問受付中! このスクラッチゲームの作り方への質問受付中!
チュートリアルで分からないことがあったらスクラッチAI「アスクラッチ」で何でも聞いてみよう!キミの作品の「中を見て」具体的にバグの調査をAIが手伝ってくれるよ!
アスクラッチで質問する
ブクマよろしくお願いします! ブクマよろしくお願いします!
どんどん追記・更新していくので、ブックマークやシェアよろしくお願いします!

スクラッチゲーム攻略

スクラッチゲーム

    • 厳選されたスクラッチ人気作品リストがレビュー付きで楽しめます
      趣味に関するスクラッチ作品例
      勉強になるスクラッチ作品