Corona SDK – Drag and Move Display Objects

In the last post we created the display objects (platforms) for Rolly Bear World using a for-loop. In the final game the user should be able to drag or move these platforms to a strategic position to get Rolly Bear to the treasure chest. In the code below we create this functionality for the user to drag the platforms around the screen.

We went for two days, one night, to Koh Kradan, an island about 4 hours North from Koh Lipe. The islands have only a handful accommodations and is pretty much a secluded island. Besides seeing the stunning beaches of Kradan, we hiked a little bit into the jungle. We stayed in a bamboo bungalow right on the beachfront, excellent for getting some work done. The bungalow was open on the top allowing all kind of bugs and cockroaches enter at night. Fun! Despite some bug hunting we slept like angels with the noise of the ocean in the background.

Let’s start with creating an eventlistener on the platform object. We need to pass in the parameter “touched” instead of “tap” (which we used before), as Corona SDK needs to register a “began”, “moved” and “ended” state of the touch event. The second parameter in the eventlistener is the function which is called when a user “touched” one of the platforms. I called this function movedPlatform.

So add:

platform:addEventListener("touch", movePlatform)

Now create above the for-loop for creating the platforms the function movePlatform. This will be passed in event data front the addEventListener we just created. In case you missed the creation of the for-loop, check my previous post.

local function movedPlatform(event)
--our function definition will go here
end 
 

Now, we have a “touch” eventlistener on our platforms and when a platform is touched it calls the function movePlatform. As we didn’t create the definition yet of the function nothing will happen at this point.

As said before, a “touch” evenlistener has three states: “began” , “moved”, and “ended”. Let’s add this first to our movePlatform function and store the event.target (the event data) into a variable called plaformTouched.

local function movePlatform(event)
local platformTouched = event.target
   
        if (event.phase == "began") then
                     
     
        elseif (event.phase == "moved") then

        elseif event.phase == "ended" or event.phase == "cancelled"  then
             
        end
                return true
end

In the “began” state we first need to set focus on the user selected platform, this can be done by the Corona SDK display,getCurrentStage():setFocus(object). Next you can use startMoveX and startMoveY (Corona SDK) and store them in in the x and y coordinates. This is the first position of the selected platform. So our updated function looks like:

local function movePlatform(event)
local platformTouched = event.target
   
        if (event.phase == "began") then
                display.getCurrentStage():setFocus( platformTouched )
 
 		-- here the first position is stored in x and y         
                platformTouched.startMoveX = platformTouched.x	
    		platformTouched.startMoveY = platformTouched.y

        elseif (event.phase == "moved") then

        elseif event.phase == "ended" or event.phase == "cancelled"  then

        end
                 return true
        end

In the “moved” state we need to calculate how much the platform has moved by the touch event with respect to its initial values. So current position minus the start position. This gives us the “distance moved” which we now need to relate from where it started on the screen by adding the platformTouched.startMoveX (and Y).

Finally in the “ended” stated we need to remove the focus on the object by setting it to nil.

The complete movePlatform function is

local function movePlatform(event)
local platformTouched = event.target
   
        if (event.phase == "began") then
                display.getCurrentStage():setFocus( platformTouched )
 
 	 -- here the first position is stored in x and y         
                platformTouched.startMoveX = platformTouched.x
platformTouched.startMoveY = platformTouched.y

             
        elseif (event.phase == "moved") then
                
                -- here the distance is calculated between the start of the movement and its current position of the drag	 
                platformTouched.x = (event.x - event.xStart) + platformTouched.startMoveX
platformTouched.y = (event.y - event.yStart) + platformTouched.startMoveY
                elseif event.phase == "ended" or event.phase == "cancelled"  then
             
              -- here the focus is removed from the last position
                    display.getCurrentStage():setFocus( nil )

                end
                 return true
        end

So now the user can move the platforms on the screen. To see the updates lua files see the GitHub Repository.