How do I get the interpolated zElevation of a point on my meshed sprite?

Post reply
0 favourites
  • 5 posts
From the Asset Store
Point to Point - Happy Animals Educational Kids Game
$8 USD
Connect the dots in the correct order and draw happy animals!
01smile's avatar
01smile

  • Hello;

    I have a terrain-like mountain sprite, which is a texture and a mesh with different zElevation values. It looks like a mountain as it should.

    Given an x,y on the layout that overlaps the sprite, what is the zElevation?

    thanks for your time.

    yours

    winkr7

    Tagged:

  • You’ll have to calculate it manually since you can’t access mesh points, only set them.

    For simplicity I’m assuming the sprite isn’t rotated and the mesh points are just laid out in a square grid where you just changed the zelevation.

    First step would be to save the zelevations into an array as you set them. 

    Start of layout
— sprite: set mesh size to 10,10
— array: set size to 10,10,1
— For x from 0 to 9
— For y from 0 to 9
— — array: set at (x,y) to mountainFunction(x,y)
— — sprite: set mesh point (x,y) to … zelevation= array.at(x,y)

    The next step would be to figure out what square a layout position is over. For simplicity I’ll use the mouse location and the sprite will have its origin at its top left.

    X0 = (mouse.x-sprite.x)/sprite.width*10

    Y0 = (mouse.y-sprite.y)/sprite.height*10

    Then int(x0), int(y0) would give the top left index of that square in the array. You may want to clamp that value or do a condition to see if the values are in the range of 0 to 10 otherwise it’s off the mesh. Btw 10 is just the mesh size.

    Anyways with that we are almost there to find the z. One approximate way is to bilinearly interpolate between the corners of the square.

    Z= lerp( lerp(array.at(int(x0),int(y0)), array.at(int(x0)+1,int(y0)), x0-int(x0)), lerp(array.at(int(x0),int(y0)+1), array.at(int(x0)+1,int(y0)+1), x0-int(x0)), y0-int(y0))

    A more perfect way is to understand that each square is made up of two triangles. You just figure out which triangle you’re over and use barycentric coordinates to interpolate the value over a triangle. I don’t know this over the top of my head but Wikipedia can help of you can derive it.

  • Thanks rojohound, this is a helpful start. But I am using sprites with rotation and stretching at the moment so it is probably beyond what I can do.

    I could assign image points in a grid and use those, they get stretched and rotated with the sprite. If the image point knows something about zElevation, maybe in its name or something.

    yours

    winkr7

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Rotation is just an extra step. The math to rotate is:

    NewX=(x-centerX)*cos(a)-(y-centerY)*sin(a)+centerX

    NewY=(x-centerX)*sin(a)+(y-centerY)*cos(a)+centerY

    So you’d take the mouse location and rotate it by sprite.angle around the sprite’s location as the center. And you’d just use that rotated mouse location in the steps in the previous post.

    The scaling is already handled.

    You could have it work with the origin in other locations such as centered but it just takes fiddling with the math a bit.

  • Thanks Rojohound.

Post reply
  • 5 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)