using textureWrap with a sprite that animates

Solar2D General Questions/Discussion
#1

Hello. I’m trying to make a rectangle be filled by an endlessly repeating 32x32 texture. When I do something like:

display.setDefault( "textureWrapX", "repeat" ) display.setDefault( "textureWrapY", "repeat" ) local x,y = display.contentCenterX, display.contentCenterY local o = display.newRect( x, y, display.contentWidth, display.contentHeight ) o.fill = { type="image", filename="images/ocean\_single.png" } o.fill.scaleX = 0.1 o.fill.scaleY = 0.1

the results are perfect (see attached image).

However, I have no way to animate this. I learned that I would be able to do the same thing with a sprite sheet. looking through a few forum posts, the following is the closest I was able to come up with:

local oceanSheetCoords = require("lua-sheets.ocean\_1") local oceanSheet = graphics.newImageSheet("images/ocean\_1.png", oceanSheetCoords:getSheet()) local paint = { type = "image", sheet = oceanSheet, frame = 1 }

local function setFrame( obj, paint, frame ) paint.frame = frame obj.fill = paint end

display.setDefault( “textureWrapX”, “repeat” )

display.setDefault( “textureWrapY”, “repeat” )

local x,y = display.contentCenterX, display.contentCenterY local o = display.newRect( x, y, display.contentWidth, display.contentHeight ) o.fill = paint o.fill.scaleX = 0.1 o.fill.scaleY = 0.1 – for changing the frame of the sprite – setFrame( o, paint, 1 )

Now the setFrame() function roaminggamer suggested in another post works to switch the frame will satisfy what I need to make a seamless animation. The big issue is that I can’t get the image to look anything like it looked in the first code block! Either something is preventing, or prohibiting, the fill.scaleX and fill.scaleY to repeat the texture like in the first code block.

I’m attaching screenshots taken of the results from each code block. Thanks for any help that comes my way :slight_smile:

#2

Investigate these fields for wrapped textures:

https://docs.coronalabs.com/api/type/BitmapPaint/x.html

https://docs.coronalabs.com/api/type/BitmapPaint/y.html

You can use them to move the fill, thus ‘animating’ it.

#3

Here is code for a moving fill: https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2017/12/movingFill.zip

( STUTTERING IS VIDEO RECORDING )

https://www.youtube.com/watch?v=LgA9lpWmuI8&feature=youtu.be

local water = display.newRect( display.contentCenterX, display.contentCenterY, display.actualContentWidth, display.actualContentHeight ) display.setDefault( "textureWrapX", "repeat" ) display.setDefault( "textureWrapY", "repeat" ) water.fill = { type = "image", filename = "waterSingle.png"} water.fill.scaleX = 32/display.actualContentWidth water.fill.scaleY = 32/display.actualContentHeight display.setDefault( "textureWrapX", "clampToEdge" ) display.setDefault( "textureWrapY", "clampToEdge" ) water.texOffsetX = 0 water.texOffsetY = 0 water.lastT = system.getTimer() water.rateX = 0 water.rateY = -3 function water.enterFrame( self ) local curT = system.getTimer() local dt = curT - self.lastT self.lastT = curT local dOffsetX = dt \* self.rateX / 1000 local dOffsetY = dt \* self.rateY / 1000 self.texOffsetX = self.texOffsetX + dOffsetX self.texOffsetY = self.texOffsetY + dOffsetY -- -- Keep values in bounds [-1, 1] -- if( dOffsetX \>= 0 ) then while(self.texOffsetX \> 1) do self.texOffsetX = self.texOffsetX - 2 end else while(self.texOffsetX \< -1) do self.texOffsetX = self.texOffsetX + 2 end end if( dOffsetY \>= 0 ) then while(self.texOffsetY \> 1) do self.texOffsetY = self.texOffsetY - 2 end else while(self.texOffsetY \< -1) do self.texOffsetY = self.texOffsetY + 2 end end self.fill.x = self.texOffsetX self.fill.y = self.texOffsetY end Runtime:addEventListener( "enterFrame", water )
#4

Note: I also experimented with a image sheet fill followed by scaling the fill and didn’t have any luck.  i.e. It stretched and ignored the wrapping parameters.

I don’t know if this is a bug of just a fact of life due to the image sheet fill.

#5

Great, thanks for looking into this. And thanks for the example code!

#6

I’ve deleted the duplicate post.

Rob

#7

Investigate these fields for wrapped textures:

https://docs.coronalabs.com/api/type/BitmapPaint/x.html

https://docs.coronalabs.com/api/type/BitmapPaint/y.html

You can use them to move the fill, thus ‘animating’ it.

#8

Here is code for a moving fill: https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2017/12/movingFill.zip

( STUTTERING IS VIDEO RECORDING )

https://www.youtube.com/watch?v=LgA9lpWmuI8&feature=youtu.be

local water = display.newRect( display.contentCenterX, display.contentCenterY, display.actualContentWidth, display.actualContentHeight ) display.setDefault( "textureWrapX", "repeat" ) display.setDefault( "textureWrapY", "repeat" ) water.fill = { type = "image", filename = "waterSingle.png"} water.fill.scaleX = 32/display.actualContentWidth water.fill.scaleY = 32/display.actualContentHeight display.setDefault( "textureWrapX", "clampToEdge" ) display.setDefault( "textureWrapY", "clampToEdge" ) water.texOffsetX = 0 water.texOffsetY = 0 water.lastT = system.getTimer() water.rateX = 0 water.rateY = -3 function water.enterFrame( self ) local curT = system.getTimer() local dt = curT - self.lastT self.lastT = curT local dOffsetX = dt \* self.rateX / 1000 local dOffsetY = dt \* self.rateY / 1000 self.texOffsetX = self.texOffsetX + dOffsetX self.texOffsetY = self.texOffsetY + dOffsetY -- -- Keep values in bounds [-1, 1] -- if( dOffsetX \>= 0 ) then while(self.texOffsetX \> 1) do self.texOffsetX = self.texOffsetX - 2 end else while(self.texOffsetX \< -1) do self.texOffsetX = self.texOffsetX + 2 end end if( dOffsetY \>= 0 ) then while(self.texOffsetY \> 1) do self.texOffsetY = self.texOffsetY - 2 end else while(self.texOffsetY \< -1) do self.texOffsetY = self.texOffsetY + 2 end end self.fill.x = self.texOffsetX self.fill.y = self.texOffsetY end Runtime:addEventListener( "enterFrame", water )
#9

Note: I also experimented with a image sheet fill followed by scaling the fill and didn’t have any luck.  i.e. It stretched and ignored the wrapping parameters.

I don’t know if this is a bug of just a fact of life due to the image sheet fill.

#10

Great, thanks for looking into this. And thanks for the example code!

#11

I’ve deleted the duplicate post.

Rob