🚀 推薦開啟路徑 Recommended Folder to Open
使用 Open Folder（開啟資料夾） 選擇：
Use Open Folder and pick:
Little Fighter 2 remastered/resources/app
重點是這個資料夾結構底下要包含 _res_data（資料檔）、_res_pngs/sys（大圖檔）、mp3（音效）。
如果 _res_data 底下有 _data.txt，IDE 會自動關聯所有相關檔案（角色 + 氣功），方便跳轉查看。
The folder should contain _res_data (data files), _res_pngs/sys (sprite sheets), and mp3 (sound effects). If _res_data/_data.txt exists, the IDE auto-links all related files (characters + energy objects) so you can jump between them.
單一角色資料夾結構 Single-Character Folder Layout
如果是另外單獨處理人物也可以，結構就要是下面這樣子：
You can also work on one character in isolation with this layout:
Lilith/
├── _res_data/ ← 資料檔（.txt）
│ ├── _data.txt ← 有這個檔案，IDE 會自動關聯所有相關檔案
│ ├── Lilith-r.txt ← 角色資料檔
│ ├── Lilith_ball-r.txt ← 氣功資料檔
│ └── ...
├── _res_pngs/sys/ ← 大圖檔（.png）
│ ├── Lilith_f-r.png
│ ├── Lilith_s_x3.png
│ ├── Lilith-r_0.png
│ └── ...
└── mp3/ ← 音效（.mp3）
├── m_Lilith_01.mp3
└── ...
如何撰寫 _data.txt Writing _data.txt
遊戲完整的 _data.txt 在 _res_data/_data.txt，列出了所有物件。
如果只想針對單一角色（例如 Lilith），可以寫一份只包含該角色和她的氣功的 _data.txt：
The game's full _data.txt lives at _res_data/_data.txt and lists every object. If you only care about one character (e.g. Lilith), write a trimmed _data.txt that contains just that character and her energy objects:
id: 3 type: 0 file: _res_data/Lilith-r
id: 244 type: 3 file: _res_data/Lilith_ball-r
id: 245 type: 3 file: _res_data/Lilith_chasef-r
id: 246 type: 3 file: _res_data/Lilith_chasei-r
id: 247 type: 3 file: _res_data/Lilith_soul-r
id: 248 type: 3 file: _res_data/Lilith_jball-r
id: 249 type: 3 file: _res_data/Lilith_jbiscuit-r
id: 250 type: 3 file: _res_data/Lilith_fcol-r
id: 251 type: 3 file: _res_data/Lilith_jchaseh-r
id: 252 type: 3 file: _res_data/Lilith_jball2-r
id: 253 type: 3 file: _res_data/Lilith_fflame-r
id: 254 type: 1 file: _res_data/Lilith_sword-r
id: 122 type: 6 file: _res_data/Lilith_milk-r
id: 255 type: 3 file: _res_data/Lilith_fball-r
id: 256 type: 3 file: _res_data/Lilith_jchase-r
id 必須對應角色 opoint 區塊中的 oid，這樣 IDE 才能在角色和氣功檔案之間跳轉。
Each id must match the oid used in the character's opoint blocks — that's what lets the IDE jump between character and energy files.
📂 檔案操作 File Operations
| 功能 / Feature | 說明 / Description |
|---|
| Open Folder（開啟資料夾）Open Folder |
選擇遊戲目錄，自動掃描角色檔與 PNGPick the game directory; auto-scans character files and PNGs. |
| Open TXT（開啟 TXT）Open TXT |
手動選取單一 -r.txt 資料檔Manually pick a single -r.txt data file. |
| Save（儲存）Save |
覆寫原檔（需用 Open Folder 開啟才可覆寫），Ctrl+SOverwrites the original file (requires Open Folder). Ctrl+S. |
| Save As（另存新檔）Save As |
下載新檔案（不覆寫），Ctrl+Shift+SDownloads a new file without overwriting. Ctrl+Shift+S. |
| 角色切換下拉選單Character selector |
資料夾內有多個角色時，可快速切換Quickly switch when the folder contains multiple characters. |
| 關聯檔案自動偵測Linked file detection |
目前主要自動偵測 opoint 引用的氣功檔，列在 Files 分頁Currently auto-detects energy files referenced by opoint, listed in the Files tab. |
📝 程式碼編輯（中間面板）Code Editor (Center Panel)
| 功能 / Feature | 說明 / Description |
|---|
| 語法高亮Syntax highlighting |
標籤、參數名、數值、字串分色顯示（Monokai 風格）Colored tags, param names, numbers, and strings (Monokai style). |
| Undo / RedoUndo / Redo |
最多 50 步，Ctrl+Z / Ctrl+YUp to 50 steps. Ctrl+Z / Ctrl+Y. |
| 插入標籤按鈕列Insert tag buttons |
<f> Frame / <b> Body / <i> Itr / <o> Opoint / <w> Wpoint / <bp> Bpoint / <c> Cpoint / file()Quick-insert buttons for all common tags. |
| 智慧插入定位Smart insertion |
插入時自動處理換行，不多不少Handles newlines automatically on insert. |
| 子區塊按鈕禁用提示Context-aware buttons |
游標不在 <f...f> 區塊內時，子區塊插入按鈕自動禁用Sub-block buttons disable when the cursor is outside a frame block. |
| 游標自動同步Cursor sync |
點擊編輯器時自動選中對應的幀Clicking in the editor auto-selects the corresponding frame. |
| 內建搜尋／取代Built-in find / replace |
Ctrl+F 開啟搜尋、Ctrl+H 切換取代列；支援大小寫敏感（Aa）與正則表達式（.*）；Enter / Shift+Enter 切換上下個 match，編輯器內以亮黃色高亮目前項目；可取代當前 / 全部，並顯示即時 match 計數Ctrl+F opens search, Ctrl+H toggles replace; supports case-sensitive (Aa) and regex (.*); Enter / Shift+Enter navigates matches with bright-yellow highlight; replace current / all with live match counter. |
📋 左側面板 Left Panel
| 分頁 / Tab | 說明 / Description |
|---|
| Frames（幀）Frames |
所有幀的列表，點擊選取、↑↓ 鍵盤導航、Go to # 跳轉（Ctrl+G）List of all frames. Click to select, ↑/↓ to navigate, Ctrl+G to jump. |
| Skills（招式）Skills |
列出站立／走路幀的 hit_* 對應招式幀，顯示沿 next 追的單條連鎖路徑（深入分析請見 🔗 Move Chain）Lists hit_* targets from standing / walking frames and the single next chain path (see 🔗 Move Chain for full analysis). |
| Files（檔案）Files |
整個專案的檔案瀏覽器，支援搜尋、分類、排序Project-wide file browser with search, filters and sorting. |
Files 分頁細節 Files Tab Details
| 功能 / Feature | 說明 / Description |
|---|
| 搜尋欄Search box |
以檔名、ID、備註（#comment）模糊比對Fuzzy match by file name, ID or comment (#comment). |
| 類型標籤篩選Type chips |
Char / Ball / Weap / Spec 四種類型可多選過濾Multi-select filter across Char / Ball / Weap / Spec. |
| 主排序Primary sort |
data.txt 順序 / 類型+名稱 / 依所屬角色data.txt order / Type + Name / By owner. |
| 次要排序Secondary sort |
相同主排序下的第二層排序條件Tie-breaker sort used within the primary order. |
| 角色頭像縮圖Character head thumbnail |
自動從 head sys/ 切出首格並附在每筆檔案前Auto-cropped from head sys/ and prepended to each entry. |
| ID / 備註 / 類型標籤ID / Comment / Type label |
每筆檔案顯示 ID、#comment 備註與 BALL / WEAP / SPEC 類型標籤Each entry shows ID, #comment and a BALL / WEAP / SPEC type label. |
| ⚡ 引用標記⚡ Reference mark |
被以 opoint oid 引用的其他檔案標上 ⚡Other files referenced via opoint oid are marked with ⚡. |
| 狀態記憶State persistence |
篩選與排序設定以 localStorage 儲存Filter and sort settings are saved in localStorage. |
| 鍵盤導航Keyboard navigation |
↑／↓ 走實際渲染項目並自動捲動↑ / ↓ walks the rendered list and auto-scrolls. |
🎨 右側面板 Right Panel
| 功能 / Feature | 說明 / Description |
|---|
| Apply（套用修改）Apply |
將右側面板的修改寫回程式碼Writes right-panel edits back into the code. |
| Auto（自動套用）Auto-apply |
修改右側面板即時同步到程式碼（開啟前有確認提示）Live-syncs right-panel edits to the code (confirmation on enable). |
| 精靈圖預覽Sprite preview |
Canvas 即時顯示當前幀的 pic 圖片Canvas shows the current frame's pic in real time. |
| 疊加顯示開關Overlay toggles |
Body / Itr / Opoint / Wpoint / Bpoint / Cpoint / Center 各別可勾選顯示/隱藏Independently toggle Body/Itr/Opoint/Wpoint/Bpoint/Cpoint/Center overlays. |
| 🖌️ 範圍編輯器入口Hitbox editor entry |
預覽右上角筆刷按鈕，開啟 WYSIWYG 視覺化編輯Brush button on the preview opens the WYSIWYG editor. |
| Frame 屬性編輯Frame attributes |
pic、state、wait、next、dvx/dvy/dvz、centerx/centery、mp、sound 等Edit pic, state, wait, next, dvx/dvy/dvz, centerx/centery, mp, sound, etc. |
| Hit Actions（按鍵觸發）Hit Actions |
hit_a / hit_d / hit_j / hit_Fa / hit_Ua 等 10 組10 hit-action slots: hit_a / hit_d / hit_j / hit_Fa / hit_Ua etc. |
| 子區塊編輯Sub-block editing |
每個 bdy/itr/opoint/wpoint/bpoint/cpoint 獨立折疊區塊，所有參數可直接編輯Each bdy/itr/opoint/wpoint/bpoint/cpoint as a collapsible section with all params editable. |
| 🖼️ Pic PickerPic Picker |
pic 欄位旁的圖片選擇器，可預覽 file() 讀取範圖內的圖，選取後可載入Picker next to the pic field; preview sprites from file() and select one to load. |
| ▶ 音效試聽 / ⚙ 播放設定Sound preview / ⚙ Playback settings |
sound 欄位旁的播放按鈕與播放設定（音量、循環等）Play button and playback settings (volume, loop…) beside the sound field. |
| 建議值下拉Suggestion datalists |
所有欄位改為 input + datalist：可自由輸入，空白時顯示建議值All fields use input + datalist: free-text input, suggestions shown when empty. |
| Weapon 模式：Weapon ParamsWeapon mode: Weapon Params |
武器檔顯示 weapon_hp、weapon_drop_hurt、weapon_hit_sound、weapon_drop_sound、weapon_broken_soundWeapon files show weapon_hp, weapon_drop_hurt, weapon_hit_sound, weapon_drop_sound, weapon_broken_sound. |
| Weapon 模式：hit_* 隱藏Weapon mode: hit_* hidden |
武器檔自動隱藏 hit_* 欄位，header 改為「Weapon Other」（目前無項目）Weapon files auto-hide hit_* fields; header becomes "Weapon Other" (currently empty). |
| 保留額外欄位Preserve extra fields |
套用變更時保留 def 未宣告的欄位，避免自行新增內容被直接移除Apply preserves fields not declared in the def, so user-added content is not removed. |
⚔️ WSL 武器強度表 <wsl> Weapon Strength List Editor
| 功能 / Feature | 說明 / Description |
|---|
工具列 <wsl> 按鈕Toolbar <wsl> button |
僅於 <bmp> 範圍內啟用，點擊後開啟插入介面Enabled only inside <bmp>; opens the insert interface. |
| Insert 模板Insert template |
專屬插入介面，支援多區塊、多 entry 新增／刪除Dedicated interface supporting multiple blocks and multi-entry add / remove. |
| State 建議值State suggestions |
4 種 state 內建 datalist：normal / jump / run / dashFour built-in state datalist values: normal / jump / run / dash. |
| 多區塊解析Multi-block parsing |
解析器支援多個獨立 <wsl> 區塊Parser handles multiple independent <wsl> blocks. |
| 位置 Replace + 補缺Positional replace + fill-in |
套用時按位置覆寫並保留使用者新增的額外欄位（zwidth、dvz…）Apply replaces in place and preserves user-added extra keys (zwidth, dvz…). |
| 完整性檢查Integrity check |
缺 entry 1 / 2 / 3 / 4 或 state 名不符時顯示警告Warns when entry 1 / 2 / 3 / 4 is missing, or when a state name doesn't match. |
🔗 招式連鎖 Move Chain Move Chain Explorer
| 功能 / Feature | 說明 / Description |
|---|
| 四區分組Four-section grouping |
依 seed 類型分為「站立 / 跑步 / 防禦 / 抓投」出招四區，每招以「按鍵組合 ➡️ 招式名 [幀號]」呈現Grouped by seed type into Standing / Running / Defending / Catching, each move shown as "Buttons ➡️ Skill name [frame]". |
| 多段連按串接Multi-stage chaining |
把每招中途接的 hit_* 連按全部串成完整路徑，例如 DJA + DJA + A + J + J + A ➡️ eternal；相鄰同鍵壓成 A × NChains every mid-move hit_* follow-up into a single sequence, e.g. DJA + DJA + A + J + J + A ➡️ eternal; adjacent identical buttons collapse to A × N. |
| 連鎖終止規則Termination rules |
招式播完 next 回到站立等基本幀時視為連鎖結束；最多串 8 段按鍵、每段最多追 30 幀A combo ends when next returns to a basic frame; up to 8 button segments per combo, up to 30 frames per segment. |
| 去重與前綴剔除Dedup & prefix removal |
完全相同的按鍵組合只保留一筆，並把屬於更長組合「前段」的短組合剔除（例如已有 A + A + A 就不再列出 A + A）Identical sequences are deduplicated; short combos that are strict prefixes of longer ones are dropped (e.g. A + A is hidden when A + A + A exists). |
| 詳細步驟 DetailsDetails mode |
每一步顯示 (來源幀)按鍵 ➡️ 目標幀 "名稱" [state / wait / mp]Each step shows (source frame)Button ➡️ target "name" [state / wait / mp]. |
| 跨檔 refCross-file refs |
標註 catchingact / caughtact / taction、opoint 的 oid + action、weaponact 等跨幀／跨檔引用Annotates catchingact / caughtact / taction, opoint with oid + action, and weaponact. |
🖌️ 範圍編輯器 Hitbox Editor Modal
| 功能 / Feature | 說明 / Description |
|---|
| 視覺化拖曳移動Drag to move |
滑鼠拖曳任何 box / pointDrag any box or point with the mouse. |
| 8 點 Resize8-point resize |
四角 + 四邊控制點調整大小（box 類型）Four corners + four edges for box resizing. |
| 圖層面板Layers panel |
所有子區塊列為圖層，眼睛圖示切換可見性All sub-blocks listed as layers; eye icon toggles visibility. |
| Auto-select（自動選取）Auto-select |
點畫布自動選中對應圖層，預設開啟Click the canvas to auto-select the matching layer; on by default. |
| 雙擊循環Double-click cycle |
重疊圖層處雙擊，循環切換下一個Double-click overlapping layers to cycle through them. |
| Edit Center（修改中心點）Edit Center |
勾選後才能拖曳中心點，避免誤改Must be checked to drag the center point, preventing accidents. |
| Undo / RedoUndo / Redo |
拖曳後可撤銷/重做（Ctrl+Z / Ctrl+Y，modal 內獨立堆疊）Independent undo stack inside the modal (Ctrl+Z / Ctrl+Y). |
| Insert 插入標籤模式Insert mode |
從插入標籤的 modal 進入，視覺化定位新區塊的 x/y/w/hEnter from the insert-tag modal to visually place a new block's x/y/w/h. |
| Show others（顯示現有區塊）Show others |
Insert 插入標籤模式下可切換顯示/隱藏現有參考區塊In insert mode, toggle visibility of existing reference blocks. |
| 套用 / 取消Apply / Cancel |
Apply 寫回、Cancel 放棄所有修改Apply writes back, Cancel discards all changes. |
📦 插入標籤設定 Insert Config Modal
| 功能 / Feature | 說明 / Description |
|---|
| 動態表單Dynamic form |
根據 BLOCK_DEFS 自動產生所有欄位、下拉選單、提示文字Auto-generates all fields, dropdowns, and hints from BLOCK_DEFS. |
| 即時預覽Live preview |
預覽畫布即時顯示 x/y/w/h 位置Preview canvas shows x/y/w/h in real time. |
| 🖌️ 視覺化定位Visual placement |
子區塊類型的預覽右上角有筆刷按鈕，開啟範圍編輯器定位Brush button opens the hitbox editor to place the sub-block visually. |
| 人物 / 氣功 / 武器·道具 三模式切換Character / Ball / Weapon·Item three-mode switch |
Frame 類型分三種模式，各自套用專屬欄位與建議值Three frame modes, each with its own fields and suggestions. |
| Weapon 專屬 Frame 區段Weapon-only frame sections |
武器·道具模式有 Basic / Position / Other 三區專屬欄位Weapon·Item mode includes its own Basic / Position / Other sections. |
| Weapon Frame 幀數分配參考表Weapon Frame distribution reference |
可展開的幀號參考表（輕型／重型 0–399）Expandable frame-number reference table (light / heavy 0–399). |
| 雙語欄位提示Bilingual field hints |
幾乎所有欄位提示改為「中文 · English」雙行顯示Almost every field hint now shows as "Chinese · English" on two lines. |
| 可選欄位 checkboxOptional field toggle |
optional 欄位可勾選啟用/停用Optional fields can be enabled/disabled via checkbox. |
| 條件顯示區塊Conditional fields |
某些欄位依據其他欄位的值決定是否顯示Some fields show/hide based on other fields' values. |
🖼️ Pic Picker Image Picker
| 功能 / Feature | 說明 / Description |
|---|
| 格子預覽Grid preview |
所有 file() 載入的 sprite sheet 格子化顯示Shows all file()-loaded sprite sheets as a grid. |
| 點擊選取Click to pick |
點格子選擇 pic 編號Click a cell to choose the pic number. |
| 即時標示Live highlight |
當前編輯中的 pic 高亮顯示Highlights the currently edited pic. |
| 預覽模式Preview mode |
從 <bmp> 標題的 🖼️ 按鈕進入，可預覽 file() 引用的全部圖片並複製 pic 編號而不套用Launched from the 🖼️ button on the <bmp> header; preview all images referenced by file() and copy a pic number without applying it. |
🧩 Sprite Sheet Builder Tools: Sheet Builder
模式 / Modes
| 模式 / Mode | 說明 / Description |
|---|
| New Sheet（新建大圖）New Sheet |
拖入多張小圖 → 排列 → 產生 PNG + JSONDrop individual images → arrange → export PNG + JSON. |
| Import/Edit（匯入/編輯）Import / Edit |
載入現有大圖 → 切格 → 預覽動畫 → 匯出 GIFLoad an existing sheet → slice → animate → export GIF. |
功能 / Tools
| 功能 / Feature | 說明 / Description |
|---|
| 拖放上傳Drag-and-drop upload |
拖入圖片自動加入Drop images to add them automatically. |
| 拖曳排序Drag to reorder |
縮圖可拖曳重排順序Thumbnails can be dragged to reorder. |
| 全選 / 取消選取 / 刪除Select all / deselect / delete |
批次管理縮圖Batch-manage thumbnails. |
| 自動偵測參數Auto-detect params |
從現有 file() 宣告自動填入格寬/格高/起始 picAuto-fills cell width/height/start pic from existing file() declarations. |
| 動畫預覽Animation preview |
指定幀序列 + FPS 播放Play a frame sequence at a chosen FPS. |
| Export GIFExport GIF |
下載動畫 GIFDownload the animation as a GIF. |
| Insert into TXTInsert into TXT |
一鍵插入 file() 宣告到編輯器One-click insert of a file() declaration into the editor. |
▶ 播放功能 Playback
| 功能 / Feature | 說明 / Description |
|---|
| Play（播放）Play |
從當前幀沿 next 鏈播放動畫Plays the animation from the current frame along the next chain. |
| Chain（連鎖）Chain |
在狀態列顯示當前幀的 next 連鎖路徑Shows the current frame's next-chain path in the status bar. |
| 播放設定Playback settings |
音效開關、音量、自訂 FPS 速率、指定幀範圍、循環播放Sound on/off, volume, custom FPS, frame range, and loop playback. |
⌨️ 鍵盤快捷鍵 Keyboard Shortcuts
| 快捷鍵 / Shortcut | 功能 / Action |
|---|
| Ctrl+S | 儲存Save |
| Ctrl+Shift+S | 另存新檔Save As |
| Ctrl+Z | 上一步Undo |
| Ctrl+Y | 下一步Redo |
| Ctrl+G | 跳至指定幀Go to frame |
| ↑ / ↓ | 左側面板上下導航Navigate the left panel |
| Escape | 關閉說明Close help |
| Ctrl+Z / Ctrl+Y（modal 內） | 範圍編輯器的獨立 Undo / RedoIndependent undo/redo inside the hitbox editor modal |
📐 面板互動 Panel Interaction
| 功能 / Feature | 說明 / Description |
|---|
| 左右分隔線拖曳Draggable splitters |
左面板 / 編輯器 / 右面板的寬度可自由調整Freely resize the left panel, editor, and right panel. |
📖 輔助系統 Help System
| 功能 / Feature | 說明 / Description |
|---|
| Tutorial（教學）Tutorial |
8 頁新手教學，中英雙語Eight-page starter tutorial, bilingual (zh / en). |
| Help (?) 圖示Help (?) icon |
各功能旁的問號圖示，點擊彈出情境說明Question-mark icons beside features pop up contextual help. |
🔍 解析引擎 Parsing Engine
| 功能 / Feature | 說明 / Description |
|---|
| BMP 區塊解析BMP block parsing |
自動讀取 name、resized、centerx/y、file() 宣告Auto-reads name, resized, centerx/y, and file() declarations. |
| Frame 解析Frame parsing |
解析所有 <f...f> 區塊的屬性與子區塊Parses attributes and sub-blocks of every frame. |
| Skill Map 建構Skill map |
掃描所有 hit_* 建立招式對照表Scans all hit_* to build a skill reference table. |
| Type3 偵測Type3 detection |
自動偵測氣功/投射物檔，調整 UIAuto-detects energy/projectile files and adjusts the UI. |
| Flat Folder 模式Flat-folder mode |
無 _data.txt 時掃描資料夾所有 -r.txtWithout _data.txt, scans every -r.txt in the folder. |
| 備註解析Comment parsing |
解析 data.txt 中檔案後方的 #comment 作為辨識備註Parses #comment after file paths in data.txt as identifying notes. |
| opoint 反向引用偵測opoint back-reference detection |
掃描所有 opoint oid 建立被引用關係，於 Files 分頁標 ⚡Scans all opoint oid to build back-references; shown as ⚡ in the Files tab. |
| WSL 區塊解析WSL block parsing |
支援多個獨立 <wsl> 區塊，並保留使用者新增的額外欄位Handles multiple independent <wsl> blocks and preserves user-added extra keys. |
| 檔案模式自動偵測File mode auto-detection |
自動判別 char / ball / weapon，依模式切換介面Auto-detects char / ball / weapon and adjusts the interface accordingly. |
