transition.to( ) ... clarification

[dca1505]

I got this example code from the API reference page.

local square = display.newRect( 0, 0, 100, 100 )  
square:setFillColor( 255,255,255 )  
   
local w,h = display.stageWidth, display.stageHeight  
   
local square = display.newRect( 0, 0, 100, 100 )  
square:setFillColor( 255,255,255 )  
   
local w,h = display.stageWidth, display.stageHeight  
   
local listener1 = function( obj )  
 print( "Transition 1 completed on object: " .. tostring( obj ) )  
end  
   
local listener2 = function( obj )  
 print( "Transition 2 completed on object: " .. tostring( obj ) )  
end  
   
-- (1) move square to bottom right corner; subtract half side-length  
-- b/c the local origin is at the square's center; fade out square  
transition.to( square, { time=1500, alpha=0, x=(w-50), y=(h-50), onComplete=listener1 } )  
   
-- (2) fade square back in after 2.5 seconds  
transition.to( square, { time=500, delay=2500, alpha=1.0, onComplete=listener2 } )  
  

Please help me with some clarification.

I am wondering:

• For the first time the user opens the device, how to time the object to wait(idle) for 10 seconds or more before starting to move downwards ? All the objects are placed in order in the rectangular boxes. A waiting time code is needed for the user to have time to visualize what’s on the screen.

• And If i want to drag back the dropped objects back to the same position (with mouse), how to proceed with the code? It should be dropped into the right edge if failed then cancel.

thank you in advance!
[import]uid: 133152 topic_id: 23151 reply_id: 323151[/import]

[peach_pellen]

For the initial delay use a timer to call the transition the first time with a 10,000 millisecond delay. (10 seconds.)

Dragging code example can be found in platform sample code and multipuck sample code [import]uid: 52491 topic_id: 23151 reply_id: 92711[/import]

[dca1505]

Thanks for the reply.

Unfortunately I didn’t find a sample code about the timer you mentioned…how the code is like? link?

So far i can drag my object but how to drop it into the right edge? I am using about 5 objects, so they are to be dragged and dropped into the right spot, if wrong then the object will return to the bottom.

thanks again for reading! [import]uid: 133152 topic_id: 23151 reply_id: 92740[/import]

[WauloK]

http://developer.anscamobile.com/content/multi-puck [import]uid: 10389 topic_id: 23151 reply_id: 92921[/import]

[peach_pellen]

For checking the spot the object was “dropped” use the event.phase == “ended” event and check the coordinates. [import]uid: 52491 topic_id: 23151 reply_id: 92934[/import]

[arash.jalalian]

Hi,

I am trying to move my background image along the x-axis smoothly. Changing the x value and using translate will result in unwanted jump(glitch) in the background image. I tried the following code using transition.to, but it doesn’t move the background object. Could you help me to fix it? Or do you have another solution for the problem? Even in the sample codes that come with corona have, like HourseAnimation, the background image does not move smoothly.

local function createBackground()
ground1 = display.newImage(“backim.png”)
ground1.speed = foreSpeed;
ground1.x = 0;
ground1.y = 120;

end

local function move(event)
local xOffset2 = ( ground1.speed * tDelta )
transition.to(ground1, {time=100, x = (ground1.x - xOffset2)})
end

local function main()
createBackground()
Runtime:addEventListener( “enterFrame”, move );
end
Thanks, [import]uid: 80320 topic_id: 23151 reply_id: 109826[/import]

[ignis075]

Hmmm, there are a few small issues here, but all of them easily addressed…

1. “ground1” needs to be locally referenced somewhere above both functions which call it. Just an undefined reference will suffice (local ground1).

2. try just moving the background by a set X value, not the .speed and tDelta stuff. Your transition call is technically perfect, but I don’t know where you’re getting some of the target values. Start simple, avoid adhering TOO strictly to the sample code, and you’ll figure it out pretty quick.

Brent Sorrentino
Ignis Design
[import]uid: 9747 topic_id: 23151 reply_id: 109838[/import]

[arash.jalalian]

Thanks for your reply.

I changed the code as you said but the “ground1” still does not move.

If I replace the transition.to line with:

ground1:translate(-xOffset2, 0)

the code works but as I mentioned before with unwanted jumps (glitch). So the xOffset2 value has been set correctly.

Any more suggestion?

Best,
Arash [import]uid: 80320 topic_id: 23151 reply_id: 111933[/import]

[ignis075]

Hi Arash,
Can you please post a bit more of your current code? Just the part that deals with this issue, the transition or translate part. Usually that helps us figure out where the issue might be…

Brent [import]uid: 9747 topic_id: 23151 reply_id: 111941[/import]

[arash.jalalian]

local ground1

local function createBackground()

ground1 = display.newImage(“backim.png”)
ground1.speed = 0.1;
ground1.x = 0;
ground1.y = 120;

end

tPrevious = 0
local function move(event)

tDelta = event.time - tPrevious
tPrevious = event.time
local xOffset2 = (ground1.speed * tDelta)
– ground1:translate(-xOffset2, 0) – uncomment
transition.to(ground1, {time=100, x = (ground1.x - xOffset2)})

