50 lines
4.9 KiB
HTML
50 lines
4.9 KiB
HTML
<section id="view-fxlab" class="view">
|
|
<header class="bar top">
|
|
<button id="fxl-src" class="iconbtn" title="Game packs used for pack textures and the hero preview"><i data-icon="box"></i><span id="fxl-src-label">Choose packs…</span></button>
|
|
<button id="fxl-new" class="iconbtn" title="Start an empty effect"><i data-icon="plus"></i><span>New</span></button>
|
|
<input id="fxl-name" class="fxl-name" type="text" spellcheck="false" value="my_effect" title="Effect name (file name of the export)" />
|
|
<button id="fxl-save-preset" class="iconbtn" title="Save as a preset (FX Lab library)"><i data-icon="save"></i><span>Save preset</span></button>
|
|
<button id="fxl-open" class="iconbtn" title="Open an existing Lost Saga effect (packs or file) or a preset JSON"><i data-icon="folder"></i><span>Open…</span></button>
|
|
<button id="fxl-export-json" class="iconbtn" title="Export the preset as JSON"><i data-icon="download"></i><span>JSON</span></button>
|
|
<div class="spacer"></div>
|
|
<button id="fxl-export-sheet" class="iconbtn" title="Render the free preview to a sprite sheet PNG + Aseprite-style JSON"><i data-icon="image"></i><span>Sprite sheet…</span></button>
|
|
<button id="fxl-save" class="iconbtn" title="Save the script back to the effect it was opened from" hidden><i data-icon="save"></i><span id="fxl-save-label">Save</span></button>
|
|
<button id="fxl-export-ls" class="btn primary" title="Write resource/effect/<name>.txt and its textures (DDS) to a folder"><i data-icon="upload"></i>Export LS effect…</button>
|
|
</header>
|
|
<div class="split">
|
|
<aside id="fxl-left" class="ims-left">
|
|
<div class="ims-head"><div class="search"><i data-icon="search"></i><input id="fxl-search" type="search" placeholder="Search presets" spellcheck="false" /></div></div>
|
|
<div id="fxl-presets" class="ims-list fxl-presets"></div>
|
|
<div class="ims-foot muted mdl-hint">Click a preset to load it</div>
|
|
</aside>
|
|
<div class="splitter" data-target="fxl-left" data-edge="left" title="Drag to resize"></div>
|
|
<div class="main-col">
|
|
<div class="bar nav">
|
|
<button id="fxl-play" class="iconbtn toggle on" title="Play or pause"><i data-icon="play"></i><span>Play</span></button>
|
|
<button id="fxl-restart" class="iconbtn only" title="Restart (fire the effect again)"><i data-icon="refresh"></i></button>
|
|
<button id="fxl-grid" class="iconbtn only toggle on" title="Floor grid"><i data-icon="floor"></i></button>
|
|
<select id="fxl-mode" title="Where the effect plays">
|
|
<option value="free">Free (no hero)</option>
|
|
<option value="bone">On hero (bone)</option>
|
|
<option value="hit">Hit target</option>
|
|
</select>
|
|
<select id="fxl-anim" title="Hero animation played with the effect" hidden></select>
|
|
<select id="fxl-bg" title="Background">
|
|
<option value="gray">Gray</option><option value="dark">Dark</option><option value="black">Black</option>
|
|
</select>
|
|
<div class="spacer"></div><span id="fxl-stats" class="mono muted"></span>
|
|
<button id="fxl-reset" class="iconbtn only" title="Reset camera"><i data-icon="focus"></i></button>
|
|
</div>
|
|
<div id="fxl-stage" class="mdl-stage fx-stage"><canvas id="fxl-canvas" tabindex="0"></canvas></div>
|
|
<div class="ims-help muted">Pick a preset, then tune the selected layer on the right. Drag to orbit, right-drag to pan, wheel to zoom. Curves: drag points, double-click to add, right-click to remove.</div>
|
|
</div>
|
|
<div class="splitter" data-target="fxl-side" data-edge="right" title="Drag to resize"></div>
|
|
<aside id="fxl-side" class="ims-side fx-side fxl-side">
|
|
<section class="ims-card"><h4>Layers</h4><div id="fxl-layers" class="fxl-layers"></div>
|
|
<details id="fxl-notes" class="fxl-notes" hidden></details>
|
|
<div class="fx-actions"><button id="fxl-add-layer" class="iconbtn"><i data-icon="plus"></i>Layer</button><button id="fxl-dup-layer" class="iconbtn" title="Duplicate layer"><i data-icon="copy"></i></button><button id="fxl-up-layer" class="iconbtn" title="Move up"><i data-icon="up"></i></button><button id="fxl-del-layer" class="iconbtn danger" title="Remove layer"><i data-icon="trash"></i></button></div></section>
|
|
<section class="ims-card fxl-props-card"><h4>Layer <span id="fxl-layer-name" class="muted"></span></h4><div id="fxl-props" class="fxl-props"></div></section>
|
|
<section class="ims-card"><details><summary class="muted">Lost Saga script (generated)</summary><textarea id="fxl-script" class="fx-script fxl-script" spellcheck="false" readonly></textarea></details></section>
|
|
</aside>
|
|
</div>
|
|
</section> |