Repeating background image

ar2rsawseen · January 2012

I was trying to setup a pattern for one of objects and best way I found to do it is to use shape and fill it with texture.

This simple snippet:

local texture = Texture.new("images/crate.png", true, {wrap = Texture.REPEAT})
local shape = Shape.new()
shape:setFillStyle(Shape.TEXTURE, texture)    
shape:beginPath(Shape.NON_ZERO)
shape:moveTo(0,0)
shape:lineTo(application:getDeviceWidth(), 0)
shape:lineTo(application:getDeviceWidth(), application:getDeviceHeight())
shape:lineTo(0, application:getDeviceHeight())
shape:lineTo(0,0)
shape:endPath()
stage:addChild(shape)

produces this result:

Image is repeating, but there are some spaces between it. Is this an expected result? Can I remove them?

While I'm at it, I've noticed in Shape example, that there is a winding Shape.NON_ZERO, which I didn't find in documentation. What does it do and are other options?

Hopefully I'm not bombing QnA with too many questions

atilim · January 2012

Hi,

The only way to remove the spaces is using textures with size 2^n.

For winding, there isn't any other option besides NON_ZERO and EVEN_ODD (and default is EVEN_ODD). Let me update the documentation.

Thanks

gorkem · January 2012

This is a limitation of OpenGL right?

atilim · January 2012

Yes, OpenGL texture size always has to be a power of two. Inside gideros, the texture size is increased automatically to conform to this rule.

atilim · January 2012

@ar2rsawseen btw, your way is the best one for displaying a repeating pattern

ar2rsawseen · January 2012

Thanks

Last question, do you even sleep? No matter when (morning, evening, night) I post the question here, it get's answered before I can go and make a cup of tea.

Great Support guys.

gorkem · January 2012

See: http://giderosmobile.com/forum/discussion/comment/975#Comment_975

Maybe we can include this in the FAQ as it's asked twice \m/

MikeHart · January 2012

How about embending the image in a texture pack? There you should be able to use this.

atilim · January 2012

Hi Mike,

If you mean tiling the screen with putting multiple quads taken from a texture pack, than it works. On the other hand (with limitations) ar2rsawseen's solution is the fastest because it only draws a single quad with a repeating texture on it.

But after your post, It seems using a tilemap to draw a repeating pattern can be another fast solution.

MikeHart · January 2012

No, I ment putting that image in a pack and then use that. Of course if would not make sence to put a single image inside a pack but this way you can get around the powerof2 problem. At least that is how I thought Gideros works. Shapes might be a different kind of beast, I don't know. I think I talk to much today. :-/

atilim · January 2012

Unfortunately texture packs are also expanded to power of two.

MikeHart · January 2012

Yes, but the texture that is grabbed from a pack, does this is being expanded too? :-?

MikeHart · January 2012

Forget about the pack. My test shows that somehow a shape texture can't be build from something else than a texture object.

atilim · January 2012

Now, I understand your point

And yes, shapes only support textures.

avo · February 2012

unless I'm crazy this doesn't work anymore in version 2.1, now it seems to stretch 1 image.

is there anything to do a repeating background image currently?

thanks

ar2rsawseen · February 2012

No, you're right, now it looks like image in attachement.

@atilim what do you have to say in your defense?

atilim · February 2012

oh yes. This is the exact output I expect to see

I had to change the texture wrapping mode from repeat to clamp because I've observed some tiny rendering issues with repeating textures. To do a repeating background, the current option is using the tile maps. On the other hand, now I'm extending the Texture class so that you can use repeating textures like:

local texture = Texture.new("box.png", false, {wrap = Texture.REPEAT})

This will be available with the next version (2012.2.2).

Sorry for the confusion ;;)

ar2rsawseen · February 2012

Ah, and all my effort to avoid TileMaps is in vain. Will need to try to learn them anyway.

OZApps · April 2012

