跳过主要内容
WEB
Skill免费GameSkill 出品 · 调优版

pixelfx

/pixelfx

244 pixel-art effects written as code (fire, explosions, magic, weather, UI, pickups, critters) plus a draft, render, look, refine loop for making new ones; every effect exports a sprite sheet with Aseprite-style JSON for Godot, Unity, Phaser or any engine.

许可证
MIT
出品
GameSkill 出品
下载 ZIP

我们测过

在 pixelfx tools on Node 22 + Godot 4.7.2 (SpriteFrames import) 上通过 43/43 项检查(2026-11-03):能触发、有可运行示例、有截图和自检清单、单一职责、中英文文档齐全。触发检查是把提示词和 skill 描述做匹配,不是真实 agent 运行。

测试报告

这个 skill 做什么

什么时候触发

Make pixel art effects and sprite animations in code with the pixelfx library, which has 244 ready-made ones, acted out by a character who winds up, freezes on contact and recovers (fire, explosions, water, ice …

GameSkill 测过的版本

GameSkill 调优版:skill 文件取自提交 a84159688af3,按我们的 skill 流程加上可运行示例、测试报告、自检清单和中文指南。

下载测过的 ZIP(1.0 MB)路线图:手感与特效

协议:基于 patch-gg/pixelfx(作者 patch-gg),协议 MIT。ZIP 保留协议文件(LICENSE, NOTICE.md),CHANGES.md 列出了 GameSkill 加的所有文件。

pixelfx

自检清单

  • 先用 tools/list.mjs 找现成特效,改调色板、种子、方向能解决就不新写 / Search tools/list.mjs first; a palette, seed or flip change beats a new effect
  • 每一轮都渲染 contact.png 并亲眼看,至少改三轮 / Render contact.png every round and look at it; three rounds minimum
  • tools/check.mjs 必须干净通过:不出画布、循环无缝、一次性特效结束时为空、不用 Math.random / tools/check.mjs passes clean: inside the canvas, seamless loops, one-shots end empty, no Math.random
  • 导出时用 JSON 里的 fps 和 pivot,引擎里用最近邻过滤、不压缩 / Use the JSON's fps and pivot; nearest-neighbour filtering and no compression in the engine
  • 环境循环(雨、火、灯光)首尾帧接得上 / Ambient loops (rain, fire, lights) wrap without a seam
  • 不复刻具体游戏的角色、精灵或标志 / Never recreate a specific game's sprites, characters or logos

中文指南

这个 skill 做什么

pixelfx 是一个用代码写的像素特效库,有 244 个现成特效(火、爆炸、冰、雷、魔法、天气、UI、拾取物、小怪物等)。每个特效是一个 JS 文件,往“颜色”和“发光”两层缓冲里逐帧画像素,不用任何图片。skill 教 agent 先找现成特效改参数;需要新特效时,按“写草稿、渲染、看图、修正”的循环做到像手绘;最后导出 sprite sheet 给任何引擎用。

什么时候用

  • 2D 游戏需要像素特效、打击感、拾取闪光、天气或环境循环
  • 想把某个特效换色、镜像,导出到 Godot、Unity、Phaser
  • 要写一个新的像素特效,并逐帧检查是否无缝、是否干净

怎么装

下载本页的 ZIP,把 pixelfx/ 整个文件夹放进 agent 的 skills 文件夹:Claude Code 用 .claude/skills/,Codex、Gemini CLI、OpenCode 用 .agents/skills/,Cursor 用 .cursor/skills/,Copilot 用 .github/skills/,Windsurf 用 .windsurf/skills/,然后重启 agent。特效库和工具在 pixelfx/upstream-support/ 里,不需要再从 GitHub 克隆,装好 Node 18 以上即可。也可以直接对 agent 说:Install the skill from https://gameskill.dev/skills/pixelfx/install.md

最小示例

gameskill/examples/ 是我们自己做的「雨夜灯笼小院」环境循环:一个按 AUTHORING.md 规范新写的特效 lantern-sway(挂着的灯笼随风摆动、火苗闪烁、灯光照亮地面),和库里的雨、火盆叠在 320x180 的画面里,渲染成无缝循环;再把火盆导出成 sprite sheet,在 Godot 4.7 里按 JSON 建 SpriteFrames 播放。

我们怎么测的

用 Node 22 直接跑 skill 自带的工具:tools/check.mjs 检查我们的新特效和用到的库特效,tools/render.mjs --sheet 导出 sprite sheet;我们的脚本检查循环首尾帧一致、同一种子渲染两次结果相同;最后用 Godot 4.7.2 无界面模式读 JSON 建 SpriteFrames,确认帧数、尺寸、帧率和循环设置。结果在 gameskill/test-report.json。

搭配

  • game-feel:把特效和顿帧、震屏一起调
  • rng-vfx:高分辨率或 3D 的实时特效
  • godot-animation:在 Godot 里播放和切换 sprite 动画

安装

告诉你的 AI

Install the skill from https://gameskill.dev/skills/pixelfx/install.md

GameSkill 测过的版本

测过的版本装到 .claude/skills/
mkdir -p .claude/skills
curl -fsSL https://gameskill.dev/dl/skills/pixelfx.zip -o /tmp/gameskill-pixelfx.zip
unzip -oq /tmp/gameskill-pixelfx.zip -d .claude/skills
rm /tmp/gameskill-pixelfx.zip

包含内容

  • The pixelfx library: 244 effects in src/fx, each one JS file drawing colour and additive light buffers
  • tools/render.mjs: contact sheets, sprite sheets (PNG + Aseprite-style JSON with fps, loop and pivot), GIF and MP4
  • tools/check.mjs: catches out-of-canvas drawing, loop seams, unseeded randomness, one-shots that do not end empty
  • tools/new.mjs and docs/AUTHORING.md: the contract and a starter file for a new effect
  • Acts: wind-up, freeze on contact and recovery for effects that need a character behind them

适合

  • Pixel VFX and game juice for 2D games without drawing frames by hand
  • Recolouring, mirroring and exporting existing effects to an engine
  • Writing a new effect and checking it frame by frame before it ships

不适合

  • High-resolution or 3D particle effects: see rng-vfx or godot-shaders
  • Character sprites and walk cycles: see codixel or sprite-gen

关于这个 Skill

pixelfx turns pixel-art effects into code. Each of its 244 effects is one JavaScript file that draws into a colour buffer and an additive light buffer over time, so an effect can be played live, recoloured, mirrored, reseeded and rendered to a sprite sheet for any engine. The skill teaches the agent to reuse the library first, and when something new is needed, to work the way Hugo Duprez describes for good pixel effects: draft, render, look at the contact sheet, fix the worst thing, repeat, then pass tools/check.mjs.

GameSkill ships the library and tools next to the skill (upstream-support/), so the agent never clones anything. Our example is an original rainy lantern courtyard: a new looping effect written to the library's contract, layered with the stock rain and brazier into one seamless 320x180 loop, and a sprite sheet played back through Godot 4.7 SpriteFrames.

环境要求

  • Node.js 18 or newer (the tools use only Node, no npm install)
  • ffmpeg (optional, for GIF and MP4 previews)

相关主题

常见问题

基于 patch-gg/pixelfx (作者 patch-gg,协议 MIT)。ZIP 里保留原作者的 LICENSE 和 NOTICE,ATTRIBUTION.md 和 CHANGES.md 写明来源提交和 GameSkill 加的内容。

搭配使用

作者标注的相关 Skills,或更适合相邻任务的 Skills。

相似 skills

open-game-skills
GDT
Starter Kit
GameSkill 出品

open-game-skills

An MIT pack of about 190 SKILL.md agent skills for game design: combat feel, camera, traversal, world, validation, 2D/Spine and art pipeline, with a dispatcher and adapters for Three.js, PixiJS, Phaser, Cocos, Godot, Unity and Unreal.

Engine-agnosticGodotUnityClaude Code · Codex +1
Style Cards
B3D
Skill
GameSkill 出品

Style Cards (one art style as hard limits, switch looks by switching cards)

A GameSkill original that writes a game's art style down as a card of measurable limits (canvas, colours and palette, alpha, triangles, shading, materials, textures, voxel grid), pastes it into every asset request and checks every asset against it. Ships 12 cards from pixel and one-bit to low-poly, voxel and toon, a no-dependency PNG checker, a Blender GLB checker and a palette locker; switch the whole look by switching the card.

Engine-agnosticBlenderGodotClaude Code · Codex +2
Codixel
WEB
Skill
GameSkill 出品

Codixel

A pixel-art skill built on one idea: the agent writes code, it is not a painter. It asks for a reference image, then removes the background, pixelates, rigs with bones and animates it in code with a 2,000-line toolkit (core/pixel.js), showing every step on a sheet before making game files.

Engine-agnosticWeb (Phaser / Three.js)GodotClaude Code · Codex +2
Effekseer VFX
GDT
Skill
GameSkill 出品

Effekseer VFX (game effects as code, checked in a real Godot render)

Two agent skills from KanaWorks_AI: effekseer-vfx writes game effects (hits, slashes, projectiles, explosions, beams, shields) as Python recipes, compiles them with the official EffekseerCore and reviews them as filmstrips rendered in Godot; vfx-review is the independent reviewer that scores them. Video-model flipbooks and Unity URP element skills are optional routes.

GodotUnityEngine-agnosticClaude Code · Codex +2