Repeating a texture - does Render Target support @2x and @4x texture packs?

Ninjadoodle

Hi guys

I have a 32x32 texture in one of my texture packs and I would like to repeat it horizontally and vertically, to fill the screen.

I've had a look at various code snippets on the forum, but nothing seems to be working for me.

Could someone show me the correct way to write this up, please

Thank you in advance!

mertocan

You can draw a shape with screen width and height. Then fill it with the texture.

Ninjadoodle

Hi @mertocan

Thank you for your reply - I've tried, but I can seem to get the right syntax for setting up the texture using a texture pack.

I can make this work with a single image, but not using a texture pack.

local wallpaper = Texture.new("media/bgStripesBlue.png", true, {wrap = Texture.REPEAT}) local block = Shape.new() block:setFillStyle(Shape.TEXTURE, wallpaper) block:beginPath(Shape.NON_ZERO) block:lineTo(320, 0) block:lineTo(320, 320) block:lineTo(0, 320) block:lineTo(0, 0) block:closePath() block:endPath() stage:addChild(block)

If anyone knows how to do this, that would be awesome

antix

@Ninjadoodle - your code works fine for me. Are you using a version of Gideros that supports texture wrapping?

Ninjadoodle

Hi @antix

Sorry, the code I posted above is the code I 'know' how to write - using a single image. This works fine.

I can't however get it working, when pulling the image out from a texture pack. Nothing I've tried works.

tkhnoman

For that, i think you need to use RenderTarget, because texture pack is somehow not a texture object.

hgy29

I don't know if it is possible to repeat a part of a texture. I'll check if some api exists for that in OpenGL/DirectX. I have the same issue when trying to tile/repeat non-power-of-two textures.

EDIT: This can be done with shaders, would it be worth it to add two more shaders to gideros core to handle this ?

Ninjadoodle

Hi @hgy29 and @tkhnoman

Thanks for the replies!

How would you guys go about handling this ...

Is it better to have a bunch of small 32x32 images for use as repeated backgrounds - separate from the levels texture pack - meaning the level will have to load a texture pack and another small image.

OR

Having a large background image, but as a part of the levels texture pack - this time the level only has to load the texture pack (which will be bigger in dimensions).

Which is the better, more efficient way to do it?

antix

I would use a RenderTarget for the repeating texture. Then all your backgrounds casn still be stored in your Atlas.

Ninjadoodle

Hi @antix

Any chance you could show me a little snippet of how this is done. I've had a look around the forums and can't seem to get it right.

Thank you very much in advance!

tkhnoman

I think i can't kind of give you any code snippet since i use kind of wrapper already, but i can explain.

1. Create a sprite, with the texture pack just like you usually create it, don't add to stage
2. Create a RenderTarget with a size of that sprite
3. Then do this:
renderObject:clear(0,0)
renderObject:draw(yourCreatedSprite)

There, you can use that renderObject just like texture, so you can use it like this:
block:setFillStyle(Shape.TEXTURE, renderObject)

keszegh

i think @tkhnoman's summary should be not hard to follow. for the specifics of how to use rendertarget let me point you to my tutorial:
http://www.indiedb.com/tutorials/clipping-in-gideros-with-rendertarget
it should be useful, although the illustrated use case is not the one you are looking for.

antix

I think the issue here is that the RenderTarget does not seem to want to wrap, instead it just paints one tile in the shape, not many as @Ninjadoodle was wanting.

RenderTarget.new() does not seem to support the options table so it can't be set to repeat from what I can see.

Ninjadoodle

Thanks a lot for your help guys, I really appreciate it!

It seems like the only way to do this, is to use an image separate from the texture pack?

In this case, would you recommend ...

A small 32x32 image for use as a repeated background - separate from the levels texture pack - meaning the level will have to load a texture pack and another small image.

OR

Having a large background image, but as a part of the levels texture pack - this time the level only has to load the texture pack (which will be bigger in dimensions).

Which would be faster / more efficient?

antix

