Examples of a more Modular approach to Phaser 3 assets (sprites, etc)

[thathurtabit]

Hello all. I'm a Phaser noob and I'm working through the Phaser 3 tutorial and I'm wondering how best to split up my components - i.e. making use of ES6 import / export modules rather than creating one huge Game scene with all the logic there.

Are there any open-source, really good examples of a larger Phaser 3 game which splits everything up and shows how data, methods, functions get passed between?

So far when trying to spit my sprites using something like: 

export default class MySprite extends Phaser.GameObjects.Sprite { ... }

I'll run into a lot of:

Uncaught TypeError: Cannot read property 'ExampleMethod' of null

which can be difficult to get around, particularly when the error messages are quite vague or are referring to methods which aren't present or visible.

Thanks for any help, folks.

[samme]

http://labs.phaser.io/edit.html?src=src/plugins/custom game object.js

[samme]

3 hours ago, thathurtabit said:

Uncaught TypeError: Cannot read property 'ExampleMethod' of null

This means an expression evaluated to 

(null).ExampleMethod()

So you have to figure out where the null value came from.

[jdotr]

Without more of your code it's difficult to track down as @samme is indicating so feel free to upload a zip or point us to a gist if it's longer than is easily readable in a post.

One thing I would suggest verifying, though, is that you're actually successfully importing what you think you are. A common failure is that when you try to switch over to es6 imports is (for varying reasons) having the import fail to resolve and ending up with

import { Foo } from './some_sample_module'

"working" in that your build passes but if you were to add a console.log(Foo) statement you'd see that Foo is actually null which leads directly into:

2 hours ago, samme said:

This means an expression evaluated to 

(null).ExampleMethod()

and can be quite annoying to track down.

Good luck!

[B3L7]

In terms of examples:

Nkholski's Bootstrap is excellent.

 

I made a template that might not qualify as large scale but it has multiple modules.

[samme]

• phaser3-es6-webpack/tree/master/src/sprites
• brunch-phaser-es6/tree/master/app/scenes

[Fredrik]

I currently use two patterns to avoid having a large monolithic class with all logic. I have tried to extend Sprite and also to just have a class that includes all the objects in it. I am still not sure what the best approach is. Basically the new class is often what you would consider a Container I think so it might make more sense to actually extend Container instead of Sprite.

For extending Sprite I do something this (incomplete code but you get the idea):

export default class Enemy extends Phaser.GameObjects.Sprite {

    constructor (config) {
        super(config.scene, config.x, config.y, config.key);
        config.scene.add.existing(this);
    }

I am pretty much a noob in Phaser and not very experience in Java/TypeScript either so I don't know if this is a good approach or not. But it works for me so far

 

 

 

[ProperSag]

 

On 7/1/2018 at 3:11 PM, thathurtabit said:

rather than creating one huge Game scene with all the logic there.

Im having this issue, and i was not able to find an alternative yet.

its the sprite class responsibility to pre load, it self not his creator
inside the scene object i want to create multiple sub objects with similar structure (init/create/preload/update)
to separate logic to multiple classes

this is a design issue (its probably fixable with some sort of wrapper - need ideas though)