[SOLVED] Mobile Controls

I’ve wanted to make a mobile version of a game I’ve been working on. Although, I never actually made a mobile game or app on Playcanvas. I want a D-pad like controls.

Does anyone know how I could code something like that in?

1 Like

You can add UI buttons to act as controls. There’s a few UI tutorials here: https://developer.playcanvas.com/en/user-manual/user-interface/

Thanks! I will see if I can implement the controls now.

I have tried using the touch controls on a sample project but it doesn’t work. I even tried adding mouse input so when I clicked the image element, the player should move. The player didn’t move. Can you show me how to set up my code correctly, because I think that the problem’s in my code.

1 Like

Hey @DevPlex01! I’ve been following your tutorial videos on YouTube. Thank you for inspiring me :slight_smile:

Have you figured out how to get touch input working on mobile yet? I have set up three transparent buttons taking up a vertical third of the screen for each one: LeftButton, JumpButton, RightButton.

Can you advise me on what steps to take next in order to transfer the current keyboard controls from your tutorials into touch input functions?

Keep up the good work dude. I’m a big fan!

I am uploading my games to a website for my son:

Planet Phoenix

1 Like

Oh, hi there! Nice to meet a fan, and I kinda forgot to post the solution to this after finding it out. If I remember correctly, it has something to do which checking touch controls using events that are similar to the click event. Also, I’m gonna kinda make new videos with better quality and code. I think if you check out my game, Physique, you can find code that’ll help you make mobile controls. Also the best part about the code I wrote for mobile controls here is that it only shows up on touch devices. If it’s a bit too hard for you to understand, I’m making a new tutorial video soon, since it’s again been a while and I recently been working on my editing.

https://playcanvas.com/project/672610/overview/physique

1 Like

Here’s the edited version of the script from Physique. This should work, all you really need to do is fill in the attributes.

var MobileControl = pc.createScript('mobileControl');

//Buttons
MobileControl.attributes.add("jump", { type: 'entity', title: 'Jump Button' });
MobileControl.attributes.add("right", { type: 'entity', title: 'Right Button' });
MobileControl.attributes.add("left", { type: 'entity', title: 'Left Button' });
MobileControl.attributes.add("down", { type: 'entity', title: 'Down Button' });

//Attributes
MobileControl.attributes.add("player", { type: 'entity', title: 'Player' });

//Jump Variables
var runJump = false;
var canJump = true;

//Right Variables
var goRight = false;

//Left Variables
var goLeft = false;

// initialize code called once per entity
MobileControl.prototype.initialize = function() {
    if (!this.app.touch) {
        this.jump.enabled = false;
        this.right.enabled = false;
        this.left.enabled = false;
    }
    
    this.jump.element.on('touchstart', this.onJumpStart, this);  
    this.jump.element.on('touchend', this.onJumpEnd, this);
    this.player.collision.on('contact', this.onContact, this);
    this.right.element.on('touchstart', this.onRightStart, this);
    this.right.element.on('touchend', this.onRightEnd, this);
    this.left.element.on('touchstart', this.onLeftStart, this);
    this.left.element.on('touchend', this.onLeftEnd, this);
};

// update code called every frame
MobileControl.prototype.update = function(dt) {
    if (runJump === true && canJump === true) {
        this.player.rigidbody.applyImpulse(0, 5, 0);
        canJump = false;
        runJump = false;
    }    
    if (goRight === true) {
        this.player.rigidbody.applyForce(350 * dt, 0, 0);
    }
    if (goLeft === true) {
         this.player.rigidbody.applyForce(-350 * dt, 0, 0);
    } 
};

MobileControl.prototype.onJumpStart = function(e) {
    canRunJump = true;
    if (canRunJump === true) {
        runJump = true;
    }
};

MobileControl.prototype.onJumpEnd = function(e) {
    runJump = false;  
};

MobileControl.prototype.onContact = function(result) {
    if (result.other.tags.has('ground')) {
        canJump = true;
        canRunJump = true;
    }  
};

MobileControl.prototype.onRightStart = function(e) {
    goRight = true;  
};

MobileControl.prototype.onRightEnd = function(e) {
    goRight = false;  
};

MobileControl.prototype.onLeftStart = function(e) {
    goLeft = true;  
};

MobileControl.prototype.onLeftEnd = function(e) {
    goLeft = false;  
};



// swap method called for script hot-reloading
// inherit your script state here
// MobileControl.prototype.swap = function(old) { };
// to learn more about script anatomy, please read:
// playerScript i guess. since it's the player collecting it.k
// http://developer.playcanvas.com/en/user-manual/scripting/
1 Like

Hey @DevPlex01, I’ve managed to get my buttons working but there are a few discrepancies in matching up the code to my project. Could you take a quick look please?

Sky High

If you have time, you could fork it and have a play around maybe :relaxed:

Project

1 Like

Oh and another thing I noticed is that the buttons can have opacity set to 0 but cannot have their actionable states’ opacities set to 0 - so when I touch the screen, the buttons light up. I looked into the API docs for this but am not sure what I am looking for as nothing is immediately obvious to me. Do you have any recommendations?

I’ve just noticed something funky is going on with my jump button too :thinking:

The game is pretty cool on computer. I like the dream vibe to it. Im gonna test it on my phone right now.

1 Like

Cheers dude :blush:

1 Like

Ok, so can you add me to the project, so I can help you in the editor?

Yes, sure! I’ll try doing that now.

If you don’t know how to do it, then I’ll simply explain it now. In the overview of the project, there is a teams thing. You just gotta click the pencil tool option and then type out my username (dev01 in this case), and I’ll be added to the project. You have to give me write or admin access for me to edit anything though.

First:
image

Second:
image

Third:
image

Admin enabled :slight_smile:

Ok, now we’ll continue talking in the chat feature of the editor.