local texture = Texture.new("box.png", false, {wrap = Texture.REPEAT})
This will be available with the next version (2012.2.2).

Is it now present in the 2012.2.2? I guess it has the same issue/outcome as the screenshot above.

atilim · April 2012

Oh yes.. It's not available in 2012.2.2. I wanted to release 2012.2.2 soon and pushed this feature to the next release. :-\"

OZApps · April 2012

AWWWW

atilim · April 2012

uhhh.. I haven't thought this is an important feature :-B

anyway, i'll put it soon.

OZApps · April 2012

Believe me it is, specially when one can tile a backdrop instead of having a huge gigantic 1536x2048 sized graphic with the same repeating pattern, it is smaller and a much better way to use. So if the tiling can be proper, this will make is so much easier to handle the different resolutions, etc. Add to that the blending layers, that is just amazing!!

So if you can put this on the important list, that will be so wonderful.

atilim · April 2012

I see. I'll implement it with the next release.

avo · April 2012

Yes that's what I was using it for when it broke, and it was nice since I had like a 8x8 graphic that tiled for the whole background. Actually now with the new ipad this is probably more important since the resolution is so large.

After that I switched to a solid color and it looked ok so I wasn't too concerned but it seems other people were doing the same thing

Hopefully it's not too much trouble to add.

Artiom · April 2012

I was waiting for this feature too. I want to create repeating background for my jump style game.
How I can create infinite sprite? If I'll use size like 50000x50000, is Gideros deals with it and the phone or should I find another way?

OZApps · April 2012

@Artiom,
I am not sure if the repeating background for your app/game is the same as tiling a background. Because your background might change at certain areas, for which you will have to use something like Tile Based backgrounds that you need to apply and change on the fly. Whereas this option is more so used for filling an area that needs that repeating pattern.

If this suits/fits your game, that will be wonderful and then you will not really need a 50,000 x 50,000 sized sprite/background, you can manage that with a sprite that has the tile sized extra padding on all sides, all you will do is just position the background accordingly, when it reached the edge of the extra padding, you just place it back by that padding and it will scroll and repeat.

techdojo · April 2012

@Artiom - there are a number of ways to create an "infinite" repeating background, the easiest way is to create a sprite that's twice the height of the screen (and have the top half a copy of the bottom half), then when you scroll the image, as soon as you detect that you've reached the top (or bottom) of the sprite, then you can just "jump" back to the bottom (or top) and the change *should* be seamless.

The other way you can do it - is by creating a tile map that again is taller than the screen with enough overlap so that you can jump back to the start of the map and continue to scroll ad infinitum

Hope that helps

ar2rsawseen · May 2012

Heard that new release is coming, and just wanted to know if

local texture = Texture.new("box.png", false, {wrap = Texture.REPEAT})

will be implemented? Tried to check tracker, but didn't find anything about it.
Just wanted to remind of this very important option.

atilim · May 2012

yes yes, definitely it'll be available with the new release.

avo · May 2012

This works again as described (thanks!

), however it doesn't seem to let you use a texture from a texture pack. Gives error: bad argument #2 to 'setFillStyle' (TextureBase expected, got table)

local texpack = TexturePack.new("bg.txt","bg.png",false,{wrap = Texture.REPEAT}) -- No problem here
 
local texture = texpack:getTextureRegion("squares.png")
local shape = Shape.new()
shape:setFillStyle(Shape.TEXTURE, texture) -- Doesn't like this
shape:beginPath(Shape.NON_ZERO)
shape:moveTo(0,0)
shape:lineTo(application:getDeviceWidth(), 0)
shape:lineTo(application:getDeviceWidth(), application:getDeviceHeight())
shape:lineTo(0, application:getDeviceHeight())
shape:lineTo(0,0)
shape:endPath()
stage:addChild(shape)

Is there a way to get Gideros to consider the data from getTextureRegion as a regular texture or another way around this?

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Repeating background image

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Repeating background image

Comments