2.5D and fill animation

Audio and Graphics
#1

Hi, 

I tried something today that I thought would work, but it didn’t. 

The idea is to have a background with perspective and wrapped, tiled texture rotating. I thought it would be a nice “cheap” background. I can have the animation with the rotation, or I can have the perspective, but I can’t have both it seems. Here’s the code that illustrates the problem: 

(Just create a blank project with all the defaults, and put this into main.lua.)

[lua]

– main.lua

–

local function rotateBackground(event)

  local t = 200000

  transition.to( bg.fill, { 

  rotation = bg.fill.rotation-360, 

  time=t, 

  onComplete=rotateBackground

  } )

end

display.setStatusBar(display.HiddenStatusBar)

bg = display.newRect(display.contentCenterX, display.contentCenterY, 

           display.actualContentWidth, display.actualContentHeight)

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

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

bg.fill = { type=“image”, filename=“Icon.png” }

bg.fill.scaleX = 64 / bg.width

bg.fill.scaleY = 64 / bg.height

– The problem is right here:

– If these two lines are commented out there is a nice rotation animation, but no perspective. 

– If these two line are not commented out there is a nice perspective effect, but no rotation animation. 

–bg.path.x2 = -display.actualContentWidth / 2

–bg.path.x3 = display.actualContentWidth / 2

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

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

rotateBackground()

[/lua]

Perhaps someone can give me a hint of how to make it work? Or possibly tell me why it won’t work. 

#2

It seems you need to re-set the path values each time you change the fill.

See this example:

https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2018/10/fillHelp.zip

io.output():setvbuf("no") display.setStatusBar(display.HiddenStatusBar) -- ===================================================== local cx = display.contentCenterX local cy = display.contentCenterY local fullw = display.actualContentWidth local fullh = display.actualContentHeight local left = cx - fullw/2 local right = cx + fullw/2 local top = cy - fullh/2 local bottom = cy + fullh/2 -- ===================================================== display.setDefault( "textureWrapX", "repeat" ) display.setDefault( "textureWrapY", "repeat" ) -- local img = display.newRect(cx, cy, fullw, fullh) -- img.fill = { type="image", filename="Dirt.png" } img.fill.scaleX = 512 / img.contentWidth img.fill.scaleY = 512 / img.contentHeight -- display.setDefault( "textureWrapX", "clampToEdge" ) display.setDefault( "textureWrapY", "clampToEdge" ) img.rate = 360/200 -- degrees per second function img.enterFrame( self ) local curT = system.getTimer() local lastT = self.lastT or curT self.lastT = curT local dt = (curT - lastT)/100 local dr = self.rate \* dt -- while( self.fill.rotation \< 0 ) do self.fill.rotation = self.fill.rotation + 360 end -- self.fill.rotation = self.fill.rotation - dr img.path.x2 = -fullw / 2 img.path.x3 = fullh / 2 end Runtime:addEventListener( "enterFrame", img )
#3

Thank you so much for answering so quickly. Now I learned about enterFrame as well, that will come in handy. 

I gave it another go to understand it better. Your example is more general, but this is the simplest way I can get this to work: 

[lua]

display.setStatusBar(display.HiddenStatusBar)

– =====================================================

local cx     = display.contentCenterX

local cy     = display.contentCenterY

local fullw  = display.actualContentWidth

local fullh  = display.actualContentHeight

– =====================================================

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

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

–

local bg = display.newRect(cx, cy, fullw, fullh)

–

bg.fill = { type=“image”, filename=“Icon.png” }

bg.fill.scaleX = 64 / bg.contentWidth

bg.fill.scaleY = 64 / bg.contentHeight

–

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

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

bg.path.x2 = -fullw 

bg.path.x3 = fullw

function bg:enterFrame(event)

self.fill.rotation = (event.time / 500) % 360

bg.path.x1 = bg.path.x1

end

Runtime:addEventListener( “enterFrame”, bg )

[/lua]

It seems like touching anything in the path makes changes to the fill visible. 

#4

It seems you need to re-set the path values each time you change the fill.

See this example:

https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2018/10/fillHelp.zip

io.output():setvbuf("no") display.setStatusBar(display.HiddenStatusBar) -- ===================================================== local cx = display.contentCenterX local cy = display.contentCenterY local fullw = display.actualContentWidth local fullh = display.actualContentHeight local left = cx - fullw/2 local right = cx + fullw/2 local top = cy - fullh/2 local bottom = cy + fullh/2 -- ===================================================== display.setDefault( "textureWrapX", "repeat" ) display.setDefault( "textureWrapY", "repeat" ) -- local img = display.newRect(cx, cy, fullw, fullh) -- img.fill = { type="image", filename="Dirt.png" } img.fill.scaleX = 512 / img.contentWidth img.fill.scaleY = 512 / img.contentHeight -- display.setDefault( "textureWrapX", "clampToEdge" ) display.setDefault( "textureWrapY", "clampToEdge" ) img.rate = 360/200 -- degrees per second function img.enterFrame( self ) local curT = system.getTimer() local lastT = self.lastT or curT self.lastT = curT local dt = (curT - lastT)/100 local dr = self.rate \* dt -- while( self.fill.rotation \< 0 ) do self.fill.rotation = self.fill.rotation + 360 end -- self.fill.rotation = self.fill.rotation - dr img.path.x2 = -fullw / 2 img.path.x3 = fullh / 2 end Runtime:addEventListener( "enterFrame", img )
#5

Thank you so much for answering so quickly. Now I learned about enterFrame as well, that will come in handy. 

I gave it another go to understand it better. Your example is more general, but this is the simplest way I can get this to work: 

[lua]

display.setStatusBar(display.HiddenStatusBar)

– =====================================================

local cx     = display.contentCenterX

local cy     = display.contentCenterY

local fullw  = display.actualContentWidth

local fullh  = display.actualContentHeight

– =====================================================

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

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

–

local bg = display.newRect(cx, cy, fullw, fullh)

–

bg.fill = { type=“image”, filename=“Icon.png” }

bg.fill.scaleX = 64 / bg.contentWidth

bg.fill.scaleY = 64 / bg.contentHeight

–

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

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

bg.path.x2 = -fullw 

bg.path.x3 = fullw

function bg:enterFrame(event)

self.fill.rotation = (event.time / 500) % 360

bg.path.x1 = bg.path.x1

end

Runtime:addEventListener( “enterFrame”, bg )

[/lua]

It seems like touching anything in the path makes changes to the fill visible.