Repeat / Tile Texture Within Quad -> Is It Possible?

Solar2D General Questions/Discussion
#1

To elaborate question:
Assume I have a 128x128px texture that I want to fill entire screen with. I want a tiled pattern, not a stretch.
One way would be to create a number of display.newImage objects and tile these textured rectangles, but obviously it is a performance-wise very much an inferior solution to creating a one textured rectangle the size of the screen and setting it’s top/right and bottom/right UV coordinates to more than (1,1).

As far as I know, Corona >>UNFORTUNATELY!<< doesn’t give us access over UV coordinates (although it would be extremely useful for many purposes), but I think I have seen somewhere on forum there was a trick to image tiling (might be wrong).
Also, the API page for displayObject.width property shows a comment that changing .width and .height of the image crops the image. I tried it with daily build 811 and obviously the “bug” was fixed (unfortunately).

Anyway, wanted to see if anyone found out some tricks or hidden features that would allow us to manipulate tiling/ UV coordinates of a texture quad.

Thanks
Nenad [import]uid: 80100 topic_id: 26287 reply_id: 326287[/import]

#2

Check out the recent blog post on sprite tiling [import]uid: 8271 topic_id: 26287 reply_id: 106510[/import]

#3

Thanks, Horace.
Did you mean this one:
http://blog.anscamobile.com/2012/03/image-sheets-image-groups-and-sprites/

It’s the only post I found on sprites but didn’t find any info related to above question. [import]uid: 80100 topic_id: 26287 reply_id: 106512[/import]

#4

Yes, that one.

You know that to repeat one image across the screen you’ll just be rendering it multiple times but that Corona will handle the multiple use of the single image file? You won’t be consuming more application memory when you reuse the image. [import]uid: 8271 topic_id: 26287 reply_id: 106513[/import]

#5

That’s right, thanks… However I wasn’t worrying about texture memory but total display object count. For example, to tile a 128px texture over iPad retina screen would take 192 display objects which is quite an overkill… With UV control, it would easily be done with just one object… [import]uid: 80100 topic_id: 26287 reply_id: 106518[/import]

#6

I think your find your more likely to run out of texture memory than processing memory. So doing that way is more beneficial. Once your images are in then thats it, it will only slow things down if you try to move them etc.

Corona likes to move small images too. Moving large images slows things down i think. Thats why games use tiles rather than large images.

When i started, I had the same question. :slight_smile:

[import]uid: 118379 topic_id: 26287 reply_id: 106523[/import]

#7

how did you come up with 192 too. Surely you will scale up that resoultion.
[import]uid: 118379 topic_id: 26287 reply_id: 106524[/import]

#8

@Beloudest
Thanks for your answer, although it doesn’t quite apply to the question, I was referring to UV texture mapping like the following:
http://www.opengl-tutorial.org/beginners-tutorials/tutorial-5-a-textured-cube/#header-0
This technique is basic underlying technique that Corona (or any other OpenGL based engine) uses to displays textures on screen.

Each time we call display.newImage(), among many things that Corona does in the background the following will also happen:

  • image file is loaded from file if not already loaded
  • openGL texture is created (if not already created)
  • two triangles are created to represent rectangle on screen, their size/position defined by pixel size of the image file.
  • texture is applied to this triangles, and every point of the triangle is assigned a coordinate between 0 and 1 to describe how texture should fit the triangles. These are UV coordinates.

For a simple quad consisting of 3 triangles these coordinates are:

0,0 1,0  
0,1 1,1

If instead we set coordinates like this:

0,0 5,0  
0,5 5,5

Our image will be repeated 5 times on one display object.

Or if we do this:

0,0 5,0  
0,3 5,3

It will be repeated 5 times horizontally and 3 times vertically.

Changing UV values we can also easily create effects like image skewing and “3d-like” transformations without any additional computational overhead.

Now this is very simplified explanation, but UV coordinates are always used, whenever image is displayed on screen using OpenGL.
If we could have access to UV coordinates OR allowed to use bitmap transform matrix (like in another Lua mobile SDKs), we could create quite a bit of effects very easily.
By the way, calculation:

128x128px texture tiled on 2048x1536px screen:  
columns: 2048x128 = 16 columns  
rows: 1536x128 = 12 rows  
total 16 \* 12 = 192 objects

[import]uid: 80100 topic_id: 26287 reply_id: 106531[/import]

#9

Ok see what your looking for. I think the best you can do is use imagesheets within imagegroups. This will take advantage of OpenGL.

Maybe there is a way to access that functionality but its not available in the api.
Sorry 192 was right, my bad. I was thinking smaller scale. [import]uid: 118379 topic_id: 26287 reply_id: 106536[/import]

#10

Hello nosheet,

Yes currently Corona can not acces UV texture mapping directly. It is actually quite useful for many thing such as creating procedural wave or trails.

How about we submit feature request for this? I havent try it before. Maybe something like textured polygon in which we could control UV texture mapping directly? [import]uid: 41267 topic_id: 26287 reply_id: 106562[/import]

#11

+1 Good suggestion nosheet. I think what would also be useful along those lines is for Corona to expose some bare metal performance data, like how many openGL calls its doing (and other stuff I can’t think of at the moment). It would be helpful to know what’s going on under the hood, since Corona is essentially a black box. [import]uid: 120 topic_id: 26287 reply_id: 106624[/import]