RPGっぽい会話ボックスの作り方⑥ 多彩なコマンドを実装する

RPGっぽい会話ボックスの作り方⑥ 多彩なコマンドを実装する
グリフパッチ(動画)
ok-scratch(解説)

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

Scratchで文字色・エフェクト・待機を自在に操る続編チュートリアル。/rや/colで色変更、/~で波打つ動き、/waitで演出の間を調整。会話をもっと表情豊かにする高度なコマンドの実装方法を解説。
スターター
プロジェクト
リミックス用プロジェクトへ
難しさ

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

LOADING...

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

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

今回のゴール

  • 文字色コマンドの実装
    /r(赤)、/w(白)、/col 数値(任意の色)を使い、会話中の文字色を自由に切り替えられるようにする。
  • 特殊エフェクトの追加
    /~(ウェーブ)、/#(ブルブル)など、文字を動かす表現を組み込み、演出力を大幅にアップ。
  • 待機コマンドの実装
    /1(1秒待つ)、/wait 数値(指定秒数待つ)で、セリフ表示の間を演出し、感情やテンポを調整する。

こんなワクワクコマンドを実現できるぞ!

一緒にやってみよう!

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

キャットを開こう。

文字の色を変えるコマンド「/r」「/w」

文字の色を赤くする「/r」と文字色を白に戻す「/w」を追加してみる。

やぁ、 /r みんな /w スクラッチ 初心者にも……
ok-scratch ok-scratch

このケースだと「みんな」だけ赤い文字になって、それ以降はまた白い文字に戻っていれば成功だよ

スプライト「文言」に文字色コマンドを実装する

コマンドを処理するのは文言スプライトだったね!

定義「コマンドを処理する」に条件ブロックを追加して、各コマンドのときだけ実行されるコードを作ってみよう。色と明るさを変えているだけだよ↓

文字の色が変わったかプレビューする

おお!「みんな」だけ赤くなったね!成功だぁ!コマンド簡単じゃん!

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

他にもコマンドを増やしてみよう!

こんどは引数を持つコマンドを作ってみるよ!

/col 160

colはcolorカラーの略だからこれは、文字の色を160にする、っていうコマンドになる。

ok-scratch ok-scratch

文字の色を白に戻すコマンドも忘れずに

スプライト「文言」にcolコマンドを実装する

具体的な実装はこちら。

定義「コマンドを処理する」に追加

さっきと同じ場所に条件ブロックを追加して、定義「_段落から次の文を取得する」を使って引数である160も取得するよ。

文字の色が160になったかプレビュー

オレンジ!いい感じに変わってるね。これでもう何色でも自由自在に変えることができるってわけだ。

赤や白みたいに、キミのゲームやアニメーションでよく使う色は別途コマンド化しておいて、例外的な色はcolで調整すれば運用が楽になる。主人公のテーマカラーがブルーなら「/b」みたいなコマンドを用意しておくと楽だよね。

ちなみにcolの引数をゼロにしたらどうなるかな?

/col 0

こうするとコスチュームに書いてある文字の色と同じになるよ。今回のスターター作品をリミックスしている人は緑になると思う。

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

更に追加してみよう。

今度は文字がダンスするように動くウェーブコマンドを追加してみる。色とは違って文字に動きをつけることで、雰囲気のある演出ができる。

今回は「/~」を使うよ。この波線みたいなのはチルダと呼ぶ。

/~ ゲームクリエイター /~ って

今回は特殊な動きを伴うのでコマンドの書き方も特殊。2回同じコマンドを書くよ。1回目が「ここから」という意味で、2回目が「ここまで」という意味になる。

スプライト「文言」にウェーブコマンドを実装する

実装は文言!

変数「エフェクト」を作る

定義「コマンドを処理する」にコマンドを追加する

コマンドの長さが2なら特別なエフェクトを伴うコマンドであるという仕様にします!

で、2文字目(つまり今回は~《チルダ》)を変数「エフェクト」に入れておく。

ok-scratch ok-scratch

1回目のエフェクト(=ここから)がすでに変数に入ってたら、2回目のエフェクト(=ここまで)で変数を空白に戻す、という動きだよ。

クローンされたとき

