Corona SDK and other Game Development Tutorials

Moving 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 small game is not ready for publication, however the code presented will give you a base to start your game with. So, 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 advanced (that’s for later tutorials). For now, we just want to add some gravity to our game to give it some realism.

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

Want to know when more tutorials and That’s So Panda news comes out?
Sign up for our mailing list to find out the latest news. Don’t worry, I hate spam as much as you do.

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 are adding a blue sky background and some grass to make the game look better. One special note about the grass is that we are making the grass_bottom a physics object so our character has a platform to walk across. If you would like to see the surface area of the platform, uncomment line 7 to see the object as the physics world see it.

-- Add Sky to the background
 local sky = display.newImage( "images/background_sky.png", true )
 sky.x = _W/2; sky.y = 160;
-- Add Grass floor to game
 local grass_bottom = display.newImage( "images/grass_bottom.png", true )
 grass_bottom.x = _W/2; grass_bottom.y = _H-35;
 physics.addBody( grass_bottom, "static", { friction=0.5, bounce=0.3 } )
-- Add Grass to the background
 local grass_top = display.newImage( "images/grass_top.png", true)
 grass_top.x = _W/2; grass_top.y = _H-95;

Next, let’s add our character to the screen. We add the character after we have added the background assets so the character stays in front of the background. The Corona platform puts things on the screen in the order they appear. So, the first object placed on the screen goes towards the back and the last object is placed on top. This is similar to a stack of cards.

-- Add Guy
 guy = display.newImage( "images/guy.png" )
 physics.addBody( guy, "dynamic", { friction=0.5, bounce=0 } )
 guy.x = math.random(10,_W-10)

As the final graphic piece before we actually move our character, we will place two directional arrows that allows the player to move the character left or right.

-- Add left joystick button
 local left = display.newImage ("images/btn_arrow.png")
 left.x = 45; left.y = 280;
 left.rotation = 180;
-- Add right joystick button
 local right = display.newImage ("images/btn_arrow.png")
 right.x = 120; right.y = 282;

Now, we make our character actually move! We attach an Event Listener to both arrows and when the player touches either arrow, 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.

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

Our guy 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 moveguy (event)
 guy.x = guy.x + motionx;
 Runtime:addEventListener("enterFrame", moveguy)

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;
 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.

In future posts, I will be addressing how to make the character jump (even double jump!), collision detection and a moving background. For now, I wanted to keep the post simple. As always, you can download the full source code and images with the link below.

Download Source Code

  1. Greate lesson!! Thanks you!)

  2. When I do this my character can clip into other physics objects slightly..

    • In a later tutorial, I will address physics iterations. This may help with the clipping, but I haven’t tested it yet.

  3. Thanx a lot
    I have tested my game with different types of movement and this one suited me nice (used player:applyForce on my RuntimeAddEventlistener( “enterframe”, playerMovement) and applyLinearImpulse on the buttons but this approach gave me more of the old arcade felling….nice tutorial

  4. Thanks so much. This is great for a beginner like myself. I haven’t checked out any of your other tutorials yet, but am eager to do so. I followed the code in this tutorial pretty closely, except for the movement. Rather than moving my character, I made my background move, and my character stays in the center of the screen. This works for me for where I am at right now, but I am afraid that I will look at your other tutorials and find a better way of achieving what I was going for… oh well, such is learning! Thanks again.

    • Hello and thank you for the kind words! If you wanted to post some of your code, I might be able to try and point you in the right direction (pun intended!).

  5. Hi,
    Anyone know how to create the above using a sprite animation. i.e. on touch, arrow button, start sprite and move left to right?

    Thanks in advance.


  6. Hello,

    Just wanted to thank you for the wonderful tutorial 🙂


  7. i have to say a big thank you for posting this up.Taken me 2 days to get a working ‘touch’ controls. Keep them coming.i will officially a subscriber.

  8. very helpful tuts 🙂 can you make another tutorial that if i touch the guy it will be move in Left direction and if i touch the other guy it will be move in the right direction . ? can you make pls ?

Leave a Reply