Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Fishies 2.5D improvement
Started by ingemar Aug 07 2013 01:38 AM

1 reply to this topic
[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

ingemar

[GLOBAL: userInfoPane.html]
ingemar
  • Corona Geek

  • 2,733 posts
  • Enterprise

Hi there!

 

I wanted to modify the 3D effect to pivot around the center of the image.

 

I've modified it a bit to include a scale as well as some modifications to the yDelta.

You can replace the existing transition blocks with the one below:

 

Tell me what you think...

 

local scaleDelta = 1.15;
local yDelta = halfW * 0.6;

transition.to( a.path, { x1=halfW, y1=-yDelta, x4=-halfW, y4=yDelta,
					x2=halfW, y2=yDelta, x3=-halfW, y3=-yDelta,
					time=1500, delay=1000, transition=easing.inExpo } );
					
transition.to( a, { xScale=scaleDelta, yScale=scaleDelta,
					time=1500, delay=1000, transition=easing.inExpo } );
					
transition.from( b.path, { x1=halfW, y1=yDelta, x4=-halfW, y4=-yDelta,
					  x2=halfW, y2=-yDelta, x3=-halfW, y3=yDelta,
					time=1500, delay=2500, transition=easing.outExpo } )
					
transition.from( b, { xScale=scaleDelta, yScale=scaleDelta,
					time=1500, delay=2500, transition=easing.outExpo } );



[TOPIC: post.html]
#2

walter

[GLOBAL: userInfoPane.html]
walter
  • Moderator

  • 726 posts
  • Alumni

Cool, I never thought about using yScale.

 

Another way to skin this cat is by varying the "y" offset for each corner:

 

local y = 100
 
transition.to( a.path, { x1=halfW, y1=-y, x3=-halfW, y3=-y, 
                    x2=halfW,y2=y, x4=-halfW, y4=y,
                    time=1500, delay=1000, transition=easing.inExpo } )
transition.from( b.path, { x1=halfW, y1=y, x3=-halfW,y3=y,
                      x2=halfW, y2=-y, x4=-halfW,y4=-y,
                      time=1500, delay=2500, transition=easing.outExpo } )

 

In the original, only 2 of the corners had offsets for the y-direction. In the above, every corner has an offset in the y-direction --- specifically a y-offset to corners 1 and 2 for 'a'. And to corners 3 and 4 for 'b'.




[topic_controls]
 
[/topic_controls]