Hey guys. I have an annoying issue on my project im working on.
I’m generating a bunch of tiles, just with basic rects at a size of 32x32 pixels and putting them inside an array of arrays.
Like
Array[0][5] would be row 0, and tile 5 on the X-axis. (0,5) X,Y basically.
Every tile gets its own position, first tile got position 0,0, second tile position would be (0,32) (since its 32px wide)
Then I just draw them at 32x32px size using a double for loop looping through the array of array at their own respective position.
Everything works as expected, BUT, the issue arrives when I use p5 scale function.
On default scale, everything looks great, but at some levels of zoom, I get what it seems to be pixelgaps between the tiles.
At original scale https://imgur.com/LQplqkk
At scale 3, calucaled using scale(1/slidervalue) where slider value are just integers from a slider ranging from 1-5.
This is what happens: https://imgur.com/BviNGsb
As you can see the lines/gaps are appearing. They seem to be red, which is the background, so there is a real gap in between the tiles.
My transformation is made like this to follow the player and center it on screen:
translate(width/2, height/2);
scale(1/scl);
translate(-player.position.x, -player.position.y);
Thats the first thing in my draw() loop, just after setting background.
I’m thinking its a AA or smoothing issue? Its weird because if I just add “WEBGL” on the createCanvas, the gaps go away and I can scale however I want. But I do not wish to use WEBGL in createcanvas cause I dont want to deal with third axis.
Example of my mapGenerator (ive removed some code thats not relevant)
GenerateMap() {
let map = [];
for (let y = 0; y < this.mapHeight; y++) {
map.push(new Array());
for (let x = 0; x < this.mapWidth; x++) {
map[y].push(this.GetTile(x * this.tileSize, y * this.tileSize));
}
}
return map;
}
GetTile just returns a new tile thats sets its x,y from the getTile arguments. Then the tile has their own draw() which renders a rect like this
rect(this.pos.x, this.pos.xy, 32,32)
And for the actual drawing, its just a double for, calling draw on every tile inside the array.
I’ve experimented with scale values, tile sizes and canvas sizes, but I still get this annoying issue. I’ve been fighting with it for three days now and I cant get it to work. Its so annoying as its the only thing hindering me from moving forward with my game.
If you need more details, just ask. I didnt post complete code as im thinking about doing a serious game of it at some point
Thanks guys! <3