如何编写你自己的像素艺术特效：pixelfx特效契约、Painter API与渲染流程实战教程

游戏开发图形学AI 技能图像处理【免费下载链接】pixelfx244 pixel art effects, every one a small piece of code. Plus a Claude Code skill to make your own.项目地址https://gitcode.com/gh_mirrors/pix/pixelfx点击查看免费下载pixelfx 是一个纯代码实现的像素艺术特效库230 个像素特效——火焰、爆炸、冰霜、闪电、天气、UI——全部是一小段代码没有一个图片文件。它们可以直接在浏览器游戏里运行也能一键换色、镜像、导出任意引擎都能用的 sprite sheet精灵表。这篇实战教程带你掌握 pixelfx 的三大核心特效契约、Painter API和渲染流程从零写出属于自己的像素特效。 先认识 pixelfx特效是代码不是图片传统游戏开发里像素特效通常是一张张手绘的精灵表pixelfx 把这个思路翻转过来每个特效只有一个.js文件按分类放在 src/fx/ 目录下形如src/fx/fire/candle.js。整个库覆盖 20 个分类fire、explosions、ice、lightning、water、scifi、melee、status、weather、ui……完整清单见 docs/CATALOG.md。每个特效背后只有三个关键设计理解了它们就理解了整个库设计说明为什么重要两种特效循环用纯函数draw(p, t, o)一次性特效用create(o)模拟粒子120 Hz 步进循环无缝衔接粒子物理在任何帧率下表现一致两个缓冲color画像素不透明/抖动/半透明light画叠加发光火看起来烫靠的就是 light 缓冲种子随机所有随机数来自特效的seed禁用Math.random()第 40 帧每次渲染都完全一样零依赖只需要 Node 18拷走src/core和任意特效文件就能用。 特效契约每个特效必须遵守的几条规则完整契约写在 docs/AUTHORING.md#L46-L67新手只要记住以下几点。3.1 一个文件、一份 meta 描述每个特效文件先导出一份meta描述这是个什么特效画布尺寸、原点、时长、是否循环、默认调色板。比如一个冰霜新星的 meta 大致长这样export const meta { name: Frost nova, desc: Crystals erupt in a ring from the feet outward…, tags: [ice, one-shot], size: [200, 192], origin: [100, 160], duration: 3.45, loop: false, fps: 30, bg: ground, options: { palette: [#0a1a33, #1c4d8f, #8fd0ff, #e8f6ff], seed: 1 }, };options是调用方可以覆盖的旋钮其中palette由暗到亮的颜色斜坡和seed最受用x、y、flip、angle、light五个名字是系统保留字别占用。3.2 本地坐标(0, 0) 就是锚点特效永远围绕自己的原点绘制角色双脚、撞击点、火炬底座。x 向右、y 向下、1 单位 1 像素。放置、镜像flip、旋转angle全由 Painter 负责——特效代码不需要知道自己出现在屏幕哪里。有方向的特效统一朝右地面特效站在y 0的地板上。3.3 两种导出方式纯函数 vs 模拟纯特效Pure导出draw(p, t, o)第t秒的画面完全由t算出。光环、传送门、瀑布、火焰这类循环首选——循环天然无缝。见 src/fx/fire/candle.js#L75-L119 中蜡烛火焰如何用噪声函数摆动、拉长。模拟特效Simulated导出create(o)返回{ update(dt), draw(p), drawBack(p) }。在create/update里生成粒子、碎片、灯光运行时会以 120 Hz 或更细步进火花会弹跳、烟会翻滚。爆炸、冲击、法术类一次性特效都走这条路完整范例见 src/fx/explosions/small-explosion.js#L55-L150。3.4 三条铁律时间一次性特效在 0 到duration之间演出t duration时必须什么都没画把duration留足让最后一点烟散尽确定性禁用Math.random()和Date随机一律走种子的Rng/rand/burst图层角色背后的东西光环远半、地面裂纹放drawBack其余放draw。 Painter API画像素的那支笔特效里所有的绘制都通过一个参数pPainter 实例完成源码在 src/core/painter.js。它对特效而言像一支像素画笔坐标是本地坐标c是颜色、a是 0~1 的透明度。最常用的方法一览方法画什么p.px(x, y, c)/p.dot(x, y, c, a)单像素实心 / 抖动淡出p.blend(x, y, c, a)/p.disc(x, y, r, c, a)真半透明像素 / 半透明圆盘烟、蒸汽、雾p.line/p.beam/p.polyline1px 线 / 粗胶囊束 / 折线p.circle/p.ellipse/p.ring/p.arc/p.rect/p.poly填充形状arc可画渐细的月牙弧斩击特效的招牌形状p.shade(x0, y0, x1, y1, fn)逐像素着色器fn(x, y, out)可以逐点决定颜色、透明度、发光p.glow/p.glowLine/p.glowRing/p.light写入light 缓冲的叠加光径向辉光、光带、光环p.sprite(rows, pal, x, y)/p.text(str, x, y, c)字符串小精灵 / 像素文字mini3×5、big5×7 字体p.mask/p.outline/p.get(x, y)按轮廓填色 / 描边 / 读回像素一个容易被忽视的技巧颜色c和透明度a都可以传函数。例如p.disc(x, y, 8, (d, ang) ..., (d, ang) 1 - d)就能画出中心浓、边缘淡的体积感——烟和蒸汽全靠它而不是抖动棋盘格。 渲染流程草稿 → 渲染 → 审视 → 修正的循环pixelfx 的方法论只有一句话代码是黏土相信你的眼睛。一次生成不出好特效渲染出来看看才能。工具链在 tools/ 下全部是零依赖的 Node 脚本。7.1 一条命令生成脚手架node tools/new.mjs arcane/my-spell # 生成可用的起始文件循环特效加 --loop它会写入src/fx/arcane/my-spell.js带 meta 和示例draw模板见 tools/new.mjs#L29-L58。7.2 渲染出接触表用眼睛判断node tools/render.mjs arcane/my-spelltools/render.mjs 会按meta.fps逐帧渲染输出一张接触表contact sheetrecords/arcane/my-spell/contact.png——所有关键帧按时间排好每帧带帧号和时间戳一眼看出节奏问题。常用参数--all接触表放每一帧--gif/--mp4看动起来的效果--opts {palette:[#102,#215,#43a,#8cf,#fff]}不改代码直接换色试试--sheet导出透明 PNG Aseprite 风格 JSON 精灵表供 Godot、Unity、Phaser 等引擎导入7.3 用 check 自检再导出node tools/check.mjs arcane/my-spelltools/check.mjs 专门抓眼睛看不见的错误画出画布边界、一次性特效结尾不清空、循环接缝、未种子的随机数、超慢帧目标单帧 2ms。改到它全绿才算完成。整个循环就是渲染 → 打开接触表 → 修最糟的那个点 → 再渲染。文档建议至少三轮展示级特效更多。✅ 质量标准怎么算像一个好特效docs/AUTHORING.md#L114-L139 列了十条浓缩成新手最好记的六条线条和光而非色块——用 1px 轮廓、环、拖尾和火花搭建亮度交给光大块饱和平涂几乎总是错的光无处不在——核心一个紧而亮的热点外围一大片低强度柔光火花和闪光各自带光体积感——烟、蒸汽、尘雾用真半透明SMOKE、VAPOUR、p.disc上亮下暗膨胀又变薄真实运动——火花随速度拉伸、落地弹跳碎片翻滚、落地扬尘火升腾冷却成烟分幕编排——蓄力元素聚拢→ 释放1~2 帧白色英雄帧 爆闪→ 扩散 → 停留余烬、星光→ 长衰减1x 下可读——有明确焦点形状内部无噪点颗粒。工具库src/core/sim.js把 4 的多数工作做好了Particles提供SPARK、FIRE、SMOKE、EMBER等现成粒子Bits处理翻滚碎片Lights管理忽明忽暗的光点。 上手路径速查想做什么去哪里查完整契约、工具箱与质量标准docs/AUTHORING.md读核心实现帧、合成、特效实例src/core/fx.js读画笔实现src/core/painter.js读粒子/碎片/灯光模拟src/core/sim.js找现成特效、按关键词搜索node tools/list.mjs frost或 docs/CATALOG.md脚手架 / 渲染 / 自检 / 批量导出精灵表tools/new.mjs · tools/render.mjs · tools/check.mjs · tools/sheets.mjs让 AI 帮你走草稿-渲染-审视-修正循环skills/pixelfx/SKILL.md渲染产物接触表、精灵表records/ 与 sheets/总结pixelfx 的编写范式非常克制——一个文件、一份 meta、本地坐标、种子随机、结尾留白画笔画什么由 Painter API 决定好不好看由渲染-审视-修正循环决定。选一个meta用tools/new.mjs起步tools/render.mjs出图tools/check.mjs兜底你的第一个像素特效离得并不远。赞分享游戏开发图形学AI 技能图像处理【免费下载链接】pixelfx244 pixel art effects, every one a small piece of code. Plus a Claude Code skill to make your own.项目地址https://gitcode.com/gh_mirrors/pix/pixelfx点击查看免费下载相关推荐pixelfx 特效编写指南从契约、Painter API 到质量基线pixelfx 特效编写指南从契约、Painter API 到质量基线 本篇指南以仓库中的 docs/AUTHORING.md https://link.gi游戏开发图形学AI 技能图像处理pixelfx 效果目录全解析232 个像素特效的类别划分、ID 约定与渲染工作流pixelfx 效果目录全解析232 个像素特效的类别划分、ID 约定与渲染工作流 pixelfx 把每一个像素特效都收敛成一个可渲染、可复色、可导出的代码文游戏开发图形学AI 技能图像处理Bookshelf微模块开发契约如何编写你自己的Micro-moduleBookshelf微模块开发契约如何编写你自己的Micro module 如果你想在 KOReader 阅读器的 Bookshelf 书架插件里加一块时钟、天上一篇Qwen3.6-35B-A3B-Uncensored-HauhauCS-Aggressive 图像理解保姆级教程mmproj 配置与快速上手下一篇VidBee一键下载1000网站的视频到本地创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考