Current techniques for modularizing game code with ES6?

[carpetfizz]

Hello!

I just started playing around with Phaser today and I'm enjoying it a lot. I come from a frontend / UI engineering background so I'm used to modularizing my components and tying them together using require statements. So far, all the examples I've seen in Phaser are all written in a single file which makes me uncomfortable if my game is to become more complicated. For example I have a group called "ships" which can all shoot "weapons" I want each ship to have properties like current ammo, health, player_id, etc. However I've only been able to define them this way.

ships = game.add.physicsGroup();
// ships.enableBody = true

/* SET UP PLAYER */
player = ships.create(0, 0, 'ship');
player.anchor.setTo(0.5, 0.5);
game.physics.arcade.enable(player);

/* SET UP LASER */
laser = game.add.weapon(30, 'bullet'); // fire 30 shots every 100ms
laser.bulletKillType = Phaser.Weapon.KILL_DISTANCE;
laser.bulletKillDistance = 500;
laser.bulletRotateToVelocity = true;
laser.bulletSpeed = 600;
laser.fireRate = 100;
laser.trackSprite(player, 0, 0, true);

Now I would ideally like to have something like this:

class Ship {
    constructor(x, y){
        ships.create(x, y,'ship');
        ...
        health = 500;
        armor = 600;
        ammoCapacity = 1000;
        currentAmmo = 1000;
    }
}

But currently I have to declare a ton of global variables. I found the phaser-es6-boilerplate. Is this is the standard and should I be safe following the paradigms expressed there?

Thanks for any feedback!

[mattstyles]

Phaser is highly modular in code organisation, check out the repo, its the build process that concats it into one file, as is the norm, to be honest if you're actually used to using commonJS module spec you'd know this already, but that's beside the point. The examples tend to be single files because its clearer to a wider audience, not everyone uses a module system.

7 hours ago, carpetfizz said:

But currently I have to declare a ton of global variables

Nope, just use whatever module system you currently have, there's no need for any globals at all, unless you want them.

7 hours ago, carpetfizz said:

I found the phaser-es6-boilerplate. Is this is the standard and should I be safe following the paradigms expressed there?

Its not a standard no, not everyone uses a module system, but I think that boilerplate is well done and would be a great starting point. I have an alternative here, to offer some perspective.

There is no right or wrong way, just ways that work and ways that don't.

Phaser is a framework with a large scope so of course it implies some opinions, nothing wrong with that, but your code is still yours to write.

In your example you've separated out your code, simply split that out into modules and import them, using the same techniques you use in your other UI/frontend work, there is no difference, if you've used Angular, Ember, Backbone (or even React, although that is not a framework) then its all the same as consuming Phaser. You might want to make a decision over making your game instance a global, a singleton, or pass it around, up to you, often its easiest to leave it as a global but, again, there's no restriction here, if you don't want to risk any globals then just import your instantiated instance where necessary. 

[carpetfizz]

Thank you so much @mattstyles I appreciate the perspective. I think I'll just get to hacking the way I perceive the modules to work and then worry about potential problems.