← 説明書(やりたいこと別ガイド)に戻る
WEB ESCAPE ENGINE LITE / リファレンス

リファレンス(全項目辞典)

config.js で使える項目を一通り記載しています。やりたいことから探したい場合は説明書を見てください。

01

meta

項目意味最小の例
id意味セーブデータを区別するID。別シナリオでは必ず変える最小の例id: "my-game-v1"
title意味タイトル画面・ブラウザタブに出るゲーム名最小の例title: "わたしの脱出ゲーム"
subtitle意味タイトル見出しの下に出る副題(省略可。自作例)最小の例subtitle: "Episode 1"
version意味セーブデータの世代管理用。通常は変更不要最小の例version: 1
debug意味trueでDEBUGパネル・配置編集モードを表示。公開前は必ずfalse最小の例debug: false
02

ui(自作例。タイトル・クリア・ゲームオーバー画面の文言)

省略した項目は、テンプレート付属の文言(index.htmlの静的な文言)がそのまま使われます。

項目意味最小の例
ui.title.eyebrow意味タイトル見出しの上の小さなラベル最小の例eyebrow: "Mini Game"
ui.title.heading意味タイトル画面の大見出し最小の例heading: "わたしの脱出ゲーム"
ui.title.description意味タイトル画面の説明文最小の例description: "謎を解いて脱出しよう。"
ui.title.button意味スタートボタンの文言最小の例button: "はじめる"
ui.clear.*意味クリア画面。titleと同じ4項目。endingsで該当エンディングが見つかった場合、heading/descriptionはそのエンディングのtitle/messageで上書きされる(eyebrow/buttonはこのまま有効)最小の例clear: { heading: "CLEAR" }
ui.gameover.*意味ゲームオーバー画面。eyebrow/heading/buttonに加えheadingColor(見出しの色)最小の例gameover: { heading: "GAME OVER", headingColor: "#ff6b6b" }
ui.inventoryIcon意味所持品欄に出す装飾アイコン画像(省略可)最小の例inventoryIcon: "assets/images/bag.png"
03

items

項目意味最小の例
id意味objectsのitemId・recipesのinputsと対応させる名前最小の例id: "key"
name意味所持品欄に出す表示名最小の例name: "鍵"
icon意味内蔵アイコン。key/stick/cloth/torch以外は「?」表示最小の例icon: "key"

画像をアイコンにしたい場合は assets.images に同じ id の画像を登録してください(iconの値は無視され、画像が優先されます)。

04

assets

項目意味最小の例
assets.images意味「名前」→画像パスの対応表最小の例door: "assets/images/door.png"
assets.sounds意味「名前」→音声パスの対応表。使える名前は下記5つのみ最小の例bgm: "assets/sounds/bgm.mp3"

画像をどの「名前」で探すか(優先順位):シーンのobjectsに置いたオブジェクトは、obj.itemIdがあればそれを、無ければobj.idを「名前」としてassets.imagesを探します(itemId || id)。decorative: trueのオブジェクトも同じ仕組みで、itemIdは実在する所持品である必要はなく、単に画像を探すためのキーとして使われます。シーンの背景画像はbgAssetIdに書いた文字列が「名前」になります。所持品欄のアイコンは、その所持品自身のidで探します。

assets.soundsで使える名前(この5つ以外は登録しても再生されません)

名前用途
bgm用途プレイ中に流れ続けるBGM
pickup用途アイテム取得・発見時の音
locked用途開かない・不正解時の「ガチャガチャ」音
unlock用途暗証番号(passcode)正解時の音
doorOpen用途exitの扉が開く時の専用音(unlockとは別の音)

画像・音声とも、登録しなければ自動でシンプルな図形・合成音にフォールバックします。同じファイル名で中身だけ更新した場合のキャッシュの扱いは、説明書の「11. 公開前のチェックと困ったとき」の「キャッシュについて」を参照してください。

05

scenes

項目意味最小の例
label意味プレイ中に画面左上に出るシーン名最小の例label: "正面の壁"
background意味画像未指定時の図形描画の色味。"wall"か"wall-alt"最小の例background: "wall"
bgAssetId意味背景画像を使う場合、assets.imagesに登録した名前最小の例bgAssetId: "bg-front"
entryHint意味このシーンに入った瞬間だけ出す一言(省略可。自作例)最小の例entryHint: "奥の棚を調べてみよう。"
navigation.left/right意味左右の矢印で移動する先のシーンID(nullなら非表示)最小の例navigation: { left: "room-left", right: null }
navigation.back意味指定すると矢印の代わりに「‹ 戻る」ボタンを表示(ズーム画面用)最小の例navigation: { back: "room-left" }
objects意味このシーンに置くオブジェクトの配列最小の例objects: [ ]
06

オブジェクト共通オプション

項目意味最小の例
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" },
07

オブジェクトタイプ

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意味正解時に渡すアイテム(省略可)最小の例giveItem: "key"
onSuccess.setFlag意味正解時に立てるフラグ(省略可)最小の例setFlag: "safeOpened"
onSuccess.message意味正解時のメッセージ最小の例message: "金庫が開いた。"