end

local function main()

createBackground()
Runtime:addEventListener( “enterFrame”, move );

end [import]uid: 80320 topic_id: 23151 reply_id: 111943[/import]

[arash.jalalian]

Hi Brent

[code]
local ground1

local function createBackground()

ground1 = display.newImage(“backim.png”)
ground1.speed = 0.1;
ground1.x = 0;
ground1.y = 120;

end

tPrevious = 0
local function move(event)

tDelta = event.time - tPrevious
tPrevious = event.time
local xOffset2 = (ground1.speed * tDelta)
– ground1:translate(-xOffset2, 0) – uncomment
transition.to(ground1, {time=100, x = (ground1.x - xOffset2)})

end

local function main()

createBackground()
Runtime:addEventListener( “enterFrame”, move );

end
[/code] [import]uid: 80320 topic_id: 23151 reply_id: 111947[/import]

[ignis075]

Hi Arash,
I think the core issue here is that you’re starting a new transition every game cycle, because it’s being called from a Runtime “enterFrame” listener. In general, transitions do not play well when called like that… in fact, piling them up can crash your app outright, not to mention causing all kinds of other problems. Imagine that you are applying 500 different “forces” to a physics object, some pulling, some pushing, in many directions. In the sense of a mobile app, with certain memory limitations, the scenario will be in turmoil as it tries to calculate all of these different things going on.

To summarize, transitions should be called only once, then allowed to finish before calling another. If you need/want to change the transition “mid-stream” you must cancel the current transition before starting the next one.

Out curiosity, can you please describe in detail what your end goal is? You said that you want to move the ground smoothly across the X axis. Are you modifying (enhancing) this by changing the time or speed that the ground moves based on different factors? I think there’s probably a more simple approach to this than using the tDelta and “event.time” things.

Regards,
Brent
[import]uid: 9747 topic_id: 23151 reply_id: 111986[/import]

[arash.jalalian]

Thank you Brent for clarifying the problem in my code.

Yes I just want to move an image in the background across the x-axis smoothly. Here is an example that has been provided by Corona:

require "sprite"  
  
display.setStatusBar(display.HiddenStatusBar)  
  
local background = display.newImage("background.png")   
background:setReferencePoint(display.TopLeftReferencePoint)  
  
local moon = display.newImage("moon.png", 22, 19)   
  
local mountain\_big = display.newImage("mountain\_big.png", 132-240, 92)   
local mountain\_big2 = display.newImage("mountain\_big.png", 132-720, 92)   
local mountain\_sma = display.newImage("mountain\_small.png", 84, 111)  
local mountain\_sma2 = display.newImage("mountain\_small.png", 84 - 480, 111)  
  
local tree\_s = display.newImage("tree\_s.png", 129-30, 151)   
local tree\_s2 = display.newImage("tree\_s.png", 270 + 10,151)  
local tree\_l = display.newImage("tree\_l.png", 145, 131)   
  
local tree\_s3 = display.newImage("tree\_s.png", 129-30 - 320, 151)   
local tree\_s4 = display.newImage("tree\_s.png", 270 + 10 - 320,151)  
local tree\_l2 = display.newImage("tree\_l.png", 145 - 320, 131)   
  
local tree\_s5 = display.newImage("tree\_s.png", 129 - 30 - 640, 151)   
local tree\_s6 = display.newImage("tree\_s.png", 270 + 10 - 640,151)  
local tree\_l3 = display.newImage("tree\_l.png", 145 - 640, 131)   
  
local fog = display.newImage("Fog.png", 0, 214)   
local fog2 = display.newImage("Fog.png",-480,214)  
  
background.x = 0  
background.y = 0  
  
local uma = sprite.newSpriteSheetFromData( "uma.png", require("uma").getSpriteSheetData() )  
  
local spriteSet = sprite.newSpriteSet(uma,1,8)  
  
sprite.add(spriteSet,"uma",1,8,1000,0)  
  
local spriteInstance = sprite.newSprite(spriteSet)  
  
spriteInstance:setReferencePoint(display.BottomRightReferencePoint)  
spriteInstance.x = 480  
spriteInstance.y = 320  
  
local tree\_l\_sugi = display.newImage("tree\_l\_sugi.png", 23, 0)   
local tree\_l\_take = display.newImage("tree\_l\_take.png", 151, 0)   
  
local rakkan = display.newImage("rakkan.png", 19, 217)   
local rakkann = display.newImage("rakkann.png", 450, 11)   
  
local wallOutSide = display.newRect(480,0,200,320)  
wallOutSide:setFillColor(0,0,0)  
  
local wallOutSide2 = display.newRect(-200,0,200,320)  
wallOutSide2:setFillColor(0,0,0)  
  
local tPrevious = system.getTimer()  
  
