[LibGDX] Anybody can explain U, V, U2 and V2 values?

Engines, Libraries and Tools
#1

Here is a draw method we can use in LibGDX:

spriteBatch.draw(texture, x, y, width, height, u, v, u2, v2);

I wanted to make a background draw more than once. I mean, the player will move and background will not, but instead a new image will be drawn when the first one’s borders are on the screen.

I could do it with this method. But I am curious, because I couldn’t really understand what it does. My background image is a 128x128 one, and it is drawn 4 times on the screen. I can manipulate u, v, u2 and v2 values and make it draw once or twice. But I really don’t know which one to manipulate to get the results I want.

I have no particular result I want to get, I just want to know what the values in this constructor do. I especially want to know what u, v, u2 and v2 does. Searched the internet, everybody just gave the OPs numbers instead of an explanation. I need explanations.

#2

UV are the koordinates of your texture normalised in each component. u-v is top right, u2-v2 is bottom left corner.
Just read that article: https://github.com/mattdesl/lwjgl-basics/wiki/LibGDX-Textures#wiki-wrap-modes

But for accomplishing your task you might wanna use gl_repeat: http://open.gl/textures

#3

Or you could create a simple if statement and for loop, basically just draw 3 background images, one behind the player out of view, one in view, one ahead.

This seemed to work for me, can’t imagine it is expensive to draw considering how many sprites a game actually processes.

#4

Thanks. I am already using GL20.GL_REPEAT. I’m also experimenting with GL_CLAMP_TO_EDGES to see differences.

Thanks to the article link you gave me, I could search with better keywords. I came to conclusion that if I make u and v 0 and u2 and v2 2, it will repeat the image twice vertically and horizontally. So, I am getting 4 images.

But, what do you mean with the word “normalized”?

Thanks to Phibedy, I’m able to do what I want, with some problems I can fix with some trial-error. But I’m interested in learning about your method. Can you elaborate?

#5

‘Normalised’ in this case just means that texture coordinates are represented as a floating point ratio between 0.0 and 1.0, instead of absolute integer values. The good part about this is that you can resize your textures, and not have to mess around re-aligning everything. 0.0 will always point to the start, 0.5 the middle and 1.0 the end of the image (in either the x or y direction). To go from an absolute value to a normalised value, divide the pixel coordinate by the width of the texture, i.e. 32pix / 64width = 0.5norm. Do the opposite to convert a normalised value to an absolute one, i.e. 0.5norm * 64width = 32pix.

As you’ve discovered, you can use UV coordinates >1.0, and how OpenGL handles this will be defined by the wrapping mode.

#6

Thanks nerb. Thanks to Phibedy, I discovered the UV coordinates which I kinda ignored and stayed away until now :slight_smile:
So, this should also mean the same with Vector2 normalize method. Good to know.

Here is my other question, you guys know that my initial problem was to repeat the background. I set the background using this method:

spriteBatch.draw(texture, x, y, width, height, u, v, u2, v2);

And of course, setWrap method is used as well.

But when I try to render sprites in the same manner, I cannot do this, because there is not a similar method for this. What should I do to draw the sprites like that background?

#7

Sprite.class from libgdx?
If yes, you can create a Sprite using a Texturegion.class, texturegion handles UV-Coords.

#8

Basically you have 3 vectors that control the position of each image. So you draw your images in a grid like so

1 2 3
1 2 3
1 2 3

Your character would be in the centre square ( 2), you can use a for loop to draw the images one after the other or just call batch.draw on 3 lines.

Use an if statement inside the loop right before you draw that decides if the viewport / 2 is > background width / 2, if so you would take the vector belonging to image 1 and add it’s width onto it in the multiple of 3.

You then end up with this

2 3 1
2 3 1
2 3 1

then

3 1 2
3 1 2
3 1 2

then

1 2 3
1 2 3
1 2 3

(Think that’s right, hard to visualize it lol )

Keep doing so and you will have an infinite movement of having basically the front and back images swapping. Obv if the character turns around you would be subtracting values.

This is how I did it, can’t find the code but it worked but it did look a little bit “dirty” lol.

#9

So basically, you just pick the places a player can go (and for the sake of my explaining, put them in an array), and say, if it goes to up, you delete the bottom image coordinates from the array and add a new coordinate which is higher.
If it goes to left, you delete the right one, your middle one becomes right one, your left one becomes middle one (because that’s where your player is) and you just create a new left.

I don’t know if it’s because I heard your solution or it is really the only way, but I it makes sense to me to use this :smiley:

I’ll stick to OpenGL wrapping method for now, but for an infinite background, I think I’d have to switch to your method.

#10

Yah pretty much, works fine until your user fucks with the resolution Lol, you would need to have preset res that you can support, for android you could just use a fixed viewport.