如何在p5.js 2D环境中实现灯笼式光照效果？

核心思路是先给整个屏幕盖一层深色遮罩，再用减法混合模式在玩家位置挖一个亮区，这样就能实现只有玩家周围可见、其余区域暗化的效果，和你参考的游戏效果一致。

具体实现步骤 #

• 第一步：正常绘制背景和玩家角色
• 第二步：给全屏添加半透明的深色遮罩
• 第三步：切换到减法混合模式，在玩家位置绘制圆形，相当于从遮罩中“挖”出光照区域
• 第四步：切回正常混合模式，避免影响后续绘制

完整代码示例 #

let bgImg;
let playerX, playerY;

function preload() {
  // 替换成你的背景图路径
  bgImg = loadImage('background.jpg');
}

function setup() {
  createCanvas(800, 600);
  playerX = width / 2;
  playerY = height / 2;
}

function draw() {
  // 1. 绘制背景和玩家
  image(bgImg, 0, 0, width, height);
  fill(255, 0, 0);
  circle(playerX, playerY, 20); // 玩家角色

  // 2. 添加全局暗化遮罩
  fill(0, 0, 0, 200); // 黑色半透明，最后一个值控制暗度（0-255）
  rect(0, 0, width, height);

  // 3. 用减法混合模式挖光照区域
  blendMode(SUBTRACT);
  noStroke();
  fill(255); // 颜色不影响，只要不透明就行
  circle(playerX, playerY, 150); // 光照半径，按需调整
  blendMode(BLEND); // 切回正常模式

  // 玩家移动控制（可选）
  if (keyIsDown(LEFT_ARROW)) playerX -= 5;
  if (keyIsDown(RIGHT_ARROW)) playerX += 5;
  if (keyIsDown(UP_ARROW)) playerY -= 5;
  if (keyIsDown(DOWN_ARROW)) playerY += 5;
}

关键细节说明 #

• 遮罩的暗度可以通过fill(0,0,0, 200)里的第四个参数调整，数值越高越暗
• 光照半径根据你的游戏场景调整，circle(playerX, playerY, 150)里的150就是半径
• 一定要记得切回BLEND混合模式，不然后续所有绘制都会用减法模式，导致异常

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