How does game structure differ from Flixel AS3?

[rungo73]

When using Flixel I would have a gamestate, a player, enemy, perhaps coins etc as separate classes. Maybe a registry that stored assets etc.

 

I had been tooling around with ImpactJS and that framework uses a similar  structure.

 

How do I implement a structure like this with a Phaser game? 

 

I only want the the index.html  to  set the css etc and load the game.

[rich]

Yes I ran out of time to incorporate an example into 1.1, but it does exist in the repo if you have a look in the folder: wip\examples\state

[rich]

Oh and there are examples of how to use extended sprites in the Examples Suite (sprite extend 1 and 2 iirc). But I will definitely put something together for everyone that bundles all of these things together.

[rungo73]

OK cool, that's enough to get me started.

[rungo73]

Rich - thank you for pointing me to those examples.

Can anyone show me the best way to implement into a module pattern?

[gsgames]

@Rich, Any chance you could redo your Nutmeg Flixel tutorial for Phaser?

 

That would really help those of us coming to Phaser from Flixel.

[rungo73]

Yes!

[rich]

Actually that's a really neat idea, yes I'll definitely do that Nutmeg did rely on some of my Flixel Power Tools that aren't in Phaser yet, most specifically around controls, but otherwise it should be a pretty easy conversion.

[gsgames]

Excellent, Thanks!

[isfuturebright]

@Rich I'm trying to follow the example on wip/example/state but I keep getting the error:

 

1. Uncaught TypeError: Type error phaser.js:2969
   1. PIXI.CanvasRenderer.renderDisplayObjectphaser.js:2969
   2. PIXI.CanvasRenderer.renderphaser.js:2885
   3. Phaser.Game.updatephaser.js:10334
   4. Phaser.RequestAnimationFrame.updateRAFphaser.js:16157
   5. _onLoop

 

 

I have just a simple state:

var SoccerGame = {};SoccerGame.MenuScreen = function (game) {    this.game = game;};SoccerGame.MenuScreen.prototype = {    preload: function ()     {        this.game.load.image('bet', 'assets/bet_50x20.png');        //this.game.load.image('nocooper', '../assets/pics/1984-nocooper-space.png');        //this.game.load.image('touhou', '../assets/pics/aya_touhou_teng_soldier.png');        //this.game.load.image('cougar', '../assets/pics/cougar_ihsf.png');        //this.game.load.spritesheet('button', '../assets/buttons/button_sprite_sheet.png', 193, 71);    },    create: function ()     {         this.ball = this.game.add.sprite(10, 10, 'ball');        console.log('Preloade finished, lets go to the main menu automatically');       // this.game.state.start('GameScreen');    }}

Any ideas? 

 

I changed from Phaser.CANVAS to Phaser.AUTO and it worked... Funny cause when I had everything directly on the index.html I didn't have any problem with Phaser.Canvas. Btw I'm having all this on Chrome. 

Edited October 28, 2013 by isfuturebright

[rich]

I've just uploaded a Basic Project Template for Phaser. It shows how to use Boot, Preloader, MainMenu and Game states and swap between them, all fully commented.

 

It's in the dev branch of Phaser: https://github.com/photonstorm/phaser/tree/dev

 

(in resources/Project Templates)

 

But you can grab the files now and use them.

 

Also make sure you upgrade to 1.1.1 master.

[isfuturebright]

Thanks @rich! I was checking it out and came across this:

BasicGame.Preloader = function (game) {	this.background = null;	this.preloadBar = null;	this.ready = false;};

I saw you pass a reference to "game" in all states and then reference as this.game. I was just wondering if it's necessary to do since the "game" variable is global, right? Also you're never doing this.game = game, how come this.game works later on the state functions?

[jjimenez]

Hi rich, I am new using phaser, I have tried your new "Project template", and I got an error about "BasicGame is not defined". It is necessary to define "BasicGame = {}" before first use in Boot.js, right? maybe it's a tiny bug of the template?

[rich]

Yeah true, have added it to the template That's what I get for "coding" blind at 3am.

[rich]

Thanks @rich! I was checking it out and came across this:

BasicGame.Preloader = function (game) {	this.background = null;	this.preloadBar = null;	this.ready = false;};

I saw you pass a reference to "game" in all states and then reference as this.game. I was just wondering if it's necessary to do since the "game" variable is global, right? Also you're never doing this.game = game, how come this.game works later on the state functions?

 

The game variable isn't global (it's local to an anonymous function) which is why I do it, however you could make it global and not need to do this yes.

 

States have a variable called 'game' set in them automatically, which is why it works later on without declaring it in the constructor. I guess I just put it there to remind you that that is what's actually being passed in.

[haden]

I am getting the following error:

Uncaught TypeError: Cannot call method 'image' of undefined

In this line:

BasicGame.Boot.prototype = {	preload: function () {		this.load.image('preloaderBackground', 'images/preloader_background.jpg');

[haden]

 

I am getting the following error:

Uncaught TypeError: Cannot call method 'image' of undefined

In this line:

BasicGame.Boot.prototype = {	preload: function () {		this.load.image('preloaderBackground', 'images/preloader_background.jpg');

My bad, I was using an old version of Phaser  Working fine now.

[sergil]

If in menu I have three buttons which opens the same game with little rule variation, can I call the state 'game', passing it a variable that identifies the game variant?

 

How can this be programmed?

[rich]

For that I would just use the global object, i.e.: 

BasicGame = {  startParam: 0}

Then in your MainMenu just set BasicGame.startParam = x, and in your Game state you can check the value of it. You can use it like a global storage area. I use it for things like persisting a  games score, level reached, have they seen the tutorial, that kind of thing.