Phaser2 + Webpack + ES6 and plugin issues

[RethinkFlash]

Hello everyone! 

TLDR; I'm trying to get the plugin 'phaser-input' (made by Orange Games) to be loaded and running properly in a webpack + ES6 style environment.

I'm fairly new to the phaser game dev environment, and I really like how someone has created a boilerplate project that has ES6 style coding enabled [ phaser-es6-webpack]. But I think phaser2 by default was never meant to be coded in this style, with importing dependencies from a package manager; you are suppose to load the library and any plugins in the index.html's header area via script tags, so that it can do it's thing with the global namespace. (I didn't realize this until I got too far ahead in development)

In my project, I have added to the webpack.config.js file to make the plugin 'phaser-input' ES6 compatible, and importable into my project.

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Phaser webpack config
const phaserModule = path.join(__dirname, '/node_modules/phaser-ce/');
const phaser = path.join(phaserModule, 'build/custom/phaser-split.js');
const pixi = path.join(phaserModule, 'build/custom/pixi.js');
const p2 = path.join(phaserModule, 'build/custom/p2.js');
const phaserInput = path.join(__dirname, '/node_modules/@orange-games/phaser-input/build/phaser-input.js');

module.exports = {
	mode: 'development',
	entry: {
		app: ['babel-polyfill', path.resolve(__dirname, 'client/src/main.js')],
		vendor: ['pixi', 'p2', 'phaser', 'phaser-input', 'webfontloader'],
	},
	output: {
		pathinfo: true,
		path: path.resolve(__dirname, 'client/build/js'),
		publicPath: './js',
		filename: '[name].js',
	},
	devServer: {
		contentBase: path.resolve(__dirname, 'client'),
	},
	watch: true,
	plugins: [
		new HtmlWebpackPlugin({
			filename: '../index.html',
			template: './client/src/index.html',
			chunks: ['vendor', 'app'],
			chunksSortMode: 'manual',
			minify: {
				removeAttributeQuotes: false,
				collapseWhitespace: false,
				html5: false,
				minifyCSS: false,
				minifyJS: false,
				minifyURLs: false,
				removeComments: false,
				removeEmptyAttributes: false,
			},
			// hash: false,
		}),
	],
	module: {
		rules: [
			{ test: /\.js$/, use: ['babel-loader'], include: path.join(__dirname, 'client/src') },
			{ test: /pixi\.js/, use: ['expose-loader?PIXI'] },
			{ test: /phaser-split\.js$/, use: ['expose-loader?Phaser'] },
			{ test: /p2\.js/, use: ['expose-loader?p2'] },
			{ test: /phaser-input\.js$/, use: ['exports-loader?PhaserInput=true'] },
		],
	},
	node: {
		fs: 'empty',
		net: 'empty',
		tls: 'empty',
	},
	resolve: {
		alias: {
			phaser,
			pixi,
			p2,
			'phaser-input': phaserInput,
		},
	},
};

 

The documentation recommends that the plugin be added using [ game.add.plugin(PhaserInput.Plugin); ] But I've seen other plugins use [ game.plugins.add(PhaserInput.Plugin) ]. I have this snipped added to my game state file. (the other code has been removed for clarity) 

import Phaser from 'phaser-ce';
import PhaserInput from '@orange-games/phaser-input/build/phaser-input';

export default class Game extends Phaser.State {
	preload() {		
		this.game.plugins.add(PhaserInput.Plugin);
	}
}

 

The documentation simply shows the use of the plugin using the snipped [ var input = game.add.inputField(10, 90); ]. Where the function 'inputField' has been added to the framework.

This is where I get stuck, the plugin function (inputField) that is suppose to be added never actually gets added at all to [ game.add ]. This in results in an error.

import Phaser from 'phaser-ce';

export default class FormOverlay extends Phaser.Group {
	constructor({ game }) {
		super(game);
		this.testInput = game.add.inputField(10, 90);
	}
}

 

Is there a proper way of loading plugins in this webpack + ES6 style? I've wasted an afternoon trying to figure out how to get this plugin to work, I must be missing something here. If you know the answer to this issues, I would greatly appreciate if you can share the answer. Thanks for reading!

[mramonlopez]

Hello,

Check this issue thread:

https://github.com/orange-games/phaser-input/issues/7

Pay special attention to 

resolve: {
  extensions: ['.ts', '.js'],
  alias: {
    ...
    'phaser-input': path.join(__dirname, 'node_modules/@orange-games/phaser-input/build/phaser-input.js')
  }
},

and try using

import PhaserInput from 'phaser-input';

export default class Game extends Phaser.State {
	preload() {		
		this.game.add.plugin(PhaserInput.Plugin);
	}
}

That worked for me.

(Don't forget to add 'exports-loader' package with 'npm install exports-loader --save-dev')

[RethinkFlash]

Thank you mramonlopez! I was able to get the plugin working under a fresh project from that repository. So I can safely say that I wasn't losing my mind. But I tried this under my existing project, and it wasn't behaving the way it should be; That [inputField] function wasn't appearing after activating the plugin. There is definitely something specific to my project that is wrong, but knowing that it works under a fresh ES6 + webpack environment really puts me at ease! Thank so much again. 

I'll eventually hunt down this issue in my project

[RethinkFlash]

And I found the problem... an easy oversight on my end.

import Phaser from 'phaser-ce'; //wrong

//should be e_e

import Phaser from 'phaser'; //correct

 

My alias that was set in my webpack.config.js file wasn't matching up correctly to my imports. 

[mramonlopez]

“If there is no solution to the problem then don't waste time worrying about it. If there is a solution to the problem then don't waste time worrying about it.”