draw.DrawPoly Texture U,V explanation?

I have a 16,16 texture that I would like to repeat(horizontally) over a rectangle. These are the current vertex declarations I have:
[lua]
dragbar[1][“x”] = 0
dragbar[1][“y”] = 0
dragbar[1][“u”] = 0 //Top Left
dragbar[1][“v”] = 0

 --Second Vertex
dragbar[2]["x"] = panel:GetWide()
dragbar[2]["y"] = 0
dragbar[2]["u"] = 1 //Top Right
dragbar[2]["v"] = 0

--Third Vertex
dragbar[3]["x"] = panel:GetWide()
dragbar[3]["y"] = 16
dragbar[3]["u"] = 1 //Bottom Left
dragbar[3]["v"] = 1

   --Fourth Vertex
dragbar[4]["x"] = 0
dragbar[4]["y"] = 16
dragbar[4]["u"] = 0 //Bottom Right
dragbar[4]["v"] = 1

    surface.DrawPoly( dragbar ) 

[/lua]

That stretches the entire 16x16 texture over the rectangle, but I would like it to repeat. What are the correct U,V coordinates I must use?

Thanks,
Gbps

Just shorten the code for you, but haven’t tested it. :stuck_out_tongue:
[lua] local dragBar = {}
local function addVertex(x, y, u, v)
local index = #dragBar + 1
dragBar[index][“x”] = x
dragBar[index][“y”] = y
dragBar[index][“u”] = u
dragBar[index][“v”] = v
end
addVertex(0, 0, 0, 0) --Top Left
addVertex(panel:GetWide(), 0, 1, 0) --Top Right
addVertex(panel:GetWide(), 16, 1, 1) --Bottom Left
addVertex(0, 16, 0, 1) --Bottom Right

surface.DrawPoly(dragBar) [/lua]

-snip snip-

FFFFFFF. Look at it again. XD

U is the horizontal texture tile value, and V is the vertical.

Values less than 1 clip the texture and values greater than 1 tile it that many times. So, to make it tile horizontally and fill the width, you would do this:

dragbar[ 2 ].u = width / 16
dragbar[ 3 ].u = width / 16

While making sure dragbar[ 3 ] and dragbar[ 4 ] have their v set to 1.

Ah I was so close! Thanks Kogitsune, you’re a lifesaver!

Ah, I forgot it could tile textures too.
Looks like you have it figured out. Just make sure you don’t create/destroy tables every paint frame.

This. This is the single most important thing to remember with DrawPoly.

Sorry to butt in one someone elses thread, but this method is much cleaner, however it returns this when it gets to line 4;

Any ideas?

–Nevermind. Answered my own question.

[lua]local achvimage = {{},{},{},{}}
local iteration = 1
local function addVertex(x, y, u, v)
achvimage[iteration][“x”] = x
achvimage[iteration][“y”] = y
achvimage[iteration][“u”] = u
achvimage[iteration][“v”] = v
iteration = iteration +1
end
addVertex(8, 8, 0, 0) --Top Left
addVertex(66, 8, 1, 0) --Top Right
addVertex(66, 66, 1, 1) --Bottom Right
addVertex(8, 66, 0, 1) --Bottom Left[/lua]

This works fine.

[lua]
local dragBar = {}
local function addVertex(x, y, u, v)
local index = #dragBar + 1
if !dragBar[index] then
dragBar[index] = {}
end
dragBar[index][“x”] = x
dragBar[index][“y”] = y
dragBar[index][“u”] = u
dragBar[index][“v”] = v
end
[/lua]
Try that.

Aha! That works also. I prefer this to my work around.

Thanks much! =3

I guess I don’t understand why you can’t just do

[lua]
surface.SetDrawColor(255,255,255,255);
surface.SetMaterial(WhateverMaterialYouWant)

for(i=0,math.floor(panel:GetWide()/16))
surface.DrawTexturedRect(i*16,0,16,16);
end
[/lua]

In your panel’s Paint function. This should produce the same result as what you’re looking for.

You can. The point is to make it texture for things such as triangles, hexagons, etc. etc.

[editline]09:33PM[/editline]

Not to mention it’s a whole lot less expensive to draw.

It doesn’t, actually. You only paint one row. You still have to paint it vertically.

If we assume I am running gigantic resolution #81, and need to fill a panel that is 1280x1280, that’s an 80x80 grid of 16x16 rects. This translates to calling surface.DrawTexturedRect 6400 times per frame, per instance of this panel. This is noticeably more expensive than surface.DrawPoly if you manage your garbage correctly.

As long as you don’t create the poly table each time you paint it ( which is a really bad idea ), DrawPoly will out-perform manually doing what the function does.

The DrawTexturedRect loop what I was going to do and DrawPoly what I ended up doing for this reason.

It was my understanding he wanted to repeat the texture horizontally which is why I only made one row.

Now that I take a second look at the code, I see why your method is better. You’re only drawing one polygon but the way you’ve set the u/v coordinates,they repeat it several times, you only end up doing one call to DrawPoly and only draw one polygon, which was much better than my method. Sorry for the mix-up.

In fact I tile Itemforge’s inventory window using my crappy old method, I’m going to go update this to your method right away.

Try making Itemforge’s UI more “scanlines, 1px borders, web 2.0” style. Then it would look awesome :smiley:

Your method worked out great. FPS when an inventory is opened hardly drops at all now. Using the old method, I got a drop of 20 FPS per inventory window.

One thing I noticed though, the UV coordinates in the code people keep posting are set to 0 and 1. If you want it to tile across a single polygon, replace the 1 with (polyWidth/texWidth) for U and (polyHeight/texHeight) for V (where polyWidth&polyHeight are the width&height of the box and texWidth&texHeight are the height of the box).

So, If your texture was 16x16 and your polygon was 32x32, 32/16 = 2, or in other words the texture should repeat twice over that single polygon. Hope I could be of some help.

Oh! Also, the order the vertices need to be arranged in for a box, if this wasn’t already mentioned:

1=Top Left Corner,
2=Top Right Corner,
3=Bottom Right Corner,
4=Bottom Left Corner,

or, in counter-clockwise order in a standard coordinate system:



  _____
 4    /3
 |  /  |
 1/____2


It’s actually:



1	2

4	3


Unless I’m horribly mistaken and just lucky. I use that layout in my code and it works. I think your diagram is either upside down or I just didn’t understand what you were saying with it.

Well, on a computer screen, 0,0 is in the upper-left corner of the screen. As the y of a point increases on a computer screen, the point travels downwards.

But if you were plotting the points in a standard graph* (ah, THAT’s what I meant), like you would do in a math class, (0,0) would be the bottom-left corner of the first quadrant. As the y of a point increases on a standard graph, the point travels upwards. So we are both right, we just drew the graphs a little differently.

Let me add some stuff to make clearer what I’m talking about (hopefully)



(y - axis)
     |
     |_____
     4    /3
     |  /  |
____ 1/____2___  (x - axis)
     |
     |