MI PYTHON Phaser JS Tutorial 1 | Instance The Screen Canvas

MIPYTHON

OVER VIEW:

Today we will be learning Phaser. This first tutorial will allow us to instance a canvas object in our HTML. Along with a text object and a Sprite. Lets create a repl at repl.it . Luckily Repl.it has a Phaser JS template all ready to go for us.

https://replit.com/@MANDREWS85/phsertutorial1#index.html

You will notice 3 files and a folder created. The index.html file is our loading page for our Phaser app. The style.css file styles our HTML page and Phaser Canvas. Next our script.js file will hold our Phaser game logic.

Phaser Framework:

Lets start with the script.js file. We will define our basic Phaser JS framework below.



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
function preload() {

    

}



function create() {



}



function update() {



}



const config = {

    type: Phaser.AUTO,

    width: 500,

    height: 400,

    backgroundColor: '1c2333',

    physics: {

        default: 'arcade',

        arcade: {

            gravity: {

                y: 0

            },

            debug: false

        }

    },

    scene: {

        preload: preload,

        create: create,

        update: update

    }

};



const game = new Phaser.Game(config);

In the above code. We define 3 functions and 2 constants.

preload() loads our game sprite assets.

create() Initializes and instances our game objects

update() updates our game every frame.

Phaser Configuration:

Next we define our game configuration with a constant, config. Then finally define our Phaser game object as another constant.

In the config constant we define our config attributes.

type:

width:

height:

backGroundColor:

physics:

  • default:
  • arcade:
  • debug:

scene:

  • preload:
  • create:
  • update:

Lets run our repl and see what happens. We should see our banner title and description from our index.html file. Along with a black screen that is our Phaser canvas.

INSTANCE GAME OBJECTS:

Just a black screen is kind of boring. So, lets instance some game objects on the Phaser canvas. Lets start with a sprite and a text object. We are going to include the following code in our preload() and create() functions



1
2
3
4
5
6
7
8
9
10
11
12
13
14
function preload() {



  this.sprite1 = this.load.image('sprite1', 'assets/repl.png');

    

}



function create() {



  this.gameSprite = this.physics.add.image(60,60, 'sprite1')

  

  this.gameText = this.add.text(80, 60,"HELLO WORLD" )

 



}

In the above code example.

We preload our this.sprite1 Phaser image object as a class wide variable. With the key for the id “sprite1”, and the path to the image asset ‘assets/repl.png’.

In the Phaser create method. We are instancing a class wide variable this.player as a Phaser physics object. The x /y coordinates are first and second arguments respectively. Then we define the image of the object with the image key id “sprite1” that we preloaded earlier.

Lets run the code and see what happens. We should see the Phaser default image and our text saying “Hello World”.

Positioning Objects | Scaling Size | Coloring :

Lets move our sprites around a little. Lets also adjust the size of our Phaser game objects. We will make the sprite object smaller and the text object bigger. Then we will change the hue of our objects.



1
2
3
4
5
6
7
8
9
function create() {

  this.gameSprite = this.physics.add.image(60,60, 'sprite1')

  this.gameSprite.setScale(.5,.5)



  this.gameText = this.add.text(80, 60,"HELLO WORLD" )

  this.gameText.setScale(2,2)





}

In the above code we set the scale of the objects. Halving our Phaser game sprite size and doubling the Phaser text objects size. Now lets move our objects to the center of the Phaser JS canvas. We will do this by getting the canvas width and height attributes in our config constant. We then halve the canvas width and height. Finally passing in the 2 values to the objects x and y attributes.

Lets modify our code.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function create() {

  this.gameSprite = this.physics.add.image(60,60, 'sprite1')

  this.gameSprite.setScale(.5,.5)

  

  this.gameSprite.x = config.width/2

  this.gameSprite.y = config.height/2





  this.gameText = this.add.text(60,80,"HELLO WORLD" )

  this.gameText.setScale(2,2)

  

  this.gameText.x = config.width/2

  this.gameText.y = config.height/2









}

Now lets change the colors of our Phaser objects. We do this with the setTint() method. We will pass in the hexadecimal value for the color red.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  this.gameSprite = this.physics.add.image(60,60, 'sprite1')

  this.gameSprite.setScale(.5,.5)

  

  this.gameSprite.x = config.width/2

  this.gameSprite.y = config.height/2



  this.gameSprite.setTint(0xff0000)





  this.gameText = this.add.text(60,80,"HELLO WORLD" )

  this.gameText.setScale(2,2)

  

  this.gameText.x = config.width/2

  this.gameText.y = config.height/2



  this.gameText.setTint(0xff0000)

Conclusion:

In this first Phaser JS tutorial at MI PYTHON. We have learned how to create a canvas. Instance game objects, sprites and text. Then we modify the position, scale and color of our objects. In the next tutorial, we will delve deeper into the different features of Phaser.

Repl for the code in this section

https://replit.com/@MANDREWS85/phsertutorial1#script.js

Check out tutorial 2.

Related posts