sprite - 在 p5.js 中放大时 Sprite 模糊

Question

我试图将 p5.js 中 Sprite 的大小放大一点(系数 2)，但渲染时它们看起来很模糊。显然，放大通常不是一个好主意，但是我已经成功地在原始 JavaScript 中使像素化 Sprite 看起来清晰(基于本文:https://nluqo.github.io/broughlike-tutorial/stage1.html)。

在 JS 中我会做这样的事情:

let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
ctx.imageSmoothingEnabled = false;

像这样画:

let tileSize = 32;
ctx.drawImage(
  spritesheet,
  sprite*16,
  0,
  16,
  16,
  x*tileSize,
  y*tileSize,
  tileSize,
  tileSize
);

当向上缩放 Sprite 时，我得到了一个很好的干净效果(类似于我上面链接的文章中显示的效果)。

现在，我正在尝试将一些代码移植到 P5.js 以进行演示，并一直在尝试复制上述升级(spritesheet 为 16x16，希望渲染为 32x32)，并且一直在尝试 em> 来复制典型的 ctx 调用，但它们的工作方式似乎并不相同。另外值得注意的是，我尝试从 createCanvas 获取 canvas 元素并获取 2D 上下文，但该方法不存在。

这是我迄今为止尝试过的:

createCanvas(1024, 800);
noSmooth();
...
const spriteSize = 16;
const spriteScaled = 32;

let _c = 0; // col lookup into spritesheet
let _r = 0; // row lookup into spritesheet
test_image = createImage(spriteScaled, spriteScaled);
test_image.copy(
  tileMap,
  _c * spriteSize,
  _r * spriteSize,
  spriteSize,
  spriteSize,
  0,
  0,
  spriteScaled,
  spriteScaled
);
// also tried this:
// test_image.resize(spriteScaled, 0);

此外，我在 style.css 中添加了此内容，但没有效果:

canvas {
  display: block;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

Answer 1

而noSmooth()函数确实会影响使用 image() 函数绘制的图像，但不会影响 copy() 函数的行为。

let imgUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QAAAAAAAD5Q7t/AAAAh0lEQVQ4y92TMQ6AIAxFX40bB3HyIE4ex00jm+dj8iDOdRGDWhMim39seeWT8gVbatSEjKIC6DY+DzpvMnUKR3AN/mnp6Inzmg6RFLbAu5p2jG4EoIqNHNhSBegy5QNr8PE5enHwVT8YcK5xmaDv+L7GUgek63xzcr/9NQvWvxhmOz9SmsZi7UmSK41htVcqAAAAAElFTkSuQmCC";

const spriteSize = 16;
const spriteScaled = 32;

let tileMap;
let test_image;

function preload() {
  tileMap = loadImage(imgUrl);
}

function setup() {
  createCanvas(1024, 800);
  noSmooth();

  let _c = 0; // col lookup into spritesheet
  let _r = 0; // row lookup into spritesheet
  test_image = createImage(spriteSize, spriteSize);
  // Don't resize when copying. This will cause interpolation to happen.
  test_image.copy(
    tileMap,
    _c * spriteSize,
    _r * spriteSize,
    spriteSize,
    spriteSize,
    0,
    0,
    spriteSize,
    spriteSize
  );
}

function draw() {
  // Only resize when you actually draw the sprite
  image(test_image, 0, 0, spriteScaled, spriteScaled);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>