Search the Community

Hi, Phaser devs! I'm developing a game using Phaser with TypeScript and what I'm trying to achieve is this: var component:AwesomeComponent = actor.getComponent<AwesomeComponent>(); I know there's a workaround by constructing objects of type T. But I don't like it because I'd probably need to define tons of different constructors to represent all differents kinds of components. What I'm doing so far is passing a string with the type (of course a number would be better, but I'm still prototyping): getComponent<T>(componentType:string): T { for (let i = 0; i < this.components.length; i++) { if (componentType == this.components[i].componentType) { return <T><any>this.components[i]; } } return undefined; } It works, but the result is not good, you have to type the class name twice: var animComp = actor.getComponent<AnimationComponent>("AnimationComponent"); Any suggestions on how to solve it? I know there`s a way to do it, because Unity does exactly that in JavaScript. Thank you for your time!

Hi, I'm learning phaser and got this issue. The collision between the player and the map is not working since I moved the player to its own file (player.js) as an object Im calling this in the update function on the play.js game.physics.arcade.collide(this.player.sprite, this.layer); I'm creating the tile map in the play.js createWorld: function () { this.map = game.add.tilemap('map'); this.map.addTilesetImage('tileset'); this.layer = this.map.createLayer('Tile Layer 1'); this.layer.resizeWorld(); this.map.setCollision(1); }, Here's the player.js file function player() { this.preload = function () { }; this.create = function () { this.sprite = game.add.sprite(game.width / 2, game.height / 2, 'atlas', 'player01'); this.sprite.anchor.setTo(0.5, 0.5); game.physics.arcade.enable(this.sprite); this.sprite.body.gravity.y = 500; this.cursor = game.input.keyboard.createCursorKeys(); }; this.update = function () { }; } Originally the collision worked well before putting the player in a different file, but I can't make the collision work now.

Hello! At the beginning of the year, I have a plugin to manage behaviors (based on construct 2) in Phaser games. Now I'm creating some behaviors. Please feel free to help me with testing or feedback. The plugin: https://github.com/luizbills/phaser-behavior-plugin (How to install and use on README) Some behaviors: https://github.com/luizbills/phaser-behaviors (see the Pull Requests too) Check out demo game using "bevahiors": https://github.com/luizbills/phaser-platform-game (see the file game.js)

Hi, in a game I'm developing I'm trying to implement the entity component model in such a way that I can have units get their components information from the tiledMap file, I load the components from the Json like so if (object.properties.components !== "") { object.properties.components.split(",").forEach(function (componentName) { entity.addComponent(new FYP.Components[componentName](this)); }, this); } FYP.Entity.prototype.addComponent = function (component) { 'use strict'; // Add component data to the entity // NOTE: The component must have a name property (which is defined as // a prototype protoype of a component function) this.components[component.name] = component.name; return this; }; FYP.Components.PlayerInputComponent = function () { 'use strict'; this.cursors = null; return this; }; FYP.Components.PlayerInputComponent.prototype = new FYP.Components.PlayerInputComponent(); FYP.Components.PlayerInputComponent.prototype.name = 'PlayerInputComponent'; FYP.Components.PlayerInputComponent.prototype.type = 'Input'; FYP.Components.PlayerInputComponent.prototype.constructor = FYP.Components.PlayerInputComponent; FYP.Components.PlayerInputComponent.prototype.initialize = function (actor) { 'use strict'; this.cursors = actor.game.keyboard.createCursorKeys(); this.cursors.leftHand = this.keyboard.addKey(Phaser.Keyboard.X); this.cursors.rightHand = this.keyboard.addKey(Phaser.Keyboard.Z); this.cursors.pause = this.keyboard.addKey(Phaser.Keyboard.P); }; FYP.Entity = function (game, position, spriteKey) { 'use strict'; Phaser.Sprite.call(this, game, position.x, position.y, spriteKey); this.commands = []; this.components = []; // Set the pivot point for this sprite to the center this.anchor.setTo(0.5, 0.5); return this; }; FYP.Entity.prototype = Object.create(Phaser.Sprite.prototype); FYP.Entity.prototype.constructor = FYP.Entity; FYP.Entity.prototype.update = function () { 'use strict'; if (this.components) { this.components.forEach(function (component) { component.update(); console.log(component); }, this); } this does not work however, and even though Entity.components seems to contain all the appropriate components the array always seems to have a length of 0 so I can't traverse it to execute the update functions

Hi everyone, A few weeks ago Ezelia started a thread about ECS and HTML5 games. As a big fan of this pattern, I decided to build and release my own engine. It is called makr.js and is available on Github (https://github.com/ooflorent/makrjs) under MIT license. A basic sample is available into examples/. The library must be build using grunt in order to test the sample. Any feedback would be appreciated! Update (2015-01-06): Version 2 is under active development (more information) Feedback is welcome!

Hello, I am trying to make an entity class which holds the textures, player data, etc. I keep getting "Uncaught TypeError: undefined is not a function" in chrome which I am not sure how to fix it. Works perfectly in VS2013. This is a typescript project. GameState.Ts: module TinyRpg.State { export class GameState extends Phaser.State { public _player: TinyRpg.Entity; constructor() { super(); } preload() { this._player = new TinyRpg.Entity(this.game, EntityType.Player, 0); } render() { this._player.draw(); } }} Entities.Ts: enum EntityType { Player, Enemy, Npc,}module TinyRpg { export class Entity extends Phaser.Sprite { public name: string=""; public minHealth: number = 0; public maxHealth: number = 0; public minXp: number = 0; public maxXp: number = 0; public strength: number = 0; public defense: number = 0; public evade: number = 0; public luck: number = 0; public unitID: number = 0; public _id: string; public game: Phaser.Game; constructor(game: Phaser.Game, entityType: EntityType, unitID: number) { super(game, 0, 0, ''); this.game = game; this.unitID = unitID; if (entityType == EntityType.Player) this.key = 'player'; else if (entityType == EntityType.Enemy) this.key = 'enemy'; else if (entityType == EntityType.Npc) this.key = 'npc'; } draw() { this.game.add.image(0, 0, this.key); } }}

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

This isn't necessarily a Phaser- specific question, but I'm just curious about the patterns that are being leveraged in the Phaser community.. In my current project, I'm following the simple and common structure that can be seen in things like XNA. That is, I have my entities acting as wrappers for the phaser sprite something like this: entities/foo.js FooEntityFactory = function(someInitParams) { //some initialization code return { sprite: game.add.sprite(10, 20, 'sprite1'); update: function(game) { //some update code } };};And then I can keep my states relatively tidy by not cluttering it with entity logic and leaving more room for state-specific logic: states/bar.js BarState = { entities: [], create: function() { this.entities.push(FooEntityFactory()); }, update: function(game) { this.entities.forEach(function(entity) { entity.update(game); }; }};However, I'm trying to get some ideas on out how to augment things with an Entity-Component-System pattern. Has anyone else organized their code in such a way that that utilizes this pattern? How about EC?

Hi folks. I've been a long time follower of PhotonStorm in the Flash world. Played plenty of their games and such. I've been working on a Flash-to-JS port of a game of mine. Currently it uses RequireJS, EaselJS and the JS port of the Ash Entity Framework. It works OK but EaselJS a) doesn't seem to be all that performant and doesn't render at all on any iOS device or via PhoneGap. I'm wondering if any folks here have had any luck using Phaser or Pixi along with RequireJS and as a bonus question, maybe used it with Ash? The things that I loved about EaselJS was the virtual parity in terms of APIs with Flash's displayObject. Coming from a flash development background, I felt at home with most of the APIs. I have dug around in Phaser's code but the API docs don't render for me. Any thoughts on this? Thanks in advance. Johnny

Heres the second tutorial for using Metrix.js along with Three.js, this tutorial explains the basics of how the Metrix.js entity system works and how to create objects/entities. In the tutorial you will learn how to create a Metrix.Object and a update callback to go with it to rotate the cube from our last tutorial. You can checkout the tutorial here http://www.psych.gs/wordpressblog/metrix-js-tutorial-1-entitiesobjects-and-rotating-the-cube/ And heres what you should have once you finish the tutorial

I've been into PlayCraft Labs game engine and found it quite nice. It utilize an Entity-Component-System framework with several components and systems ready to use by the author, such as particles, physics, effects, etc. Check it out here. To get access to the codes and documentation, you'll need to sign up.

I've ported the Ash Framework to Javascript and it can be found on github at: http://brejep.github.io/ash-js/. Ash is a high-performance entity system framework for game development originally written in Actionscript 3. It organizes code in an interesting way that is reminiscent of data-driven programming. Those of you with backgrounds in Flash and Actionscript may know the Ash Framework already but more information can be found at http://www.ashframework.org/. There are a couple of good introductory articles there as well as links to other ports and demos. Hope this is useful to some of you. Cheers, Brett