【Axmol Engine】バイブコーディングで脱出ゲームを作る[ 16 ]：パーティクルを使う（暖炉に火を入れる）

Last updated at 2026-08-10Posted at 2026-08-10

はじめに

前回の記事ではアイテム合成を実装しました。今回は room1-2 の暖炉をタップして room1-2-1 に入り、「火の点くライター」を使って暖炉に火を入れるまでを実装します。火の表現には ParticleSystemQuad を継承したAxmol組み込みの ParticleFire を使い、JSON側の設定だけで生存時間・位置・サイズ・明るさを調整できる仕組みにします。

独自のパーティクルも組み込めますが、今回は組み込みのパーティクルシステムを利用します。

用意した画像(ChatGPT生成)

暖炉の近接画像

1. 暖炉への遷移追加

プロンプト：
room1-2で、中央の暖炉や絵画をタップしたら、room1-2-1に遷移して bg: bg_stage_005_2.pngを背景として表示してください。まだバック機能で room1-2に戻るように。

bg_stage_005.png をピクセル解析し、中央の暖炉と、その上に掛かった肖像画をまとめて覆うタップ領域を追加します。

"room1-2": [
  {
    "bg": "bg_stage_005.png",
    "touches": [
      { "rect": [800, 286, 210, 330], "stage": "room1-2-1" }
    ],
    "right": "room1-1"
  }
],
"room1-2-1": [
  {
    "bg": "bg_stage_005_2.png",
    "touches": [],
    "back": "room1-2"
  }
]

2. 「火の点くライター」使用で暖炉に火を入れる

プロンプト：
room1-2-1で、アイテム：４の「火の点くライター」を選択状態で暖炉の領域をタップしたら使用済みのステータスにして、room1-2とroom1-2-1のステップを進めてください。そのステップでは、ParticleSystemQuadを継承したParticleFireのパーティクルを利用して、暖炉に火を入れてる状態にしてください。

既存の useitem システム（useitems.json + UseItemDef）を使い、暖炉タップ時にアイテム4が選択中かどうかを判定する lightFireplace を追加します。UseItemDef に stage2/stageStatus2 を追加し、room1-2 と room1-2-1 の両方のステップを同時に進められるようにします。

"lightFireplace": {
  "itemNo": "4",
  "itemStatus": "1",
  "itemResultStatus": "2",
  "stage": "room1-2",
  "stageStatus": 1,
  "stage2": "room1-2-1",
  "stageStatus2": 1,
  "goStage": "room1-2-1"
}

struct UseItemDef {
    std::string itemNo;
    std::string itemStatus;
    std::string itemResultStatus;
    std::string stage;
    int         stageStatus = 0;
    std::string stage2;
    int         stageStatus2 = 0;
    std::string goStage;
    std::vector<UseItemAttractionDef> attractions;
};

ud->setStringForKey(("item_" + currentItem).c_str(), udef.itemResultStatus.c_str());
if (!udef.stage.empty())
    ud->setIntegerForKey(("stageData_" + udef.stage).c_str(), udef.stageStatus);
if (!udef.stage2.empty())
    ud->setIntegerForKey(("stageData_" + udef.stage2).c_str(), udef.stageStatus2);
ud->flush();

火の表現には、静止画の layer ではなく実際に燃える ParticleFire を採用します。StageDef に汎用の particles フィールドを新設し、type: "fire" のとき ax::ParticleFire::create() を指定位置・スケールで背景上に常時再生する構成です。

struct StageParticle {
    std::string type;
    ax::Vec2    pos;
    float       scale = 1.0f;
};

// particles: 常時再生する演出パーティクル（例: 暖炉の火）
for (const auto& pt : def.particles)
{
    ax::ParticleSystem* particleNode = nullptr;
    if (pt.type == "fire")
        particleNode = ParticleFire::create();
    if (particleNode)
    {
        particleNode->setPosition(pt.pos);
        particleNode->setScale(pt.scale);
        sp->addChild(particleNode, 1);
    }
}

"room1-2-1": [
  { "...": "ステップ1: useitemタップ領域" },
  {
    "bg": "bg_stage_005_2.png",
    "touches": [],
    "particles": [
      { "type": "fire", "pos": [957, 241], "scale": 1.0 }
    ],
    "back": "room1-2"
  }
]

暖炉開口部の座標は bg_stage_005.png（遠景）と bg_stage_005_2.png（近景）それぞれをピクセル解析し、炉床付近を火の発生位置とします。

3. パーティクル生存時間の調整（room1-2-1）

暖炉よりも火がはみ出てたり、想定のサイズが異なってましたので、調整しました。
AIはまだ見栄えに関しては未成熟そうですので、細かく指示して調整していきます。

プロンプト：
room1-2-1 のパーティクルの生存時間を少し早めに終わりにしてください

プロンプト：
room1-2-1 のパーティクル位置をy軸で上に10px移動してください

プロンプト：
room1-2 のパーティクルの生存時間を３分の１で終わりにしてください。また、X軸で左に25px移動してください。また50%ほど暗くしてください。

プロンプト：
room1-2のパーティクルを半分の大きさにして、さらに0.25の明るさにしてください

StageParticle のパラメータ一覧

下記のパラメータをclaudeが追加してくれました。

フィールド	意味	デフォルト
`type`	パーティクル種別（現状は `"fire"` のみ対応）	―
`pos`	発生位置（背景ローカル座標、左下原点）	―
`scale`	表示スケール	`1.0`
`life` / `lifeVar`	1粒子あたりの寿命とばらつき（秒）	`ParticleFire` 既定値（未指定時）
`opacity`	不透明度（0.0〜1.0）	不透明（未指定時）

いずれも -1（または未指定）なら ParticleFire 側のデフォルトのまま動作するため、既存の呼び出し箇所に影響を与えずパラメータを追加できます。

成果物

火のついたライターを暖炉に使うと、パーティクルシステムを利用した火を入れることができました！

まとめ

パーティクルシステムを使えば2Dと言えども立派な演出を加えることができます！

実装内容	対応ファイル
暖炉・絵画への入室導線	`stages.json`
useitemの複数ステージ同時更新（`stage2`/`stageStatus2`）	`MainScene.cpp` / `useitems.json`
汎用パーティクル機能（`particles`フィールド）	`MainScene.cpp` / `stages.json`
生存時間の上書き（`life`/`lifeVar`）	`MainScene.cpp` / `stages.json`
明るさの上書き（`opacity`）	`MainScene.cpp` / `stages.json`
room1-2・room1-2-1それぞれの見た目調整	`stages.json`

layer（固定装飾画像）に続き、particles（動的な演出パーティクル）という汎用フィールドが StageDef に加わったことで、コード変更なしにJSON設定だけで炎のようなアニメーション演出を配置・調整できるようになりました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【Axmol Engine】 バイブコーディングで脱出ゲームを作る[ 16 ]：パーティクルを使う（暖炉に火を入れる）