{"id":628,"date":"2021-11-01T00:59:50","date_gmt":"2021-11-01T00:59:50","guid":{"rendered":"http:\/\/mipython.magwebdesigns.net\/WP\/?p=628"},"modified":"2021-11-01T00:59:54","modified_gmt":"2021-11-01T00:59:54","slug":"mi-python-phaser-js-tutorial-two-extending-classes-and-sprite-movement","status":"publish","type":"post","link":"http:\/\/mipython.magwebdesigns.net\/WP\/2021\/11\/01\/mi-python-phaser-js-tutorial-two-extending-classes-and-sprite-movement\/","title":{"rendered":"MI PYTHON | Phaser JS Tutorial Two | Extending Classes and Sprite Movement"},"content":{"rendered":"\n

Overview:<\/h1>\n\n\n\n

This lesson focuses on sprite movement within Phaser. The Phaser game engine gives us different choices for movement styles. We have keyboard \/ joystick and mouse follow type movement today. We will focus on these two movement methods below. Before we do this we will also start organizing our game objects into a class based structure. This will help us in scaling up the game down the road. <\/p>\n\n\n\n

Extending Phaser Classes:<\/h2>\n\n\n\n

In order to better keep track of our game objects. We are going to implement an Object Oriented class based structure. This will help us to keep track of all our game objects and instance’s in the future. Lets start with the below code for our GameObj class.<\/p>\n\n\n\n

\n\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<\/div><\/td>
class GameObj extends Phaser.Physics.Arcade.Sprite  {  
\n
\n    constructor(scene,name,description,image, x, y) {
\n    super(scene);    
\n    this.scene = scene;
\n    this.name = name;
\n    this.description = description;
\n    \/\/\/   SET INTERACTIVE() FOR COLLISIONS
\n    this.avatar = this.scene.physics.add.image(x,y, image).setInteractive();
\n    this.x = x;
\n    this.y = y;
\n    }
\n
\n    status() {
\n      console.log(this.name);
\n      console.log(this.description);
\n    }
\n}<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n\n<\/pre>\n\n\n\n
It’s ok if you don’t completely understand what’s happening here.  It will become clearer as we move along.  In the above code example.<\/p>\n\n\n\n
  • Invoke our class GameObj extending from Phaser.Physics.Arcade.Sprite.<\/li>
  • Initialize our GameObj class with the game scene, name, description, sprite image, x position, and y position as arguments.<\/li>
  • The\n\n
    1
    <\/div><\/td>
    super<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n\nkeyword is used to call the constructor of its parent class to access the parent’s properties and methods.  We pass super into our class constructor to give our class access to the physics and other methods of Phaser.<\/li>
  • This.scene is our game scene within Phaser.<\/li>
  • This.name gives each instance an individual name.<\/li>
  • this.description gives each instance and individual description.<\/li>
  • this.avatar defines our GameObj’s sprite to display within the Phaser game canvas.  The physics process’s are actually running on this object within our class instance.<\/li>
  • this.x defines the instance’s  avatar’s x coordinate position on the canvas<\/li>
  • this.y defines the instance’s  avatar’s y coordinate position on the canvas<\/li>
  • Lastly we have a status() method that displays the instance’s name and description.<\/li><\/ul>\n\n\n\n
    After we initialize our GameObj class ,lets make a seperate class for our Player.  In our Player class we are going to include a few more methods then our GameObj class. Most importantly, our movement methods for the Player.<\/p>\n\n\n\n
    \n\n
    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
    <\/div><\/td>
     class Player extends Phaser.Physics.Arcade.Sprite  {  
    \n
    \n    constructor(scene,name,description,image, x, y) {
    \n    super(scene);    
    \n    this.scene = scene;
    \n    this.name = name;
    \n    this.description = description;
    \n    \/\/\/  SET INTERACTIVE FOR COLLISIONS
    \n    this.avatar = this.scene.physics.add.image(x,y, image).setInteractive();
    \n    this.x = x;
    \n    this.y = y;
    \n    }
    \n
    \n    status() {
    \n      console.log(this.name);
    \n      console.log(this.description);
    \n    } 
    \n
    \n    keyBoardMovement() {
    \n      let cursors = this.scene.input.keyboard.createCursorKeys();
    \n
    \n      if (cursors.left.isDown)
    \n      {
    \n        console.log("LEFT");
    \n        this.avatar.x -= 10;
    \n      }
    \n      else if (cursors.right.isDown)
    \n      {
    \n        console.log("RIGHT");
    \n        this.avatar.x += 10;
    \n      }
    \n
    \n      if (cursors.up.isDown)
    \n      {
    \n        console.log("UP");
    \n        this.avatar.y -= 10;
    \n      }
    \n      else if (cursors.down.isDown)
    \n      {
    \n      console.log("DOWN");
    \n      this.avatar.y += 10;
    \n      }
    \n
    \n    }
    \n
    \n    pointerMovement(x,y) {
    \n
    \n      if (this.scene.input.activePointer.isDown)
    \n      {
    \n          this.avatar.x = x
    \n          this.avatar.y = y
    \n  
    \n      }
    \n
    \n      else
    \n      {
    \n
    \n      }
    \n
    \n
    \n
    \n    }
    \n
    \n
    \n}<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n\n<\/pre>\n\n\n\n
    Movement:<\/h2>\n\n\n\n
    In the above code example.  We invoke our Player class exactly as we did the GameObj class.  The only difference being the added methods of  keyBoardMovement() and pointerMovement().  <\/p>\n\n\n\n
    • Within our keyBoardMovement() method we are using if statements to check to see if this.scene.input.keyboard.createCursorKeys() is down.  If the arrow keys are pressed our Player.avatar sprite will move in that particular direction on the Phaser canvas. Incremented by 10 pixels. <\/li>
    • The pointerMovement() method allows us to move our Player.avatar sprite around with  mouse input.   We are checking if this.scene.input.activePointer.isDown = true. If the previous is true then we move the Player to that x and y position on the canvas instantly.   If you will notice in the next step.  The Player does move instantly where we click and can “Teleport” around the game screen.  We will address that shortly.<\/li><\/ul>\n\n\n\n
      In the below code.  Lets Instantiate our class objects after our class initialization.  <\/p>\n\n\n\n
      For both our Player and GameObj instances we will define them with the below arguments:<\/p>\n\n\n\n