How to move a character left and right with Corona SDK

I see a lot of questions on the Corona SDK forums on how to move a character left and right within a game. Today, we will be answering this commonly asked question. This Corona SDK tutorial is meant to show the basics of moving objects. You can replace the objects below with any of the sprite sheets that are freely available. Let’s get started!

You can use a moving character in a lot of game themes such as a puzzle theme where the player has to locate objects or in the start of a side scrolling platform. Whatever you decide this should help you in creating your Corona SDK game. As the first piece, let’s hide the status bar with the following line.

--Hide status bar from the beginning
 display.setStatusBar( display.HiddenStatusBar )

Let’s start the physics. The physics in this game will not add collision detection, jumping or anything more advanced. For now, we just want to add some gravity to our game to give it some realism.

-- Start Physics
 local physics = require("physics")
 physics.start()
 --physics.setDrawMode( "hybrid" )

I like to declare my variables that will be used throughout my program near the top of my application after any requires (such as physics). The variables I declare below are for the width and height of the screen and two variables used to move the character back and forth.

-- Set Variables
 _W = display.contentWidth; -- Get the width of the screen
 _H = display.contentHeight; -- Get the height of the screen
 motionx = 0; -- Variable used to move character along x axis
 speed = 2; -- Set Walking Speed

If you’ve worked with Corona SDK before, the next few steps should be easy. We will be adding a floor that’s 20 pixels tall and spans the width of the screen. This will give the player a floor to bounce off of. You can replace this simple rectangle with an image of your choice.

-- Add a floor to the game
 local floor = display.newRect(0,0,_W,20)
 floor.x = _W/2; floor.y = _H-35;
 physics.addBody( floor, "static", { friction=0.5, bounce=0.3 } )

Next, let’s add our player to the screen. Our player will be a simple white circle on a black background.

-- Add player
 player = display.newCircle(0,0,75)
 physics.addBody( player, "dynamic", { friction=0.5, bounce=0 } )
 player.x = math.random(10,_W-10)

After our player has been added, we will add two squares on the left and right hand side of the screens. These squares will act as buttons for the player to push. When the player push the button on the left, the player object will move left and the same is true for moving right. Depending on your screen size set in config.lua, you may want to make these buttons larger or smaller.

-- Add left joystick button
 local left = display.newRect(0,0,50,50)
 left.x = 50; left.y = 280;

-- Add right joystick button
 local right = display.newRect(0,0,50,50)
 right.x = _W - 50; right.y = 280;

Now, we make our character actually move! We attach an Event Listener to both joystick squares and when the player touches either square, we set the motionx variable to either a positive or negative number of our speed variable. If the player touches the right arrow, the motionx variable will be positive and if the player touches the left arrow, the motionx variable will be a negative arrow. In your game, you can increase or decrease this value to make the player move faster.

-- When left arrow is touched, move character left
 function left:touch()
 motionx = -speed;
 end
 left:addEventListener("touch",left)

-- When right arrow is touched, move character right
 function right:touch()
 motionx = speed;
 end
 right:addEventListener("touch",right)

Our player isn’t quite moving yet. We’ve set up the listeners to move the character left or right, but now we actually have to make him move. We do this with a Runtime Event Listener that will move the guy along the x axis.

-- Move character
 local function movePlayer (event)
 player.x = player.x + motionx;
 end
 Runtime:addEventListener("enterFrame", movePlayer)

Finally, we have to set up one more Runtime Event Listener for when no arrow is being touched. This will stop the character from endlessly moving along the x axis.

-- Stop character movement when no arrow is pushed
local function stop (event)
 if event.phase =="ended" then
  motionx = 0;
 end
end
Runtime:addEventListener("touch", stop )

And that’s it! You now have a core game that moves a character left and right. Play around with the speed variable and add some features (such as not letting the character go off the screen). As I said before, this is not ready for a published game, but the basics are here. Finally, there are tons of ways to make a player move and some are linear push or even using gravity. This approach is only one way to tackle a common aspect of game development. If you have questions, let me know in the comments below!

Leave a Reply

Your email address will not be published. Required fields are marked *