Repeat animated sprite within object

Solar2D General Questions/Discussion
#1

Hi,

I am looking to make my 16x16 tile (background) that is animated fill the entire screen.

I would like to have the 16x16 tile repeat on both the x and y axis nexto eachother, without creating a new object for each “block”.

Is there a way to make my object fill the entire screen and have the animated texture repeat within the object?

Here’s my code:

local options = { width = 16, height = 16, numFrames = 16, } local sheet = graphics.newImageSheet( "image/sky.png", options ) local sky = { { name = "sky", start = 1, count = 16, time = 3200, } } local background = display.newSprite( sheet, sky ) background.xScale = 8; background.yScale = 8; background.x = \_XC; background.y = \_YC; background:play()

(_XC is the center of the screen on the x axis, _YC is the center of the screen on the y axis)

Thanks

#2

Use repeating fills: https://coronalabs.com/blog/2013/11/07/tutorial-repeating-fills-in-graphics-2-0/

I quickly modified the JungleScene example that comes w/ Corona to see if it would work and it does:

display.setDefault( "textureWrapX", "repeat" ) display.setDefault( "textureWrapY", "repeat" ) -- an image sheet with a cat local sheet1 = graphics.newImageSheet( "runningcat.png", { width=512, height=256, numFrames=8 } ) -- play 8 frames every 1000 ms local instance1 = display.newSprite( sheet1, { name="cat", start=1, count=8, time=1000 } ) instance1.x = display.contentWidth / 4 + 40 instance1.y = baseline - 75 instance1.xScale = .5 instance1.yScale = .5 instance1:play() -- A sprite sheet with a green dude local sheet2 = graphics.newImageSheet( "greenman.png", { width=128, height=128, numFrames=15 } ) -- play 15 frames every 500 ms local instance2 = display.newSprite( sheet2, { name="man", start=1, count=15, time=500 } ) instance2.x = 3 \* display.contentWidth / 4 + 30 instance2.y = baseline - 55 instance2:play() instance1.fill.scaleX = 0.25 instance1.fill.scaleY = 0.25 instance2.fill.scaleX = 0.25 instance2.fill.scaleY = 0.25 display.setDefault( "textureWrapX", "clampToEdge" ) display.setDefault( "textureWrapY", "clampToEdge" )
#3

For your example this would be something like:

display.setDefault( "textureWrapX", "repeat" ) display.setDefault( "textureWrapY", "repeat" ) local scale = 8 local background = display.newSprite( sheet, sky ) background.xScale = scale background.yScale = scale background.fill.scaleX = 1/scale background.fill.scaleY = 1/scale display.setDefault( "textureWrapX", "clampToEdge" ) display.setDefault( "textureWrapY", "clampToEdge" )
#4

Finally, you’ll need to adjust the x/y offset, but you can read the article I linked for that (see ‘Offsetting the fill’ in the article/blog).

#5

Hi,

Thank you for the quick reply! I tried implementing what you gave me with my existing code, but ran into a texture issue.

Here is what I now see:

http://www.giphy.com/gifs/26BRqFnLc6YDL7TlS

(the texture is getting a bunch of weird vertical lines)

Here’s my current code:

local options = { width = 16, height = 16, numFrames = 16, } local sheet = graphics.newImageSheet( "image/sky", options ) local sky = { { name = "sky", start = 1, count = 16, time = 3200, } } display.setDefault( "textureWrapX", "repeat" ) display.setDefault( "textureWrapY", "repeat" ) local scale = 8 local background = display.newSprite( sheet, sky ) background.xScale = scale background.yScale = scale background.fill.scaleX = 1/scale background.fill.scaleY = 1/scale display.setDefault( "textureWrapX", "clampToEdge" ) display.setDefault( "textureWrapY", "clampToEdge" ) background:play()
#6

Yeah, you’ve got to be careful about this.  It will fall afoul of a number of texture related issues.  Also, I can’t guarantee that this is a good solution for all devices.

A texturing expert or someone with more time to help experimenting will need to chime in at this point.

I would suggest you share a link to your sprites or project here to get proper help. Folks will need to see what you are doing (all of it).

#7

Use repeating fills: https://coronalabs.com/blog/2013/11/07/tutorial-repeating-fills-in-graphics-2-0/

I quickly modified the JungleScene example that comes w/ Corona to see if it would work and it does:

display.setDefault( "textureWrapX", "repeat" ) display.setDefault( "textureWrapY", "repeat" ) -- an image sheet with a cat local sheet1 = graphics.newImageSheet( "runningcat.png", { width=512, height=256, numFrames=8 } ) -- play 8 frames every 1000 ms local instance1 = display.newSprite( sheet1, { name="cat", start=1, count=8, time=1000 } ) instance1.x = display.contentWidth / 4 + 40 instance1.y = baseline - 75 instance1.xScale = .5 instance1.yScale = .5 instance1:play() -- A sprite sheet with a green dude local sheet2 = graphics.newImageSheet( "greenman.png", { width=128, height=128, numFrames=15 } ) -- play 15 frames every 500 ms local instance2 = display.newSprite( sheet2, { name="man", start=1, count=15, time=500 } ) instance2.x = 3 \* display.contentWidth / 4 + 30 instance2.y = baseline - 55 instance2:play() instance1.fill.scaleX = 0.25 instance1.fill.scaleY = 0.25 instance2.fill.scaleX = 0.25 instance2.fill.scaleY = 0.25 display.setDefault( "textureWrapX", "clampToEdge" ) display.setDefault( "textureWrapY", "clampToEdge" )
#8

For your example this would be something like:

display.setDefault( "textureWrapX", "repeat" ) display.setDefault( "textureWrapY", "repeat" ) local scale = 8 local background = display.newSprite( sheet, sky ) background.xScale = scale background.yScale = scale background.fill.scaleX = 1/scale background.fill.scaleY = 1/scale display.setDefault( "textureWrapX", "clampToEdge" ) display.setDefault( "textureWrapY", "clampToEdge" )
#9

Finally, you’ll need to adjust the x/y offset, but you can read the article I linked for that (see ‘Offsetting the fill’ in the article/blog).

#10

Hi,

Thank you for the quick reply! I tried implementing what you gave me with my existing code, but ran into a texture issue.

Here is what I now see:

http://www.giphy.com/gifs/26BRqFnLc6YDL7TlS

(the texture is getting a bunch of weird vertical lines)

Here’s my current code:

local options = { width = 16, height = 16, numFrames = 16, } local sheet = graphics.newImageSheet( "image/sky", options ) local sky = { { name = "sky", start = 1, count = 16, time = 3200, } } display.setDefault( "textureWrapX", "repeat" ) display.setDefault( "textureWrapY", "repeat" ) local scale = 8 local background = display.newSprite( sheet, sky ) background.xScale = scale background.yScale = scale background.fill.scaleX = 1/scale background.fill.scaleY = 1/scale display.setDefault( "textureWrapX", "clampToEdge" ) display.setDefault( "textureWrapY", "clampToEdge" ) background:play()
#11

Yeah, you’ve got to be careful about this.  It will fall afoul of a number of texture related issues.  Also, I can’t guarantee that this is a good solution for all devices.

A texturing expert or someone with more time to help experimenting will need to chime in at this point.

I would suggest you share a link to your sprites or project here to get proper help. Folks will need to see what you are doing (all of it).