Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

2.5D and fill animation
Started by oscar.lindberg Oct 09 2018 11:55 AM

2 replies to this topic
2.5d animation rotation
[TOPIC CONTROLS]
Sign-in to reply
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

oscar.lindberg

[GLOBAL: userInfoPane.html]
oscar.lindberg

  • Observer

  • 2 posts
  • Corona SDK
09 October 2018 - 11:55 AM

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.)

 

-----------------------------------------------------------------------------------------
-- 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()
 
Perhaps someone can give me a hint of how to make it work? Or possibly tell me why it won't work. 

[TOPIC: post.html]
#2

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer

  • Corona Geek

  • 7,481 posts
  • Corona SDK
09 October 2018 - 01:10 PM

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 )

[TOPIC: post.html]
#3

oscar.lindberg

[GLOBAL: userInfoPane.html]
oscar.lindberg

  • Observer

  • 2 posts
  • Corona SDK
09 October 2018 - 01:48 PM

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: 

 

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 )

 

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


[topic_controls]
 
Back to Audio and Graphics
[/topic_controls]
Product
 Corona Support CoronaCards
Stories
 Hall of Fame
Learn
 Documentation Tutorials FAQs
Get Corona
 Download Buy CoronaCards
About
 Jobs Roadmap Contact