Player selection

[Sawyer]

I'm making a simple side scrolling game that allows the player to choose their character at the beginning.

 

Each character is from a different spritesheet, having different frames and sounds for each possible animation.

 

How would I go about persisting this selection throughout the game?

 

In an OOP world, I would make a Player class and inherit it into objects of each possible characeter, overriding the methods for each action the player can make, passing the chosen action between classes.

 

How can I do this in Phaser/JS world?

 

I'm guessing I do something along the same lines by creating a custom object, but I'm not sure exactly how to go about this.

 

Any help will be appreciated.

[Skeptron]

Well, JS is OOP so you can do exactly what you say. Phaser is just a framework using JS, so it's using classes and objects as well. 

 

You can check this example of how to extend Phaser.Sprite : http://phaser.io/examples/v2/sprites/extending-sprite-demo-1

Or this one : http://phaser.io/examples/v2/sprites/extending-sprite-demo-2

[Sawyer]

Well, JS is OOP so you can do exactly what you say. Phaser is just a framework using JS, so it's using classes and objects as well. 

 

You can check this example of how to extend Phaser.Sprite : http://phaser.io/examples/v2/sprites/extending-sprite-demo-1

Or this one : http://phaser.io/examples/v2/sprites/extending-sprite-demo-2

 

Thanks for the reply Skeptron.  I looked at the examples but I still can't figure out what I'm trying to do.

 

My scenerio:

 

In my game state I have a player variable, I want this to be declared as whatever character is chosen in the previous state, say char1, char2 or char3.

 

I want to be able to simple call 

player.moveLeft( );

which will call the appropriate object's function.

 

I've looked at the example but since they're just recreating the same object, I'm not really sure how to go about it.

 

Would it work by serialising the selected object into LocalStorage then calling it in the game.js?

[AzraelTycka]

Hello,

 

can't you just go with a "global" (global over all states doesn't need to be global in declaration) object and set your playr there?

 

Let's say you have something like this:

var game = new Phaser.Game(w, h, Phaser.AUOT, 'gameDiv');

Then you have some states, doesnt' really matter which or how many. In one of these states your player pick a character and you just store it in an object such as this:

game.selectionState = {// state scope variable - can be called only from inside the state scope it's currently declared atvar newPlayer = {left: function() {};right: function() {};health: 100;alive: true;// and so on}// game scope property - can be called from anywhere (well anywhere the game is in scope)game.player = newPlayer;}

Then switch from let's say menu state to your game state and then to your first stage state and in all these states you can always access your player as game.player (or simple this.player depends on how your structure is). Just be careful about clearing states during state transition.

 

Although I'm not sure if I caught what is giving you troubles correctly. If not, then just pretend like I was never here and I'l vaporize somewhere else.. ;-)

[Sawyer]

Thanks AzraelTycka, this may help solve my problem.  I never thought about setting it globally.  I will try this tomorrow

[zatch]

Hi Sawyer,

 

Setting a global should work as a simple solution, but if you want to take another crack at understanding object extension with Phaser, feel free to take a look at my recent Ludum Dare entry source code here: https://github.com/zatch/pocket-person

 

I use RequireJS in this example to help me manage dependencies (just a convenience, but worth mentioning, in case you're confused about it). This is how I organize my code into multiple files (i.e. 1 class per file).

 

Here's what you might need to know to follow the flow of the code:

1. index.html triggers RequireJS to execute my main.js file
2. main.js some some RequireJS intiialization, then creates and starts a new Phaser Game, as defined in game.js
3. game.js does some preloading and setup, then loads my Play state, as defined in states/play.js -- this is where the magic starts happening
4. in states/play.js, check out the first handful of lines in the create() function; the second thing I do there is create a new instance of my custom Person class, as defined in person.js
5. If you look at person.js, you'll notice I do a couple things similar to the samples Skeptron posted:
   

   // Initialize spritePhaser.Sprite.call(this, game, x, y-game.height, 'person');

   and then:

   Person.prototype = Object.create(Phaser.Sprite.prototype);Person.prototype.constructor = Person;Person.prototype.update = function () {        ...        // Call up!    Phaser.Sprite.prototype.update.call(this);};

From there, you could easily add a moveLeft() function like this:

Person.prototype.moveLeft = function () {    this.body.velocity.x = -100;};

I hope this helps you understand how object extension works with Phaser! I know my use of RequireJS could be confusing if you aren't already familiar, so sorry if that's in the way of your understanding.