37 lines
21 KiB
HTML
37 lines
21 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Aego · Asset Studio</title><link rel="stylesheet" href="studio.css"></head>
|
||
<body>
|
||
<header class="appbar"><div class="brand"><span class="brand-mark">A</span><strong>AEGO</strong><span class="app-name">Asset Studio</span><span class="build-badge">12.5 · authoring slice</span></div><nav class="workspaces" aria-label="Workspace"><button data-workspace="art" class="active">Art</button><button data-workspace="animation">Animation</button><button data-workspace="vfx">VFX</button></nav><div class="app-actions"><button id="toggle-side" class="icon-btn" aria-label="Palette and layers">☷</button><select id="theme" aria-label="Тема" title="Тема"><option value="auto" data-i18n="theme-auto">Авто</option><option value="dark" data-i18n="theme-dark">Тёмная</option><option value="light" data-i18n="theme-light">Светлая</option></select><button id="language" class="quiet">RU</button><button id="fullscreen" class="icon-btn" title="Полноэкранный режим" aria-label="Полноэкранный режим"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5"/></svg></button></div></header>
|
||
<div class="menubar"><button id="new" data-i18n="new">Создать</button><button id="open" data-i18n="open">Открыть</button><button id="save" data-i18n="save">Сохранить .aeart</button><span class="divider"></span><button id="undo" data-i18n="undo">Отменить</button><button id="redo" data-i18n="redo">Повторить</button><span class="divider"></span><button id="export-png">PNG ↗</button><button id="export-sheet" data-i18n="sheet">Спрайт-лист ↗</button><span class="menu-spacer"></span><span class="privacy" data-i18n="local">Файлы остаются в браузере</span></div>
|
||
<main class="studio">
|
||
<aside class="tools" id="tools" aria-label="Tools"></aside>
|
||
<section class="document-area">
|
||
<div class="tabbar"><div id="document-tabs" role="tablist" aria-label="Documents"></div><span id="document-info" class="muted"></span></div>
|
||
<div class="tool-options"><span id="tool-name"></span><span class="divider"></span><label><span data-i18n="size">Размер</span><input id="brush-size" type="number" min="1" max="128" value="1"></label><label><input id="pixel-perfect" type="checkbox" checked><span>Pixel Perfect</span></label><label><input id="filled" type="checkbox"><span data-i18n="filled">Заливка</span></label><label><span data-i18n="brush-shape">Форма</span><select id="brush-shape"><option value="square" data-i18n="square">Квадрат</option><option value="round" data-i18n="round">Круг</option></select></label><label><span data-i18n="dither">Дизеринг</span><input id="brush-dither" type="number" min="0" max="16" value="0"></label><select id="brush-source" aria-label="Brush source"><option value="solid" data-i18n="brush-solid">Цвет</option><option value="stamp" data-i18n="brush-stamp">Своя кисть</option><option value="pattern" data-i18n="brush-pattern">Узор</option></select><button id="capture-brush" data-i18n="capture-brush">Из выделения</button><button id="mirror-x" class="toggle" title="Horizontal symmetry">↔</button><button id="mirror-y" class="toggle" title="Vertical symmetry">↕</button><label class="channel-label"><span data-i18n="channel">Канал</span><select id="channel"><option value="albedo">Albedo</option><option value="normal">Normal</option><option value="height">Height</option><option value="emission">Emission</option></select></label></div>
|
||
<div class="recovery hidden" id="recovery"><span data-i18n="recovered">В браузере есть несохранённая работа.</span><select id="recovery-choice" aria-label="Recovery document"></select><button id="restore" data-i18n="restore">Восстановить</button><button id="dismiss-recovery">×</button></div>
|
||
<div class="viewport" id="viewport" tabindex="0"><div id="stage-shell"><div id="stage"><canvas id="canvas" tabindex="0" aria-label="Pixel canvas"></canvas><div id="pixel-grid"></div><div id="selection-box" class="hidden"></div><div id="pivot-overlay" class="hidden" aria-hidden="true">+</div><div id="cursor" class="hidden"></div></div></div><div class="loading" id="loading"><strong>Asset Studio</strong><span data-i18n="loading">Загрузка общего Go/WASM-ядра…</span></div></div>
|
||
<div class="canvas-footer"><span id="coordinates">—</span><span id="selection-info"></span><span class="menu-spacer"></span><select id="canvas-background" aria-label="Transparency background"><option value="checker" data-i18n="background-checker">Шахматный</option><option value="light" data-i18n="background-light">Светлый</option><option value="dark" data-i18n="background-dark">Тёмный</option></select><button id="grid" class="toggle active" data-i18n="grid">Сетка</button><button id="zoom-out">−</button><span id="zoom">800%</span><button id="zoom-in">+</button><button id="fit" data-i18n="fit">Вписать</button></div>
|
||
</section>
|
||
<aside class="sidebar" id="sidebar">
|
||
<section class="palette-panel"><div class="panel-heading"><strong data-i18n="palette">Палитра</strong><select id="mode" aria-label="Color mode"><option value="rgba">RGBA</option><option value="grayscale" data-i18n="gray">Серый</option><option value="indexed">Indexed</option></select></div><div class="color-controls"><input id="fg-color" type="color" value="#ff696e" aria-label="Foreground color"><div><span class="muted" data-i18n="foreground">Основной цвет</span><input id="hex-color" value="#ff696e" maxlength="9" aria-label="Hex color"></div><label class="color-alpha">α<input id="fg-alpha" type="number" min="0" max="255" value="255" aria-label="Alpha"></label><button id="swap-colors" title="Swap foreground/background · X">⇄</button></div><div id="swatches" class="swatches"></div><div class="palette-actions"><button id="palette-import" data-i18n="palette-import">Импорт</button><button id="palette-export" data-i18n="palette-export">Экспорт</button><button id="palette-extract" data-i18n="palette-extract">Из рисунка</button><button id="palette-order" data-i18n="palette-order">Порядок</button><button id="ramp-shade" data-i18n="ramp-shade">Оттенки</button></div><div class="palette-bottom"><span id="palette-info" class="muted">16 colors</span><button id="palette-edit" data-i18n="edit-color">Изменить цвет</button></div></section>
|
||
<section class="layers-panel"><div class="panel-heading"><strong data-i18n="layers">Слои</strong><div><button id="add-layer" title="Add layer">+</button><button id="layer-properties" title="Layer properties">⋯</button><button id="duplicate-layer" title="Дублировать слой" aria-label="Дублировать слой"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="8" y="8" width="12" height="12" rx="1"/><path d="M16 8V4H4v12h4"/></svg></button><button id="delete-layer" title="Delete layer">−</button></div></div><div id="layers" class="layer-list"></div><div class="layer-settings"><label><span data-i18n="opacity">Непрозрачность</span><input id="opacity" type="range" min="0" max="255" value="255"><output id="opacity-value">100%</output></label><div><select id="blend" aria-label="Blend mode"><option value="normal">Normal</option><option value="multiply">Multiply</option><option value="screen">Screen</option><option value="add">Add</option></select><button id="alpha-lock" class="toggle" title="Alpha lock">α</button><button id="layer-up" title="Layer up">↑</button><button id="layer-down" title="Layer down">↓</button><button id="merge-down" data-i18n="merge-down">Слить вниз</button><button id="isolate-layer" class="toggle" data-i18n="isolate-layer">Изоляция</button></div></div></section>
|
||
<section class="preview-panel"><div class="panel-heading"><strong data-i18n="preview">Предпросмотр</strong><select id="gpu-mode" aria-label="Preview mode"><option value="pixels">Pixels · 4×</option><option value="sprite">GPU · Sprite</option><option value="lit">Lit / Normal</option><option value="normal">Normal channel</option><option value="height">Height channel</option><option value="emission">Emission channel</option><option value="flash">Flash</option><option value="dissolve">Dissolve</option><option value="particles">ParticleSystem2D</option></select></div><div class="preview-space"><canvas id="preview" aria-label="Animation preview"></canvas><canvas id="gpu-preview" data-aego class="hidden" aria-label="Aego GPU preview"></canvas></div><div id="gpu-controls" class="gpu-controls hidden"><button id="gpu-restart" type="button" hidden data-i18n="gpu-restart">Повторить эффект</button><label><input id="gpu-flip-x" type="checkbox">Flip X</label><label><input id="gpu-flip-y" type="checkbox">Flip Y</label><label><input id="gpu-shadows" type="checkbox"><span data-i18n="gpu-shadows">Тени</span></label><label><input id="gpu-bloom" type="checkbox">Bloom</label><label><span data-i18n="gpu-light">Свет</span><input id="gpu-light" type="range" min="-2" max="2" step="0.05" value="-0.7"></label><label>Emission<input id="gpu-emission" type="range" min="0" max="16" step="0.1" value="3"></label><label>Flash / Dissolve<input id="gpu-amount" type="range" min="0" max="1" step="0.01" value="0.5"></label><label><span data-i18n="gpu-rate">Частиц/с</span><input id="gpu-rate" type="range" min="0" max="256" step="1" value="16"></label></div><p id="gpu-status" class="gpu-status hidden" role="status"></p><div class="preview-controls"><button id="flip-x" data-i18n="flip-x">Отразить X</button><button id="rotate" data-i18n="rotate">Повернуть</button><button id="transform" data-i18n="transform">Преобразовать</button><button id="tile-preview" class="toggle" data-i18n="tile-preview">Мозаика</button></div></section>
|
||
</aside>
|
||
<section class="timeline"><div class="timeline-toolbar"><strong data-i18n="timeline">Кадры и ячейки</strong><span class="divider"></span><button id="first-frame" title="First frame">|◀</button><button id="play" title="Play / Pause · Enter">▶</button><button id="next-frame" title="Next frame">▶|</button><label class="onion-label"><input id="onion" type="checkbox"><span data-i18n="onion">Калька</span></label><span class="menu-spacer"></span><button id="add-frame" data-i18n="frame-add">+ Кадр</button><button id="duplicate-frame" data-i18n="duplicate">Копия</button><button id="link-frame" data-i18n="link">Связать</button><button id="unlink" data-i18n="unlink">Отвязать</button><button id="delete-frame" aria-label="Delete frame">−</button></div><div class="timeline-range-toolbar"><span id="range-info" class="muted" data-i18n="range-hint">Shift — диапазон · Ctrl — несколько ячеек</span><span class="menu-spacer"></span><button id="range-transfer" data-i18n="range-transfer">Перенос / копия</button><button id="copy-animation" data-i18n="copy-animation">Копировать кадры</button><button id="paste-animation" data-i18n="paste-animation">Вставить анимацию</button><button id="frame-left" aria-label="Move frame left">←</button><button id="frame-right" aria-label="Move frame right">→</button></div><div id="timeline-scroll"><table id="timeline-table" aria-label="Layers by frames"></table></div><div class="timeline-footer"><label><span data-i18n="duration">Длительность</span><input id="duration" type="number" min="1" max="600000" value="100"><span>ms</span></label><span class="divider"></span><label><span data-i18n="tag">Метка</span><select id="tags"><option value="" data-i18n="all-frames">Все кадры</option></select></label><button id="add-tag">+</button><button id="pivot" data-i18n="pivot">Привязка</button><button id="edit-tag" data-i18n="edit">Изменить</button><button id="delete-tag" aria-label="Delete tag">−</button><span class="menu-spacer"></span><span id="frame-info" class="muted"></span></div></section>
|
||
</main>
|
||
<footer class="statusbar"><span class="status-dot"></span><span id="status" role="status" data-i18n="loading">Загрузка…</span><span class="menu-spacer"></span><span data-i18n="hints">B — карандаш · E — ластик · Ctrl+Z — отменить · Esc — отменить жест</span></footer>
|
||
<input type="file" id="palette-input" accept=".json,.gpl" hidden><input type="file" id="file-input" accept=".aeart,.png,.ase,.aseprite" hidden>
|
||
<dialog id="new-dialog"><form method="dialog"><h2 data-i18n="new-document">Новый рисунок</h2><label><span data-i18n="template">Шаблон</span><select name="template" aria-label="Effect template"><option value="" data-i18n="blank-document">Пустой документ</option></select></label><p id="template-help" hidden data-i18n="template-help">Шаблон содержит редактируемые слои, палитру и кадры. Предпросмотр использует соответствующий ParticleSystem2D.</p><label><span data-i18n="width">Ширина</span><input name="width" type="number" min="1" max="2048" value="64" required></label><label><span data-i18n="height">Высота</span><input name="height" type="number" min="1" max="2048" value="64" required></label><label><span data-i18n="color-mode">Режим цвета</span><select name="mode"><option value="rgba">RGBA</option><option value="indexed">Indexed</option><option value="grayscale">Grayscale</option></select></label><div class="dialog-actions"><button formnovalidate value="cancel" data-i18n="cancel">Отмена</button><button value="create" class="primary" data-i18n="create">Создать</button></div></form></dialog>
|
||
<dialog id="tag-dialog"><form method="dialog"><h2 data-i18n="animation-tag">Метка анимации</h2><label><span data-i18n="name">Имя</span><input name="name" value="Idle" maxlength="128" required></label><label><span data-i18n="from">От кадра</span><input name="from" type="number" min="1" value="1" required></label><label><span data-i18n="to">До кадра</span><input name="to" type="number" min="1" value="1" required></label><label><span data-i18n="direction">Направление</span><select name="direction"><option value="forward">Forward</option><option value="reverse">Reverse</option><option value="ping-pong">Ping-pong</option></select></label><div class="dialog-actions"><button formnovalidate value="cancel" data-i18n="cancel">Отмена</button><button value="create" class="primary" data-i18n="create">Создать</button></div></form></dialog>
|
||
|
||
<dialog id="pivot-dialog"><form method="dialog"><h2 data-i18n="pivot">Точка привязки кадра</h2><p data-i18n="pivot-help">Координаты в пикселях текущего кадра. Изменяется только точка привязки изображения, коллайдеры не затрагиваются.</p><label>X<input name="x" type="number" min="-4096" max="4096" required></label><label>Y<input name="y" type="number" min="-4096" max="4096" required></label><div class="dialog-actions"><button formnovalidate value="cancel" data-i18n="cancel">Отмена</button><button value="apply" class="primary" data-i18n="apply">Применить</button></div></form></dialog>
|
||
<dialog id="transform-dialog"><form method="dialog"><h2 data-i18n="transform">Преобразование выделенных пикселей</h2><label><span data-i18n="action">Действие</span><select name="kind"><option value="flip-x">Flip X</option><option value="flip-y">Flip Y</option><option value="rotate-cw">Rotate 90°</option><option value="rotate-ccw">Rotate −90°</option><option value="scale" data-i18n="scale">Масштаб</option></select></label><label><span data-i18n="width">Ширина</span><input name="width" type="number" min="1" max="2048" value="32" required></label><label><span data-i18n="height">Высота</span><input name="height" type="number" min="1" max="2048" value="32" required></label><div class="dialog-actions"><button formnovalidate value="cancel" data-i18n="cancel">Отмена</button><button value="apply" class="primary" data-i18n="apply">Применить</button></div></form></dialog>
|
||
<dialog id="ramp-dialog"><form method="dialog"><h2 data-i18n="ramp-shade">Оттенки палитры</h2><p data-i18n="ramp-help">Сдвинуть цвета выделенных пикселей внутри выбранного диапазона палитры.</p><label><span data-i18n="ramp-first">Первый индекс</span><input name="first" type="number" min="1" max="255" value="1" required></label><label><span data-i18n="ramp-last">Последний индекс</span><input name="last" type="number" min="1" max="255" value="15" required></label><label><span data-i18n="ramp-step">Сдвиг</span><input name="step" type="number" min="-255" max="255" value="1" required></label><div class="dialog-actions"><button formnovalidate value="cancel" data-i18n="cancel">Отмена</button><button value="apply" class="primary" data-i18n="apply">Применить</button></div></form></dialog>
|
||
<dialog id="palette-dialog"><form method="dialog"><h2 data-i18n="palette-extract">Палитра из рисунка</h2><p data-i18n="palette-help">Без квантования рисунок не меняется. Квантование явно ограничивает цвета всей анимации.</p><label><span data-i18n="color-limit">Количество цветов</span><input name="limit" type="number" min="2" max="256" value="16" required></label><label><input name="quantize" type="checkbox"><span data-i18n="quantize">Квантовать цвета рисунка</span></label><div class="dialog-actions"><button formnovalidate value="cancel" data-i18n="cancel">Отмена</button><button value="apply" class="primary" data-i18n="apply">Применить</button></div></form></dialog>
|
||
<dialog id="palette-order-dialog"><form method="dialog"><h2 data-i18n="palette-order">Порядок палитры</h2><p data-i18n="palette-order-help">Укажите все индексы через запятую. Индекс 0 остаётся первым. Перестановка сохраняет вид рисунка.</p><label><span data-i18n="indices">Индексы</span><textarea name="order" rows="4" required></textarea></label><label><input name="recolor" type="checkbox"><span data-i18n="recolor">Remap: намеренно перекрасить индексы</span></label><div class="dialog-actions"><button formnovalidate value="cancel" data-i18n="cancel">Отмена</button><button value="apply" class="primary" data-i18n="apply">Применить</button></div></form></dialog>
|
||
<dialog id="range-dialog"><form method="dialog"><h2 data-i18n="range-transfer">Перенос / копия ячеек</h2><p data-i18n="range-help">Смещение от исходных ячеек. Отрицательное число означает предыдущие кадры или нижние слои.</p><label><span data-i18n="frame-offset">Смещение кадров</span><input name="frames" type="number" value="1" required></label><label><span data-i18n="layer-offset">Смещение слоёв</span><input name="layers" type="number" value="0" required></label><label><span data-i18n="action">Действие</span><select name="operation"><option value="move" data-i18n="move">Перенести</option><option value="copy" data-i18n="duplicate">Копия</option><option value="link" data-i18n="link">Связать</option></select></label><label><input name="overwrite" type="checkbox"><span data-i18n="overwrite-cels">Разрешить замену целевых ячеек</span></label><div class="dialog-actions"><button formnovalidate value="cancel" data-i18n="cancel">Отмена</button><button value="apply" class="primary" data-i18n="apply">Применить</button></div></form></dialog>
|
||
<dialog id="layer-dialog"><form method="dialog"><h2 data-i18n="layer-properties">Свойства слоя</h2><label><span data-i18n="name">Имя</span><input name="name" maxlength="128" required></label><label><span data-i18n="layer-kind">Тип</span><select name="kind"><option value="raster" data-i18n="raster">Растровый</option><option value="group" data-i18n="group">Группа</option><option value="reference" data-i18n="reference">Референс</option></select></label><label><span data-i18n="parent">Группа</span><select name="parent"></select></label><div class="dialog-actions"><button formnovalidate value="cancel" data-i18n="cancel">Отмена</button><button value="apply" class="primary" data-i18n="apply">Применить</button></div></form></dialog>
|
||
<script src="wasm_exec.js"></script><script src="recovery.js"></script><script src="gpu-preview.js"></script><script src="studio.js"></script>
|
||
</body></html>
|