狐の窓 ガイド

キャラを住まわせる

狐の窓では、PNG画像を使った最もシンプルな方法でキャラクターを表示できます。基本の仕組みはベース画像と表情オーバーレイの合成です。

素材の仕組み

キャラクターの表示は、2種類の画像を重ね合わせて行います。

レイヤー（下から順） 役割 設定キー
1. ベース画像 体・服・髪など変わらない部分 base
2. 表情オーバーレイ 目・口など表情が変わる部分 expressions
3. 口パク セリフ中に開閉する口の画像 mouth
4. 瞬き 目を閉じる画像（最前面） blink

瞬きが最前面に重なるため、どの表情が表示されていても瞬き画像で目を覆い隠すことができます。

目を閉じた表情を作りたいとき: ニコニコ笑顔のように目が閉じている表情は、表情オーバーレイで作ると瞬き画像に上書きされてしまいます。こうした表情は向き別モード（bases）の別方向として定義し、瞬きなし（blink を省略）にするのがおすすめです。
ベース画像 + 表情オーバーレイ = 合成結果の図解

ファイル配置

キャラクター素材は worlds/あなたのワールド名/characters/キャラ名/ に配置します。

worlds/myworld/characters/
  └── alice/
      ├── base.png        ← ベース画像
      ├── normal.png      ← 通常の表情
      ├── smile.png       ← 笑顔
      ├── sad.png         ← 悲しみ
      └── angry.png       ← 怒り
画像サイズ: ベースと表情オーバーレイは同じサイズにしてください。透過PNGを使い、表情部分以外は透明にします。

world.json での定義

world.json の characters セクションでキャラクターを定義します。

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

path でパスを簡略化

path フィールドを使うと、素材のパスをまとめて指定できます。各ファイル名にプレフィックスとして自動的に付与されるため、同じディレクトリ名を何度も書く必要がなくなります。

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

向き別モード（bases形式）

和服やオッドアイなど、左右で見た目が異なるキャラクターには向き別ベース画像を使えます。

worlds/myworld/characters/
  └── carol/
      ├── base-left.png     ← 左向きベース
      ├── base-right.png    ← 右向きベース
      ├── normal.png
      └── smile.png

world.json では base の代わりに bases を使います。

{
  "characters": {
    "carol": {
      "path": "characters/carol/",
      "bases": {
        "left": {
          "base": "base-left.png",
          "mouth": "mouth-left.png",
          "expressions": {
            "normal": [],
            "smile": ["smile-left.png"]
          }
        },
        "right": {
          "base": "base-right.png",
          "mouth": "mouth-right.png",
          "expressions": {
            "normal": [],
            "smile": ["smile-right.png"]
          }
        }
      }
    }
  }
}

各向きごとに base だけでなく、mouth（口パク）・blink（瞬き）・expressions（表情差分）もそれぞれ別の画像を指定できます。左右で表情パーツの位置が変わるキャラクターに対応しています。

1枚モードとの違い: base（1枚モード）では向きの指定は無視され、常に同じ画像が表示されます。左右で見た目を変えたい場合は bases（向き別モード）を使ってください。

自動アニメーション

PNG ステージでは、以下のアニメーションが自動で適用されます。

瞬き

blink に画像の配列を指定すると、2〜6秒のランダム間隔で自動的に瞬きアニメーションが再生されます。配列の各画像が順番に表示される、コマ送り方式です。

"blink": ["blink-half.png", "blink-close.png"]

1コマあたりの表示時間は blinkFrameMs で変更できます（デフォルトは90ミリ秒）。最後のコマが表示された後、自動的に通常状態に戻ります。

口パク

mouth に画像を指定すると、セリフ表示中に自動で口を開閉します。

"mouth": "mouth-open.png"

呼吸

CSSアニメーションによる微かな上下動が自動で適用されます。設定は不要です。

PNG定義ツール

素材の設定を手書きするのが面倒な場合は、同梱のPNG定義ツール（tools/png-define.html）を使えます。画像をドラッグ＆ドロップして、プレビューを見ながら設定を組み立てられます。

PNGキャラ定義ツールの画面