Search the Community

Hi everybody! Let me start off by saying that I'm pretty new to Phaser – I've been playing around with it for a bit but never made a game with it... so I'm not super-familiar with it yet. However, I have made games using CraftyJS and while that engine pales in almost all aspects when compared to Phaser, I really loved its entity component architecture. Not having to create complicated inheritance tress to share functionality among game objects that are otherwise quite diverse makes so much sense to me. Here's what I've done to add similar functionality to my Phaser project, without touching the Phaser source. I want to get your guys' opinions on it. Also, I'm not completely familiar with the terminology so I'm not sure if these things I'm adding to game objects are mixins, components, traits or something else. 1. Create GameObject constructor function GameObject will be the constructor function that every visible object in the game will use/extend. GameObject extends Phaser.Sprite and adds some methods for managing components on a game object, for example: GameObject.prototype.addComponentGameObject.prototype.removeComponentGameObject.prototype.hasComponentGameObject.prototype.requireComponent // ensures that the game object has a particular component, otherwise throws an errorCurrently, GameObject provides an update method that goes through all registered components on the instance and calls their update-methods if they are provided: GameObject.prototype.update = function() { for (var componentName in this.components) { var component = this.components[componentName]; if (typeof component.update === 'function') { component.update(); } }};2. Create a component Here's a simple movement component that requires another component called "speed" to exist on the game object (entity). var movement = autoCurry(function(entity) { this.requiresComponent('speed'); var speed = entity.speed; var cursors = entity.game.input.keyboard.createCursorKeys(); return { name: 'movement', update: function() { // prepare var velocity = entity.body.velocity; // movement velocity.setTo(0, 0); if (cursors.left.isDown) { velocity.x = -speed; } if (cursors.up.isDown) { velocity.y = -speed; } if (cursors.down.isDown) { velocity.y = speed; } if (cursors.right.isDown) { velocity.x = speed; } } };});I'm using autoCurry to make the syntax a bit more appealing. 3. Add component to a game object var Player = function(game, x, y) { GameObject.call(this, game, x, y, 'player'); this.addComponents(speed(150), movement()); game.physics.enable(this, Phaser.Physics.ARCADE);};util.inherits(Player, GameObject);What do you guys think of this approach? Obviously there are alternative ways to provide components. You might want to have components be constructor functions or plain objects instead of curried functions returning an object – I think that part is probably preference. I'm interested in the viability of using such a system with Phaser particularly. I'm looking forward to a constructive discussion, thanks for posting your thoughts! Best, Max