To start, you must have an HTML, CSS and JS file

Add this code in html

<script src="https://cdn.jsdelivr.net/npm/phaser@v3.90.0/dist/phaser.js"></script>

This is a method called calling a CDN (Content Delivery Network)

CDN are servers nearby that allow you to fetch internet assets (things like pages, images, videos) super fast.

Config Object

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: "#002fa7"
};

• type -> tells phaser how to draw the game on screen. Options include:
  Phaser.AUTO uses WebGL for performance. If not supported by the browser,Canvas is the fall back.
  Phaser.CANVAS foces game to 2D render
  Phaser.WEBGL use WebGL

WebGL (Web Graphics Library) js API that allows 3D graphics render on browser with no plugin needed.

• width/height -> sets the dimension of game canvas, in pixels.
• backgroundColor sets bg color in hex, rgb or css names

Then pass that config to a Phaser game engine instance.

const game = new Phaser.Game(config);

Phaser requires a config.

preload(), create(), update()

preload -> well, preload
create -> build
updat -> run

Backgrounds

If you want to use an immage as a background, put it in the /assets directory.

Use this:

this.load.image()

on the preload function. it takes 2 params, the name of the image, and the file path.

function preload() { 
this.load.image("background","assets/background.png"); 
}

Now to fill the screen

this.sys.game.config.width //access the config width
this.sys.game.config.height // access config height property

allows you to access the Phaser config properties. If you want to position the image in the middle of the canvas:

this.add.image(width / 2, height / 2, "background");

finally, to attach it, update the config object to include a scene object

const config = { 
	type: Phaser.AUTO, 
	width: 800, 
	height: 600, 
	backgroundColor: "#002fa7", 
	scene: 
	{ 
		preload: preload, 
		create: create, 
		update: update 
	} 
}

Scene in phaser divides the game into sections, kind of like components. Examples include Main Menu, High Score Table, Game Level etc. There was a concept of States in PhaserJS, where there could be only one state running at a time because they all shared resources. Now those states are called Scenes, and have their own resources (Camera, game object, animations etc.)

Note on Keyboard Input

The y axis in computer graphics is inverted. It starts with 0. So if you want the character to go down, you increase the y value. Conversely, to move the character upwards, decrease its x value.

function update() {
	const speed = 1;

	if (cursors.left.isDown) {
		player.x -= speed;
	} else if (cursors.right.isDown) {
		player.x += speed;
	}

	if (cursors.up.isDown) {
		player.y -= speed;
	} else if (cursors.down.isDown) {
		player.y += speed;
	}
}

Mouse Input

to trigger interactions with the mouse, use

this.input.on()

this function is a one time event listener that detects when mouse is clicked.
Pointerdown is an event that triggers on mouseclick.