【技術解説】ティラノスクリプトの動作原理とディレクトリ構造
ティラノスクリプトは、HTML5/JavaScriptをベースとしたゲームエンジンです。ブラウザ技術（Web標準）を利用しているため、その仕組みは一般的なWebサイトやWebアプリに非常に似ています。
ゲーム起動のメカニズム
ゲームが起動してから画面が表示されるまでには、以下の3つのステップがあります。
1. 器の生成（index.html）
ブラウザが index.html を読み込み、ゲーム画面の土台となる div 要素（#tyrano_base）をメモリ上に確保します。
2. エンジンの初期化（Config.tjs）
JavaScriptが動き出し、設定ファイルである Config.tjs を読み込みます。ここで画面サイズ、フォント、システムルールなどの「基本仕様」が確定します。
3. シナリオの実行（data/scenario/first.ks）
エンジンが最初のシナリオファイルを読み込み、そこに書かれた命令（タグ）に従って、tyrano_base の中に画像や文字を動的に追加していきます。
ディレクトリ構造と役割
プロジェクトフォルダ内は、大きく分けて「エンジン部分」と「データ部分」に分かれています。
| フォルダ/ファイル | 役割 | 開発時の重要度 |
|---|---|---|
index.html |
ゲームの入り口。画面を表示する「器」。 | 低（基本変更しない） |
data/scenario/ |
ゲームの本編（台本）。.ks ファイル群。 |
極めて高 |
data/system/ |
Config.tjs など、ゲーム全体の基本設定。 |
高 |
data/fgimage/ |
立ち絵などのキャラクター画像。 | 中 |
data/bgimage/ |
背景画像。 | 中 |
tyrano/ |
ティラノスクリプトの本体（JSプログラム）。 | 低（触らない推奨） |
なぜローカルサーバーが必要なのか？（CORS制限）
ファイルをダブルクリックしてブラウザで開く（file://）と、エラーが出ることがあります。これはブラウザのCORS（Cross-Origin Resource Sharing）というセキュリティ機能によるものです。
- 制限内容: 「自分のPC内の別フォルダにあるファイルを、勝手にJavaScriptから読み込んではいけない」というルール
- 解決策: Pythonの
http.serverやティラノスタジオなどの「ローカルサーバー」を通すことで、ブラウザに「これは正規のネットワーク通信である」と認識させ、ファイルの読み込みを許可させます
開発環境の使い分け（VS Code vs ティラノスタジオ）
モダンな開発スタイルでは、それぞれの長所を活かした「ハイブリッド運用」が推奨されます。
VS Code（執筆・構築）
- シナリオファイル（
.ks）の編集 - 正規表現を使った一括置換や、Gitによるバージョン管理
ティラノスタジオ（設定・デバッグ・書き出し）
- GUIによる直感的な
Config.tjsの編集 - リアルタイム変数ウォッチなどの強力なデバッグ機能
- Windows/Mac用アプリ（
.exe/.app）へのパッケージング
まとめ
ティラノスクリプトでのゲーム制作とは、「index.html という劇場のステージ上で、first.ks という脚本に沿って、data フォルダ内の役者や小道具を JavaScript が動かしていく作業」と言い換えることができます。
仕組みを理解しておくと、エラーが出たときも「どこで何が起きているのか」を素早く特定できるようになります。ティラノスクリプトでのゲーム制作、ぜひ楽しんでみてください。
よくある疑問
なぜローカルサーバーを立ち上げないと動かないの？
file:// でHTMLを開いたとき、ブラウザは「オリジン（出所）」を判定できません。
https://example.com → オリジン明確
file:///Users/.../index.html → オリジン = null
file:// から別ファイルを読み込もうとすると、ブラウザは「nullオリジンからのリクエストは信用できない」として拒否します。ティラノスクリプトはゲーム起動直後に first.ks・画像・音声を次々と読み込みにいくので、これが全部ブロックされてゲームが動かなくなります。
ローカルサーバーを通すと http://localhost:8000 というオリジンが確定し、同じオリジン内のファイル読み込みが「正規の通信」として許可されます。
バックエンド系の言語は使われないの？
基本的に不要です。ノベルゲームの「読む・選ぶ・セーブする」という動作が全部ブラウザ内で完結するからです。
| 機能 | 使っている仕組み |
|---|---|
| セーブデータ | localStorage（ブラウザ内部のストレージ） |
| シナリオ分岐 | JSの変数・条件分岐 |
| 画像・音声の再生 | HTML5のネイティブ機能 |
オンラインランキングやクラウドセーブなど「通信」要素を加えたいときだけ、外部APIやFirebaseと組み合わせる形になります。
ElectronやNW.jsとの関係は？
混同しやすいので整理します。
| 中身 | |
|---|---|
| ティラノスクリプト | HTML/CSS/JSだけ。ElectronもNW.jsも無関係 |
| ティラノスタジオ（IDE本体） | Electronで作られている |
| ゲームの書き出し（.exe/.app） | NW.jsで梱包している |
Electronは「Chromium（ブラウザ描画）＋Node.js（OS操作）」をセットにした仕組みで、HTML/JS製のアプリをそのままデスクトップアプリとして配布できます。ティラノスタジオ自体がHTML/JS製なので、それをMac/Windowsアプリとして配布するためにElectronを使っています。
ゲームの書き出しに使われるNW.jsも同様に「Chromium＋Node.js」の構成ですが、こちらはゲームファイル一式を梱包してプレイヤーがサーバーなしで起動できるようにするためのものです。
2つ目のプロジェクトを作りたいときは？
プロジェクトフォルダをまるごとコピーするだけです。
my_adventure/
├── project1/ ← 既存
└── project2/ ← コピーして中身を書き換える
フォルダの役割を整理すると、起動の流れと対応しています。
index.html → tyrano/ を呼び出す
tyrano/ → data/ を読みに行く
index.html が起点で、エンジン（tyrano/）がデータ（data/）を動かす一方向の流れです。新しいゲームを作るときは data/scenario/ の中身を書き換えるところから始めます。
