如何用P5.js修改PNG像素值？求黑色精灵重着色可行代码

当然可以给黑色PNG精灵重新着色，你的代码问题出在没有将修改后的颜色写回图像，还有一些小的语法/逻辑问题。下面是修复后的完整示例：

问题分析 #

• get(x,y)返回的是颜色值的副本，直接修改pixelValue不会改变原图像，必须用set(x,y, newColor)或操作pixels数组的方式把新颜色写入图像。
• 循环变量x、y未声明，容易造成全局变量污染。
• 最后赋值时写错了变量名（image[0]应该是images[0]）。
• 必须确保图像加载完成后再处理，否则会因images[0]未定义报错。

可行示例代码 #

let images = [];

function preload() {
  // 替换成你的精灵图片路径
  images[0] = loadImage('sprite.png');
}

function setup() {
  createCanvas(400, 400);
  recolorSprite(images[0], color(0, 0, 255)); // 把黑色改成蓝色
}

function draw() {
  background(220);
  image(images[0], 50, 50);
}

// 自定义着色函数：将图像中的黑色替换为目标颜色
function recolorSprite(img, targetColor) {
  img.loadPixels(); // 必须先调用loadPixels()才能访问和修改像素
  for (let y = 0; y < img.height; y++) {
    for (let x = 0; x < img.width; x++) {
      let index = (x + y * img.width) * 4; // 计算像素在pixels数组中的索引
      // 检查当前像素是否为纯黑色（RGB都是0，保留原Alpha通道）
      if (img.pixels[index] === 0 && img.pixels[index+1] === 0 && img.pixels[index+2] === 0) {
        // 获取目标颜色的RGB值
        let r = red(targetColor);
        let g = green(targetColor);
        let b = blue(targetColor);
        // 修改像素值
        img.pixels[index] = r;
        img.pixels[index+1] = g;
        img.pixels[index+2] = b;
        // 若需要统一Alpha通道，可取消下面注释
        // img.pixels[index+3] = alpha(targetColor);
      }
    }
  }
  img.updatePixels(); // 修改完成后调用updatePixels()让更改生效
}

额外说明 #

• 如果你的精灵黑色不是纯黑（比如有抗锯齿灰边），可以调整判断条件，比如允许RGB值在小范围内（img.pixels[index] < 20），避免漏改边缘像素。
• 若不想修改原图像，可创建副本再处理：

  let coloredSprite = images[0].get(); // 创建图像副本
  recolorSprite(coloredSprite, color(255, 0, 0));
  

内容的提问来源于stack exchange，提问作者user1104028