FPS mobile input

linelineline · July 16, 2020, 2:51pm

hey everyone,

did anyone succeed in finding a good way of navigating as an FPS with mobile touch input? (till now ive only experienced that youd have to use both of your fingers for walking and looking around which most people dont know how to do)

hope someone can help!

Leonidas · July 16, 2020, 2:54pm

Yeah, I’d say I find this system hard myself, I am not a big fun of FPS games on mobile for this reason.

I am not sure you can go away with using both hands to simulate FPS movement/targeting.

What I find makes it a bit easier is if I lock movement to a virtual joystick but for targeting I detect touches/drags on the whole of the display. But definitely this is something to investigate on a per case base.

yaustar · July 16, 2020, 2:57pm

If it’s not fast paced, you can use pinch in/out to move forward/back and single finger drag to look around.

Or you can use a similar system as Google Maps first person view?

LeXXik · July 16, 2020, 3:43pm

Hmm, I am one of those who use 3 fingers in first person shooters (move/strafe, rotate/pan, fire). I know some use the fourth finger (for aim down sights), but I find it not giving much advantage in speed. I can also use 2 fingers, if the touch-screen is presssure sensitive, so the rotate finger can also fire.

Nevertheless, most of my friends who like to play FPS games, know well how to control the player with 2 fingers. Those, who don’t play FPS on mobile, well, they don’t play those.

I’d say, cater for your audience, regardless of what type of game you make. If you make your goal to acquire those players who don’t play your genre, you might make it worse for those who do.

will · July 16, 2020, 11:07pm

Have you looked at this script:

github.com

playcanvas/engine/blob/master/examples/assets/scripts/camera/first-person-camera.js

////////////////////////////////////////////////////////////////////////////////
//                      First Person Character Controller                     //
////////////////////////////////////////////////////////////////////////////////
var CharacterController = pc.createScript('characterController');

CharacterController.attributes.add('speed', { type: 'number', default: 5 });
CharacterController.attributes.add('jumpImpulse', { type: 'number', default: 400 });

// initialize code called once per entity
CharacterController.prototype.initialize = function () {
    this.groundCheckRay = new pc.Vec3(0, -1.2, 0);
    this.rayEnd = new pc.Vec3();

    this.groundNormal = new pc.Vec3();
    this.onGround = true;
    this.jumping = false;
};

CharacterController.prototype.move = function (direction) {
    if (this.onGround && !this.jumping) {

This file has been truncated. show original

It’s used in the Seemore demo:

https://playcanvas.com/project/612100/overview/seemore

linelineline · August 31, 2020, 4:56pm

hey again everyone!
thanks for the inputs!
its working somehow, but I tried it on both IOS and android and its not fullscreen any ideas how to fix that?

thanks!

Leonidas · September 2, 2020, 3:18pm

Hi @linelineline,

Going fullscreen on mobile browser can be tricky, since not all OS/browsers support this.

To enable the fullscreen mode you use a standard browser API, check this page: