[英]How can i draw tiles on canvas using p5.js
我正在嘗試使用 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);
}
}
您已經交換了源和目標。 在image
中,第一個矩形區域(參數 2 -5)定義 window 中的目標,第二個矩形區域(參數 6 - 9)定義圖像中的源矩形( tileset
):
image(tileset, sx, sy, tilesize, tilesize, dx, dy, tilesize, tilesize);
image(tileset, dx, dy, tilesize, tilesize, sx, sy, tilesize, tilesize);
由於目標網格和源圖塊drawTiles
tileset
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);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.