examine(調べるだけ)

項目意味最小の例
setFlag意味クリックで立つフラグ(省略すると雰囲気づくり専用に)最小の例setFlag: "foundNote"
message意味クリック時のメッセージ最小の例message: "壁の絵画の裏にメモがあった。"
alreadySeenMessage意味2回目以降のメッセージ(省略時はmessageのまま。自作例)最小の例alreadySeenMessage: "さっき調べた。"

danger(即ゲームオーバーの罠)

項目意味最小の例
hoverText意味警告文(必須級。無いと理不尽になる)最小の例hoverText: "触れない方がいいかもしれない……"
message意味ゲームオーバー時のメッセージ最小の例message: "トラップが作動した!"

shape: "trap"にすると、警告色で点滅する専用の見た目になります。スマートフォンでは自動的に「1回目のタップで警告表示、2回目のタップで実行」になります(設定不要)。

08

requiresFlag / hideOnFlag(状態変化・出現演出)

項目意味最小の例
requiresFlag意味このフラグが立つまで、画面に一切描画しない最小の例requiresFlag: "openedBox"
hideOnFlag意味このフラグが立ったら、画面から消す最小の例hideOnFlag: "openedBox"

同じ座標に「前」「後」の2オブジェクトを重ね、hideOnFlagとrequiresFlagを同じフラグ名で対応させるのが基本形です(説明書の「8. 調べると何かが出てくる仕掛けを作る」参照)。

09

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
10

endings

項目意味最小の例
title意味クリア画面の見出し最小の例title: "NORMAL END"
message意味クリア画面の本文最小の例message: "無事に脱出した!"

使わない場合はendingsごと省略できます。省略した場合、またはexitのdefaultEndingが指すキーがendingsの中に無い場合は、クリア画面はui.clearの内容(省略時はテンプレート付属の文言)がそのまま使われます。endingsが存在し該当キーが見つかった場合は、そのtitle/messageがui.clear.heading/descriptionを上書きします(eyebrow/buttonはそのまま)。

11

recipes(アイテムの合成)

項目意味最小の例
inputs意味組み合わせる2アイテムのid(順不同)最小の例inputs: ["stick", "cloth"]
result意味合成後にできるアイテムのid最小の例result: "torch"
message意味合成時のメッセージ(省略時は自動生成)最小の例message: "松明を作った。"
12

配置編集モード

meta.debug: trueで表示されるDEBUGパネルの「配置編集」ボタンから使えます。

操作内容
オブジェクト本体をドラッグ内容位置(x, y)を変更
右下の角のハンドルをドラッグ内容大きさ(w,hまたはr)を変更
左下の角のハンドルをクリック内容flipXを切り替え
「JSONをコピー」ボタン内容今のシーンのobjects配列全体をクリップボードにコピー

コピーした内容は、config.jsの該当シーンのobjects: [ ... ]を丸ごと置き換える形で貼り付けます。コピーする前にページを再読み込みすると、動かした内容は消えます(ブラウザのメモリ上だけで編集しており、保存は手動のコピー操作が必要です)。

13

画像ファイル

用途推奨サイズ形式
シーン背景推奨サイズ900×560px形式JPG / PNG
アイテム・オブジェクト推奨サイズ60〜150px四方形式背景が透明なPNG推奨

画像を用意しなくても動きます。何も指定しなければ、自動でシンプルな図形が代わりに表示されます。

14

応用機能(複数ルート・持ち物の上限)

ここから先は、より作り込んだシナリオ向けの機能です。例は第2弾ゲーム「おでかけ!わすれもの大作戦」のコードの書き方を引用しています(画像・音声ファイルは含みません)。

GAME_CONFIG.inventoryCapacity(所持品の上限と入れ替え)

GAME_CONFIG直下に他の項目(metaやitems)と同じように1行追加します。

const GAME_CONFIG = {  meta: { /* ... */ },  inventoryCapacity: 3,← これを超える pickup はブロックされる  items: { /* ... */ },};

上限に達した状態でitemIdを持つpickupをクリックすると拾えなくなり、obj.hintFull(省略時は既定文言)が表示されます。かわりに、所持品欄の各スロットに「手放す」バッジが表示され、クリックすると一度拾ったアイテムを元の場所に戻せます(入れ替え)。

項目意味最小の例
GAME_CONFIG.inventoryCapacity意味所持品の上限数最小の例inventoryCapacity: 3
obj.hintFull意味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.bonusFlag(省略可)を使うと、別枠の隠しアイテムを見つけていた場合に、okEnding止まりの評価をperfectEndingへ1段階格上げできます。

項目意味
routes[key].flag意味ルート選択時に立つフラグ名(zoomのsetFlagと対応)
routes[key].requiredItems意味そのルートの必須アイテム(配列)
routes[key].bonusFlag意味隠しアイテムのフラグ(省略可)
obj.scoreByRoute意味exitに付けると上記の判定モードになる
obj.perfectEnding / obj.okEnding意味達成度に応じたエンディングの上書き(省略時はperfectEnd/okEnd)