meta
| 項目 | 意味 | 最小の例 |
|---|---|---|
id | 意味セーブデータを区別するID。別シナリオでは必ず変える | 最小の例id: "my-game-v1" |
title | 意味タイトル画面・ブラウザタブに出るゲーム名 | 最小の例title: "わたしの脱出ゲーム" |
subtitle | 意味タイトル見出しの下に出る副題(省略可。自作例) | 最小の例subtitle: "Episode 1" |
version | 意味セーブデータの世代管理用。通常は変更不要 | 最小の例version: 1 |
debug | 意味trueでDEBUGパネル・配置編集モードを表示。公開前は必ずfalse | 最小の例debug: false |
ui(自作例。タイトル・クリア・ゲームオーバー画面の文言)
省略した項目は、テンプレート付属の文言(index.htmlの静的な文言)がそのまま使われます。
| 項目 | 意味 | 最小の例 |
|---|---|---|
ui. | 意味タイトル見出しの上の小さなラベル | 最小の例eyebrow: "Mini Game" |
ui. | 意味タイトル画面の大見出し | 最小の例heading: "わたしの脱出ゲーム" |
ui. | 意味タイトル画面の説明文 | 最小の例description: "謎を解いて脱出しよう。" |
ui. | 意味スタートボタンの文言 | 最小の例button: "はじめる" |
ui. | 意味クリア画面。titleと同じ4項目。endingsで該当エンディングが見つかった場合、heading/descriptionはそのエンディングのtitle/messageで上書きされる(eyebrow/buttonはこのまま有効) | 最小の例clear: { heading: "CLEAR" } |
ui. | 意味ゲームオーバー画面。eyebrow/heading/buttonに加えheadingColor(見出しの色) | 最小の例gameover: { heading: "GAME OVER", headingColor: "#ff6b6b" } |
ui. | 意味所持品欄に出す装飾アイコン画像(省略可) | 最小の例inventoryIcon: "assets/ |
items
| 項目 | 意味 | 最小の例 |
|---|---|---|
id | 意味objectsのitemId・recipesのinputsと対応させる名前 | 最小の例id: "key" |
name | 意味所持品欄に出す表示名 | 最小の例name: "鍵" |
icon | 意味内蔵アイコン。key/stick/cloth/torch以外は「?」表示 | 最小の例icon: "key" |
画像をアイコンにしたい場合は assets. に同じ id の画像を登録してください(iconの値は無視され、画像が優先されます)。
assets
| 項目 | 意味 | 最小の例 |
|---|---|---|
assets. | 意味「名前」→画像パスの対応表 | 最小の例door: "assets/ |
assets. | 意味「名前」→音声パスの対応表。使える名前は下記5つのみ | 最小の例bgm: "assets/ |
画像をどの「名前」で探すか(優先順位):シーンのobjectsに置いたオブジェクトは、obj.があればそれを、無ければobj.を「名前」としてassets.を探します(itemId || id)。decorative: trueのオブジェクトも同じ仕組みで、itemIdは実在する所持品である必要はなく、単に画像を探すためのキーとして使われます。シーンの背景画像はbgAssetIdに書いた文字列が「名前」になります。所持品欄のアイコンは、その所持品自身のidで探します。
assets.sounds で使える名前(この5つ以外は登録しても再生されません)
| 名前 | 用途 |
|---|---|
bgm | 用途プレイ中に流れ続けるBGM |
pickup | 用途アイテム取得・発見時の音 |
locked | 用途開かない・不正解時の「ガチャガチャ」音 |
unlock | 用途暗証番号(passcode)正解時の音 |
doorOpen | 用途exitの扉が開く時の専用音(unlockとは別の音) |
画像・音声とも、登録しなければ自動でシンプルな図形・合成音にフォールバックします。同じファイル名で中身だけ更新した場合のキャッシュの扱いは、説明書の「11. 公開前のチェックと困ったとき」の「キャッシュについて」を参照してください。
scenes
| 項目 | 意味 | 最小の例 |
|---|---|---|
label | 意味プレイ中に画面左上に出るシーン名 | 最小の例label: "正面の壁" |
background | 意味画像未指定時の図形描画の色味。"wall"か"wall-alt" | 最小の例background: "wall" |
bgAssetId | 意味背景画像を使う場合、assets.に登録した名前 | 最小の例bgAssetId: "bg-front" |
entryHint | 意味このシーンに入った瞬間だけ出す一言(省略可。自作例) | 最小の例entryHint: "奥の棚を調べてみよう。" |
navigation./right | 意味左右の矢印で移動する先のシーンID(nullなら非表示) | 最小の例navigation: { left: "room-left", right: null } |
navigation. | 意味指定すると矢印の代わりに「‹ 戻る」ボタンを表示(ズーム画面用) | 最小の例navigation: { back: "room-left" } |
objects | 意味このシーンに置くオブジェクトの配列 | 最小の例objects: [ ] |
オブジェクト共通オプション
| 項目 | 意味 | 最小の例 |
|---|---|---|
id | 意味オブジェクトの識別名(シーン内で重複不可) | 最小の例id: "door" |
type | 意味オブジェクトの種類。下記「オブジェクトタイプ」参照 | 最小の例type: "pickup" |
x, y | 意味配置の中心座標(論理サイズ900×560) | 最小の例x: 450, y: 250 |
r | 意味円形の当たり判定の半径(w/hと排他) | 最小の例r: 26 |
w, h | 意味四角形の当たり判定の幅・高さ | 最小の例w: 150, h: 300 |
shape | 意味画像が無い時の専用図形。無指定・未知の名前は汎用プレースホルダー | 最小の例shape: "door" |
hoverText | 意味マウスを乗せた時にヒント欄へ出す説明(省略時はタイプ別の汎用文) | 最小の例hoverText: "鍵のようなものが落ちている。" |
flipX | 意味trueで画像を左右反転(自作例) | 最小の例flipX: true |
decorative | 意味trueでクリック・ホバー判定を一切持たない見た目専用に(自作例) | 最小の例decorative: true |
invisible | 意味trueで画像・プレースホルダーを描画しない当たり判定専用に(自作例) | 最小の例invisible: true |
decorative: trueの自作例(壁掛けの絵を見た目だけ配置):
{ id: "deco-picture", type: "decoration", decorative: true, itemId: "picture",← assets.images から画像を探すためだけの名前(所持品である必要はない) x: 400, y: 120, w: 80, h: 100 },invisible: trueの自作例(背景画像にすでに描き込まれた扉に当たり判定だけ追加):
{ id: "door-hitbox", type: "exit", invisible: true, x: 450, y: 250, w: 150, h: 300, requiresItem: "key" },オブジェクトタイプ
pickup(拾えるアイテム)
| 項目 | 意味 | 最小の例 |
|---|---|---|
itemId | 意味取得するアイテムのid。省略すると「調べるだけ」になる | 最小の例itemId: "key" |
requiresItem | 意味持っていないと開けられない(単数・選択不要) | 最小の例requiresItem: "torch" |
hintLocked | 意味requiresItem未達時のメッセージ | 最小の例hintLocked: "暗くて見えない……" |
setFlag | 意味取得時に立てるフラグ | 最小の例setFlag: "foundClue" |
message | 意味取得時のメッセージ | 最小の例message: "松明で照らすと鍵が見えた。" |
returnAfterPickup | 意味trueでズーム画面から元の部屋へ自動帰還 | 最小の例returnAfterPickup: true |
exit(出口・ドア)
| 項目 | 意味 | 最小の例 |
|---|---|---|
requiresItem | 意味クリア条件の単一アイテム(選択してからクリック) | 最小の例requiresItem: "key" |
requiresItems | 意味クリア条件の複数アイテム(配列・選択不要・一括判定。自作例) | 最小の例requiresItems: ["key", "map"] |
hintLocked | 意味未所持時のメッセージ | 最小の例hintLocked: "鍵がかかっている……" |
hintNeedsSelect | 意味requiresItem使用時、所持しているが未選択の時のメッセージ | 最小の例hintNeedsSelect: "鍵を選択してから試そう" |
hintSuccess | 意味成功時のメッセージ | 最小の例hintSuccess: "鍵が回った……" |
defaultEnding / endingConditions | 意味複数エンディング分岐(後述「endings」参照) | 最小の例— |
requiresItems(自作例。複数アイテムを選択操作なしで一括判定):
{ id: "door", type: "exit", shape: "door", x: 450, y: 250, w: 150, h: 300, requiresItems: ["key", "map"], hintLocked: "何かが足りないようだ。" },zoom(ズームイン)
| 項目 | 意味 | 最小の例 |
|---|---|---|
targetScene | 意味クリックで移動する先のシーンID | 最小の例targetScene: "safe-detail" |
setFlag | 意味移動と同時に立てるフラグ(省略可) | 最小の例setFlag: "routeFishing" |
passcode(暗証番号)
| 項目 | 意味 | 最小の例 |
|---|---|---|
code | 意味正解の暗号(文字列) | 最小の例code: "7391" |
clueFlag | 意味指定すると、立つまでclueLockedTextを表示 | 最小の例clueFlag: "foundClue" |
clueText / clueLockedText | 意味ヒント文/未発見時の文 | 最小の例clueText: "「7391」を試そう" |
hintWrong | 意味不正解時のメッセージ | 最小の例hintWrong: "番号が違うようだ……" |
alreadySolvedMessage | 意味正解後に再クリックした時のメッセージ | 最小の例alreadySolvedMessage: "すでに開けてある。" |
onSuccess. | 意味正解時に渡すアイテム(省略可) | 最小の例giveItem: "key" |
onSuccess. | 意味正解時に立てるフラグ(省略可) | 最小の例setFlag: "safeOpened" |
onSuccess. | 意味正解時のメッセージ | 最小の例message: "金庫が開いた。" |
examine(調べるだけ)
| 項目 | 意味 | 最小の例 |
|---|---|---|
setFlag | 意味クリックで立つフラグ(省略すると雰囲気づくり専用に) | 最小の例setFlag: "foundNote" |
message | 意味クリック時のメッセージ | 最小の例message: "壁の絵画の裏にメモがあった。" |
alreadySeenMessage | 意味2回目以降のメッセージ(省略時はmessageのまま。自作例) | 最小の例alreadySeenMessage: "さっき調べた。" |
danger(即ゲームオーバーの罠)
| 項目 | 意味 | 最小の例 |
|---|---|---|
hoverText | 意味警告文(必須級。無いと理不尽になる) | 最小の例hoverText: "触れない方がいいかもしれない……" |
message | 意味ゲームオーバー時のメッセージ | 最小の例message: "トラップが作動した!" |
shape: "trap"にすると、警告色で点滅する専用の見た目になります。スマートフォンでは自動的に「1回目のタップで警告表示、2回目のタップで実行」になります(設定不要)。
requiresFlag / hideOnFlag(状態変化・出現演出)
| 項目 | 意味 | 最小の例 |
|---|---|---|
requiresFlag | 意味このフラグが立つまで、画面に一切描画しない | 最小の例requiresFlag: "openedBox" |
hideOnFlag | 意味このフラグが立ったら、画面から消す | 最小の例hideOnFlag: "openedBox" |
同じ座標に「前」「後」の2オブジェクトを重ね、hideOnFlagとrequiresFlagを同じフラグ名で対応させるのが基本形です(説明書の「8. 調べると何かが出てくる仕掛けを作る」参照)。
itemActions
選択中のアイテムに応じた個別リアクション。requiresItemと違い、不正解アイテムにも専用の反応を返せます。pickup/exit/examineなどどのタイプにも付けられます。
| 項目 | 意味 | 最小の例 |
|---|---|---|
message | 意味そのアイテムを使った時のメッセージ | 最小の例message: "危険だ!" |
sfx | 意味再生する効果音名。「assets」の表の5つのうちbgmを除く4つ(pickup/locked/unlock/doorOpen) | 最小の例sfx: "locked" |
setFlag | 意味使った時に立てるフラグ(省略可) | 最小の例setFlag: "openedBox" |
gameover | 意味trueでその場でゲームオーバー(省略可) | 最小の例gameover: true |
consumeItem | 意味trueで使ったアイテムを所持品から消す(省略可) | 最小の例consumeItem: true |
endings
| 項目 | 意味 | 最小の例 |
|---|---|---|
title | 意味クリア画面の見出し | 最小の例title: "NORMAL END" |
message | 意味クリア画面の本文 | 最小の例message: "無事に脱出した!" |
使わない場合はendingsごと省略できます。省略した場合、またはexitのdefaultEndingが指すキーがendingsの中に無い場合は、クリア画面はui.の内容(省略時はテンプレート付属の文言)がそのまま使われます。endingsが存在し該当キーが見つかった場合は、そのtitle/messageがui./descriptionを上書きします(eyebrow/buttonはそのまま)。
recipes(アイテムの合成)
| 項目 | 意味 | 最小の例 |
|---|---|---|
inputs | 意味組み合わせる2アイテムのid(順不同) | 最小の例inputs: ["stick", "cloth"] |
result | 意味合成後にできるアイテムのid | 最小の例result: "torch" |
message | 意味合成時のメッセージ(省略時は自動生成) | 最小の例message: "松明を作った。" |
配置編集モード
meta.で表示されるDEBUGパネルの「配置編集」ボタンから使えます。
| 操作 | 内容 |
|---|---|
| オブジェクト本体をドラッグ | 内容位置(x, y)を変更 |
| 右下の角のハンドルをドラッグ | 内容大きさ(w,hまたはr)を変更 |
| 左下の角のハンドルをクリック | 内容flipXを切り替え |
| 「JSONをコピー」ボタン | 内容今のシーンのobjects配列全体をクリップボードにコピー |
コピーした内容は、config.の該当シーンのobjects: [ ... ]を丸ごと置き換える形で貼り付けます。コピーする前にページを再読み込みすると、動かした内容は消えます(ブラウザのメモリ上だけで編集しており、保存は手動のコピー操作が必要です)。
画像ファイル
| 用途 | 推奨サイズ | 形式 |
|---|---|---|
| シーン背景 | 推奨サイズ900×560px | 形式JPG / PNG |
| アイテム・オブジェクト | 推奨サイズ60〜150px四方 | 形式背景が透明なPNG推奨 |
画像を用意しなくても動きます。何も指定しなければ、自動でシンプルな図形が代わりに表示されます。
応用機能(複数ルート・持ち物の上限)
ここから先は、より作り込んだシナリオ向けの機能です。例は第2弾ゲーム「おでかけ!わすれもの大作戦」のコードの書き方を引用しています(画像・音声ファイルは含みません)。
GAME_CONFIG.inventoryCapacity (所持品の上限と入れ替え)
GAME_CONFIG直下に他の項目(metaやitems)と同じように1行追加します。
const GAME_CONFIG = { meta: { /* ... */ }, inventoryCapacity: 3,← これを超える pickup はブロックされる items: { /* ... */ },};上限に達した状態でitemIdを持つpickupをクリックすると拾えなくなり、obj.(省略時は既定文言)が表示されます。かわりに、所持品欄の各スロットに「手放す」バッジが表示され、クリックすると一度拾ったアイテムを元の場所に戻せます(入れ替え)。
| 項目 | 意味 | 最小の例 |
|---|---|---|
GAME_CONFIG. | 意味所持品の上限数 | 最小の例inventoryCapacity: 3 |
obj. | 意味pickupで上限到達時のメッセージ(省略可) | 最小の例hintFull: "リュックがいっぱいだ。" |
GAME_CONFIG.routes / obj.scoreByRoute (複数ルート・達成度に応じた結末)
プレイヤーが選んだルートの必須アイテムを何個持っているかを数え、持っている数に応じて結末を変える仕組みです。exitタイプのrequiresItems(全部揃っているかの二択)とは別物で、互いに影響しません。
const GAME_CONFIG = { meta: { /* ... */ }, routes: {← GAME_CONFIG直下に追加 fishing: { flag: "routeFishing", // zoomオブジェクトのsetFlagと対応させる label: "釣り", requiredItems: ["fishing-rod", "bait", "bucket"], bonusFlag: "foundBonusFishing", // 隠しアイテムのフラグ(省略可) }, },};{ id: "door", type: "exit", scoreByRoute: true, hintWrong: "持ち物が違うか、足りないみたいだ。", // 0〜1個の時(ゲームオーバーにはならない) hintSuccess: "よし、行ってきます!", perfectEnding: "perfectEnd", // 全部揃っている時(省略時は"perfectEnd") okEnding: "okEnd", // 一部だけの時(省略時は"okEnd")}route.(省略可)を使うと、別枠の隠しアイテムを見つけていた場合に、okEnding止まりの評価をperfectEndingへ1段階格上げできます。
| 項目 | 意味 |
|---|---|
routes[key]. | 意味ルート選択時に立つフラグ名(zoomのsetFlagと対応) |
routes[key]. | 意味そのルートの必須アイテム(配列) |
routes[key]. | 意味隠しアイテムのフラグ(省略可) |
obj. | 意味exitに付けると上記の判定モードになる |
obj. / obj. | 意味達成度に応じたエンディングの上書き(省略時はperfectEnd/okEnd) |