javascript - 尝试让 Phaser 2 在 Quasar 上工作时出现浏览器错误
问题描述
我正在使用 Phaser 2,我试图让它与 quasar 框架一起工作,但我只是不断地遇到错误。我怀疑这可能是 webpack 配置问题,加上包不兼容问题。
我的文件的相关部分quasar.conf.js
如下
...
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,
}));
},
},
};
};
我的package.json
文件如下(请忽略Phaser和Phaser-ce的使用。我知道可以用一个代替另一个,但我一直在尝试不同的配置)
{
...
"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"
},
...
}
我的游戏页面如下
<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>
最近的错误(有很多)如下所示
解决方案
对于和我有同样挑战的人,我想通了。我只需要phaser-ce
和expose-loader
包。我删除了phaser
,raw-loader
和script-loader
包。我更新的Package.json
文件看起来像这样
"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-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"
},
quasar.conf.js
不过,在文件中进行了一些更改。options.exposes
我更改了暴露加载器对象的 globalName 属性。该moduleLocalName
属性是可选的,因此我将其删除。更新后的文件如下所示:
/*
* This file runs in a Node context (it's NOT transpiled by Babel), so use only
* the ES6 features that are supported by your Node version. https://node.green/
*/
// Configuration for your app
// https://quasar.dev/quasar-cli/quasar-conf-js
/* eslint-env node */
/* eslint func-names: 0 */
/* eslint global-require: 0 */
const webpack = require('webpack');
const path = require('path');
const phaserModule = path.join(__dirname, '/node_modules/phaser-ce/');
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: /pixi\.js/,
loader: 'expose-loader',
options: {
exposes: {
globalName: 'window.PIXI', // changed
override: false,
},
},
});
cfg.module.rules.push({
test: /phaser-split\.js$/,
loader: 'expose-loader',
options: {
exposes: {
globalName: 'window.Phaser', // changed
override: false,
},
},
});
cfg.module.rules.push({
test: /p2\.js/,
loader: 'expose-loader',
options: {
exposes: {
globalName: 'window.p2', // changed
override: false,
},
},
});
cfg.plugins.push(new webpack.DefinePlugin({
// Required by Phaser: Enable the WebGL and Canvas renderers.
WEBGL_RENDERER: true,
CANVAS_RENDERER: true,
}));
},
...
},
};
};
文件中发生了最大的变化gameplay.vue
。更新后的文件如下
<template>
<div>
<div id="gameScreen"></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',
game: null,
width: null,
height: null,
};
},
mounted() {
// putting this here ensured the accurate width and height were calculated
this.width = document.body.clientWidth;
this.height = document.body.clientHeight;
const self = this;
if (this.game === null) {
// this.width and this.height were returning undefined
this.game = new Phaser.Game(self.width, self.height, Phaser.CANVAS, "gameScreen", {
preload: function preload() {
self.preload(this);
},
create: function create() {
self.create(this);
},
update: function update() {
self.update(this);
},
});
}
},
methods: {
// notice the game object, as opposed to the game parameter. This caused the program to silently break. The `this` parameter passed in the functions belong to the Phaser.Game instance and thus `this.game` also had the same properties in some cases as `this`, causing the silent bug.
preload({ game }) {
...
},
create({ game }) {
...
},
upload({ game }) {
...
}
},
};
</script>
它现在完美运行。
推荐阅读
- python - Python 异步 Azure Blob 上传
- r - 如何扩大y轴刻度
- python - 使用较大样本的 NumPy 随机抽样比较小样本产生的唯一元素更少
- angular - 如何设置自定义离子选择和离子选择选项的数字输入限制
- aws-glue - AWS Glue 2.0,本地pyspark开发,测试混乱
- google-cloud-platform - 如何从 Apache Beam(谷歌云数据流)中的列字符串中删除特殊字符,包括逗号、引号
- tensorflow - 动态 RNN 在 Eager 模式下工作于模棱两可的形状张量,但不适用于图形模式
- actions-on-google - 意图中的 Google Action 自定义名称
- numpy - numpy - 为什么均值和 SD 对于相同的值不稳定?
- flutter - 允许在新的集成测试中运行整个测试文件夹——就像普通的单元测试一样