Как я могу рисовать плитки на холсте, используя p5.js - PullRequest
Новая
       76

Как я могу рисовать плитки на холсте, используя p5.js

2 голосов
/ 11 ноября 2019

Я пытаюсь создать игру html5, используя p5.js, и первое, что я попытался реализовать, это нарисовать карту тайлов, но мой код не работает.

Я использовал вложенный цикл для рисования тайлов, но янужно что-то быстрее, я нашел другой алгоритм, который использует одномерный массив для рисования плиток, я попробовал этот алгоритм, но он не работает, и я не знаю, почему? 

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

1 Ответ

0 голосов
/ 11 ноября 2019

Вы поменяли источник и пункт назначения. В 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);

Поскольку сетка назначения и источник 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);
    }
}
...