时间戳

首页 > 解决方案 > 如何使用 p5.js 在画布上绘制图块

javascript - 如何使用 p5.js 在画布上绘制图块

问题描述

我正在尝试使用 p5.js 制作一个 html5 游戏，我尝试实现的第一件事是绘制一个 tilemap，但我的代码不起作用。

我使用嵌套循环来绘制瓷砖，但我需要更快的东西，我发现了另一种使用一维数组绘制瓷砖的算法我尝试了该算法但它不起作用，我不知道为什么？

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

标签： javascriptp5.js

解决方案

您已经交换了源和目标。在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);
    }
}

推荐阅读