@Ninjadoodle - You could keep your texture in the atlas and make a RenderTarget the size you want, filled with your pattern. You could then just make a BitMap using the RenderTarget Texture, or a Shape if you liked...

TILE_WIDTH = 64 TILE_HEIGHT = 64   BACKDROP_WIDTH = 320 BACKDROP_HEIGHT = 256   local texture = Texture.new("Untitled.png", true) -- TEXTURE ATLAS local region = TextureRegion.new(texture, 0, 0, TILE_WIDTH, TILE_HEIGHT) -- REGION INSIDE ATLAS local tile = Bitmap.new(region) -- TILE TO DRAW local rt = RenderTarget.new(BACKDROP_WIDTH, BACKDROP_HEIGHT, true)   for r = 0, BACKDROP_HEIGHT / TILE_HEIGHT - 1 do -- ROWS tile:setY(r * TILE_HEIGHT) for c = 0, BACKDROP_WIDTH / TILE_WIDTH - 1 do -- COLUMNS tile:setX(c * TILE_WIDTH) rt:draw(tile) -- DRAW TILE IN RENDERTARGET AT X,Y end end   local backDrop = Bitmap.new(rt) -- CREATE BACKDROP BITMAP FROM RENDERTARGET stage:addChild(backDrop)

tkhnoman

Hmm... i see. I haven't tried the shape
How about mesh:

function tableAdd(tableGet,arrayGet) for i = 1,#arrayGet do table.insert(tableGet,arrayGet[i]) end end     local texturew,textureh = 100,100   local sizeW,sizeH =3,5   local vertexArray = {} local textureArray = {} local indexArray = {} for y = 0,sizeH - 1 do for x = 0,sizeW - 1 do local xnow,ynow = x * texturew,y * textureh tableAdd(vertexArray,{xnow,ynow, xnow + texturew,ynow, xnow,ynow + textureh, xnow + texturew,ynow + textureh,}) tableAdd(textureArray,{0,0, texturew,0, 0,textureh, texturew,textureh,}) local nodeGet = ((y * sizeW + x ) * 4) + 1 tableAdd(indexArray,{nodeGet, nodeGet + 1, nodeGet + 3, nodeGet ,nodeGet + 3, nodeGet + 2}) print(nodeGet, nodeGet + 1, nodeGet + 3, nodeGet ,nodeGet + 3, nodeGet + 2) end end   s = Mesh.new() s:setVertexArray(vertexArray) s:setTextureCoordinateArray(textureArray) s:setIndexArray(indexArray) s:setTexture(render)   stage:addChild(s)

edit : This is not complete code, i just snip it from my code, so "render" is generated before

Ninjadoodle

Hi @antix and @tkhnoman

Thank you heaps for the snippet! I however don't really understand where the texture atlas is being setup.

@antix - it looks like this line is pulling the texture ...

local texture = Texture.new("Untitled.png", true)

... I don't however understand how I can make this work with an atlas. Every time I try to create a texture from an atlas I get errors.

I tried replacing the line with ...

local texture = Texture.new(self.pack:getTextureRegion("bgStripesBlue.png"))

and also ...

local texture = Bitmap.new(self.pack:getTextureRegion("bgStripesBlue.png"))

but neither of them work.

Thank you again for your help!

fyi - I also use @2x and @4x sprite sheets

antix

@ tkhnoman - Yep that does work (once you create a RenderTarget containing the graphic above it), nice. I have no idea which method is more efficient or which is faster (if those are even considerations in this case).

One day I must look at the Mesh class

Ninjadoodle

Hi @tkhnoman

I've followed your above instructions and this is what I have ...

self.wallpaper = Bitmap.new(self.pack:getTextureRegion("bgStripesBlue.png"))   self.renderObject = RenderTarget.new(32, 32, true) self.renderObject:clear(0,0) self.renderObject:draw(self.wallpaper)   self.block = Shape.new() self.block:setFillStyle(Shape.TEXTURE, self.renderObject) self.block:beginPath(Shape.NON_ZERO) self.block:lineTo(320, 0) self.block:lineTo(320, 320) self.block:lineTo(0, 320) self.block:lineTo(0, 0) self.block:closePath() self.block:endPath() fg:addChild(self.block)

