Search the Community

I am using Phaser 2 and I am trying to get it working with quasar framework, but I just keep stumbling into errors. I suspect it may be a webpack configuration issue, coupled with package incompatibility issues. The relevant section of my `quasar.conf.js` file is as follows const webpack = require('webpack'); const path = require('path'); const phaserModule = path.join(__dirname, '/node_modules/phaser/'); const p2 = path.join(phaserModule, 'build/custom/p2.js'); const phaser = path.join(phaserModule, 'build/custom/phaser-split.js'); const pixi = path.join(phaserModule, 'build/custom/pixi.js'); module.exports = function (/* ctx */) { return { .... extendWebpack(cfg) { cfg.resolve.extensions = ['.js', '.vue', '.json']; cfg.resolve.alias.p2 = p2; cfg.resolve.alias.pixi = pixi; cfg.resolve.alias.phaser = phaser; cfg.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules|quasar)/, }); cfg.module.rules.push({ test: /\.(frag|vert)$/, // loader: 'gl-fragment-loader' loader: 'raw-loader', }); cfg.module.rules.push({ test: /pixi\.js/, loader: 'expose-loader', options: { exposes: { globalName: 'PIXI', moduleLocalName: 'PIXI', override: false, }, }, }); cfg.module.rules.push({ test: /phaser-split\.js$/, loader: 'expose-loader', options: { exposes: { globalName: 'Phaser', moduleLocalName: 'Phaser', override: false, }, }, }); cfg.module.rules.push({ test: /p2\.js/, loader: 'expose-loader', options: { exposes: { globalName: 'p2', moduleLocalName: 'p2', override: false, }, }, }); cfg.plugins.push(new webpack.DefinePlugin({ // Required by Phaser: Enable the WebGL and Canvas renderers. WEBGL_RENDERER: true, CANVAS_RENDERER: true, })); }, }, }; }; My `package.json` file is as follows (Please ignore the use of Phaser and Phaser-ce. I know one can be used in place of the other, but I have been trying different configurations) { ... "dependencies": { "@quasar/extras": "^1.0.0", "amazon-cognito-identity-js": "^4.5.4", "axios": "^0.18.1", "core-js": "^3.6.5", "cross-fetch": "^3.0.6", "phaser": "^2.4.6", "phaser-ce": "^2.18.0", "quasar": "^1.0.0", "vue-paystack": "^2.0.4", "vue-social-sharing": "^3.0.5", "vue-worker": "^1.2.1" }, "devDependencies": { "@quasar/app": "^2.0.0", "@quasar/quasar-app-extension-dotenv": "^1.0.5", "babel-eslint": "^10.0.1", "eslint": "^6.8.0", "eslint-config-airbnb-base": "^14.0.0", "eslint-loader": "^3.0.3", "eslint-plugin-import": "^2.20.1", "eslint-plugin-vue": "^6.1.2", "expose-loader": "^1.0.0", "raw-loader": "^4.0.2", "script-loader": "^0.7.2" }, ... } My gameplay page is as follows <template> <div> <div :id="containerId"></div> </div> </template> <script> /* eslint-disable no-unused-vars */ import 'pixi'; import 'p2'; import Phaser from 'phaser'; /* eslint-enable no-unused-vars */ export default { name: 'game', data() { return { game: null, containerId: 'gameScreen', }; }, props: { width: { type: Number, default: document.body.clientWidth, }, height: { type: Number, default: document.body.clientHeight, }, }, mounted() { const self = this; if (this.game === null) { debugger; this.game = new Phaser.Game(this.width, this.height, Phaser.CANVAS, this.containerId, { preload: function preload() { self.preload(this); }, create: function create() { self.create(this); }, update: function update() { self.update(this); }, }); } }, methods: { preload(game) { ... }, create(game) { ... }, upload(game) { ... } }, }; </script> The most recent error (there have been many) is shown below

tutorial for using pixi.js to make jigsaw game with webpack. try it online : http://testactivity.goooku.com/ishop-demo/jigsaw/index.html source code : https://github.com/proudcat/pixi-jigsaw

Hi guys I spent some time creating a small boilerplate to use the new Phaser 3 with ES6 and Webpack 4. Plain webpack 4 Boilerplate with Babel, SASS and Phaser3 on board Some cool features: webpack 4, chunks and minifies; webpack-dev-server, development server that provides live reloading and fast in-memory access to assets; @babel/core and @babel/preset-env; eslint; updated, tried to use the latest version of everything (until this post ). I hope it helps, any sugestions, feedbacks or pull requests would be amazing!