Using Phaser 3 ES6 Webpack boilerplate to import plugins

Phaser 3
1

Hello!

I’ve been trying to follow the README to figure out how to install through npm the PhaserMatterCollisionPlugin. I know I have to do something with webpack/base.js:

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { PhaserMatterCollisionPlugin } = require("phaser-matter-collision-plugin")

module.exports = {
  mode: "development",
  devtool: "eval-source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: [/\.vert$/, /\.frag$/],
        use: "raw-loader"
      },
      {
        test: /\.(gif|png|jpe?g|svg|xml)$/i,
        use: "file-loader"
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin({
      root: path.resolve(__dirname, "../")
    }),
    new webpack.DefinePlugin({
      CANVAS_RENDERER: JSON.stringify(true),
      WEBGL_RENDERER: JSON.stringify(true)
    }),
    new HtmlWebpackPlugin({
      template: "./index.html"
    })
  ]
};

but the format of the file is pretty confusing.

I first need to install the collision plugin through npm, but it seems that doing so results in a window not defined error.

i.e. npm install --save phaser-matter-collision-plugin

I would have then somehow added some stuff to base.js, but I’m doing something wrong.

Full repo and code can be viewed here (in v0.2 folder): cs325-game-prototypes/Assignments/v0.2 at master · zainulabideenfazal/cs325-game-prototypes · GitHub

2

Don’t change base.js at all.

Import the module and then add it to the game config.

3

Strange, I did that before, but for some reason you added the magic touch and now it works.

Here’s what I did, in case anyone else stumbles on here:

First do npm install --save phaser-matter-collision-plugin

Then in index.js, do import PhaserMatterCollisionPlugin from "phaser-matter-collision-plugin";

In index.js also add this to config:

plugins: {
        scene: [
            {
                plugin: PhaserMatterCollisionPlugin, //The plugin class
                key: "matterCollision", //Where to store in Scene.systems, such as scene.sys.matterCollision
                mapping: "matterCollision" // Where to store in the Scene, e.g. scene.matterCollision
            }
        ]
    }

I did also update phaser from 3.50 to 3.55, so that may have helped.