This still doesn't work tho ...

I only get a single square on the screen

Ninjadoodle

Hi @tkhnoman

Thank you for your mesh method - I managed to get my texture to tile.

I however don't think it is taking my @2x and @4x sprite sheets into consideration, as it spits the texture out extremely tiny when @2x or @4x textures are being used.

Is this a limitation of this method?

antix

@Ninjadoodle - Ahh I see. Sorry, I don't use texture packs at all.

In my programs I have my texture atlas which holds all my textures, and I have a table that describes individual regions inside the texture atlas. It's kind of like the texture pack but made manually.

Maybe I should switch to texture packs? I don't know what the benefits really are.

Anyway, I think you need to just replace the top two lines of code with..

--local texture = Texture.new("Untitled.png", true) -- TEXTURE ATLAS --local region = TextureRegion.new(texture, 0, 0, TILE_WIDTH, TILE_HEIGHT) -- REGION INSIDE ATLAS   local pack = TexturePack.new("atlas.txt", "atlas.png") local region = pack:getTextureRegion("u1.png")

Of course, use your own names

Ninjadoodle

Hi @antix

Cool thanks for the heads up

I've tried the new way, and I can now get it working - however - there is the same problem as with the other snipped I posted about..

I don't think this works with @2x, @4x atlases.

The textures that are tiled are very tiny, and it looks like, its loading the smallest (@1x) texture when it should be displaying @4x.

Anybody know whether I'm right thinking that this method (render target) doesn't support @2x and @4x scaling variants?

Thanks again in advance!

tkhnoman

To tell the truth, i never us Gideros's automatic scaling. I don't like things that i can't control by myself.
I checked scale factor by myself, and see which @2x, or such is fit for it, and scale it myself. That is why this is not going in to my consideration...


@antix : Mesh is good... if you like playing with shader, but it have a limitation.
For example, sometime if you use renderTarget in Mesh, and draw just once, it might be not drawn directly in time, it might need timer delay. Or another way is you need to prepare mesh first in the first load, and just setTexture in the stage load.

Ninjadoodle

Hi @tkhnoman

Thank for the reply. Looks like I'm just going to keep a separate image to use as a repeated texture for now. I like using the Gideros automatic scaling, and I can't seem to get the methods above working with it.

If anybody can point out a different / better way, that would be awesome

Yan

Easiest way is to draw wrap byurself

local texturePack = TexturePack.new("textures/Ground.txt", "textures/Ground.png", true) local textureTile = Bitmap.new(texturePack:getTextureRegion("ground.png")) local renderTarget = RenderTarget.new(edgePoints.rx, edgePoints.by, true)   for x=1, edgePoints.rx, 50 do for y=1, edgePoints.by, 50 do textureTile:setPosition(x, y) renderTarget:draw(textureTile) end end     local shape = Shape.new() shape:setFillStyle(Shape.TEXTURE, renderTarget)

SinisterSoft

"

I have a 32x32 texture in one of my texture packs and I would like to repeat it horizontally and vertically, to fill the screen.

"

Here is a snip of code from something I'm working on in my spare time, it repeats the texture to whatever dimensions I want.

-- load the textures for different pitch patterns grass={} for loop=1,6 do grass[loop]=Texture.new("grass/grass"..loop..".png",true,{wrap = Texture.REPEAT}) end . . . -- create the grass sprite grassLayer=Pixel.new(0xffffff,1,pitchW,pitchH) . . . -- setup the grass sprite for this specific pitch grassLayer:setScale(1/s2) grassLayer:setWidth(w2*z2*s2) grassLayer:setHeight(h2*z2*s2) grassLayer:setAnchorPoint(0.5,0.5) grassLayer:setTexture(grass[g2])