NEON PRECINCT

説明書

基準日 2026-09-26 ・ エンジンチーム ・ リリース一式 manual/

0. はじめに

NEON PRECINCT は、ベルトスクロールアクションゲームを作るエンジンとツールです。すべてHTMLファイルなので、ブラウザで開けばすぐ動き、インストールもインターネットも要りません。完成したゲームもHTMLファイル1つになり、受け取った人はそのファイルを開くだけです。

一式の中身

フォルダ・ファイル内容
index.htmlスタートページ — ツール・デモ・見本への入口
tools/ツール5種 — Sprite・Character・Stage・Game・Asset Forge
engine/エンジン — ゲームJSONを読み込んで試すとき
demos/このツールで作ったデモ2本(百鬼夜行・OVERTIME)
samples/hyakki-yako/見本 — 百鬼夜行のキャラクター・ステージ・設定を、ツールで開けるファイルのまま
manual/この説明書
スタートページ — はじめての三歩、作る順序、ツールとデモの一覧
スタートページ。ツール・デモ・見本への道がまとまっています。

作り方のレベルを選ぶ

はじめてなら1から始めてください。各章は前の章をやったものとして書いています。

1. かんたん制作絵がなくても、見本のキャラクターで自分のステージ1つのゲーム。Stage・Game Forge。約15分。
2. シンプル制作自分の絵で主人公・敵・ステージ2つ、タイトル・音楽・クレジットまで。半日。
3. 本格制作見本から始める — ボスの特殊技・エフェクト・カットシーン・画面表示・難易度。数日。

すべてのツール共通

することやり方
保存ツール下部のバーの保存ボタン — JSONファイルでダウンロードします。次のツールがそのファイルを開きます
続きを直す各ツールの一番上の + … JSON読み込み で保存したファイルを開き直します
すぐ試すCharacter・Stage・Game Forge の ▶ エンジンで試す — ビルドも保存もせず新しいタブですぐ試します
元に戻すStage・Character Forge で Ctrl+Z・やり直し Ctrl+Shift+Z、または下のバーの ↶・↷
欄をたたむ欄のタイトルを押すとたたんだり広げたりします。長いツールは使う欄だけ広げておいてください
閉じるとき保存していない変更があると、ブラウザが一度たずねます

1. かんたん制作

作るもの — 見本(百鬼夜行)のキャラクター・アイテム・障害物をそのまま使い、ステージを1つ新しく作って、ゲームファイル1つにビルドします。絵を用意しなくてもかまいません。

使うツールStage Forge → Game Forge
用意するもの見本のゲーム一式 samples/hyakki-yako/hyakki-yako.game.json
かかる時間約15分
結果「My_First_Game.html」のようなゲームファイル1つ(約11MB)

ステージを作る — Stage Forge

1Stage Forge を開きます

tools/stage-forge.html を開きます。新しいステージのひな形がすでに入っています — 基本の背景にウェーブ3つ(ザコ3 → ザコ3・エリート1 → ボス)。

2キャラクターリストを読み込みます

5番 ウェーブ の欄の一番上の + キャラクターリストを読み込む を押し、見本の hyakki-yako.game.json を選びます。「リスト 7人」と出ればOKです。このキャラクターたちが敵として出て、試すときは見本の主人公(信綱)になります。

ウェーブの欄 — キャラクターリスト7人を読み込んだあとの最初のウェーブ
キャラクターリストを読み込んだウェーブの欄。ウェーブごとにゲート(カメラが止まる舞台の端)・敵の等級・数・出る側があります。

3名前を決めます

2番 基本情報 の ステージ名 に「はじめてのステージ」のように書きます。どの言語の名前でもかまいません — idは重ならないように自動で作られます。

基本情報の欄 — ステージ名とid
基本情報。名前を書くだけでかまいません。床の高さ・BGMは初期値のままでもかまいません。

4ウェーブを手直しします(任意)

そのままでもゲームになります。変えてみたいなら —

  • 敵の数 — 等級の横の数字
  • どのキャラクター — キャラクター の欄。「自動」ならキャラクターリストのザコから配分して出て、名前を選ぶとそのキャラクターだけが出ます
  • ウェーブの追加・削除 — ウェーブの欄の下の + ウェーブを追加・ウェーブ右上の ×

ウェーブに問題があると、そのウェーブの欄の一番上に ⚠ で理由が出ます(例: 「前のウェーブとの間隔が狭いです」)。最初のゲートを1200より前に置くように、欄を離れるとツールが自動で直すものもあります。

試して保存する

5エンジンで試します

下のバーの ▶ エンジンで試す を押すと、新しいタブでこのステージがすぐ始まります。直してからもう一度押すと同じタブで新しく始まります。

下のバー — 初期値、元に戻す、やり直し、エンジンで試す、ステージを保存
Stage Forge の下のバー。
エンジンで試した画面 — 基本の背景で信綱が河童と戦う
エンジンで試した画面。基本の背景に見本のキャラクターが出ます。
新しいタブが開かないときはブラウザのポップアップブロックを解除してください。ツールと同じ一式の engine/ フォルダにエンジンが必要です。

6保存します

ステージを保存 を押すと stage_…….stage.json がダウンロードされます。このファイルを Game Forge で使います。

ゲームにビルドする — Game Forge

7見本のゲームを読み込みます

tools/game-forge.html を開き、1番 ゲーム情報 の + 作りかけのゲームJSONを読み込む(続きを編集) で見本の hyakki-yako.game.json を選びます。キャラクター・アイテム・障害物・演出がすべて入ります。

同じ欄の ゲームタイトル を「はじめてのゲーム」に変えます。このタイトルがゲームファイル名とブラウザのタブのタイトルに使われます。

Game Forge ゲーム情報の欄 — ゲームJSONの読み込みとゲームタイトル
Game Forge 1番 ゲーム情報。

8ステージを自分のものに替えます

3番 ステージの順序 で見本のステージ2つを × で外し、+ ステージJSONを追加 で6段階で保存したファイルを入れます。ステージを複数入れると上から下の順に進みます。

ステージの順序の欄 — はじめてのステージ1つ
ステージの順序に自分のステージだけが残った様子。

ここでも下のバーの ▶ エンジンで試す でゲーム全体をタイトルから試せます。

9ビルドします

10番 単一ファイルにビルド で + neon-precinct.html を選ぶ から一式の engine/neon-precinct.html を選び(最初の一度だけ — 次からは記憶します)、単一ファイルをビルド を押します。「はじめてのゲーム.html」がダウンロードされます。このファイル1つを開けばゲームが始まります。

単一ファイルにビルドの欄 — エンジンファイル準備完了
エンジンファイルを選ぶと「準備完了」と出て、ビルドを押せます。
ビルドしたゲームのタイトル — 見本のタイトル画像のまま
ビルドしたゲーム。タイトル画像・オープニング・音楽は見本のものがそのまま入っています。
ここまでできたら — タイトル画像・オープニング・音楽・クレジットを自分のものに替え、自分のキャラクターを入れる方法は 2. シンプル制作 で扱います。

2. シンプル制作

作るもの — 自分の絵で主人公1人と敵1体、自分の背景でステージ2つを作り、タイトル・タイトル画像・音楽・クレジットを入れて新しいゲームとしてビルドします。この章の例はOVERTIMEのオフィサー・クラッシャー・1・2ステージの絵を「自分で用意した絵」としています。

使うツールSprite Forge → Character Forge → Stage Forge → Game Forge
用意するものキャラクターの1枚ずつの画像(PNG)、背景画像・床画像(ステージごとに1枚ずつ)、タイトル画像1枚、音楽ファイル(ogg・mp3)
かかる時間絵が用意できていれば半日
結果「Night_Shift_Cop.html」のようなゲームファイル1つ(例は2.5MB)

絵の用意・ファイル名

キャラクターの絵は 動作の1場面につきPNG1枚 です。Sprite Forge は ファイル名に含まれる英単語 でどの動作かを判断します。ファイル名の前にキャラクター名を付け、同じ動作が複数枚なら後ろに番号を付けてください — 例) officer_walk_1.png・officer_walk_2.png。前の部分(officer)がキャラクター名になります。

ファイル名に含まれる単語動作最低限の構成
idle · stand立ち1枚
walk歩き2〜4枚
punch · jab · attack手攻撃11〜2枚
hook · upper手攻撃2・3—
kick · roundhouse足攻撃1・2—
jump · jatk · jkickジャンプ・ジャンプ攻撃・ジャンプ蹴り—
run · dash走り—
hurt · hit被弾1枚
down · koダウン1枚

