ゲームUIアトリエ実践：会話画面をつくり、ゲームへ持ち込む
無料ブラウザ版のプリセットから、JSON・PNG・ZIPの保存、ティラノスクリプトへの配置、Unity・Godotへ渡す作業まで。実際の出力に沿った手順と確認例です。
会話の窓をもう少し紙らしくしたい。選択肢を押しやすくしたい。ゲームUIアトリエ（Game UI Atelier）の無料ブラウザ版では、プリセットから一画面を選び、文字・色・形を調整して持ち帰れます。
ここでは、小さな会話画面を作ってティラノスクリプトへ持ち込む流れを中心に、保存するファイルの違いと、エンジンへ渡した後に必要な作業を整理します。
最初に決めるのは「どこで読んでもらうか」
まず、短い会話に使うのか、長い文章を続けて読むのかを決めます。文字を大きくしたとき、名前欄を付けたとき、長い選択肢を入れたときに、画面からはみ出さないかを見ていきましょう。
- 無料版を開き、プリセットを一つ選びます。迷ったらガチャの候補を並べ、近い雰囲気を選べます。
- 「デザイン調整」でメッセージウィンドウ、選択肢・ボタン、テキスト・名前欄を確かめ、色・形・文字を調整します。
- 短い台詞だけでなく、長い文章と長い選択肢でも確認します。背景を淡くした場合は、本文やボタンの文字も読める組合せにします。
- 大きく変更する前に、編集用のJSONを手元へ保存します。
画面の各機能と保存の案内は、詳しい使い方ガイドからも確認できます。
JSON・PNG・エンジン向けZIPは、役割が違う
| 持ち帰るもの | 使いどころ | 残しておきたいもの |
|---|---|---|
| JSON保存 | 無料版の「JSON読込」から、後日デザインの編集を続ける | 元の編集データとして保管 |
| PNG画像出力 | 画像としてUIを使う、見本を共有する | 再編集のためのJSONも一緒に |
| エンジン向けZIP | ティラノスクリプト、Unity uGUI、Godot 4、Web / CSSへ持ち込む | 同梱README・導入手順・出力時の診断 |
PNGでは、UIのみ・ゲーム画面・比較シートの出力範囲を選び、透過や倍率を設定できます。画像を保存しただけでは、無料版の編集状態をJSONのように復元できません。JSONは作業の控え、PNGは画像、ZIPは利用先へ渡すデータ、と分けておくと扱いやすくなります。
ティラノスクリプトへ、一画面を持ち込む
無料版の「エクスポート」でTyranoScriptを選び、生成したZIPを解凍します。作業前に、利用先のゲームプロジェクトを退避してください。以下は現行の出力に同梱される手順に沿った流れです。
- ZIP内の
data/others/plugin/game_ui_atelierフォルダーを、ゲームの同じ場所へコピーします。init.ksがそのフォルダー直下にあれば配置を確認できます。 data/scenario/first.ksの画面初期設定の後、本文やタイトルへ移動する[jump]より前に、[plugin name="game_ui_atelier"]を置きます。- 適用したい
[glink]にcolor="gua"を指定します。作品で使っている文字や分岐先は保持します。 - 利用先のプロジェクトで起動し、会話、名前欄、選択肢、標準メニューを確認します。
次は、小さな動作確認用の例です。すでにあるゲームへ入れる場合は、既存のラベルや分岐先を、この見本の名前に一括置換しないでください。
[plugin name="game_ui_atelier"]
[glink color="gua" text="次の文章へ" target="*gua_quality_example_next"]
[s]
*gua_quality_example_next
[cm]
ここから、次の文章です。
[p]コピーするのはプラグインのフォルダーです。ゲームの data 全体、Config.tjs、既存シナリオ全体を置き換える手順ではありません。同名のプラグインを更新する場合も、手動で変更した内容がないか先に確かめてください。
既存の独自メニューを残すとき
出力には、適用範囲を選ぶ設定があります。例えば [plugin name="game_ui_atelier" system="false"] は既存の独自メニューを残すための指定です。詳しい設定はZIP内のREADMEで確認できます。画像を使う [button] や [link] など、すべての種類のボタンが自動で同じ見た目になるわけではありません。
Unity・Godot・Webへ渡す場合
| 出力先 | 出力後の最初の作業 | 作品側でつなぐもの |
|---|---|---|
| Unity 6 / uGUI | Assets/GameUIAtelier/Free を同じ場所へコピーし、Tools > Game UI Atelier > Import Free UI でPrefabを作成 | ButtonのOn Click、ゲーム固有のセーブ・ロードなど |
| Godot 4 | GameUIAtelier をプロジェクトへ入れ、出力された UI.tscn を使うシーンへ配置 | Buttonのpressedシグナルと、作品の進行処理 |
| Web / CSS | 出力のHTML・CSSとREADMEを確認し、使いたい画面へ組み込む | ボタンを押した後の処理や、作品の状態管理 |
Godot出力にある project.godot は動作確認用のサンプルです。作成中のゲームの同名ファイルへ上書きしないでください。エンジン出力はUIを組み込むためのデータで、ゲームの進行や保存機能まで自動で完成させるものではありません。
Webの見た目と、エンジンの部品で表現できる範囲にも差があります。背景ぼかし、装飾、フォント、影などは、出力先で確認します。生成したファイルの内容確認と、実際のエンジンでの動作確認は分けて行ってください。
困ったときに、先に見るところ
- ティラノの選択肢だけ変わらない：プラグインの配置と読込順、対象の
[glink]にcolor="gua"があるかを確認します。 - Unityで日本語が四角になる：導入画面で日本語字形を含むTMPフォントを指定します。フォントファイル自体は出力に同梱されません。
- Godotで背景や装飾が違う：CSS表現の一部はネイティブThemeへ近似されます。READMEにある対応範囲と、利用先のViewport設定を確認します。
- 別の端末で続きが見つからない：ブラウザ内の保存と来館者IDへの保存は別の操作です。まず手元のJSONを無料版へ読み込めるか確認します。
無料版とWindows版CREATIVEについて
この手順は公開中の無料ブラウザ版を対象にしています。編集・端末への保存・書き出しは会員登録なしで利用でき、サイトへの保存や公開投稿には来館者IDを使います。
Windows版CREATIVEは、現在のサイトの案内では公開準備中です。編集対象とJSON形式が異なり、無料版と相互にJSONを読み込めません。機能や公開状況はツール紹介の最新案内で確認してください。
次は、長い文章や小さな画面でも読む位置を見失わない工夫を、かこむくんの使い方と設計から見てみましょう。
編集：きつねのてぶくろ図書館