Skip to content

feat: add sprite-sheet subsystem with sidebar tab integration#129

Open
silent-reader-cn wants to merge 3 commits into
Mesh2Motion:mainfrom
silent-reader-cn:feat/sprite-sheet-overhaul
Open

feat: add sprite-sheet subsystem with sidebar tab integration#129
silent-reader-cn wants to merge 3 commits into
Mesh2Motion:mainfrom
silent-reader-cn:feat/sprite-sheet-overhaul

Conversation

@silent-reader-cn

Copy link
Copy Markdown

概述

添加 sprite sheet 子系统到侧栏,包括完整的设置面板、实时预览和导出功能。

变更内容

核心文件(新增)

  • src/lib/sprite-sheet/SpriteSheetExporter.ts — WebGL 渲染器导出精灵表为 PNG
  • src/lib/sprite-sheet/SpriteSheetSettings.ts — 持久化配置(localStorage)
  • src/lib/sprite-sheet/SpriteSheetUI.ts — 侧栏标签页 UI
  • src/lib/sprite-sheet/sprite-sheet.css — 设置面板样式
  • src/lib/SceneEnvironmentManager.ts — 渲染器生命周期管理
  • server.cjs — 生产环境静态文件服务器

修改文件

  • src/create.html / src/index.html — 侧栏标签页 HTML 结构
  • src/lib/EventListeners.ts — sprite sheet 导出事件绑定
  • src/lib/UI.ts — DOM 元素引用
  • src/lib/processes/animations-listing/ — 动画列表 UI 改进
  • src/Mesh2MotionEngine.ts — SceneEnvironmentManager 集成
  • src/styles.css — 侧栏通用样式

功能特性

  • ✅ 侧栏 Sprite Sheet 标签页(替代旧的浮动弹窗)
  • ✅ 实时预览画布(独立 WebGLRenderer)
  • ✅ 采样频率、相机俯仰角/距离控制
  • ✅ 画布/帧尺寸、内边距设置
  • ✅ 剪影模式(黑底绿幕)
  • ✅ 8 方向选择(All / Cardinal / Diagonal 快捷按钮)
  • ✅ Flow / Legacy 布局模式(1 row per direction)
  • ✅ 粘性底部操作按钮

验证

  • npm run build 通过
  • ✅ 页面加载无 JS 错误
  • ✅ Sprite Sheet 标签页所有设置项可用
  • ✅ CSS 正确打包到主 CSS bundle

- Add SpriteSheetExporter, SpriteSheetSettings, SpriteSheetUI
- Add sprite-sheet.css with styling for settings panel and live preview
- Add SceneEnvironmentManager for renderer lifecycle management
- Integrate sprite-sheet into sidebar as a dedicated tab
- Add animation 'All' checkbox for filtering by preview availability
- Add sticky-bottom action buttons pattern for sidebar tabs
- Add fill-width sidebar animation list
- Update create.html, index.html with sprite-sheet HTML and panel
- Add grid.svg icon for UI use
- Update .gitignore to include logs/
@silent-reader-cn
silent-reader-cn force-pushed the feat/sprite-sheet-overhaul branch from 614ca33 to 6113da1 Compare July 7, 2026 13:12
@scottpetrovic

Copy link
Copy Markdown
Collaborator

I checked out the branch. This is going to need some discussion before it could ever get merged. There are a lot of user experience issues with this. One thing for example is that this application works with multiple animations being exported, and this feature only seems to support one at a time. This is also really an export feature. It shouldn't be done the same time you are selecting animations to use.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants