我如何使用 p5.js 在画布上绘制瓷砖

Question

我正在尝试使用 p5.js 制作一个 html5 游戏，我尝试实现的第一件事是绘制瓷砖地图，但我的代码不起作用。我使用嵌套循环来绘制瓷砖，但我需要更快的速度，我发现了另一种使用一维数组绘制瓷砖的算法，我尝试过该算法，但它不起作用，我不知道为什么？let tileset;let map = [    0, 0, 0,    0, 0, 0,    1, 1, 1];function preload() {    tileset = loadImage("./tileset.png");}function setup() {    createCanvas(500, 500);}function draw() {    background(0);    drawTiles(map, 3, 11);}function drawTiles(map, cols, tilesize) {    for (let i = map.length - 1; i > -1; --i) {        let value = map[i];        // source x , y        let sx = (value % cols) * tilesize;        let sy = Math.floor(value / cols) * tilesize;        // distenation x , y        let dx = (i % cols) * tilesize;        let dy = Math.floor(i / cols) * tilesize;        // render image        image(tileset, sx, sy, tilesize, tilesize, dx, dy, tilesize, tilesize);    }}

Answer 1

您已经交换了源和目标。在image第一个矩形区域（参数 2 -5）中定义窗口中的目标，第二个矩形区域（参数 6 - 9）定义图像 ( tileset) 中的源矩形：

image(tileset, dx, dy, tilesize, tilesize, sx, sy, tilesize, tilesize);

由于目标网格 an 和源网格的tileset列数不同，因此函数drawTiles, 需要 2 列参数 ( d_cols, c_cols)：

function draw() {

    background(0);

    drawTiles(map, 3, 2, 11);

}

function drawTiles(map, d_cols, s_cols, tilesize) {

    for (let i = map.length - 1; i > -1; --i) {

        let value = map[i];

        // source x , y

        let sx = (value % s_cols) * tilesize;

        let sy = Math.floor(value / s_cols) * tilesize;

        // distenation x , y

        let dx = (i % d_cols) * tilesize;

        let dy = Math.floor(i / d_cols) * tilesize;

        // render image

        image(tileset, dx, dy, tilesize, tilesize, sx, sy, tilesize, tilesize);

    }

}