// to be executed once the window loads window.onload = function(){ // game configuration object var gameConfig = { // render type type: Phaser.CANVAS, // game width, in pixels width: 640, // game height, in pixels height: 480, // game background color backgroundColor: "#000044", // physics settings physics: { // we are using matter.js engine default: "matter" }, // array with all game scenes, just one: playGame scene: [playGame] }; // game constructor var game = new Phaser.Game(gameConfig); } // playGame Class var playGame = new Phaser.Class({ // it extends Phaser.Scene Extends: Phaser.Scene, // scene initialization initialize: // constructor function playGame(){ // calling the scene, assigning it "PlayGame" key Phaser.Scene.call(this, {key: "PlayGame"}); }, // function to be executed when the scene is loading preload: function(){ // loading crate image this.load.image("crate", "crate.png"); }, // function to be executed once the scene has been created create: function(){ // setting Matter world bounds this.matter.world.setBounds(0, -200, game.config.width, game.config.height + 200); // waiting for user input this.input.on("pointerdown", function(pointer){ // getting Matter bodies under the pointer var bodiesUnderPointer = Phaser.Physics.Matter.Matter.Query.point(this.matter.world.localWorld.bodies, pointer); // if there isn't any body under the pointer... if(bodiesUnderPointer.length == 0){ // create a crate this.matter.add.sprite(pointer.x, pointer.y, "crate"); } // this is where I wanted to remove the crate. Unfortunately I did not find a quick way to delete the Sprite // bound to a Matter body, so I am setting it to invisible, then remove the body. else{ bodiesUnderPointer[0].gameObject.visible = false; this.matter.world.remove(bodiesUnderPointer[0]) } }, this); } });I think you can make complex physics games using Matter.js, so prepare for a series of tutorials about Phaser 3 and Matter.js, as soon as I figure out how to get the most out of this engine, meanwhile download the source code.
Your first Phaser 3 + Matter.js physics example
You know Phaser 3 is about to be released, and although we will still be using Phaser 2 for quite some time, we also need to learn the new framework, according to my 10 tips that will help you learning a new language.
One of the new Phaser 3 features is Matter.js, a 2D rigid body physics engine for the web written directly in JavaScript – this means it wasn’t ported from another language like it has been done with Box2D.
As usual, the first example of a physics engine is the “create a crate / remove a crate” script.
Touch the canvas in an empty spot to create a crate, or touch a crate to remove it.
The source code is very easy and straightforward, but I wasn’t able to remove a body AND the sprite bound to it, so I had to set the sprite to invisible. I am sure there is a better way to do it, so if you find it, let me know.
Here is the source code: