一个基于 React 的 Tilemap 动画制作工具，可以将瓦片地图转换为 GIF 动画。

• 📁 图片导入: 支持导入各种格式的 Tilemap 图片
• 🎨 瓦片编辑: 可视化瓦片网格，支持自定义瓦片尺寸和偏移
• 🖱️ 交互操作: 点击选择单个瓦片，Shift+拖拽选择多个瓦片
• 📱 触摸支持: 完整的移动端触摸操作支持
• 🎞️ 动画轨道: 直观的帧序列管理界面
• ▶️ 实时预览: 实时播放动画预览
• 📥 GIF 导出: 高质量 GIF 动画导出
• 📐 响应式设计: 完美适配桌面端和移动端

• React 18: 现代化的 React Hooks
• NextUI: 现代化的 UI 组件库
• Framer Motion: 流畅的动画效果
• Tailwind CSS: 实用优先的 CSS 框架
• gif.js: GIF 动画生成库

npm install gif.js @nextui-org/react framer-motion

或使用 yarn:

yarn add gif.js @nextui-org/react framer-motion

import GifMaker from './GifMaker';

function App() {
  return (
    <div className="App">
      <GifMaker />
    </div>
  );
}

import { GifMaker } from './GifMaker';

function MyPage() {
  return (
    <div>
      <h1>我的动画工具</h1>
      <GifMaker />
    </div>
  );
}

• 点击上传区域选择 Tilemap 图片
• 支持 PNG、JPG、GIF 等常见图片格式

• 瓦片宽度/高度: 设置单个瓦片的像素尺寸
• X/Y轴偏移: 调整瓦片网格的起始位置
• 帧率: 设置动画播放速度 (1-30 FPS)

• 单击: 选择单个瓦片并自动添加到动画帧
• Shift+拖拽: 选择矩形区域内的多个瓦片
• 移动端: 直接触摸操作

• 选中的瓦片会自动添加为新的动画帧
• 在底部轨道中查看所有帧
• 点击帧右上角的 ✕ 按钮删除帧

• 点击播放按钮预览动画效果
• 点击导出按钮生成并下载 GIF 文件

GifMaker/
├── GifMaker.js          # 主组件文件
├── index.js             # 导出文件
└── README.md            # 说明文档

const getTilePosition = (x, y) => {
  const adjustedX = x - tileOffsetX;
  const adjustedY = y - tileOffsetY;
  const tileX = Math.floor(adjustedX / tileWidth);
  const tileY = Math.floor(adjustedY / tileHeight);
  // 边界检查和返回瓦片坐标
};

const drawCanvas = () => {
  // 绘制原图
  ctx.drawImage(uploadedImage.element, 0, 0);
  
  // 绘制网格
  // 绘制选中瓦片高亮
  // 绘制拖拽选择框
};

const exportAsGif = async () => {
  const gif = new GIF({
    workers: 2,
    quality: 10,
    width: tileWidth * 2,
    height: tileHeight * 2
  });
  
  // 添加每一帧到 GIF
  // 处理单个瓦片和多瓦片组合
  // 生成并下载文件
};

• 响应式布局设计
• 触摸事件支持
• 移动端优化的 UI 尺寸
• 手势操作支持

• React.useCallback 优化事件处理
• Canvas 渲染优化
• 内存管理和清理
• 异步 GIF 生成
• Worker 多线程处理（服务器环境）
• 渐进式 GIF 质量控制

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

如果遇到导出失败，错误信息类似于：

Failed to construct 'Worker': Script at 'file:///path/to/gif.worker.js' cannot be accessed from origin 'null'

这是由于浏览器的同源策略限制导致的。当直接双击打开 HTML 文件时，浏览器会阻止 Worker 脚本的加载。

方案一：使用本地服务器（推荐）

使用 HTTP 服务器运行项目，而不是直接打开 HTML 文件：

# 使用 Python 启动本地服务器
python -m http.server 8000
# 或使用 Python 3
python3 -m http.server 8000

# 使用 Node.js 的 http-server
npx http-server -p 8000

# 使用 Live Server (VS Code 插件)
# 右键 HTML 文件选择 "Open with Live Server"

然后在浏览器中访问 http://localhost:8000

方案二：使用简化版本

项目提供了两个版本的 HTML 文件：

1. server-version.html - 完整功能版本

   • 支持真正的 GIF 动画导出
   • 需要在 HTTP 服务器环境下运行
   • 包含 GIF 质量控制和进度显示

2. standalone.html - 独立版本

   • 可以直接双击打开
   • 由于浏览器限制，只能导出 PNG 静态图片
   • 适合快速预览和测试

浏览器的同源策略是一项重要的安全机制，它限制了从一个源加载的文档或脚本如何与另一个源的资源进行交互。当使用 file:// 协议打开 HTML 文件时：

• 浏览器将其视为 null 源
• Worker 脚本无法从外部 URL 或相对路径加载
• gif.js 库依赖 Web Worker 进行 GIF 编码

通过 HTTP 服务器运行可以解决这个问题，因为所有资源都来自同一个 HTTP 源。

MIT License

欢迎提交 Issue 和 Pull Request！

1. Fork 本项目
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

• 初始版本发布
• 基础瓦片选择和动画制作功能
• GIF 导出功能
• 移动端适配

如有问题或建议，请通过以下方式联系：

• 提交 GitHub Issue
• 发送邮件至项目维护者

享受创作的乐趣！ 🎨✨