Type error on every mouse event

Phaser 3
1

Hello,
I’ve started with a Phaser 3 today and run into a brick wall right at the start.
Even after reducing the actual code to literaly nothing:

const game = new Phaser.Game({
    type: Phaser.AUTO,
    title: 'FortRise',
    scene: {
        create: create,
        preload: preload,
    },
});

function preload() {}

function create() {}

After including phaser.js and this .js file into a html file and loading it up in a browser, it throws an error on every mouse event (Move, click, release, drag…)

TypeError: this.sprite is undefined

Please, does anyone have an idea why is this happening? I can’t figure out.
Have a good day and thanks for any leads.

2

We would need to see more code to understand why this is happening. I am not sure where or how the sprite variable is being set.

3

Well… there isn’t any more code. Thats all. I can add .html (when I get home) but thats just loading Phaser.js and .js from above.
I’ll add error trace from that event as well.

4

Ok, so there’s the whole code:

main.js:

const game = new Phaser.Game({
    type: Phaser.AUTO,
    title: 'FortRise',
    scene: {
        create: create,
        preload: preload,
    },
});

function preload() {}
function create() {}

Then index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <script src="./lib/phaser.js"></script>
        <script src="./main.js"></script>
    </body>
</html>

And those typeErrors I’m getting:

TypeError: this.sprite is undefined
[phaser.js:69523:13](http://localhost:8000/lib/phaser.js)
get http://localhost:8000/lib/phaser.js:69523
getCamerasBelowPointer http://localhost:8000/lib/phaser.js:127168
hitTestPointer http://localhost:8000/lib/phaser.js:157705
update http://localhost:8000/lib/phaser.js:157489
updateInputPlugins http://localhost:8000/lib/phaser.js:66828
onMouseMove http://localhost:8000/lib/phaser.js:67028
onMouseMove http://localhost:8000/lib/phaser.js:68127

TypeError: this.sprite is undefined
[phaser.js:69523:13](http://localhost:8000/lib/phaser.js)
get http://localhost:8000/lib/phaser.js:69523
down http://localhost:8000/lib/phaser.js:68967
onMouseDown http://localhost:8000/lib/phaser.js:67006
onMouseDown http://localhost:8000/lib/phaser.js:68145

Phaser version loaded up:
Phaser v3.19.0 (WebGL | Web Audio)

5

Huh…that is really strange. Because that should just be a basic wire-up of Phaser, and you should get a black game view. Is another file possibly getting picked-up somehow? That stack trace is showing an error in onMouseMove, which you aren’t calling.

Move to another empty folder, redownload Phaser and do another setup. While I don’t think it is the problem, remove the leading dot on your src attributes in the script tags. Those are relative URLs, not local references. Follow the setup in this tutorial because I know that one works. I don’t see any problems in your code, but it may be better to follow along a known working example.

EDIT: Actually, looking at the title, it sounded like you were saying you were having an error on a mouse event. You sure don’t have any more code anywhere else? Or did you just mention the mouse event because it was in the stack trace?

6

Yes. I’ve mentioned the mouse event only because of the error trace, haven’t implemented any event myself, yet.
It was just a black empty view and error showed up after I’ve moved or clicked with a mouse inside that view.
But downloading a new phaser.js solved the issue. It still writes version 3.19.0 into console, but there are some *changes.

Like method get (The x position of this Pointer) phaser.js:69523
It used to be:

x: {

    get: function ()
    {
        return this.sprite.x;
    },

    set: function (value)
    {
        this.sprite.x = value;
    }

},

And have been changed to:

x: {

    get: function ()
    {
        return this.position.x;
    },

    set: function (value)
    {
        this.position.x = value;
    }

},

So I just *messed up… :slight_smile: Now it’s working perfectly fine.
Thanks a lot for quick response and bye.

7

Interesting. That seems pretty crazy to me because a simple wire-up file like that probably would have meant every project using that build would have failed. Crazy!

Regardless, glad you are back up and running now! Take care!

8

Right… That made me wondering.
I’ve loooked into history and it truly was just my dumb mistake. Somewhere while toying with Phaser’s objects, I must have hit rename (refactor) and WebStorm trying to look for all usage messed up even that phaser.js outside of src folder. (I’ve had a method using this.sprite at the begining and forgot about it)
Damn… being used to different languages I rely on refactor without a second though a lot and forget how dangerous it is in javascript. :blush:
My apologies.

9

Ahh, that makes a lot of sense!

By the way, if you are used to different languages (which I assume are probably strongly-typed like C#, C++ or Java if you use refactoring tools often), you may enjoy checking out Typescript. I use it for pretty much everything but the smallest JS demos. It adds a nice sheen of C#-like strict-typing to JS and it really makes refactoring much more powerful since you are explaining to the editor how everything is connected. I use it with Webstorm and it makes a lot of WS’s tools 10x more powerful. Plus, it gives you the slick import/export that makes it so much easier to organize your code. Phaser supports it very well with well-made type definition files.