Change plane UVs on click

Questions
1

Im trying to make a simple tile map editor given a spritesheet of textures.
For each tile, Id like to use a different plane.

But im having trouble figuring out how to change UVs coordinates of an already created plane.

I think im confusing the expected value in this two operations:

  • creating a plane receives a Vector4 as uvs.
  • but getVerticesData() returns a Float32Array(16) (is it because of sideOrientation being doubleside? I actually only want the front face but idk how to set that up)

Here’s the playground, attempting to switch to the other half of the texture on click:

Desired result after click:
image

Thanks,

2

The front face is defined by the first 4 vertices https://playground.babylonjs.com/#RQWVLZ#2

2 Likes
3

hey sebavan,
thanks! your answer helped me to understand the following

//sprite 1
new BABYLON.Vector4(0, 0, 0.5 , 1);

//sprite 2
new BABYLON.Vector4(
  0.5, //x (bottom right)
  0, //y (bottom left)
  1, //z (upper right)
  1 //w (upper left)
);

//being:
//U = (x,z) 
//V = (y,w)

And sprite 2 translates to:

//bottom left
uvs[0] = 0.5;
uvs[1] = 0;

//bottom right
uvs[2] = 1;
uvs[3] = 0;

//upper right
uvs[4] = 1;
uvs[5] = 1;

//upper left
uvs[6] = 0.5;
uvs[7] = 1;

So to translate Vector4 to array8:

v4 = new Vector4(0.5, 0, 1, 1);

uvs[0] = v4.x;
uvs[1] = v4.y;
uvs[2] = v4.z;
uvs[3] = v4.y;
uvs[4] = v4.z;
uvs[5] = v4.w;
uvs[6] = v4.x;
uvs[7] = v4.w;

Useful functions:

function GetSpriteUVCoordinates(columns, rows, index){

    let column = index % columns;
    let row = Math.floor(index / columns);
    let uMin = column / columns;
    let vMin = row / rows;
    let uMax = (column + 1) / columns;
    let vMax = (row + 1) / rows;
    return new BABYLON.Vector4(uMin, vMin, uMax, vMax);
}

function vector4ToArray8(uv){

    let uvs = [];
    uvs[0] = uv.x;
    uvs[1] = uv.y;
    uvs[2] = uv.z;
    uvs[3] = uv.y;
    uvs[4] = uv.z;
    uvs[5] = uv.w;
    uvs[6] = uv.x;
    uvs[7] = uv.w;
    return uvs;
}

final PG after some cleanup and a complete spritesheet:
(maybe it’s worthy of reaching doc examples)

image
image581×584 185 KB

edits: pg link, screenshot, pg updated link.

2 Likes