norinori1 - Game Developer & Creator logo
← News 一覧に戻る
UnityのTextMeshPro FontAssetCreatorをScratchで再現した話 cover

UnityのTextMeshPro FontAssetCreatorをScratchで再現した話

2026年3月30日

Release
X でシェア
「Scratchの変数表示、ダサくない？」 その一言が、すべての始まりだった。

はじめに：Scratchで文字を「ちゃんと」表示したい

Scratchでゲームを作っていると、必ずぶつかる壁がある。

スコアや台詞を表示したいのに、デフォルトの変数表示がダサい問題。

リストや変数をそのまま画面に出すと、いかにもScratchっぽい無骨なUIになってしまう。もっとゲームらしく、任意のフォントで、プログラムからきれいに文字を出したい。

そこで以前、「Text Display」というScratchプロジェクトを公開した。文字をスプライトのクローンで表示する仕組みで、一定の需要はあった。

  • --でも、重かった。 結局あまり使われなかった。

「いつかリメイクしたい」という気持ちを数年間ずっと持ち続けていた。

そしてついに動いた。AIと一緒に開発してみよう、と。

何を作ったか

Scratch Font Asset Creator（以下 SFAC）は、任意のフォントを使ってScratchで文字を表示できるスプライトを持つ .sb3 ファイルを生成するWebツールだ。

バニラScratch（拡張機能なし）で動作する。GitHub Pagesでブラウザから使えるので、インストール不要。 リポジトリはここから :

🔗 GitHub - norinori1/Scratch-Text-Asset-Creator ツールはここから : https://norinori1.github.io/Scratch-Text-Asset-Creator/

UnityのTextMeshProをScratchに持ち込む

このツールの設計モデルにしたのが、UnityのTextMeshPro（TMP）に付属するFont Asset Creatorだ。

TMPのFont Asset Creatorは、フォントファイルからゲームで使えるテクスチャアトラスを生成するツール。そのUIとUX—「フォントを入れたら即使えるアセットが出てくる」という体験—をScratch向けに再解釈した。

違うのは、使う人のプログラムスキルが小学生から上級者まで幅広いという点。そこでSFACは、3段階のテキスト入力モードを用意した。

3段階のテキスト入力モード

🟢 パラメータブロック式（初心者向け）

テキストを表示する [Hello!] x: [0] y: [0] サイズ: [100] 色: [0]

「テキストを表示する」カスタムブロックに色・サイズ・座標などの引数を渡すだけ。直感的で、Scratchをはじめたばかりの小学生でも使える。

🟡 リッチテキストインライン式（中級者向け）

<c=100>赤文字</c>で<b>太字</b>も使える

TMPライクなタグをテキストの中に直接書く方式。動的なテキスト（スコア、会話など）でも使いやすく、細かな見た目の制御が可能。

🔴 コンソールスクリプト式（上級者向け）

「文字表示コンソール」リストにCSSやYAML風のスクリプトを書いて実行する方式。最も柔軟で、凝った演出にも対応できる。

3つのモードが選べることで、小学生でも使えながら、プログラムに慣れた人にも物足りなくならない設計になった。

技術的な仕組み

SFACはNode.jsベースのWebアプリで、GitHub Pages上で動作する。

処理の流れはざっくりこうなっている：

① ユーザーがフォントファイル＋設定を入力
        ↓
② Canvas API でグリフ（文字の形）を1文字ずつ画像として生成
        ↓
③ グリフ画像 + Scratchブロック定義を project.json に組み立て
        ↓
④ JSZip で .zip に圧縮 → 拡張子を .sb3 にリネーム
        ↓
⑤ ダウンロード → Scratchで読み込んで使える！

旧版「Text Display」からの改善点

一番苦労したのは「リッチテキストの実装」

正直に言う。リッチテキストのパーサーは、半分コンパイラを書くような作業だった。

タグを検出して、スタック管理して、ネストを解釈して、Scratchのブロックに変換する—これを手で全部設計するのはかなりしんどい。

AIもここではてこずっていた。 何回か「修正してください」とプロンプトを投げ続けてようやく完成した。

でも、AIがいたからこそ実装できた機能だ とも思っている。リッチテキストとYAML式スクリプト入力は、AIのサポートなしだったら今回のスコープには入れていなかったと思う。

AIと一緒に開発した話

今回は最初からAIを開発パートナーとして使った。

  • 仕様の壁打ち
  • 複雑なパーサーのコーディング
  • バグの修正と原因の特定

特に「リッチテキスト実装してくれ」という指示に対して、AIが実際にScratch上で動くパーサーを書き上げたときは正直驚いた。

「あいつリッチテキスト実装しやがったぞ、しかもScratchで！！」

開発期間は3日間。AIなしでは絶対にこの速度では作れなかった。

今後の展開

現状、機能は充実しているが、Scratch側のUI/UXがまだ複雑という課題がある。

初めて .sb3 を読み込んだユーザーが「このブロックどう使うの？」となりやすい。定義ブロックのパラメータ数を減らすなど、Scratch上での使いやすさをさらに改善していきたい。

あと個人的には、ノベルゲームエンジン的な使い方ができると思っていて、実際そういった用途に使ってもらえたら嬉しい。

まとめ

Scratchで本格的なテキスト演出を作りたい人は、ぜひ使ってみてほしい。

そして、「AIと一緒に作ってみたい」と思っているScratcherへ—

AIはすごいぞ。マジで。

#Scratch #GameDev #個人開発 #AI活用 #Node.js

Other News