特殊な動きはここで定義していく。Y座標の動きが複雑だから組み方も次の次に載せてある。

Y座標の動かし方

タイマーを使った無限に変化する値を作る方法は、スクラッチ中上級者の間では有名な技の1つ。もし初めて見たならこれを機に覚えておこう。タイマーとsinブロックを使うところがミソ。

完成形はこちら↓

文字がウェーブするかテストする

さて、動くかな……。

きたぁ!シンプルに色を変えるだけではなく、こんなに複雑な動きも制御できた!これは会話機能の革命と呼んでもいいくらいレボリューション度マックス!

ok-scratch ok-scratch

これは静止画とスクラッチとを明確に違うものにする機能とも言えるね。たとえばマンガ風のスクラッチ作品って人気だけど、文字に動きをつけられるようにしたら……なかなか刺激的だと思わない?マンガだとふきだしの場所がコロコロ変わるけど、それも座標で指定できるから何とかなりそうだよね。誰か作ったら教えてね\(^o^)/

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

今度は文字をブルブルさせる。怖がってるときや、興奮しているときや、寒いときなんかにピッタリのエフェクトだよ。

ってなりたい /# シゴトのランキングで /# TOP……

今回も特殊な2文字コマンドだから2回コマンドを書くよ。今回は#《ハッシュ》を使う。

スプライト「文言」にブルブルコマンドを実装する

実装はこっちだね。

クローンされたとき

条件ブロックで囲んで、ブルブル用のコーディングを書いていこう。

ブルブルするかテストする

ブルってんね〜( ´∀`)bグッ!

ちゃんと片付けも

エフェクトを空白に戻しておかないと、予期せず文字がブルブルしちゃうことがあるから、ここでエフェクトに空白を入れておこう!

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

今度は文字が表示されるタイミングを調整する待機コマンドを作るよ。

/1 スクラッチ /1 初心者 /1 でも分かる…

スプライト「文言」に1秒待つコマンドを実装する

実装はまたまたこちら。

定義「コマンドを処理する」の一番上に条件ブロックを追加しよう。

定義「出力を待機する」を作る

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

こんな感じで置こう。

ok-scratch ok-scratch

スクラッチの標準ブロックである「◯秒待つ」ブロックだけで実現しようとすると、スキップが効かなくなるんだ。

具体的な実装はこちら。こうすればスキップされてるときは出力を待機せずにどんどん飛ばせる。ユーザーフレンドリーな実装だよ。

文字が遅れて表示されるかテストする

おお、文字の表示が1秒間隔で遅れているね!成功だ。これで「間」が大切になる会話にも対応できる。漫才とかにピッタリだし、感動的なシーンとか、エモい感じにしたい場面では効果的に使えそう!

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

今度は好きな時間だけ待機命令を出せるようにする。こうすれば長い時間文字の出力を待機させることができるっていう感じ。colの発想と似てるかも。

/wait 3 スクラッチ……

/colのときと同じく、引数をもたせるよ。

スプライト「文言」に待機コマンドを実装する

もうマスターしたね、実装はこちら。

定義「コマンドを処理する」に待機コマンドを追加する。引数も取得して、さっき作った定義「出力を待機する」に渡すだけ。イージー!

長い時間でも出力が待機されるかテストする

いやっふーー!すごいイロイロなコマンドを追加成功したね!すばらしいよ!よくぞここまでたどり着いてくれた。

まとめ

  • 色を自由に変える
    /r/wで赤・白、/col 160のように数値で色指定が可能に。テーマカラーを一括管理したり、例外色はcolで対応できる。
  • 動きを付けるエフェクト
    /~で波打つウェーブ、/#で震えるブルブルを実装。タイマー+sin関数を活用して滑らかに動く演出を作成。
  • 演出の間を操る
    /1/waitコマンドで文字の出現タイミングを自在にコントロール。漫才や感動シーンなど、間を活かした会話が可能に。
  • これらのコマンドを組み合わせることで、見た目も動きも表現豊かな会話システムが完成した。

次回はリファクタリング(整理整頓)して、実際にどうやってこの会話ボックスを作品に組み込むのかを見てみたい!これはグリフパッチさんの動画にはない特別編になるよ。

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

スクラッチゲーム攻略

スクラッチゲーム

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