如何使用p5.js在画布上绘制瓦片

Question

如何使用p5.js在画布上绘制瓦片

3

我正在尝试使用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);
    }
}

- Ayman Ben

我使用嵌套循环来绘制图块，但我需要更快的方法。你认为一个从0到8迭代的循环比两个循环嵌套的情况更快，其中两个循环都从0到2迭代吗？在这两种情况下，内部循环都会执行9次。因此时间复杂度是相等的。 - Rabbid76

如果有超过9个网格怎么办？ - Ayman Ben

你是什么意思？内部循环在两种情况下都执行相同次数（与网格大小无关）。 - Rabbid76

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rabbid76 · Answer 1

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

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

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);
    }
}