search

phaserjs / phaser

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
https://phaser.io
MIT License
37.15k stars 7.1k forks source link

WebPack: Relative modules were not found #3413

Closed ExNG closed 6 years ago

ExNG commented 6 years ago

This Issue is about (delete as applicable)

It looks like WebPack cannot find the following files (which exist):

* ../shaders/TextureTint.frag in ./node_modules/phaser/src/renderer/webgl/pipelines/TextureTintPipeline.js
* ../shaders/ForwardDiffuse.frag in ./node_modules/phaser/src/renderer/webgl/pipelines/ForwardDiffuseLightPipeline.js
* ../shaders/FlatTint.frag in ./node_modules/phaser/src/renderer/webgl/pipelines/FlatTintPipeline.js
* ../shaders/BitmapMask.frag in ./node_modules/phaser/src/renderer/webgl/pipelines/BitmapMaskPipeline.js

To try it out yourself check my repo: Kong The following file contains the pahser code: src/pages/index.vue

rblopes commented 6 years ago

Hi. I've tried your project here. I'm not familiar with all the details of Quasar framework but I think these hints will take you in the right direction.

There are a few changes you'll need to perform to make your project work.

First, replace that phaser-glsl-loader with raw-loader. It is the recommended one for use with the included Phaser shaders at the moment. You'll need to update your Quasar configuration like below (don't forget to require('webpack') at the top of that file).

quasar.conf.js ```js // Configuration for your app const webpack = require('webpack') module.exports = function (ctx) { return { /* ... */ build: { /* ... */ extendWebpack (cfg) { 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.plugins.push(new webpack.DefinePlugin({ // Required by Phaser: Enable the WebGL and Canvas renderers. WEBGL_RENDERER: true, CANVAS_RENDERER: true })) } }, /* ... */ } } ```

Edit you index.vue to move the preload and create methods inside the scene object. The script will look like this.

index.vue ```js ```

One thing I couldn't figure out is why a new game instance is added to the page every time you edit the index.vue component, though. I guess HMR is not working properly. Edit: Tried with the mounted and beforeDestroy hooks to refresh the game, but that could be improved.

ExNG commented 6 years ago

Thank you merry much that relly helped me! :)