I am absolutely new with phaser 3.
I have installed the library with npm. Then I naively fetch the bundled file from node_modules.
<body>
<script src="./node_modules/phaser/dist/phaser-arcade-physics.js"></script>
<script src="./js/start.js"></script>
</body>
When I load index.html in the browser as file, it works fine. But now I have created a little v-host in my Apache and let it serve the files. This works too, but phaser yells at me:
Uncaught TypeError: this.texture is undefined
setFrame http://game.localhost/personwar/node_modules/phaser/dist/phaser-arcade-physics.js:138726
setTexture http://game.localhost/personwar/node_modules/phaser/dist/phaser-arcade-physics.js:138699
Image http://game.localhost/personwar/node_modules/phaser/dist/phaser-arcade-physics.js:29328
<anonymous> http://game.localhost/personwar/node_modules/phaser/dist/phaser-arcade-physics.js:168386
create http://game.localhost/personwar/js/start.js:34
[...]
DOMContentLoaded http://game.localhost/personwar/node_modules/phaser/dist/phaser-arcade-physics.js:86811
Game http://game.localhost/personwar/node_modules/phaser/dist/phaser-arcade-physics.js:154945
<anonymous> http://game.localhost/personwar/js/start.js:17
I have stolen start.js from the beginner tutorial and here it all starts:
function create () {
console.log('this', this);
this.add.image(0, 0, 'bg').setOrigin(0, 0);
...
}
I don't understand, why this.texture changes when the library is self hosted, compared to being delivered by file://. What do I need to change here?
It might be a timing problem, maybe I need to setup smth else before calling this.add.image in the create callback.
I will go on with investigating, what texture actually is.
The rule "default-src 'self'; style-src 'self' 'unsafe-inline'; object-src 'none'"
blocked this call
blob:http://game.localhost/b6ac3ad7-e25b-4b82-8d07-8f4ce6c331c3
which was the call for one of our images. This is weird and I don't get it. But the point is: no image loaded -> no texture.
Well I don't know which file your are linking. the main phaser file is called phaser.js or phaser.min.js. I think this is the root of your problem.
The easy solution is to download the phaser javascript file into your webfolder, or link it from a cdn. (https://phaser.io/download/stable)
If you (want to) use npm you will need a bundler like webpack, parcel, ... there are serval templates out there. (like this one https://github.com/photonstorm/phaser3-project-template).
btw.: I'm no expert, but I would in general never have the
node_modulesdirectory in a webserver accessible folder (if not really needed, and if you are running apache, it is probably not needed), since this could create be a potential security risk.