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.16k stars 7.1k forks source link

WEBGL_RENDERER is not defined #3121

Closed gilshallem closed 6 years ago

gilshallem commented 6 years ago

Hi, I am trying to use phaser with meteorjs

i installed phaser via: meteor npm install phaser@beta

import Phaser from 'phaser';

Browser (chrome) console:

modules.js?hash=6fc3c9ad85535601fac3c665f7860457ac773cb3:55136 Uncaught ReferenceError: WEBGL_RENDERER is not defined at SpriteRender.js (modules.js?hash=6fc3c9ad85535601fac3c665f7860457ac773cb3:55136) at fileEvaluate (modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:343) at require (modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:238) at Sprite.js (modules.js?hash=6fc3c9ad85535601fac3c665f7860457ac773cb3:55061) at fileEvaluate (modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:343) at require (modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:238) at Sprite3D.js (modules.js?hash=6fc3c9ad85535601fac3c665f7860457ac773cb3:54849) at fileEvaluate (modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:343) at require (modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:238) at Camera3D.js (modules.js?hash=6fc3c9ad85535601fac3c665f7860457ac773cb3:91298) SpriteRender.js @ modules.js?hash=6fc3c9ad85535601fac3c665f7860457ac773cb3:55136 fileEvaluate @ modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:343 require @ modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:238 Sprite.js @ modules.js?hash=6fc3c9ad85535601fac3c665f7860457ac773cb3:55061 fileEvaluate @ modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:343 require @ modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:238 Sprite3D.js @ modules.js?hash=6fc3c9ad85535601fac3c665f7860457ac773cb3:54849 fileEvaluate @ modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:343 require @ modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:238 Camera3D.js @ modules.js?hash=6fc3c9ad85535601fac3c665f7860457ac773cb3:91298 fileEvaluate @ modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:343 require @ modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:238 PerspectiveCamera.js @ modules.js?hash=6fc3c9ad85535601fac3c665f7860457ac773cb3:91212 fileEvaluate @ modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:343 require @ modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:238 index.js @ modules.js?hash=6fc3c9ad85535601fac3c665f7860457ac773cb3:90100 fileEvaluate @ modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:343 require @ modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:238 phaser.js @ modules.js?hash=6fc3c9ad85535601fac3c665f7860457ac773cb3:37824 fileEvaluate @ modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:343 require @ modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:238 App.js @ App.js:1 fileEvaluate @ modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:343 require @ modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:238 main.js @ main.js:1 fileEvaluate @ modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:343 require @ modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:238 (anonymous) @ app.js?hash=6ab7966cdfd3391f2aedb0b14a61ef9b667c5704:740

rblopes commented 6 years ago

You'll need to define both WEBGL_RENDERER and CANVAS_RENDERER booleans, somewhere in your app configuration, to enable either renderer for you game.

I don't know how you'd do that in Meteor as I've never tried it myself. I know that for Webpack you'll face a similar problem, but you can solve it by adding webpack.DefinePlugin to define those two values in the configuration.

bradharms commented 6 years ago

I tried to do exactly that (use webpack.DefinePlugin) but it only seems to work in my own project's source files and NOT anything from node_modules. I couldn't find any literature on this but I think this behavior is by design, since otherwise it would run the risk of corrupting third-party code.

EDIT: I tried it in a different project and now it works...

ghost commented 6 years ago

Why do these need to be global variable in the first place? Using process.env, part of the config, etc. Anything is better than relying on a webpack plugin.

photonstorm commented 6 years ago

These are not global variables. At no point do they ever get exported into the global scope. They're build time flags that are replaced in the final bundle with simple booleans. What they provide are build time conditional insertion of code, something that ES modules alone cannot do.

Even if we stored the values inside process.env instead it would still need to use webpack.DefinePlugin to expose them. If this 'spaghetti' is good enough for Angular's build process, it's good enough for us.