I need help with transitions

Okay I’ll try and explain this part in my game the best I can.

Think of it as a level selection from a map, there are 3 points(levels) on the map in different places. The icon starts on the first point say x = 100 and y= 200, there is a button at the bottom of the screen simply called “next level” if the user touches it, it transitions the icon from point a (level 1) to point b (level 2) which could be x=50 y=250. 

I hope that helps you understand the logic :slight_smile:

For me at least, that doesn’t clear up anything. Going back to your original post, I think you may be asking how to hide one button image and show another, no?

For changing any value of a display object during a transition you simply set it’s target value in the options table of the transition function call. I suspect that you have a display group with three images in it, one image for each level’s button. You should transition the alpha value of the images.

For example, let’s say I have a display group with images in it. Both images are the same size and overlap exactly, so that if the second (top) image is visible it completely blocks out the first (lower) image. I would start with only the first (lower) image visible. To do that, I would have added both images to the display group and then made set the second image’s “.alpha” value to 0, like this:

local button = display.newGroup() display.newImage(button,"buttonA.png") display.newImage(button,"buttonB.png") button[2].alpha = 0

Then, to move the button and transition it to the “Level B” image, I would do this:

transition.to( button, {time=1000, x=100, y=200} ) transition.to( button[2], {time=1000, alpha=1} )

This would cause the button to move from where it is to location (100,200) and reveal the “Level B” image, taking 1 full second to do it.

Yep, I think you understand what I want now, maybe i just worded it differently. Except mine I have the background image (the map). An icon to show where the player is right now and a button down the left hand corner called “next level”. The icon should start x=50, y=50, if user clicks the next level button, the icon should transition to the next coordinates x=100, y=200. Then i somehow need an “if” statement so that if it is at the coordinate x=100, y=200 and the user clicks the next level button the icon should transition to the next coordinates which should be x=200, y=300.

I’m sorry if you can’t understand it properly :confused:

If you need help with ‘if’ statements you should read up on the documentation and the Lua language. Google it for the Lua homepage which has a lot of really well written and useful info.

However, I think jonjonsson said it well, above: http://forums.coronalabs.com/topic/36886-i-need-help-with-transitions/?p=191142

I’m not really the best at transitions/buttons so i thought providing code you may be able to see what is wrong with it because it is not working.

function scene:enterScene( event ) local group = self.view local currentLocation = 1 locations = {} locations[1] = {} locations[1].x = 100 locations[1].y = 200 locations[2] = {} locations[2].x = 200 locations[2].y = 300 function getNextLocation() currentLocation = currentLocation + 1 return locations[currentLocation] end local function onButtonEvent( event ) local phase = event.phase local target = event.target if ( "began" == phase ) then nextLocation = getNextLocation() transition.to( player, { nextLocation } ) target:setLabel( "Next Level" ) --set a new label elseif ( "ended" == phase ) then target:setLabel( target.baseLabel ) --reset the label end return true end local myButton = widget.newButton { left = 10, top = 50, label = "Teleport", labelAlign = "center", font = "Arial", fontSize = 12, labelColor = { default = {0,0,0}, over = {255,255,255} }, onEvent = onButtonEvent } myButton.baseLabel = "Next Levek" end

Just my opinion, but I would reduce this:

locations = {} locations[1] = {} locations[1].x = 100 locations[1].y = 200 locations[2] = {} locations[2].x = 200 locations[2].y = 300

to this:

locations = { { x=100, y=200 }, { x=200, y=300 }, }

You are setting your initial ‘currentlocation’ value to 1, but the button’s initial location does not match that location (100,200) Maybe you should set the initial value of ‘currentlocation’ to 0? Without that, your button only has one location to go to when you tap it.

I’m not sure what you’re seeing, but I suspect that might be the problem.

That didn’t seem to do anything, I’m not getting any error message what so ever. 

The player image is in a group in the create scene area where i think it should be.

player = display.newImage( “player1.png”, 100, 200 )

I’m trying to find a solution and will reply if i do but if you happen to find one please reply here :slight_smile:

Well, for widget buttons I like to respond when the button is released, so look in the documentation for that event phase.

Also, compare my transition code with yours.

You’ll find that you’re not actually setting a location. You’re passing an object into the transition options table, but not actually telling the transition.to function what to set.

Maybe you should try making a main.lua with only an image and a transition. Literally just those two things and then apply that transition to your code.

Last hint: Your options table is wrong.

Okay, it seems like the table would be useless unless I’m missing something, but including the x and y coordinates in the transitions couldn’t I use if and else statements like “if player.x=100 and player.y=200” then do a transition if its at those coordinates?

Yes, absolutely.

The problem with your code, that I see, is that you are not specifying the transition properly. It should be:

if ("began" == phase) then   nextLocation = getNextLocation()   transition.to( player, { x=nextLocation.x, y=nextLocation.y } ) target:setLabel( "Next Level" ) --set a new label elseif ( "ended" == phase ) then target:setLabel( target.baseLabel ) --reset the label end

Try this:

local widget = require( "widget" ) local locations = {     {x=100,y=200},     {x=200,y=300},     {x=display.contentCenterX,y=display.contentCenterY},     {x=500,y=100}, } locations.current = 1 local function handleButtonEvent( event )     local phase = event.phase      if "ended" == phase then         print( "You pressed and released a button!" )     locations.current = locations.current + 1 -- increment button location counter     if (locations.current \> #locations) then locations.current=1 end -- loop the button location index     local location = locations[locations.current] -- get current location     transition.to( event.target, {time=1000, x=location.x, y=location.y} ) -- move the button     event.target:setLabel( "Loc: "..locations.current ) -- update the label for visual effect only     end end -- Create the button local myButton = widget.newButton {     width = 150,     height = 50,     id = "button\_1",     label = "Button",     onEvent = handleButtonEvent, } myButton.x, myButton.y = locations[locations.current].x, locations[locations.current].y -- set initial button location