絵のない動作はエンジンが似た動作で代わりにします(例: ジャンプの絵がなければ立ち)。例のオフィサーは14枚(立ち2・歩き4・手攻撃4・足攻撃1・ジャンプ・被弾・ダウン)、クラッシャーは9枚です。背景は透明なPNGが一番よく、単色の背景ならSprite Forgeが消してくれます。

キャラクターを作る — Sprite Forge

1画像を入れます

tools/sprite-forge.html を開き、1番 PNGを複数選択 で画像をまとめて選びます。

Sprite Forge 1 画像を入れる
1 画像を入れる。複数を一度に選びます。

背景が単色なら2番 背景除去 が現れ、角の色で消します。透明な画像ならこの欄は飛ばします。

2整列と割り当てを確認します

3番 整列と割り当て で、画像ごとに足先をそろえて同じ大きさのマスに入れ、ファイル名で動作を割り当てます。マスの下の選択欄で割り当てを直せます。

  • 目標の身長(px) — ゲーム内のキャラクターの身長。主人公と敵の身長をここで合わせます
  • 基本の向き — 画像の中のキャラクターが向いている方向
整列と割り当て — 14マスが立ち、歩き、手攻撃、足攻撃などに割り当てられた様子
3 整列と割り当て。マスごとに割り当てられた動作(down・atk2・hurt・idle・jump・kick1・atk1・walk)が見えます。

3キャラクターJSONとして保存します

4番 完成したシート を確認し、下のバーの キャラクターJSONを保存 を押します。officer.character.json がダウンロードされます。

完成したシート — 1列につながったキャラクターの画像
4 完成したシート。

5番 ドット整形 は、生成画像をドット絵のように整えるときに使います。シンプル制作では飛ばしてもかまいません。

キャラクターを整える — Character Forge

4読み込んで確認します

tools/character-forge.html を開き、1番に保存したばかりのキャラクターJSONを入れます。Sprite Forgeが決めたマス・動作・技(手攻撃・足攻撃)がそのまま入り、体力・速度は初期値から始まります。

Character Forge 1 読み込み — officer を読み込み
1 スプライトシートを読み込む。読み込んだキャラクターのマス数・技の数が1行で出ます。

5足の位置・動作・攻撃を見ます

ほとんどそのままでかまいません。不自然ならここで直します。

  • 3 アンカーと向き — キャラクターの足元の点。自動で決まり、浮いて見えたり埋まって見えたりしたら動かします
  • 5 動作の割り当て — 動作ごとに使うマスと順序
  • 6 攻撃判定値 — 技ごとの発生・持続・硬直の時間(フレーム)、ダメージ、リーチ。初期値から始め、試しながら合わせます
  • 名前と能力値(3番の欄の中)— 表示名・体力・移動速度。例のクラッシャーは体力だけ160に上げました
3 アンカーと向き — 足元の点と基本の向き
3 アンカーと向き。
6 攻撃判定値 — Jab、Hook、FrontKick の発生・持続・硬直・ダメージ
6 攻撃判定値。技ごとに1行です。

6試験場で試して保存します

下のバーの ▶ エンジンで試す を押すと、このキャラクターを主人公と敵の両方に立てた 試験場 が開きます。攻撃が届くか、当たって倒れるかを見ます。直したら キャラクターJSONを保存。

試験場 — オフィサーが同じオフィサーと戦う
試験場。同じキャラクターが主人公と敵として出ます。

敵も同じ方法で作ります。例のクラッシャーは1枚ずつの画像9枚(立ち・歩き4・手攻撃2・被弾・ダウン)です。

自分の背景でステージ — Stage Forge

7床線から書きます

2番 基本情報 にステージ名を書き、床の上端・床の下端 に 背景画像の中の道の上下の高さ を書きます(画面の縦540基準 — 例は340・512)。キャラクターはこの間を上下に動きます。画像を入れる前に 書くと、画像がこの線に合わせて置かれます。

基本情報 — ステージ名、地平線、床の上端・下端
2 基本情報。床の上端・下端がキャラクターの歩く帯です。

8床・背景の画像を入れます

4番 床と背景の画像 で + 床画像 と + 背景レイヤーを追加 から画像を入れ、画像ですべて埋めたなら 手続き背景 オン を押してオフにします。どちらも横につながる絵がよいです(自動でつながります)。

床と背景の画像 — 床画像と縦の位置
4 床と背景の画像。あとで床線を変えたら「背景・床の縦を合わせる」を押します。

