世界観を設定する

キャラクターとトークが揃ったら、窓の見た目やふるまいを調整して、自分の世界観に仕上げましょう。

複数の世界を持てる

狐の窓は1つのサイトに複数の世界（ワールド）を同居させられます。ワールドごとにキャラクター・トーク・背景を独立して管理できます。

public/worlds/
  ├── example/     ← デフォルトのサンプル
  ├── fantasy/     ← ファンタジー世界
  └── school/      ← 学園もの

ワールドの切り替え

URLのクエリパラメータ ?world=ワールド名 で、表示する世界を指定します。

world.json の全体像

各ワールドの worlds/ワールド名/world.json が、その世界の設定ファイルです。

{
  "type": "png",
  "characters": {
    "alice": {
      "path": "characters/alice/",
      "base": "base.png",
      "expressions": {
        "normal": [],
        "smile": ["smile.png"]
      }
    }
  }
}

背景

デフォルトでは時間帯に連動したグラデーションが自動で適用されます。朝は暖色、昼は青空、夜は暗い紫——と、時間帯に応じて雰囲気が変わります。

world.json に background プロパティを追加すると、背景画像や背景色をカスタマイズできます。

{
  "type": "png",
  "background": {
    "image": "bg.png",
    "color": "#1a1a2e"
  },
  "characters": { ... }
}

野外モード（デフォルト）

背景画像を設定した場合、画像の上に時間帯に応じた半透明のグラデーションが重なります。深夜や夜は濃いめに、昼間は薄めに——背景画像を活かしつつ、時間の移ろいを表現します。

風景写真やイラストなど、屋外の世界観に向いています。

屋内モード

"mode": "indoor" を指定すると、背景画像（透過PNG）の透明部分から時間帯グラデーション（空）が透けて見えるようになります。

{
  "background": {
    "image": "room.png",
    "mode": "indoor"
  }
}

窓のある部屋の透過PNGを用意すれば、窓の外の空が時間帯で変わる——という演出ができます。屋内の世界観に向いています。

時間帯の確認方法

URLに ?timeslot= パラメータを付けると、時間帯を強制的に指定できます。背景画像の見え方を各時間帯で確認したいときに便利です。

https://あなたのサイト/?timeslot=morning
https://あなたのサイト/?timeslot=noon
https://あなたのサイト/?timeslot=evening

指定できる値: deep_night / morning / noon / afternoon / evening / night

トーク配置

変換ツールで出力したJSONファイルを scenario/ ディレクトリに配置します。

worlds/myworld/
  ├── world.json
  ├── bg.png
  ├── characters/
  │   ├── alice/
  │   └── bob/
  └── scenario/
      └── talks.json

エンジンは scenario/ 内のJSONを読み込み、各トークの trigger に基づいて再生を判断します。

トークインターバル

窓を開いたとき、最初の1トークはすぐに再生されます。その後は約1分間隔（±15秒のランダム）で次のトークが再生されます。

同じトリガー条件に複数のトークがある場合、一度再生されたトークは優先度が下がり、なるべく別のトークが選ばれます。

PWA設定

狐の窓はPWA（Progressive Web App）に対応しており、スマートフォンのホーム画面に追加してアプリのように使えます。

manifest.webmanifest

PWAの設定は manifest.webmanifest で行います。リポジトリに同梱されていますが、以下の項目を自分の窓に合わせて変更してください。

{
  "name": "わたしの窓",
  "short_name": "わたしの窓",
  "description": "創作世界を覗く窓",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#1a1a2e",
  "theme_color": "#1a1a2e",
  "icons": [
    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}