RPG Maker 图片解密工具

项目概述

RPG Maker 图片解密工具 是一款纯前端 Web 应用，用于解密 RPG Maker MV/MZ 游戏引擎的加密资源文件（.png_ / .m4a_ / .ogg_）。无需安装任何软件，浏览器打开即用，所有解密运算在本地完成。

项目的起点是一次 RPG Maker MZ 游戏的逆向分析——用户在 Steam Workshop 上发现了一款牧场生活模拟游戏「フォレスティア」，想了解其资源结构。通过分析确认了加密算法（RPGMV 16字节头 + XOR 前16字节）并提取了解密密钥。随后为了将这套流程工具化，从零搭建了这个 Web 应用。

技术亮点

🔐 纯浏览器端解密

核心解密逻辑完全在浏览器中执行——读取 ArrayBuffer → 验证 RPGMV 文件头 → 16字节 XOR 运算 → 还原原始文件。利用 FileReader API 和 TypedArray 实现高性能二进制处理，单个文件解密耗时 < 10ms。

解密算法核心（src/lib/decrypt.ts）：

• 16 字节文件头校验：52 50 47 4D 56 00 00 00 00 03 01 00 00 00 00 00
• 仅前 16 字节体 XOR 加密，其余数据未加密
• 32 位 hex 密钥（16 bytes）来自 data/System.json → encryptionKey 字段

🔑 密钥自动提取

选择项目目录后自动扫描 data/System.json，解析 encryptionKey 和 hasEncryptedImages/hasEncryptedAudio 标志位。也支持手动输入 32 位 hex 密钥，带实时校验和显示/隐藏切换。

📂 双模式文件输入

• 单文件模式：拖拽或浏览选择单个 .png_ / .m4a_ / .ogg_ 文件
• 目录模式：通过 File System Access API (showDirectoryPicker) 选择项目根目录，递归扫描所有加密资源

拖拽区域在拖入时产生视觉反馈（颜色切换 + 位移），符合动物森友会风格的交互手感。

🖼️ 即时预览与导出

• 图片预览：解密后的 PNG 以网格形式展示，支持缩略图浏览
• 音频播放：解密后的 M4A/OGG 可直接在浏览器中播放
• 批量导出：ZIP 打包下载（JSZip + FileSaver），或写入本地磁盘

🎮 动物森友会 UI 风格

基于开源组件库 animal-island-ui，采用了动森标志性的设计语言：

• 设计令牌：暖羊皮纸底色 #f8f8f0、卡片色 rgb(247,243,223)、薄荷青点缀 #19c8b9
• 组件风格：全圆角（≥12px）、按钮 3D 像素阴影、Title 缎带标题、Card 虚线/实线变体
• 配色方案：app-teal 操作区 / app-yellow 密钥面板 / app-green 成功状态 / app-blue 拖拽区
• 字体系统：Nunito + Noto Sans SC，自动打包无需额外引入

🧩 组件架构

src/
├── components/
│   ├── AppHeader.tsx      # 缎带标题 + 副标题
│   ├── KeyPanel.tsx       # 密钥管理（自动/手动切换）
│   ├── FileDropZone.tsx   # 拖拽/选择文件区域
│   ├── FileList.tsx       # 文件列表（加密/非加密分类）
│   ├── ProgressPanel.tsx  # 解密进度与操作日志
│   ├── PreviewGrid.tsx    # 解密后图片网格预览
│   └── ActionBar.tsx      # 底部操作栏（ZIP导出等）
├── hooks/
│   ├── useDecryptor.ts    # 解密状态管理（Web Worker）
│   └── useFileDrop.ts     # 文件拖放逻辑
└── lib/
    ├── decrypt.ts         # 核心解密算法
    ├── keyExtractor.ts    # System.json 密钥提取
    ├── fileUtils.ts       # 文件系统工具
    └── constants.ts       # 常量定义

挑战与收获

最大的挑战：animal-island-ui 的集成

这是一个相对小众的组件库（Animal Crossing 风格），文档分散在 GitHub 的多个 Markdown 文件中。通过并行抓取 AI_USAGE.md、SKILL.md 和 DESIGN_PROMPT.md 三份文档，拼凑出完整的组件 API 和使用模式。最终实现了 7 个核心组件的正确集成，构建产出仅 548 个模块。

反馈驱动的迭代

在开发过程中经历多轮视觉打磨：拖拽区域高度调整、组件间距统一、密钥面板交互优化、状态提示文案改进等。每次用户反馈后快速定位并修复，保持了对设计细节的高响应度。

工程化实践

• Turbopack 开发体验：Vite v6.4 + React 19，HMR 即时反馈
• 类型安全：TypeScript 严格模式，完整的 Props 接口定义
• Git 版本控制：3 个语义化提交（feat → chore → docs），清晰的提交历史
• 零配置部署：npm run build 产出纯静态文件，可部署到任何静态托管

项目数据