メインコンテンツまでスキップ

V2 モデルのタッチ領域 (HitArea)

このページは V2（Cubism 4+ / 5） モデル、つまり *.model3.json 専用です。V1（journey-ad / Cubism 2~3）モデルのタッチは別の仕組み（hit_areas_custom ベース）で、ここでは扱いません。

1. タッチ領域はどこに記述するか​

V2 モデルのタッチ領域は *.model3.json 最上位の HitAreas フィールドで定義されます。各エントリは名前 + 対応する ArtMesh ID で、ブラウザは Cubism Core を使って ArtMesh のヒットボックスを計算し、ヒットすればその HitArea がクリックされたとみなします。

{
  "Version": 3,
  "FileReferences": { "...": "..." },
  "HitAreas": [
    { "Name": "Head", "Id": "HitAreaHead" },
    { "Name": "Body", "Id": "HitAreaBody" }
  ]
}
  • Name：論理名。本プラグインはこの名前に応じてアクションを発火します。慣例的な名前は Head と Body で、それぞれモデルの「頭」と「体」に対応します。
  • Id：Cubism Editor で当該 ArtMesh に付与した ID。Editor でメッシュ選択 → 右側のインスペクタで確認 / 変更できます。

2. HitArea とモーショングループの対応関係​

本プラグインの発火ルールは Live2D 公式 CubismWebSamples と同じです：

クリックされた HitArea発火するモーショングループmodel3.json に必要なグループ
Head表情切り替え（ランダムに 1 つ）Expressions フィールド（Motions ではない）
Body体タッチモーショングループMotions.TapBody

model3.json に Expressions / TapBody がない場合、対応領域をクリックしても何も起こりませんが、エラーは発生しません。

3. Cubism Editor で ArtMesh を HitArea としてマークするには​

  1. .cmo3 プロジェクトを開き、モデリング ビューに入ります。
  2. ヒット領域にしたい ArtMesh を選択します（通常は頭 / 体を覆うメッシュ）。
  3. 右側インスペクタ → ID、わかりやすい ID（例：HitAreaHead）を控えるか設定します。
  4. .moc3 をエクスポートする際は「テクスチャアトラスを埋め込み」にチェックして .model3.json を生成。
  5. テキストエディタで .model3.json を開き、HitAreas 配列に { "Name": "Head", "Id": "HitAreaHead" } を追加（エクスポート時に「HitArea を含む」をチェックしてあれば Editor が自動で書きます）。

4. デバッグのコツ​

  • クリックして反応がない場合は、まずブラウザコンソールでモーション / 表情の読み込みエラーを確認。
  • HitArea のヒット判定は ArtMesh の 実際に表示されているメッシュ に基づきます。透明度 0 で隠した ArtMesh でもヒットボックスは残るので、「見えていないのにクリックが効く」原因になりがちです。
  • モデル作者によって命名は異なります。HitAreaHead、head、すべて HitArea という命名すらあります。本プラグインは Name で発火するので、Name を Head または Body にしてください。

5. さらに読む​