local function move(event)  
  
 local tDelta = event.time - tPrevious  
 tPrevious = event.time  
  
 local xOffset = ( 0.2 \* tDelta )  
  
 moon.x = moon.x + xOffset\*0.05  
  
 fog.x = fog.x + xOffset  
 fog2.x = fog2.x + xOffset  
  
 mountain\_big.x = mountain\_big.x + xOffset\*0.5  
 mountain\_big2.x = mountain\_big2.x + xOffset\*0.5  
 mountain\_sma.x = mountain\_sma.x + xOffset\*0.5  
 mountain\_sma2.x = mountain\_sma2.x + xOffset\*0.5  
  
  
 tree\_s.x = tree\_s.x + xOffset  
 tree\_s2.x = tree\_s2.x + xOffset  
 tree\_l.x = tree\_l.x + xOffset  
  
 tree\_s3.x = tree\_s3.x + xOffset  
 tree\_s4.x = tree\_s4.x + xOffset  
 tree\_l2.x = tree\_l2.x + xOffset  
  
 tree\_s5.x = tree\_s5.x + xOffset  
 tree\_s6.x = tree\_s6.x + xOffset  
 tree\_l3.x = tree\_l3.x + xOffset  
  
  
 tree\_l\_sugi.x = tree\_l\_sugi.x + xOffset \* 1.5  
 tree\_l\_take.x = tree\_l\_take.x + xOffset \* 1.5  
  
 if moon.x \> 480 + moon.width / 2 then  
 moon:translate ( -480\*2 , 0)  
 end  
 if fog.x \> 480 + fog.width / 2 then  
 fog:translate( -480 \* 2, 0)  
 end  
  
 if fog2.x \> 480 + fog2.width / 2 then  
 fog2:translate( -480 \* 2, 0)  
 end  
  
  
 if mountain\_big.x \> 480 + mountain\_big.width / 2 then  
 mountain\_big:translate(-480\*2 , 0)  
 end  
 if mountain\_big2.x \> 480 + mountain\_big2.width / 2 then  
 mountain\_big2:translate(-480\*2 , 0)  
 end  
 if mountain\_sma.x \> 480 + mountain\_sma.width / 2 then  
 mountain\_sma:translate(-480\*2,0)  
 end  
 if mountain\_sma2.x \> 480 + mountain\_sma2.width / 2 then  
 mountain\_sma2:translate(-480\*2,0)  
 end  
  
 if tree\_s.x \> 480 + tree\_s.width / 2 then  
 tree\_s:translate(-480\*2 , 0)  
 end  
 if tree\_s2.x \> 480 + tree\_s2.width / 2 then  
 tree\_s2:translate(-480\*2 , 0)  
 end  
 if tree\_l.x \> 480 + tree\_l.width / 2 then  
 tree\_l:translate(-480\*2 , 0)  
 end  
  
 if tree\_s3.x \> 480 + tree\_s3.width / 2 then  
 tree\_s3:translate(-480\*2 , 0)  
 end  
 if tree\_s4.x \> 480 + tree\_s4.width / 2 then  
 tree\_s4:translate(-480\*2 , 0)  
 end  
 if tree\_l2.x \> 480 + tree\_l2.width / 2 then  
 tree\_l2:translate(-480\*2 , 0)  
 end  
  
 if tree\_s5.x \> 480 + tree\_s5.width / 2 then  
 tree\_s5:translate(-480\*2 , 0)  
 end  
 if tree\_s6.x \> 480 + tree\_s6.width / 2 then  
 tree\_s6:translate(-480\*2 , 0)  
 end  
 if tree\_l3.x \> 480 + tree\_l3.width / 2 then  
 tree\_l3:translate(-480\*2 , 0)  
 end  
  
 if tree\_l\_sugi.x \> 480 + tree\_l\_sugi.width / 2 then  
 tree\_l\_sugi:translate(-480\*4,0)  
 end  
  
 if tree\_l\_take.x \> 480 + tree\_l\_take.width / 2 then  
 tree\_l\_take:translate(-480\*5,0)  
 end  
  
end  

The code uses translate and moves several background images in several layers with different speeds. I employed the same code in my game and it works. However you can clearly see the background is not moving smoothly. If you run the above code you will see what I mean by “not moving smoothly”.

Please let me know if you have any other suggestion.

Cheers,
Arash [import]uid: 80320 topic_id: 23151 reply_id: 112052[/import]

[ignis075]

Hi Arash,
This Corona “horse” code is, unfortunately, REALLY old… as in, 2 years or so, seemingly ancient. It’s not necessarily devoid of value, but it uses the “old” sprite API, and excessive use of the “translate” call. Personally, I have found no use at all with the translate API, ever… again, I’m not saying it has no use at all, but I never use it and I have never needed to.

Alternatively, you might like to check out a small code exchange I wrote sometime back. Again, this code is “old” and I fully admit it needs work. It’s not fully optimized, but it might give you new ideas. This module presents different layers moving at different “parallax” speeds, which might be what you need.

http://developer.anscamobile.com/code/parallax-scrolling-module

If your end goal is to simply move an image (or display group) across the X axis, you can simply call transitions once to accomplish this. Or, you can constantly “track” the images in different layers as exhibited in my module.

Let me know if this code helps you at all. Your goal seems very attainable, and I’m sure I can help you figure it out eventually.

Brent

[import]uid: 9747 topic_id: 23151 reply_id: 112060[/import]