深夜赶工三小时我用 Jimp 纯代码搞定了整套游戏素材【免费下载链接】jimpAn image processing library written entirely in JavaScript for Node, with zero external or native dependencies.项目地址: https://gitcode.com/gh_mirrors/ji/jimp凌晨一点策划扔来一条消息角色待机动画要拆成单帧、背景要抠成透明、还得拼一张精灵图集明早上线。你翻出 Photoshop发现没装想装个 ImageMagick发现还要配环境变量。这时候你忽然想起自己明明是个程序员——为什么处理图片要依赖软件为什么不直接写代码这就是我今天要带你体验的完整故事用 JimpJavaScript Image Manipulation Program纯 JavaScript 图像处理库从零搞定一套游戏素材流水线。它不需要任何本地编译不需要装任何原生依赖一条npm install --save jimp就绪接下来要做的就是让代码替你熬夜。三行代码让第一张图听话动手之前先认识一下今天的搭档。Jimp 的核心思路非常朴素把一张图片读进来变成一堆像素点你对着这些像素做操作再把它写出去。就这么简单。先建个项目装好依赖然后写第一个文件const { Jimp } require(jimp); async function start() { const image await Jimp.read(sprites/hero.png); image.resize({ w: 128, h: 128 }); image.greyscale(); await image.write(sprites/hero-grey.png); } start();这段代码做了三件事read把图片读成内存里的像素集合resize把尺寸缩到 128×128greyscale转成灰度图最后write落盘。注意resize的写法是传一个对象{ w, h }这是 Jimp 1.x 的新语法老版本教程里的resize(128, 128)位置参数已经过时了照抄老代码会报错。小提示Jimp 的方法几乎都支持链式调用但底层其实每个方法都会返回新的图片对象。想让原图不受影响记得用image.clone()复制一份再操作。看到命令行里出现 done你的第一个素材就处理完了。全程没有打开任何图像软件就三行代码。这感觉就像你第一次用git提交代码时的那种爽快。把动画帧从图集里切出来策划给的素材是一张 600×100 的横向图集里面躺着 6 个连续动作帧每个帧 100×100周围还留着透明边框。游戏引擎只认单帧你得把它们一个个拆出来。先上手动裁剪逻辑很直白第 i 帧的左上角坐标就是(i * 100, 0)。for (let i 0; i 6; i) { const frame await Jimp.read(sprites/sheet.png); frame.crop({ x: i * 100, y: 0, w: 100, h: 100 }); await frame.write(sprites/frame-${i}.png); }这里有个新手最容易踩的坑crop会直接修改原对象。上面的循环里每次重新read就是为了避免第一帧裁完、第二帧的坐标就全错位了。你要是图省事只 read 一次会发现第 2 帧开始全是乱的。不过手动裁剪有个致命问题美术给的图集不一定是规整网格有的帧大有的帧小周围透明边还厚薄不一。这时候就该autocrop登场了——它会从四个边逐行扫描找到与角落像素颜色一致的区域自动裁掉。透明底、纯色底都能识别const frame await Jimp.read(sprites/sheet.png); frame.crop({ x: i * 100, y: 0, w: 100, h: 100 }) .autocrop({ tolerance: 0.0002, cropOnlyFrames: true }); await frame.write(sprites/frame-${i}.png);tolerance是颜色容差0.0002 表示严格匹配适合纯透明背景cropOnlyFrames默认是true要求上下左右都有可裁的边才动手防止把本身就贴边的素材误伤。注意autocrop 判断边框颜色看的是左上角像素如果素材四边颜色不同它只会按左上角的颜色来比对这时候就要用ignoreSides参数单独关掉某条边的检测。把白色背景变没再给帧补个圆角头像动画帧通常带着白色或纯色背景引擎里一放就露馅。抠背景这件事很多人第一反应是上魔棒工具但在 Jimp 里就是一次颜色运算。color方法接收一组颜色动作xor就是按位异或——白色和白色异或会变成透明const frame await Jimp.read(sprites/frame-0.png); frame.color([{ apply: xor, params: [#FFFFFF] }]); await frame.write(sprites/frame-0-clear.png);等等先别急着跑。这条命令有个隐藏前提图片本身得带 Alpha 通道。PNG 天然支持透明但 JPEG 不支持xor之后你会得到一张假透明——预览器里看着是黑的或花的。正确做法是先把图片转成支持透明通道的格式再处理。踩坑提示处理透明相关操作前先确认原图格式。JPEG 素材请先await image.write(temp.png)转一次 PNG再继续后续操作否则透明信息会静默丢失。抠完背景顺手给角色做一个头像裁切。circle插件能直接把图片裁成圆形再配合blur做背景虚化一张带圆角头像的卡片就齐活了const avatar await Jimp.read(sprites/frame-0-clear.png); avatar.circle({ radius: 40 }); await avatar.write(sprites/avatar.png); const bg await Jimp.read(sprites/frame-0-clear.png); bg.blur(12); bg.composite(avatar, 20, 20); await bg.write(sprites/avatar-card.png);blur(12)的 12 是模糊半径半径越大越糊。Jimp 用的是一种快速模糊算法效果接近高斯模糊但快得多处理 1000×1000 的图也就几十毫秒。深夜最容易翻车的坑EXIF 方向拆帧拆到一半你发现一张从手机导出的 JPG 在浏览器里横过来了。这几乎是每个做素材的人都遇过的灵异事件文件本身没问题是相机在 EXIF 信息里写了个旋转 90 度的标记大部分看图软件会尊重它但游戏引擎不会。Jimp 的read在解码图片时会自动读取 EXIF 方向标记并修正像素所以从Jimp.read出来的图永远是正的。这个机制在源码里有一个专门的image-bitmap模块负责支持全部 8 种方向变换镜像、旋转的各种组合。小提示如果你需要拿原始方向信息做特殊处理可以用getExifOrientation(image)读出来返回 1~8 的数字。但日常流程里你根本不用管它——Jimp 已经悄悄帮你摆正了。合成精灵图集最后一块拼图单帧都齐了现在要把它们拼回一张正规军图集顺便生成一张预览动图。composite就是干这个的它把一张图按坐标贴到另一张图上并且默认尊重 Alpha 通道const { Jimp } require(jimp); async function buildSheet() { const frameFiles [frame-0.png, frame-1.png, frame-2.png, frame-3.png, frame-4.png, frame-5.png]; const frames await Promise.all( frameFiles.map((f) Jimp.read(sprites/${f})) ); const cols 3; const fw frames[0].bitmap.width; const fh frames[0].bitmap.height; // 0x00000000 是全透明黑色相当于一张空白画布 const sheet new Jimp({ width: fw * cols, height: fh * Math.ceil(frames.length / cols), color: 0x00000000, }); frames.forEach((frame, i) { const x (i % cols) * fw; const y Math.floor(i / cols) * fh; sheet.composite(frame, x, y); }); await sheet.write(sprites/sheet-final.png); } buildSheet();几个细节值得展开说Promise.all并行读 6 张图比串行for循环快得多帧多的时候差距很明显new Jimp({ width, height, color })是创建空白图color用0xRRGGBBAA格式0x00000000就是全透明拼图集必须用它当底否则会有一块碍眼的底色composite默认模式就是标准 alpha 混合透明像素不会盖住下层内容所以帧和帧之间怎么贴都不会互相污染。进阶彩蛋一用一张哈希值找出最像的那一帧素材多了之后你可能会遇到一个新问题美术给了 200 个图其中不少是重复或几乎一样的怎么快速去重手搓一套图片相似度算法太累Jimp 内置了感知哈希pHash——它把图片缩到 8×8转灰度算 DCT 变换最后生成一个 64 位的哈希值。两张图越像哈希的汉明距离越小。const { Jimp, distance, compareHashes } require(jimp); const a await Jimp.read(sprites/a.png); const b await Jimp.read(sprites/b.png); // 直接比较两张图返回 0~1越小越像 console.log(distance(a, b)); // 或者先把哈希存起来之后只跟哈希比省去反复读图 const hashA a.hash(64); const hashB b.hash(64); console.log(compareHashes(hashA, hashB));hash(64)返回的是 base64 的字符串可以像存指纹一样存进数据库。批量去重时先给每张图算一次哈希入库后续新图只要compareHashes一下就知道和谁重复。这个思路在做素材资产管理、查重、甚至做以图搜图时都通用。进阶彩蛋二内存不够给超大图分块处理凌晨三点美术又甩来一张 10000 像素宽的全景图让你裁出 10 张 UI 背景。Jimp 读大图时整张图都在内存里像素数据是 RGBA 四通道10000×783 的图光像素就占 30 多 MB虽然能跑但你要是批量处理几十张Node 的默认内存上限会很快报警。这时候思路要换成分块处理先读大图用clone()复制出需要的区域再单独处理处理完立刻释放引用。const sheet await Jimp.read(sprites/panorama.png); for (let i 0; i 10; i) { const chunk sheet.clone().crop({ x: i * 1000, y: 0, w: 1000, h: 783 }); chunk.resize({ w: 800 }); await chunk.write(ui/bg-${i}.png); // chunk 用完之后会被 GC 回收不会一直占着内存 }另一个省内存的习惯是能操作 Buffer 就别反复转格式。Jimp 的bitmap.data就是原始像素 Buffer按RGBA顺序每 4 个字节一个像素你可以直接用scan遍历做像素级操作不必每次读图写图。源码里的scan就是一个高效的像素遍历器很多插件模糊、颜色、卷积底层都是靠它实现的。收工你的第一个代码画师已就位天亮之前你的素材流水线跑完了最后一帧。复盘一下这一夜你其实搭起了一条完整的生产线read读入 →crop/autocrop拆帧 →color抠背景 →blur/circle加工 →composite拼图集外加pHash查重和分块大图优化两个隐藏技能。全程没有打开过一个 GUI 工具改动一处参数只需要重新跑一遍脚本——这就是代码即生产力的真实含义。更妙的是这套技能的可迁移性远超游戏开发。电商批量做商品图、公众号统一加水印封面、爬虫抓下来的图自动压缩、甚至帮你女朋友把几百张旅行照片批量调色全都是一套模式读进来处理写出去。Jimp 的插件化架构让这些操作像搭积木一样自由组合——核心的composite混合模式、裁剪、模糊等实现都整齐地躺在plugins/和packages/core/src/utils/目录下想深度定制完全可以照着源码改。下次再有人半夜扔给你一摞图片你就可以回他一句发我吧我写个脚本。下期预告当图片处理遇上像素级魔法——用scan手写一个像素艺术滤镜再让 Jimp 帮你自动计算角色碰撞盒咱们下回接着折腾。【免费下载链接】jimpAn image processing library written entirely in JavaScript for Node, with zero external or native dependencies.项目地址: https://gitcode.com/gh_mirrors/ji/jimp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 深夜赶工三小时，我用 Jimp 纯代码搞定了整套游戏素材
深夜赶工三小时我用 Jimp 纯代码搞定了整套游戏素材【免费下载链接】jimpAn image processing library written entirely in JavaScript for Node, with zero external or native dependencies.项目地址: https://gitcode.com/gh_mirrors/ji/jimp凌晨一点策划扔来一条消息角色待机动画要拆成单帧、背景要抠成透明、还得拼一张精灵图集明早上线。你翻出 Photoshop发现没装想装个 ImageMagick发现还要配环境变量。这时候你忽然想起自己明明是个程序员——为什么处理图片要依赖软件为什么不直接写代码这就是我今天要带你体验的完整故事用 JimpJavaScript Image Manipulation Program纯 JavaScript 图像处理库从零搞定一套游戏素材流水线。它不需要任何本地编译不需要装任何原生依赖一条npm install --save jimp就绪接下来要做的就是让代码替你熬夜。三行代码让第一张图听话动手之前先认识一下今天的搭档。Jimp 的核心思路非常朴素把一张图片读进来变成一堆像素点你对着这些像素做操作再把它写出去。就这么简单。先建个项目装好依赖然后写第一个文件const { Jimp } require(jimp); async function start() { const image await Jimp.read(sprites/hero.png); image.resize({ w: 128, h: 128 }); image.greyscale(); await image.write(sprites/hero-grey.png); } start();这段代码做了三件事read把图片读成内存里的像素集合resize把尺寸缩到 128×128greyscale转成灰度图最后write落盘。注意resize的写法是传一个对象{ w, h }这是 Jimp 1.x 的新语法老版本教程里的resize(128, 128)位置参数已经过时了照抄老代码会报错。小提示Jimp 的方法几乎都支持链式调用但底层其实每个方法都会返回新的图片对象。想让原图不受影响记得用image.clone()复制一份再操作。看到命令行里出现 done你的第一个素材就处理完了。全程没有打开任何图像软件就三行代码。这感觉就像你第一次用git提交代码时的那种爽快。把动画帧从图集里切出来策划给的素材是一张 600×100 的横向图集里面躺着 6 个连续动作帧每个帧 100×100周围还留着透明边框。游戏引擎只认单帧你得把它们一个个拆出来。先上手动裁剪逻辑很直白第 i 帧的左上角坐标就是(i * 100, 0)。for (let i 0; i 6; i) { const frame await Jimp.read(sprites/sheet.png); frame.crop({ x: i * 100, y: 0, w: 100, h: 100 }); await frame.write(sprites/frame-${i}.png); }这里有个新手最容易踩的坑crop会直接修改原对象。上面的循环里每次重新read就是为了避免第一帧裁完、第二帧的坐标就全错位了。你要是图省事只 read 一次会发现第 2 帧开始全是乱的。不过手动裁剪有个致命问题美术给的图集不一定是规整网格有的帧大有的帧小周围透明边还厚薄不一。这时候就该autocrop登场了——它会从四个边逐行扫描找到与角落像素颜色一致的区域自动裁掉。透明底、纯色底都能识别const frame await Jimp.read(sprites/sheet.png); frame.crop({ x: i * 100, y: 0, w: 100, h: 100 }) .autocrop({ tolerance: 0.0002, cropOnlyFrames: true }); await frame.write(sprites/frame-${i}.png);tolerance是颜色容差0.0002 表示严格匹配适合纯透明背景cropOnlyFrames默认是true要求上下左右都有可裁的边才动手防止把本身就贴边的素材误伤。注意autocrop 判断边框颜色看的是左上角像素如果素材四边颜色不同它只会按左上角的颜色来比对这时候就要用ignoreSides参数单独关掉某条边的检测。把白色背景变没再给帧补个圆角头像动画帧通常带着白色或纯色背景引擎里一放就露馅。抠背景这件事很多人第一反应是上魔棒工具但在 Jimp 里就是一次颜色运算。color方法接收一组颜色动作xor就是按位异或——白色和白色异或会变成透明const frame await Jimp.read(sprites/frame-0.png); frame.color([{ apply: xor, params: [#FFFFFF] }]); await frame.write(sprites/frame-0-clear.png);等等先别急着跑。这条命令有个隐藏前提图片本身得带 Alpha 通道。PNG 天然支持透明但 JPEG 不支持xor之后你会得到一张假透明——预览器里看着是黑的或花的。正确做法是先把图片转成支持透明通道的格式再处理。踩坑提示处理透明相关操作前先确认原图格式。JPEG 素材请先await image.write(temp.png)转一次 PNG再继续后续操作否则透明信息会静默丢失。抠完背景顺手给角色做一个头像裁切。circle插件能直接把图片裁成圆形再配合blur做背景虚化一张带圆角头像的卡片就齐活了const avatar await Jimp.read(sprites/frame-0-clear.png); avatar.circle({ radius: 40 }); await avatar.write(sprites/avatar.png); const bg await Jimp.read(sprites/frame-0-clear.png); bg.blur(12); bg.composite(avatar, 20, 20); await bg.write(sprites/avatar-card.png);blur(12)的 12 是模糊半径半径越大越糊。Jimp 用的是一种快速模糊算法效果接近高斯模糊但快得多处理 1000×1000 的图也就几十毫秒。深夜最容易翻车的坑EXIF 方向拆帧拆到一半你发现一张从手机导出的 JPG 在浏览器里横过来了。这几乎是每个做素材的人都遇过的灵异事件文件本身没问题是相机在 EXIF 信息里写了个旋转 90 度的标记大部分看图软件会尊重它但游戏引擎不会。Jimp 的read在解码图片时会自动读取 EXIF 方向标记并修正像素所以从Jimp.read出来的图永远是正的。这个机制在源码里有一个专门的image-bitmap模块负责支持全部 8 种方向变换镜像、旋转的各种组合。小提示如果你需要拿原始方向信息做特殊处理可以用getExifOrientation(image)读出来返回 1~8 的数字。但日常流程里你根本不用管它——Jimp 已经悄悄帮你摆正了。合成精灵图集最后一块拼图单帧都齐了现在要把它们拼回一张正规军图集顺便生成一张预览动图。composite就是干这个的它把一张图按坐标贴到另一张图上并且默认尊重 Alpha 通道const { Jimp } require(jimp); async function buildSheet() { const frameFiles [frame-0.png, frame-1.png, frame-2.png, frame-3.png, frame-4.png, frame-5.png]; const frames await Promise.all( frameFiles.map((f) Jimp.read(sprites/${f})) ); const cols 3; const fw frames[0].bitmap.width; const fh frames[0].bitmap.height; // 0x00000000 是全透明黑色相当于一张空白画布 const sheet new Jimp({ width: fw * cols, height: fh * Math.ceil(frames.length / cols), color: 0x00000000, }); frames.forEach((frame, i) { const x (i % cols) * fw; const y Math.floor(i / cols) * fh; sheet.composite(frame, x, y); }); await sheet.write(sprites/sheet-final.png); } buildSheet();几个细节值得展开说Promise.all并行读 6 张图比串行for循环快得多帧多的时候差距很明显new Jimp({ width, height, color })是创建空白图color用0xRRGGBBAA格式0x00000000就是全透明拼图集必须用它当底否则会有一块碍眼的底色composite默认模式就是标准 alpha 混合透明像素不会盖住下层内容所以帧和帧之间怎么贴都不会互相污染。进阶彩蛋一用一张哈希值找出最像的那一帧素材多了之后你可能会遇到一个新问题美术给了 200 个图其中不少是重复或几乎一样的怎么快速去重手搓一套图片相似度算法太累Jimp 内置了感知哈希pHash——它把图片缩到 8×8转灰度算 DCT 变换最后生成一个 64 位的哈希值。两张图越像哈希的汉明距离越小。const { Jimp, distance, compareHashes } require(jimp); const a await Jimp.read(sprites/a.png); const b await Jimp.read(sprites/b.png); // 直接比较两张图返回 0~1越小越像 console.log(distance(a, b)); // 或者先把哈希存起来之后只跟哈希比省去反复读图 const hashA a.hash(64); const hashB b.hash(64); console.log(compareHashes(hashA, hashB));hash(64)返回的是 base64 的字符串可以像存指纹一样存进数据库。批量去重时先给每张图算一次哈希入库后续新图只要compareHashes一下就知道和谁重复。这个思路在做素材资产管理、查重、甚至做以图搜图时都通用。进阶彩蛋二内存不够给超大图分块处理凌晨三点美术又甩来一张 10000 像素宽的全景图让你裁出 10 张 UI 背景。Jimp 读大图时整张图都在内存里像素数据是 RGBA 四通道10000×783 的图光像素就占 30 多 MB虽然能跑但你要是批量处理几十张Node 的默认内存上限会很快报警。这时候思路要换成分块处理先读大图用clone()复制出需要的区域再单独处理处理完立刻释放引用。const sheet await Jimp.read(sprites/panorama.png); for (let i 0; i 10; i) { const chunk sheet.clone().crop({ x: i * 1000, y: 0, w: 1000, h: 783 }); chunk.resize({ w: 800 }); await chunk.write(ui/bg-${i}.png); // chunk 用完之后会被 GC 回收不会一直占着内存 }另一个省内存的习惯是能操作 Buffer 就别反复转格式。Jimp 的bitmap.data就是原始像素 Buffer按RGBA顺序每 4 个字节一个像素你可以直接用scan遍历做像素级操作不必每次读图写图。源码里的scan就是一个高效的像素遍历器很多插件模糊、颜色、卷积底层都是靠它实现的。收工你的第一个代码画师已就位天亮之前你的素材流水线跑完了最后一帧。复盘一下这一夜你其实搭起了一条完整的生产线read读入 →crop/autocrop拆帧 →color抠背景 →blur/circle加工 →composite拼图集外加pHash查重和分块大图优化两个隐藏技能。全程没有打开过一个 GUI 工具改动一处参数只需要重新跑一遍脚本——这就是代码即生产力的真实含义。更妙的是这套技能的可迁移性远超游戏开发。电商批量做商品图、公众号统一加水印封面、爬虫抓下来的图自动压缩、甚至帮你女朋友把几百张旅行照片批量调色全都是一套模式读进来处理写出去。Jimp 的插件化架构让这些操作像搭积木一样自由组合——核心的composite混合模式、裁剪、模糊等实现都整齐地躺在plugins/和packages/core/src/utils/目录下想深度定制完全可以照着源码改。下次再有人半夜扔给你一摞图片你就可以回他一句发我吧我写个脚本。下期预告当图片处理遇上像素级魔法——用scan手写一个像素艺术滤镜再让 Jimp 帮你自动计算角色碰撞盒咱们下回接着折腾。【免费下载链接】jimpAn image processing library written entirely in JavaScript for Node, with zero external or native dependencies.项目地址: https://gitcode.com/gh_mirrors/ji/jimp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考