[SOLVED] Add portion of texture to dynamically generated plane (two triangles)

Help & Support
1

Basically I want to build a map in one draw by creating a MxN room and applying same texture to each generated plane, apply the UV coordinates to match the specific position of the texture and build one mesh.

So this was my thought process:

  1. Create two triangles that will generate a square/plane - done
  2. Create normals so that the triangles are visible - done
  3. Create UV’s and place their position on wanted position on the texture - semi-done

What I am having trouble with is that the generated square and texture applied to it make a small white border around the edge, like it’s bigger than it needs to be. Image below:

Question

That white border should not exist. To get the UV position this is what I’ve done:

  1. Took the png width and height and divided it by the size of each square (16x16) to get row/col.
  2. Divided the row and col by 1 (1/row and 1/col) to get the UV scale.
  3. Set x = 4, y = 1 (I want 5th row and 2nd col texture)
  4. Manually positioned the UV of each vertex like this:
let uvs = [ 
        x, z, 
        x + u, z,          
        x, z + v, 
        x + u, z + v
 ];

Why do I still get the white border? Am I doing something wrong? Sorry for the very long question but I didn’t know how to shorten it.

2

Is that on the border of the texture itself? Can you try clamping the texture address UV?

image
image702×156 7.24 KB

Are you trying to make a tilemap level using a PNG as the sprite sheet?

1 Like
3

No, it’s not a border of an PNG. Yes, I want to make a tilemap from a PNG spritesheet. It is already clamped

4

I think I hit this problem myself where I just couldn’t get it pixel perfect: https://playcanvas.com/project/762870/overview/ldtk-2d-tilemap

I ended up doing a small buffer in the UV coords here:

image
image1776×594 83.5 KB

2 Likes
5

It’s a bit outdated so I will need to look into the project again to fix some of the issues that weren’t there before :sweat_smile:

6

Didn’t even know you did something like this. So it wasn’t my math that was wrong, been scratching the back of my neck for a while for why this is happening.

That does fix it thought. Thanks for help, will see how you did it since I want to generate the map with a fewer draw calls :smiley:. I am wondering how I will place what is behind and what is in front of the player. That will be troublesome.

Or it won’t since it’s a mesh and not just a texture, will see when I come to that problem!