Search the Community

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!

Hi guys, I have created some input fields in the DOM and I place them above my phaser game with css. In my game I use game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; so I use media queries to control the position of the input fields. I do it like this => #inputs { position: absolute; top: 30%; left: 40%; width:100%; } @media only screen and (max-width: 560px) { #inputs{ top: 35%; left: 20%; transform: scale(0.8,0.8); } } But it is almost impossible to follow the Phaser scaling!If you have any tips, please share!