9敵を自分のキャラクターに替えます

5番 ウェーブ の + キャラクターリストを読み込む で自分のキャラクターJSON(主人公・敵)をまとめて選び、敵グループごとに キャラクター の欄で敵を選びます。

ウェーブ1 — 敵グループのキャラクターを crasher に
ウェーブ1。キャラクターの欄で敵を選びます。

▶ エンジンで試す で確認し、ステージを保存。2つ目のステージも同じ方法で作ります。

2つのステージ — オフィサーが立っている様子
例の2つのステージ。道の上にキャラクターが立ち、背景が正しい位置に置かれました。

新しいゲームにまとめる — Game Forge

10キャラクターと役割

tools/game-forge.html を新しく開き、1番 ゲームタイトル を書きます。2番 + キャラクターJSONを追加 で主人公・敵を入れ、キャラクターごとに ヒーロー・ザコ・ボス を押して役割を決めます。1体が複数の役を兼ねてもかまいません。

キャラクターの欄 — officer はヒーロー、crasher はザコ・ボス
2 キャラクター。オフィサーはヒーロー、クラッシャーはザコ・ボス。

11ステージ・タイトル・演出

  • 3 ステージの順序 — + ステージJSONを追加 で2つのステージを入れます。上から下の順に進みます
  • 5 タイトル・配布 — 副題。タイトル画像にタイトルがすでに描かれているなら「タイトル画面にタイトル文字を描かない」
  • 6 演出 — + タイトル背景画像、+ 基本BGMファイル、一番下の クレジット(1行に1つ、先頭に # で大きな文字)。オープニング・エンディングは入れなければ飛ばします
ステージの順序 — 2つのステージ
3 ステージの順序。

12試してビルドします

▶ エンジンで試す でタイトルから確認したあと、10番でエンジンファイルを選び 単一ファイルをビルド。

完成したゲーム — タイトルと最初のステージ
完成したゲーム。タイトル背景・タイトル・副題・操作案内が出て、始めると最初のステージへ。
人に渡すときは 5番 配布用にビルド(制作用の項目を隠す) をオンにしてビルドしてください。オフのままビルドすると、上の画像のように制作用の開始文(「PRESS ENTER / START」)と開発用ボタンが残ります。オンにすると「Enterでスタート」、最初の案内・一時停止などプレイヤー向けの画面になります。
ここまでできたら — ボスの特殊技・エフェクト・オープニングのカットシーン・画面表示・難易度のような本格的な演出は、3. 本格制作 で見本を分解しながら扱います。アイテム・障害物は Asset Forge で作ります(+ 新しいアイテム・+ 新しい障害物 → 右の 属性)。見本の edit/items.json・edit/obstacles.json をそのまま使ってもかまいません。Stage Forge 8・9番で読み込んで7番で置き、Game Forge 4番に入れます。

3. 本格制作

作るもの — 百鬼夜行レベルのゲーム。ボスごとに違う攻略、技のエフェクト、オープニング・エンディングのカットシーン、飾った画面表示、難易度まで。この章は 見本(百鬼夜行)を分解しながら、機能ごとにどこで何を変えるかを説明します。欄一つひとつの意味と数値は 参考文書 にあり、節ごとに該当する欄へつないであります。

使うツールツール5種すべて + エンジンの打撃スタジオ
用意するもの見本 samples/hyakki-yako/ — 2章までやってみたこと
かかる時間数日(絵・音楽の用意しだい)
結果百鬼夜行のようなゲームファイル1つ(見本は約14MB — 大半は動画・音楽)

見本から始める

  1. samples/hyakki-yako/ フォルダを丸ごとコピーして名前を変えます。元の見本は残しておき、比べながら直してください。
  2. ゲーム全体は Game Forge で hyakki-yako.game.json を開きます。キャラクター・ステージ1つずつは edit/ のファイルを Character・Stage Forge で開きます。
  3. 直したキャラクターは Game Forge 2番に 同じidで入れ直すと置き換わります(役割はそのまま)。ステージは3番で × で外して入れ直します。
  4. 画像・音のファイルを使うときは source/assets/ から取り出します。使える範囲は見本のREADMEの「使用範囲」。

ボスの設計

ボスは 等級・行動スタイル・配置オプション の三層で作ります。等級(ボス・ファイナル)が体力・大きさ・使う技を決め(敵の等級)、キャラクターの行動スタイルが動きを決め(行動スタイル)、ウェーブの敵グループの配置オプションがそのボスならではの攻略を作ります(配置オプション)。

見本のボス設定攻略になるもの
火車(1ステージ)行動スタイル tank、等級ボス。配置オプション band 340・breathRange 200・chargeGap 200・counterHits 4・rage 0.4・scale 2.034距離340を保って砲撃、近いと火炎の息(ブレス)、200フレームごとに突進。4回続けて当たると反撃。体力40%以下で激怒(変形「Blaze」)
九尾の女帝 → 九尾の狐(2ステージ)等級ボス。blink(瞬間移動、狐火のエフェクト)・cool 46・rage 0.4・nextForm(第2段階)離れると消えて背後に現れる。倒すとバナー「TRUE FORM — 九尾」とともに九尾の狐(体力 × 1.2・攻撃力 × 1.35)に変身。体力50%・20%で悪あがき技、2回続けて当たると反撃

1特殊技は Character Forge でオンにして貼り付けます

Character Forge 4番 特殊技 で必要なものをオンにして値を決めると、下の 配置オプション にJSONが出ます。これをコピーして、Stage Forge のウェーブの敵グループの その他のオプション(JSON) に貼り付けます。特殊技ごとの欄・初期値は 参考 — 特殊技。

特殊技の欄 — 無敵反撃をオンにして配置オプションJSONが出た様子
火車に「無敵反撃」をオンにした様子。下の配置オプションをそのまま貼り付けます。

2第2段階のボスはウェーブカードで

ボス等級のグループには 次の形態(nextForm)を置けます。最初の形態が倒れるとバナーとともに次のキャラクターへつながり、次の形態にも別に配置オプション(体力・攻撃力の倍率、悪あがき技、反撃など)を与えます。

ボスウェーブカード — 九尾の女帝と第2段階の九尾の狐の設定
百鬼夜行2ステージのボスウェーブ。カードの中に第2段階(九尾の狐)の設定が続きます。

3激怒の姿は変形セットで

体力が激怒の割合(rage)を下回ると変形セットの姿に変わります。Character Forge 5番 + 変形 で変形を追加し、動作ごとにマスを割り当てます(火車の「Blaze」、九尾の狐の「Rage」)。変形がなければ赤い色調で代わりにします。

技・エフェクト・コンボ

ステージの演出

配置エディター — 舞台の上の障害物と敵の群れ、右のリスト
◆ 配置エディター。箱をドラッグして動かし、右のリストから選びます。

ゲームの演出・画面

Game Forge 画面表示の欄 — 要素ごとの位置、大きさ、色、画像
8 画面表示。要素ごとにオン・オフし、位置・大きさ・色・画像を決めます。

手応えを整える — 打撃スタジオ

エンジン開発画面(エンジンだけを開いた画面、または配布用をオフにしてビルドしたゲーム)の ◎ 打撃スタジオ で、ヒットストップ・揺れ・ノックバック・閃光・コンボ加重・残像をプレイしながら調整します。合ったら 設定をコピー を押して Game Forge 7番の打撃感の欄に貼り付けます(打撃感)。同じ窓の サウンド で効果音・音楽の大きさも合わせます。

打撃スタジオ — ヒットストップ倍率、カメラの揺れなどのスライダー
打撃スタジオ。上の「軽快な速打・重い強打」のような組み合わせから始め、スライダーで整えます。

絵を整える

翻訳

Game Forge の ◇ 翻訳シート でゲームの文(タイトル・字幕・クレジット・名前)をCSVで書き出して翻訳し、取り込みます。ゲームはプレイヤーの言語(한국어・English・日本語)に合わせて見せます。

仕上げ

  1. Game Forge 9番 確認 に問題がないようにします(足りないキャラクター・アイテム・障害物、モードと食い違う設定)。
  2. エンジン開発画面の AUTO でステージごとに最後まで回してみます。
  3. 5番 配布用にビルド をオンにしてビルドします。最初の案内・一時停止・技表がプレイヤー向けに出ます。
  4. ファイルサイズの大半は動画・音楽です。大きければ動画を短くするかスライドに、音楽はoggに替えます。

4. 参考

ツールごとの欄の使い方と、すべての数値の意味・単位・初期値は別の 参考文書(ref.html) にあります。ツールの「?」もそこにつながります。