In a lot of mobile games, you’ll find yourself dragging a character around the screen to complete a puzzle, fight enemies, or interact with other objects. Corona SDK has made it easy for you to implement this functionality.

In this tutorial, you’ll learn how to attach an event listener to an object. This event listener will allow the player to drag an object around the screen and the drag will stop when the player removes his or her finger from the screen. I’ll be working from one file, but you can feel free to use this code anywhere you see fit. Let’s jump in.

First, we are going to hide the status bar. This is only necessary when you are starting from scratch and should only appear in main.lua. Otherwise, feel free to skip this line.

— hide the status bar
display.setStatusBar(display.HiddenStatusBar)
Next, we’ll create a square. This square can be replaced with an image or another display object. In our example, the square object will be dragged around the screen.

— create a square and put it in the center of the screen
local square = display.newRect( 100, 100, 50, 50)
square:setFillColor( 1 )
Then, we’ll create a function that will be called when the object is touched. In this function, we’ll record the original x and y position in the began phase. The began phase occurs when the object is first interacted with. Then, the function will move on the to the moved phase and this phase will move our object according to the event. Finally, when the player stops interacting with the circle, we’ll remove the object focus so Corona knows we are done with the touch function.

— touch listener function
function square:touch( event )
if event.phase == “began” then
— first we set the focus on the object
display.getCurrentStage():setFocus( self, event.id )
self.isFocus = true

— then we store the original x and y position
self.markX = self.x
self.markY = self.y

elseif self.isFocus then

if event.phase == “moved” then
— then drag our object
self.x = event.x – event.xStart + self.markX
self.y = event.y – event.yStart + self.markY
elseif event.phase == “ended” or event.phase == “cancelled” then
— we end the movement by removing the focus from the object
display.getCurrentStage():setFocus( self, nil )
self.isFocus = false
end
end

— return true so Corona knows that the touch event was handled properly
return true
end
Finally, we’ll create an event listener and attach the listener to the square. This lets Corona know that it should listen for the touch event on the square.

— finally, add an event listener to our square to allow it to be dragged
square:addEventListener( “touch”, square )
And that’s it to making an object draggable in Corona SDK! If you have questions or comments about this short game tutorial, please leave them in the comments below. Thanks for reading.

p.s. In the tutorial above, the code is broken down into sections so I can explain what is occurring in the code. For those of you that would like to learn by doing, I’ve posted the code in one big chunk so you can copy/paste this into your project.

— hide the status bar
display.setStatusBar(display.HiddenStatusBar)

— create a square and put it in the center of the screen
local square = display.newRect( 100, 100, 50, 50)
square:setFillColor( 1 )

— touch listener function
function square:touch( event )
if event.phase == “began” then
— first we set the focus on the object
display.getCurrentStage():setFocus( self, event.id )
self.isFocus = true

— then we store the original x and y position
self.markX = self.x
self.markY = self.y

elseif self.isFocus then

if event.phase == “moved” then
— then drag our object
self.x = event.x – event.xStart + self.markX
self.y = event.y – event.yStart + self.markY
elseif event.phase == “ended” or event.phase == “cancelled” then
— we end the movement by removing the focus from the object
display.getCurrentStage():setFocus( self, nil )
self.isFocus = false
end

end

— return true so Corona knows that the touch event was handled properly
return true
end

— finally, add an event listener to our square to allow it to be dragged
square:addEventListener( “touch”, square )

Leave a Reply

Your email address will not be published. Required fields are marked *
You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>