This tutorial will show you how to set up a D-pad in your iPhone application. The idea is to use the arrows to control your hero.
PASTE the below code into your main.lua file, or if you are using director, into the appropriate file. (Eg, “game.lua”.)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | display.setStatusBar (display.HiddenStatusBar) -- Hides the status bar local background = display.newImage ("background.png") -- Sets the background local peach = display.newImage ("peach.png") peach.x = 240 peach.y = 160 -- Puts the usual picture of me into the app and positions it ---------------------------------------------------------------------- local up = display.newImage ("upx.png") up.x = 70 up.y = 230 local down = display.newImage ("downx.png") down.x = 70 down.y = 290 local left = display.newImage ("leftx.png") left.x = 30 left.y = 260 local right = display.newImage ("rightx.png") right.x = 110 right.y = 260 -- Puts in all four movement arrow images and positions them ---------------------------------------------------------------------- local motionx = 0 local motiony = 0 local speed = 10 -- Speed can be adjusted here to easily change how fast my picture moves. Very convenient! local function stop (event) if event.phase =="ended" then motionx = 0 motiony = 0 end end Runtime:addEventListener("touch", stop ) -- When no arrow is pushed, this will stop me from moving. local function movepeach (event) peach.x = peach.x + motionx peach.y = peach.y + motiony end Runtime:addEventListener("enterFrame", movepeach) -- When an arrow is pushed, this will make me move. function up:touch() motionx = 0 motiony = -speed end up:addEventListener("touch", up) function down:touch() motionx = 0 motiony = speed end down:addEventListener("touch", down) function left:touch() motionx = -speed motiony = 0 end left:addEventListener("touch",left) function right:touch() motionx = speed motiony = 0 end right:addEventListener("touch",right) -- The above four functions are stating the arrows should all listen for touches and defining -- the way I should move based on each touch. local function wrap (event) if peach.x < 50 then peach.x = 50 end ---- if peach.x > 430 then peach.x = 430 end ---- if peach.y > 270 then peach.y = 270 end ---- if peach.y < 50 then peach.y = 50 end ---- if speed < 0 then speed = 0 end end Runtime:addEventListener("enterFrame", wrap) -- This will keep me from going off the sides of the screen. It's not actually a wrap, that would -- involve me disappearing and popping back on the opposite side, but I'm in the habbit of calling -- whatever function I use to keep the main "hero" on screen "wrap", and I doubt that will change any -- time soon. |
DOWNLOAD THE PROJECT HERE
Naturally, you will want to replace the images with your own, (mine all end in “x” for the arrows as I was experimenting with multiple sets,) and possibly change the orientation as well, depending on your needs.
I hope that this will be of use, it’s been requested a few times by different people and although I’m not really meant to be working at the moment I needed to spend some time out of bed and at a desk, even if only briefly. (I’ve been bored a lot of the time and using an iPad lying down makes my arms tired eventually, lol.)
Peach Pellen 
PS - If this tutorial helped you, please feel free to throw some money at me, and if you haven’t done so yet consider registering for the Techority 48 Hour Challenge - entries close in just under 2 weeks!
Congratulations, excellent tutorial! A version with camera tracking, acceleration and braking (like a racing game) would be awesome!
Thanks!!!
Thank you Andre.
Hopefully in the future; I have so many requested tutorials and am presently not up to doing much, but when I am I’m trying to work through them all in order from most requested to least, but I will add it to my (mental) list.
Peach
Good job, thanks for sharing.
[...] Lesson 12: Controlling a Character with a D-Pad [...]
Hey peach. I am having some trouble controlling the player can you help me?
do you know how to make the player jump instead of go up and down?
Hi Jake,
First, you need to describe the actual problem you’re having; I don’t know if I can help if I don’t know what it is!
Second, yes;
Put that on a button then have a play with it
Peach
Thanks for getting back to me so fast. That last bit of code will make the player jump using a button?
Yes but it was a simple answer; it requires you to have gravity turned on and your player as a physics body.
If you don’t it wont come back down. (Although you could add code to do so with a timer; physics is easier IMHO.)
Peach.
Also peach Im working on a ipad and not a iphone what should I put for the wrap function?
The dimensions of the iPad are 768 x 1024
It’s the same as the iPhone – for y do the height and for x do the width.
EG if it is portrait you’ll likely wrap x on 0 and 768 and then play with it until it looks good to you.
Same thing exactly, just different numbers.
Thanks you have been wonderful Peach. Can you do personal training?
Hi Jake,
I actually do provide personal training now, yes – it’s actually aimed at those who are VERY new to Corona as opposed to those who have are a bit further along.
There’s a link up top in the bar to “Corona Training”, that’s got some details on it.
Peach
Hey, Peach!
I have got a problem, I hope you can help me
I have got an elemet(dude) , and i’ ve got two buttons (left, right)
what should i write (code) to move this dude when i press the button?
Hey Vlad,
Just include the functions for left and right and ignore the ones for up and down.
You can leave out any reference to Y as well, so no motiony, no peach.y, etc
Make sense?
Hey Peace,
Thank you so much for this tutorial, it was great. I just ran into some trouble at the end with the wrap. I tried everything I know, every number. my character just keeps going. Any advice? thanks in advance
First of all… Peach**
Second, I figured it out. I just made some walls, thanks
I’m glad you figured it out but if you need help with the wrap, let me know if you’re using landscape or portrait and I can tell you what numbers you should be using
Peach
Excellent tutorial and project file!
Within an hour of opening it (first time using Corona) I worked out how to implement diagonal controls by editing the provided code (this would’ve taken me weeks otherwise)
I’ve also purchased your Package#2 so I’m going to try adding some invisible diagonal controls to your Side Scrolling Shooter template next
Thanks for creating a great learning resource
Thank you
I’m glad that both my tutorial and of course the ease of Corona have been good for you
It’s exciting learning to make apps, I think.
Thanks very much for your business as well – always appreciate people buying my templates.
Peach
This D-Pad just allows only 1 button work?
How can I add a “fire” button on the right of the screen? The purpose is that a character is moving and press another button to jump
Try multitouch
tankyou pellen you is the best.. your tutor is the best GBU
Hi Peach,
Thanks for the tutorials, how if i wanna do single-touch *1 speed, double-touch *2 speed to move faster at any direction?
Thank you.
Hey,
You’d just add *2 after speed in the function tied to the button. Keeping track of touches there is code for on the forum
I tired to find in forum but couldn’t get it, can you show me? thanks.
See: http://developer.anscamobile.com/forum/2011/02/12/double-click-event
Thanks for the link, but I couldn’t get it to work lol, I’m too noob
I know I’m late to reply to this but if you post in the forum I will help you with your code