0
\$\begingroup\$

I am trying out the Phaser 3 framework and I dont know why my player Object moves only left but not right... Here's another weird thing: if I swap code segmentd for move right and move left, then I can move right but not move left.

Why is it so and how can I fix it?

Here is my code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Making your first Phaser 3 Game - Part 1</title>
    <script src="phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 1051,
        physics: {                              //for physics system
          default: 'arcade',
          arcade: {
            gravity: { y: 300},
            debug: false
          }
        },

        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

    var player;
    var platform;
    var cursor;

    var game = new Phaser.Game(config);

    function preload()
    {
          this.load.image('background','MyZombiePlatformer/background.jpg');
          this.load.image('platform','MyZombiePlatformer/platform.png');
          this.load.image('ZombieIdle','MyZombiePlatformer/zombie_idle.png');
          this.load.spritesheet('ZombieWalk', 'MyZombiePlatformer/zombie_walk1.png',
          {
            frameWidth: 80, frameHeight: 110
          }
        );

    }
    function create()
    {
          this.add.image(1000,525.2,'background');

          platform = this.physics.add.staticGroup();
          platform.create(1000, 900, 'platform'). setScale(5).refreshBody();

          player = this.physics.add.sprite(10,50,'ZombieIdle');
          player.setCollideWorldBounds(true);

          cursor = this.input.keyboard.createCursorKeys();

          this.anims.create(
            {
              key: 'idle',
              frames: [{key: 'ZombieIdle', frame: 0}],
              frameRate: 1
            }
          );

          this.anims.create(
            {
              key: 'walk',
              frames: this.anims.generateFrameNumbers('ZombieWalk',{start: 0, end: 1}),
              frameRate: 2,
              repeat : -1
            }
          );






          this.physics.add.collider(player,platform);


    }
    function update()
    {
        //this segment doesnt work..be it any left or right walk logic
        if(cursor.right.isDown)
        {
          player.setVelocityX(160);
          player.anims.play('walk',true);

        }

        //this segment always works be it left walk or right walk logic
        if(cursor.left.isDown)
        {
          player.setVelocityX(-160);
          player.anims.play('walk',true);

        }

        else
        {
          player.setVelocityX(0);
          player.anims.play('idle',true);
        }

    }

</script>
</body>
</html>
\$\endgroup\$
2
  • 3
    \$\begingroup\$ A tip to improve your questions and attract more people: Make the title of your question and actual question specific to your problem. "Problem with code?" or "Something is wrong with my code?" are questions that the answer is "yes" and that's it. Make it more descriptive like "Why does my player move left but not right?". \$\endgroup\$ Commented Feb 1, 2019 at 12:14
  • \$\begingroup\$ @TomTsagk It's totally OK to jump in and make that edit if you like. Rollbacks are cheap if we make a mistake. \$\endgroup\$
    – DMGregory
    Commented Feb 1, 2019 at 16:23

1 Answer 1

2
\$\begingroup\$

I think your problem is that your understanding of if and else is slightly wrong.

    if(cursor.right.isDown) {
        // move the player
    }


    if(cursor.left.isDown) {
         // move the player
    } else  {
         // stop the player
    }

I think you assume that the else path is executed when neither of those two conditions is true. But that's incorrect. It only applies to the second condition. What actually happens here is:

  1. cursor.right.isDown is true, so we execute the if branch of this condition.
  2. We set the velocity to right
  3. cursor.left.isDown is false, so we execute the else branch of this conditions
  4. We set the velocity we just set to right back to zero.

Try this code instead:

    // when the right button is pressed, accelerate to the right
    if(cursor.right.isDown)
    {
      player.setVelocityX(160);
      player.anims.play('walk',true);
    }

    // when the left button is pressed, accelerate to the left
    if(cursor.left.isDown)
    {
      player.setVelocityX(-160);
      player.anims.play('walk',true);
    }

    // when neither the left button nor the right button is pressed, stop!
    if(!cursor.left.isDown && !cursor.right.isDown)
    {
      player.setVelocityX(0);
      player.anims.play('idle',true);
    }
\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .