Please, help me to update the MDN 2D Breakout tutorial to Phaser 3.80.1

Phaser 3
1

Hello,

I want to port the next tutorial with Phaser 3.80.1: 2D breakout game using Phaser - Game development | MDN But I have some promblems.

2

Lesson 01: Initialize the framework

Playground: Plunker - Lesson 01. Initialize the framework | 2D Breakout Game from MDN tutorial in Phaser 3 and JavaScript

It works as expected - without problems.

3

Lesson 02: Scaling

Playground: Plunker - Lesson 02. Scaling | 2D Breakout Game from MDN tutorial in Phaser 3 and JavaScript

This example has the next problem. The canvas scaled in the wrong way and I don’t have any error messages in the browser console:

image

Code from the lesson:

function preload() {
  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  game.scale.pageAlignHorizontally = true;
  game.scale.pageAlignVertically = true;
}

Translated code:

import { CANVAS, Game, Scale } from "phaser3";

const config = {
    type: CANVAS,
    parent: "2d-breakout-game",
    width: 480,
    height: 320,
    scene: { preload, create, update }
};

const game = new Game(config);

function preload() {
    game.scale.scaleMode = Scale.ScaleManager.SHOW_ALL;
    game.scale.pageAlignHorizontally = true;
    game.scale.pageAlignVertically = true;
}

function create() {
    console.log("create");
}

function update() {

}
4

For parent you need to add that element to the document:

<div id="2d-breakout-game"></div>

Phaser 3 doesn’t have SHOW_ALL so maybe use FIT instead.

1 Like
5

@samme thank you very much!

I created a repository for the translated tutorial examples: GitHub - 8Observer8/2d-breakout-game-from-mdn-phaser3-js: My port of the MDN "2D breakout game using Phaser" tutorial examples to Phaser 3

Changes in the Lesson 03: Load the assets and print them on screen

Phaser 2:

var game = new Phaser.Game(480, 320, Phaser.AUTO, null, {preload: preload, create: create, update: update});

var ball;

function preload() {
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.scale.pageAlignHorizontally = true;
    game.scale.pageAlignVertically = true;
    game.stage.backgroundColor = '#eee';
    game.load.image('ball', 'img/ball.png');
}
function create() {
    ball = game.add.sprite(50, 50, 'ball');
}
function update() {}

Phaser 3:

import { AUTO, Game, Scale } from "phaser3";

let ball;

const config = {
    type: AUTO,

    parent: "2d-breakout-game",
    width: 480,
    height: 320,
    scaleMode: Scale.ScaleModes.FIT,
    autoCenter: Scale.Center.CENTER_BOTH,

    autoFocus: false,
    scene: { preload, create, update },
    backgroundColor: "#eee"
};

const game = new Game(config);

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

function create() {
    ball = this.add.sprite(50, 50, "ball");
}

function update() {}

Playground: Plunker - Lesson 03. Load and print assets | 2D Breakout Game from MDN tutorial in Phaser 3 and JavaScript

image

1 Like
6

It is better to finish the next tutorial first and continue the current one: Making your first Phaser 3 game - Phaser

7

I finished the official “Making your first Phaser 3 game” tutorial above but I cannot control a character on the Plunker playground in preview

Added

The problem above was fixed - autoFocus should be set to true.

GitHub repository with Rollup guide

Playground:

Added 4/27/2024:

I have replaced Arcade Physics with box2d/core:

GitHub repository with Rollup guide

Playground:

image

8

I have a problem with the lesson 7: Player paddle and controls, with this code:

function update() {
    paddle.x = game.input.x;
}

I tried to print console.log(game.input); but it doesn’t have the x property.

Playground

There is the game.input.mouse property but it doesn’t have the x property.

9 
function update() {
    paddle.x = this.input.x;
}

Phaser.Input.InputPlugin#x

1 Like
10

Playground: Lesson 07. Player paddle and controls

Phaser 2:

var game = new Phaser.Game(480, 320, Phaser.AUTO, null, {preload: preload, create: create, update: update});

var ball;
var paddle;

function preload() {
    handleRemoteImagesOnJSFiddle();
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.scale.pageAlignHorizontally = true;
    game.scale.pageAlignVertically = true;
    game.stage.backgroundColor = '#eee';
    game.load.image('ball', 'img/ball.png');
    game.load.image('paddle', 'img/paddle.png');
}
function create() {
    game.physics.startSystem(Phaser.Physics.ARCADE);
    ball = game.add.sprite(game.world.width*0.5, game.world.height-25, 'ball');
    ball.anchor.set(0.5);
    game.physics.enable(ball, Phaser.Physics.ARCADE);
    ball.body.velocity.set(150, -150);
    ball.body.collideWorldBounds = true;
    ball.body.bounce.set(1);

    paddle = game.add.sprite(game.world.width*0.5, game.world.height-5, 'paddle');
    paddle.anchor.set(0.5,1);
    game.physics.enable(paddle, Phaser.Physics.ARCADE);
    paddle.body.immovable = true;
}
function update() {
    game.physics.arcade.collide(ball, paddle);
    paddle.x = game.input.x || game.world.width*0.5;
}

// this function (needed only on JSFiddle) take care of loading the images from the remote server
function handleRemoteImagesOnJSFiddle() {
	game.load.baseURL = 'https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/';
	game.load.crossOrigin = 'anonymous';
}

Phaser 3:

import { AUTO, Game, Scale } from 'phaser3';

let ball, paddle;

const config = {
    type: AUTO,

    parent: '2d-breakout-game',
    width: 400,
    height: 320,
    scaleMode: Scale.ScaleModes.FIT,
    autoCenter: Scale.Center.CENTER_BOTH,

    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },
            debug: false
        }
    },

    autoFocus: true,
    scene: { preload, create, update },
    backgroundColor: '#eee'
};

const game = new Game(config);

function preload() {
    this.load.image('ball', 'assets/ball.png');
    this.load.image('paddle', 'assets/paddle.png');
}

function create() {
    ball = this.physics.add.sprite(this.scale.width * 0.5, this.scale.height - 25, 'ball');
    ball.setVelocity(150, -150);
    ball.setCollideWorldBounds(true);
    ball.setBounce(1);

    paddle = this.physics.add.sprite(this.scale.width * 0.5, this.scale.height - 5, 'paddle');
    paddle.setOrigin(0.5, 1);

    this.physics.add.collider(ball, paddle);
    paddle.body.immovable = true;
}

function update() {
    paddle.x = this.input.x || this.scale.width * 0.5;
}
11

How to replace this code:

ball.checkWorldBounds = true;
ball.events.onOutOfBounds.add(() => {
  alert("Game over!");
  location.reload();
}, this);

It is from the Game over lesson. I have tried to use this solution: Out of bounds checking - #5 by PavelMishin

function update() {
    paddle.x = this.input.x || this.scale.width * 0.5;

    const inside = Geom.Rectangle.Overlaps(this.physics.world.bounds, ball.getBounds());
    if (!inside) {
        alert('Game over!');
        location.reload();
    }
}

But it cannot be reloaded: Playground

12

It’s slightly better to use Overlaps(this.physics.world.bounds, ball.body).

Maybe reload() is blocked. You can do

this.scene.restart();
1 Like
13

It works! Thank you very much!

function update() {
    paddle.x = this.input.x || this.scale.width * 0.5;

    const inside = Geom.Rectangle.Overlaps(this.physics.world.bounds, ball.body);
    if (!inside) {
        alert('Game over!');
        this.scene.restart();
    }
}

Playground