110 lines
7.2 KiB
HTML
110 lines
7.2 KiB
HTML
<section id="view-ans" class="view">
|
||
<header class="bar top">
|
||
<button id="ans-src" class="iconbtn" title="Where skeletons, meshes and animations are read from"><i data-icon="box"></i><span id="ans-src-label">Choose packs…</span></button>
|
||
<button id="ans-new" class="iconbtn" title="A new empty animation on the current character"><i data-icon="newfile"></i><span>New</span></button>
|
||
<button id="ans-open-file" class="iconbtn" title="Open an .ani from disk (e.g. exported from Blender)"><i data-icon="folder"></i><span>Open .ani…</span></button>
|
||
<div class="ims-title"><span id="ans-title" class="muted"></span><span id="ans-dirty" class="dot bad" title="Unsaved changes" hidden></span></div>
|
||
<div class="spacer"></div>
|
||
<button id="ans-undo" class="iconbtn only" title="Undo (Ctrl+Z)" disabled><i data-icon="undo"></i></button>
|
||
<button id="ans-redo" class="iconbtn only" title="Redo (Ctrl+Y)" disabled><i data-icon="redo"></i></button>
|
||
<button id="ans-export" class="iconbtn" title="Export"><i data-icon="download"></i><span>Export</span></button>
|
||
<button id="ans-save" class="btn primary" disabled><i data-icon="save"></i>Save</button>
|
||
</header>
|
||
|
||
<div class="split">
|
||
<aside id="ans-left" class="ims-left">
|
||
<div class="mdl-kinds">
|
||
<div id="ans-kinds" class="seg">
|
||
<button data-kind="model" class="on" title="Model configs: use as the character (skeleton + meshes)">Models</button>
|
||
<button data-kind="skl" title="Skeletons: use as the character">Skel</button>
|
||
<button data-kind="msh" title="Meshes: add to the character">Meshes</button>
|
||
<button data-kind="ani" title="Animations: open, join, retarget">Anims</button>
|
||
</div>
|
||
</div>
|
||
<div class="ims-head">
|
||
<div class="search"><i data-icon="search"></i><input id="ans-search" type="search" placeholder="Search" spellcheck="false" /></div>
|
||
<span id="ans-count" class="muted"></span>
|
||
</div>
|
||
<div id="ans-list" class="mdl-list"></div>
|
||
<div class="ims-foot muted mdl-hint">Double-click uses it · right-click for more</div>
|
||
</aside>
|
||
<div class="splitter" data-target="ans-left" data-edge="left" title="Drag to resize"></div>
|
||
|
||
<div class="main-col">
|
||
<div class="bar nav">
|
||
<div id="ans-tools" class="seg">
|
||
<button data-tool="view" class="on" title="View: drag turns the camera, click picks a bone (Esc)">View</button>
|
||
<button data-tool="rotate" title="Rotate the selected bone: drag (Ctrl = twist around the view) (R)">Rotate</button>
|
||
<button data-tool="move" title="Move the selected bone (mostly the root, Bip01): drag (G)">Move</button>
|
||
</div>
|
||
<button id="ans-t-mesh" class="iconbtn toggle on" title="Meshes"><i data-icon="cube"></i><span>Mesh</span></button>
|
||
<button id="ans-t-bones" class="iconbtn toggle on" title="Bones"><i data-icon="bone"></i><span>Bones</span></button>
|
||
<button id="ans-t-ghost" class="iconbtn toggle on" title="The source skeleton of an import / retarget, drawn where it lands"><i data-icon="swap"></i><span>Source</span></button>
|
||
<button id="ans-t-grid" class="iconbtn toggle on only" title="Floor grid (y = 0)"><i data-icon="floor"></i></button>
|
||
<div class="spacer"></div>
|
||
<span id="ans-info" class="muted ims-texinfo"></span>
|
||
<button id="ans-reset" class="iconbtn only" title="Reset the view"><i data-icon="focus"></i></button>
|
||
</div>
|
||
<div class="mdl-stage">
|
||
<canvas id="ans-canvas" tabindex="0"></canvas>
|
||
<div id="ans-labels" class="ans-labels"></div>
|
||
<div id="ans-loading" class="mdl-loading" hidden><i></i><span>Loading…</span></div>
|
||
</div>
|
||
<div id="ans-transport" class="ans-transport">
|
||
<button id="ans-play" class="iconbtn only" title="Play / pause (Space)"><i data-icon="play"></i></button>
|
||
<span id="ans-clock" class="mono"></span>
|
||
<select id="ans-speed" title="Playback speed">
|
||
<option value="0.1">0.1×</option><option value="0.25">0.25×</option><option value="0.5">0.5×</option><option value="1" selected>1×</option><option value="2">2×</option>
|
||
</select>
|
||
<button id="ans-loop" class="iconbtn toggle on only" title="Loop"><i data-icon="refresh"></i></button>
|
||
<span class="ans-sep"></span>
|
||
<button id="ans-key" class="iconbtn" title="Key the selected bone at the playhead (K)"><i data-icon="plus"></i><span>Key</span></button>
|
||
<button id="ans-key-all" class="iconbtn" title="Key every bone at the playhead (Shift+K)"><i data-icon="plus"></i><span>Key all</span></button>
|
||
<button id="ans-del-keys" class="iconbtn" title="Delete the selected keys (Del)"><i data-icon="trash"></i></button>
|
||
<div class="spacer"></div>
|
||
<span id="ans-range-label" class="muted"></span>
|
||
</div>
|
||
<div id="ans-dope" class="ans-dope"><canvas id="ans-dope-canvas" tabindex="0"></canvas></div>
|
||
<div id="ans-empty" class="empty">
|
||
<div class="empty-card">
|
||
<i data-icon="bone" class="big"></i>
|
||
<h2>Anim Studio</h2>
|
||
<p>Pick the packs, then double-click a <b>model</b> or <b>skeleton</b> for the character (heroes: <b>human_man</b> / <b>human_woman</b>) and an <b>animation</b> to edit — or <b>New</b> for an empty one.</p>
|
||
<p class="muted">Click a bone, then Rotate / Move and drag; every change keys the bone at the playhead. Shift-drag the ruler for a time range.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="splitter" data-target="ans-side" data-edge="right" title="Drag to resize"></div>
|
||
<aside id="ans-side" class="ims-side ans-side">
|
||
<section class="ims-card">
|
||
<h4>Character <span id="ans-char-name" class="muted"></span></h4>
|
||
<div id="ans-char"></div>
|
||
</section>
|
||
<section class="ims-card">
|
||
<h4>Clip <span id="ans-clip-name" class="muted"></span></h4>
|
||
<div id="ans-clip"></div>
|
||
</section>
|
||
<section class="ims-card">
|
||
<h4>Bone <span id="ans-bone-name" class="muted"></span></h4>
|
||
<div id="ans-bone"></div>
|
||
</section>
|
||
<section class="ims-card">
|
||
<h4>Cut & join</h4>
|
||
<div id="ans-ops"></div>
|
||
</section>
|
||
<section class="ims-card">
|
||
<h4>Events <span id="ans-ev-count" class="muted"></span></h4>
|
||
<div id="ans-events"></div>
|
||
</section>
|
||
<section class="ims-card">
|
||
<h4>Hitbox</h4>
|
||
<div id="ans-hit"></div>
|
||
</section>
|
||
<section class="ims-card">
|
||
<h4>Blender</h4>
|
||
<div id="ans-blender"></div>
|
||
</section>
|
||
</aside>
|
||
</div>
|
||
</section> |