RPGっぽい会話ボックスの作り方（動く文字）①

スターター作品

なし

今回の完成サンプル

なし

今回のゴール

• スターター作品をリミックスして日本語文字スプライトを使えるようにする。
• 200文字以上ある日本語フォントの横幅を自動で計算し、
  文字ごとに間隔をそろえて正しく表示できる仕組みを作る。
• 横幅データをリストで管理し、どの文字でもズレなく使えるようにする。
• **処理の高速化（爆速化）**と調整値を利用した補正を組み込み、
  実際のRPG風の文字表示に耐えられるプログラムを完成させる。

つまり、「日本語の文字をスクラッチ上で自然な間隔で並べられる、実用的な“文字描画システム”を完成させる」これがゴールです。

まずはスターター作品をリミックスして始めよう。

スターター作品にはすでに日本語の文字一覧がコスチュームとして用意されているよ。どんなフォントか軽く見ておいてね。

スプライト「文字」

よし、ではスプライト「文字」を開いていこう。

ためしにこんな感じのブロックを組んでみて。

文字の重なりを解決したい

ブロックをクリックすると文字が出るはず。何回かクリックしてみよう。

うん、まぁ出たね。でも文字が重なってしまっているよ……X座標をずらす値を変えてみよう。90にしてみる。

またクリックしてみる。

おお、いい感じだ！90こそ正解だったのだ！解決したぜ……いやいや、待てよ。ねんのため別の文字でも試してみよう。

そうだな、1にしてみようか。

これで何回かクリックしてみると……

あー！文字の間隔がすごい開いてしまった！ソーシャルディスタンスかよってくらい開いてて、安全対策バッチリ！じゃなくて、これはどういうことだ……？

文字によって幅が違う

考えてみたら当たり前だけど、文字によって横幅は違う。

「あ」と「１」では横幅がぜんぜん違うし、「あ」と「ぁ」だって違う。ってことは……え、まさか……いやそのまさかです。１文字ずつ横幅を計算してずらす座標を決めないとってコト！？ これを200文字以上にやるとか無理。しかもスクラッチでは文字のサイズ（大きさ）を変えることができるから、そうしたら事前に人間が計算するのはガチで無理。

文字の横幅を自動で計算する

じゃあプログラミングで自動で計算しましょうよってことになる……うん、でもどうやって？

はい、できます。スクラッチで文字の横幅を自動で計算する方法教えちゃいます。いきなりですけど、結構な奥義です。

変数「ヨコ幅」を作る

画面の端から……ひょっこりはん！

文字の横幅を計算するロジックはこうだ。

これをプログラミングにするとこうなる↓

あとはクローンをこのヨコ幅ずつ移動させるようにしよう。

クリックしてみると……

うん、ピッタリ半分のところで重なっているね！そしたら単純に2倍すれば文字のサイズは算出できるよね。まぁそこはあとでもいいので、先にこの文字のハーフサイズをリストで管理する仕組みを作っておく。

リスト「★文字のハーフサイズ」を作る

なにせ文字数が200以上あるから、リストで管理するのがいいよね。「全てのスプライト用」のリストと分かるように★から始めるのがマイルール。

文字の数だけ処理を繰り返す

「文字の数、といわれても今後変わるかもしれないから自動でコスチュームの数をカウントしたい」そんな世の中のスクラッチャーのわがままを叶える裏技、あります。

最後のコスチュームにする裏技

このブロックの組み合わせでコスチュームの数が分かるぞ！

これは「空白の四捨五入」っていう値をコスチュームにセットすることで、なぜか最後のコスチュームが指定されるというスクラッチの特徴を活かした技だ。このあとで「コスチュームの番号」ブロックを叩けばコスチューム数が自動で算出できる。

実際、最後の文字が選ばれていることを確認しよう。

スターター作品なら「版」という漢字がラスト

うん、この技も使える！クククッ、またレベルが上ってしまいましたね、魔王様。（謎）

この技を活用して↓こんなかんじでループ（繰り返し）処理を作ろう。

さらにさっき作ってあったフォントの横幅を自動計算するロジックをループの中に移動しよう。

こんなかんじ！↓

ラストに変数「ヨコ幅」をリストに入れて完成。

横幅が自動で算出されるかテストする

おお！いい感じに文字のサイズが追加されている！

いいね。

……遅いけどｗ

文字のヨコ幅の計算を爆速にする

遅すぎる！200文字以上あるのに、こんなの待てないよ！

なら爆速にしましょうか。

定義「文字の幅を測る」を作る

再描画なし、で作る。

さっき作った計算ループにガチャコンっ！とくっつけて、ついでに大きさをズームによって変えるブロックを追加する。これは掛け算だよ。

ラストにも追加する。今度は割り算だから注意してね。

そして変数「ヨコ幅」にもズームを反映させて、リストに入れる際には「調整値」も反映させる。

使ってみる

ズームを2にしておこう。この値の意味だけど、文字の大きさが小さいとスクラッチでは正確に計算がしづらいから、小さい文字でもちゃんと測れるように一時的に文字を大きく（ズーム）しておく、という意味がある。とりまズームは2でいいかな。文字のサイズはまぁ85くらいにしておこうか。

これで定義ブロックをクリックしてみよう。すると……

おお、リストにズラッと文字の横幅が入った！これで完成かな、と思いきや何やら変な挙動になるケースがある。

隠すブロックを追加してからこの定義ブロックを叩いてみて。

そうするとなぜか文字のサイズがプラス0.5されている（スクショは-0.5になってる……m(_ _)m）

調整値を使う

この謎はよくわからないｗ グリフパッチさんも「なんでだろねｗ」って言ってるので放置しよう。それより調整値を使って値を補正してしまうのが早い。

調整値にマイナス0.5を入れてクリック。すると

ナイス、さっきと同じ値になったね。

最終確認テスト

デバッグ用のこのブロックの組み合わせを作って、いろんな文字を並べてみようか。とくにリストから文字の横幅を取り出す（上から2つ目）は注目。こうやって文字の幅が使える。

ブロックを叩くと大小さまざまな文字がしっかり間隔をあけて並ぶことが見て取れる！

仕上げる

緑の旗が押されたときを追加しよう。

文字の大きさを一定にするために最初に計算するコスチュームを指定する。そして最後にまたそのコスチュームに戻す。

なぜかこうすると調整値に数字を入れなくても文字の幅がちゃんと計算されるようになるから、さっきの調整値もゼロに戻しておこう。もしまた何かズレがあったら使えるから、引数自体は残しておこうか。

まとめ

今回の仕組みを作ることで、日本語の文字でも一文字ずつ横幅を自動で計算し、バランスよく並べられるようになりました。200文字以上あってもリストに登録しておけば自在に扱えるし、ズームや調整値を工夫することで処理も爆速化できます。

これで、RPG風のセリフやシステムメッセージなど、日本語の文章をスクラッチで自然に表示できる基盤が整いました。

でもまだ文字の場所が会話ボックスの外側にあるし、課題も残っているね！次回以降にチャレンジしていくからブクマしておいてね。