Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

What's the best way to handle two player movement with gamepads.


PixelProgrammer
 Share

Recommended Posts

I'm currently building a two player platform-shooting game that supports controllers. Right now I have two separate move functions placed in the update that handles player movement. Here's the code: 

movePlayer1: function () {
    if (!player.alive)
        return ;

    //controller input
    
    if(this.pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X)< -0.1){
        this.player_1.body.velocity.x = -300; //move left
        this.player_1.animations.play('left');
    }
    if(this.pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X)>0.1){
        this.player_1.body.velocity.x = 300; //move right
        this.player_1.animations.play('right');

    }
    if(this.pad1.justPressed(Phaser.Gamepad.XBOX360_A)&& this.player_1.body.onFloor() ){
        this.player_1.body.velocity.y = -999; //jump
    }

    this.player_1.weapon.fireAngle = -(90 + 90 * -this.pad1.axis(Phaser.Gamepad.XBOX360_STICK_RIGHT_X));
    if(this.pad1.isDown(Phaser.Gamepad.XBOX360_RIGHT_TRIGGER)||this.pad1.justPressed(Phaser.Gamepad.XBOX360_RIGHT_BUMPER))
          { 
             this.player_1.weapon.fire();  
          }
  },

 movePlayer1: function () {
    //player 2 controller
    if(game.input.gamepad.supported && game.input.gamepad.active && game.input.gamepad.pad2.connected) {
        this.indicator2.animations.frame = 0;
    } else {
        this.indicator2.animations.frame = 1;
    }
    if(this.pad2.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X)< -0.1){
        this.player_2.body.velocity.x = -300;
        this.player_2.animations.play('left');
    }
    if(this.pad2.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X)>0.1){
        this.player_2.body.velocity.x = 300;
        this.player_2.animations.play('right');

    }
    if(this.pad2.justPressed(Phaser.Gamepad.XBOX360_A)&& this.player_2.body.onFloor() ){
        this.player_2.body.velocity.y = -999;

    }

    this.player_2.weapon.fireAngle = -(90 + 90 * -this.pad1.axis(Phaser.Gamepad.XBOX360_STICK_RIGHT_X));


    if(this.pad2.isDown(Phaser.Gamepad.XBOX360_RIGHT_TRIGGER)||this.pad2.justPressed(Phaser.Gamepad.XBOX360_RIGHT_BUMPER)){
        this.player_2.weapon.fire();
    }
}
,

 

I feel that this isn't the best way to code for two player movement. What would you do differently?

Link to comment
Share on other sites

I think it would be better to create a generic player object that can have a gamepad contollers assigned to it. For example (

function Player(gamepad) {
    this.gamepad = gamepad;
    // Add all the other things that make up the player
}
Player.prototype.handleInput = function {
    //Your movement code using "this.gamepad" instead of "this.pad1"
}

// Other functions that your player needs

I would recommend watching this tutorial to get a good feel for how to structure your code

http://phaser.io/news/2015/11/code-captain-game-dev-course

Link to comment
Share on other sites

@mwiss Thanks I've implemented something like what you've recommended.. 

movePlayer: function (player) {

        if (!player.alive)
            return ;

        var pad = (player.color == "red") ? this.pad1 : this.pad2;

        /*-- Movements --*/
        if (player.cursor.left.isDown || pad.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X)< -0.1){ //move left
            player.body.velocity.x = -300;
            player.animations.play('left');
        }
        else if (player.cursor.right.isDown || pad.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X)>0.1){ //move right
            player.body.velocity.x = 300;
            player.animations.play('right');
        }
        else {
            player.body.velocity.x = 0;
            player.animations.stop();
            player.frame = 2;
        }
  }

I'll only keep this as a temporary solution. I'll definitely review it again and change it to more like what you've said.

Link to comment
Share on other sites

I'm also starting on a two player shooter with gamepad support.  Here's the approach I took:  (shortened for brevity)

class Player extends Phaser.Sprite {
    
    gamepad;
    
    constructor( gamepad, game, x = 0, y = 0, key = 'dude' ) {
        super( game, x, y, key );


        game.add.existing( this );
        game.physics.arcade.enable( this );

        this.gamepad            = gamepad;
    }

}


class ExampleState extends Phaser.State {
    
    gamepad1                = null;
    gamepad2                = null;
    
    create() {
        this.game.input.gamepad.start();
        this.gamepad1 = this.game.input.gamepad.pad1;
        this.gamepad2 = this.game.input.gamepad.pad2;
        
        [ this.gamepad1, this.gamepad2 ].forEach(( gamepad ) => {
            gamepad.addCallbacks( gamepad, { onConnect: () => {
                let newPlayer   = new Player( gamepad, this.game );
                this.game.players.add( newPlayer );
            } });
        });
    }
    
    update() {
        this.game.players.forEachAlive(( player ) => {
            let gamepad = player.gamepad;

            player.body.velocity.x        = 0;
            player.body.velocity.y        = 0;
            
            if ( gamepad.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X) < -0.1 ) {
                player.body.velocity.x    = -150;
            } else if ( gamepad.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X) > 0.1 ) {
                player.body.velocity.x    = 150;
            }
        
            if ( gamepad.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_Y) < -0.1 ) {
                player.body.velocity.y    = -150;
            } else if ( gamepad.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_Y) > 0.1 ) {
                player.body.velocity.y    = 150;
            }
        });
    }

}

 

 

 

 

example-state.js

player.js

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...