pixelfx （像素艺术特效代码库）
6,632
Stars
0
Forks
0
Watchers
0
Open Issues
未知
许可证
JavaScript
语言
创建时间
最近更新
项目能做什么
包含 244 款纯代码像素特效与动画，可导出精灵图用于游戏引擎，并附带生成新特效的 Claude Code skill。
来源：AI 基于仓库事实生成
· 内容以仓库实际 README 为准
使用说明 查看原始 README 原仓库文档
下面是为您整理的 pixelfx 中文使用说明。
pixelfx 中文使用说明
项目简介
pixelfx 是一个纯代码实现的像素特效与动画库，包含 244 个独立特效（涵盖火焰、爆炸、魔法、天气、UI 等多种分类）。每个特效均为小巧的独立代码文件，无外部依赖。支持在浏览器游戏中实时运行、重新着色、翻转镜像，也可以直接导出为通用精灵表（Sprite Sheet），供任意游戏引擎使用。此外，仓库还提供了一套辅助生成新特效的 Claude Code skill。
核心功能
- 纯代码生成像素特效：无第三方依赖，代码即模型，可直接在浏览器运行或定制。
- 角色表演动作（Acting）：涉及角色的特效具备完整的动作周期（起手蓄力、释放、击中定格、收招恢复），包含 12 种完整连招动作。
- 动态改色与镜像：传入
palette参数即可快速更换色板（如将火焰改为蓝色），支持翻转与角度调整。 - 全引擎通用导出：支持一键将特效导出为透明 PNG 精灵表及兼容 Aseprite 格式的 JSON 元数据文件（Phaser、Godot、Unity 等引擎均可读取）。
- 分类覆盖广泛：涵盖火、冰、水、雷、近战、爆炸、投掷物、受击、状态、UI、拾取物、天气、过渡转场等 20 余种类别。
适合谁用
- 正在开发像素风格游戏的独立游戏开发者（支持 Godot、Unity、GameMaker、Phaser、LÖVE 等）。
- 使用 HTML5 Canvas / WebGL 开发网页游戏的个人前端开发者。
- 想要通过代码或 AI 工具（Claude Code）自定义像素动画的开发者。
安装步骤
方式一：在 npm 项目中安装（针对网页端游戏）
直接通过 GitHub 仓库安装：
npm i github:patch-gg/pixelfx
或者直接复制仓库中的 src/core 目录以及你需要的特定特效文件到你的项目中。
方式二：本地克隆仓库（用于导出精灵表或查看示例）
git clone https://github.com/patch-gg/pixelfx.git
cd pixelfx
（注：依赖环境及前置要求原文未详细说明，推荐本地准备 Node.js 运行环境）
配置与使用说明
1. 网页游戏中使用（Canvas/Phaser/PixiJS 等）
无需依赖，直接在代码中引用：
import { createFrame, clearFrame, createFx, composite } from "pixelfx";
import * as frostNova from "pixelfx/fx/ice/frost-nova";
// 设定你的游戏像素分辨率
const frame = createFrame(320, 180);
const img = new ImageData(320, 180);
// 创建特效实例，支持配置项：x, y, flip, angle, seed, palette, light 等
const fx = createFx(frostNova, { x: 160, y: 140 });
function tick(dt) {
fx.update(dt);
clearFrame(frame);
fx.draw(frame, "back"); // 角色后方层
drawCharacters();
fx.draw(frame, "front"); // 角色前方层
composite(frame, img.data, backgroundColor); // 混合颜色与光影
ctx.putImageData(img, 0, 0); // 放大显示（配合 CSS image-rendering: pixelated）
}
2. 导出为精灵表（适用于 Unity / Godot 等外部引擎）
使用项目内置的脚本渲染单个特效或全部特效：
- 导出单个特效为精灵表（生成 PNG 和 JSON）：
bash node tools/render.mjs ice/frost-nova --sheet -
导出所有特效：
bash node tools/sheets.mjs导出的资源将输出在sheets/目录下。 -
替换色板导出为 GIF：
bash node tools/render.mjs fire/torch --gif --opts '{"palette": ["#102","#215","#43a","#8cf","#cff","#fff"]}'
常见问题
- Q: 导出的 JSON 格式与哪些工具兼容？
A: 导出的是 Aseprite 风格的 JSON（包含每帧矩形、持续时间、fps、loop、pivot 等信息），Phaser 的 atlas 加载器以及 Godot 和 Unity 的 Aseprite 插件均可直接识别导入。 - Q: 如何修改特效颜色？
A: 无需修改源码，只需在参数中传入palette（按由深到浅排列的十六进制颜色数组）即可。 - Q: Claude Code skill 的具体配置与使用方法？
A: 此部分原文在截断前未完整展开说明，请查看原仓库了解详情。
原始 README 摘录（英文原文，节选前 3000 字符）
<p align="center"> <img src="docs/readme/montage.gif" width="800" alt="A grid of pixel art effects playing at once: a campfire, a burning skull, a waterfall, a plasma ball, a portal, a tornado and more."> </p> # pixelfx. **<!-- count -->244<!-- /count --> pixel art effects and animations, every one a small piece of code.** Fire, explosions, magic, weather, UI, pickups, critters and more. Play them live, recolor and mirror them, drop them into a browser game, or export sprite sheets for any engine. Plus a Claude Code skill that makes new ones the way a picky pixel artist would: draft, render, look, refine. Every effect that involves a character is **acted out**: he winds up, lets go, freezes on contact and recovers, and a target takes the hit. Twelve whole moves chain the effects into attacks from wind-up to recovery. **[open the gallery](https://patch-gg.github.io/pixelfx/)** · [catalog](docs/CATALOG.md) · [acting](#acting) · [the skill](#the-skill) · [make your own](#make-your-own) · [publish it on patch](#publish-it-on-patch) · [how it works](#how-it-works) The method is [Hugo Duprez](https://x.com/HugoDuprez)'s, from [How to make (good) pixel art effects with Claude](https://www.spritefusion.com/blog/how-to-make-good-pixel-art-effects-with-claude): code is clay, trust your eyes, feed your references. His [open-source effects](https://www.spritefusion.com/pixel-art-vfx) at Sprite Fusion set the bar, and `src/core/sim.js` and the effects that say so at the top adapt his code. This repo is our take on the idea at library scale, with a skill to keep going. ## what's in it. <!-- catalog --> | category | effects | some of them | |---|---|---| | **moves** | 12 | arrow shot, dash strike, earth stomp, fireball throw, ground pound, holy smite… | | **fire** | 12 | brazier, campfire, candle, fire breath, fire ring, fire tornado… | | **explosions** | 12 | barrel explosion, big explosion, cartoon pow, dirt explosion, firework burst, firework rocket… | | **water** | 12 | bubbles, drip, fountain, geyser, rain splash, ripples… | | **ice** | 10 | blizzard vortex, freeze, frost breath, frost nova, ice crystal, ice lance… | | **lightning** | 11 | ball lightning, chain lightning, charge up, electrified, lightning strike, plasma ball… | | **sci-fi** | 12 | emp blast, energy core, force field, glitch, hologram, jetpack… | | **melee** | 12 | claw swipe, dagger flurry, double slash, hammer smash, heavy cleave, scythe reap… | | **impacts** | 11 | blunt hit, bullet impact, critical hit, ground slam, heavy landing, hit flash… | | **projectiles** | 13 | arrow, bullet tracer, cannon shot, energy disc, signal flare, homing missile… | | **spawn & death** | 10 | coin drop, disintegrate, dissolve burn, egg hatch, poof, respawn beam… | | **arcane** | 12 | arcane beam, arcane missiles, arcane orb, blink in, blink out, magic circle cast… | | **holy** | 10 | blessing, divine shield, feather burst, halo, heal, healing ring… | | **shadow** | 12 | black hole, curse, dark exp阅读完整原文
商业机会分析 AI 生成
Web版 Prompt-to-PixelFX 在线生成与调优工具 (SaaS)
| 产品构想 | 将项目内置的 Claude Code skill 与纯前端渲染器封装为免环境配置的在线 Web 工具，支持 Prompt 描述生成、实时调色、镜像缩放，并一键导出 Spritesheet 序列帧与代码片段。 |
| 核心功能 | 在线提示词生成特效代码、实时像素预览与调色盘切换、动作连招帧编辑、全引擎Spritesheet/GIF导出、云端历史库管理 |
| 目标用户 | 独立游戏开发者、像素美术师、非技术策划人员 |
| 难度/周期 | 中等 · 3-5周 · 成本：前端托管费与 LLM API 消耗成本 |
| 收费模式 | 免费额度 + 额度包/月度订阅制（按生成和导出次数计费） |
| 竞争风险 | AI代码生成特效的单次可用率不稳定，可能消耗大量 Token 导致成本偏高（推测）。 |
| 依据 | 已验证事实 |
Godot / Unity 引擎深度集成资产插件
| 产品构想 | 将 244 个特效与连招动作封装为 Godot/Unity 官方商店的专业插件，自动适配引擎粒子/动画系统，提供开箱即用的动画控制器、材质替换与时间轴事件触发。 |
| 核心功能 | 引擎内特效可视化配置面板、代码转原生动画控制器（AnimationPlayer/Mecanim）、自动化多分辨率图集生成、碰撞体与音效触发器绑定 |
| 目标用户 | 使用 Godot、Unity 制作商业/独立游戏的开发者 |
| 难度/周期 | 低至中等 · 2-4周 · 成本：极低（主要为插件封装与多引擎测试工时） |
| 收费模式 | Unity Asset Store / Itch.io / Godot 资产平台一次性付费买断（如 $15-$39） |
| 竞争风险 | 开源仓库代码公开，若插件附加价值（工作流提效）不足，开发者倾向于自行复制免费代码（推测）。 |
| 依据 | 已验证事实 |
商业级像素特效+音效垂直主题资产包 (DLC模式)
| 产品构想 | 基于现有开源算法拓展出特定细分游戏题材的完整资产包（如Roguelike地牢、机甲科幻、JRPG大招），补齐音效（SFX）与高阶分层，以成熟商用资源包形式售卖。 |
| 核心功能 | 特定流派成套连携攻击特效、多尺寸高帧率 Spritesheet、同步匹配的8-bit/16-bit音效包、免版税商用授权 |
| 目标用户 | 开发中小型商业单机游戏、Steam像素游戏的独立工作室与个人 |
| 难度/周期 | 低 · 2-3周 · 成本：音效外包采购或生成成本、美术调优时间成本 |
| 收费模式 | Itch.io / Gumroad 主题包独立发售或 Patreon 赞助订阅 |
| 竞争风险 | 资产包市场竞争激烈，一次性销售复购率低，需要持续推出新风格与新主题（推测）。 |
| 依据 | 数据支持的判断 |
AI 基于仓库公开数据分析生成，含推测成分，不构成收益承诺。
报告会保存到 个人中心
竞品与相似项目 GitHub Search 真实检索
| 项目 | 中文简介 | Stars | 语言 |
|---|---|---|---|
| morluto/rea | 利用 Agent 逆向工程一切，涵盖应用行为分析到原生二进制文件解析。 | 447,651 | TypeScript |
| mattpocock/skills | 面向工程师的 Agent 技能集合，直接提取自作者的 .agents 目录。 | 319,981 | Shell |
| obra/superpowers | 一套实用的 Agent 技能框架与软件开发方法论。 | 315,269 | Shell |
| affaan-m/ECC | 针对 Claude Code、Cursor 等工具的 Agent 性能优化与技能管理系统。 | 300,336 | JavaScript |
| anthropics/skills | Anthropic 官方开源的 Agent 技能公共仓库。 | 191,329 | Python |
| DietrichGebert/ponytail | 让 AI Agent 像资深开发者一样思考，主张以最少的代码解决问题。 | 187,891 | JavaScript |
以上为通过 GitHub 官方 Search API 检索的相似项目，功能差异与优劣势需进一步人工确认，配置 AI 后可生成对比分析。
项目优势与风险
| 技术成熟度 | 创建于 ，最近推送 |
| 社区活跃 | Star 6,632 / Fork 0 / Issue 0（数据支持，可自行核实） |
| 许可证 | 未检测到（需人工确认） |
| 主要风险 | 上游项目方向可能变化；同赛道竞争者较多（见竞品表）；热度与需求不完全等价 |
安装与使用
快速开始（以仓库 README 为准）
git clone https://github.com/patch-gg/pixelfx.git cd pixelfx # 请阅读仓库 README 获取确切安装步骤（依赖、配置、启动命令）
术语说明：Docker＝应用容器（把程序和依赖打包运行）；API Key＝调用外部服务的密钥；Git Clone＝把仓库代码下载到本地。常见错误：API Key 未配置 / 端口占用 / 数据库连接失败，多数项目在 README 的 Troubleshooting 章节有说明。