Multiple levels and the same code in each level

[SteveMavic]

Hi.
I have a problem with multiple levels (game states).
What can I do when, I don't want to write the same piece of code in each level over and over?
I've tried to create a function in separate js file which e.g. will set player sprite, gravity, animations or will create necessary variables etc.
And I failed this. Everything what I have got are errors.

[scofield]

You is on the right way, to can separate your game logic by creating files for each part of the game (such as hero, hero weapon and so on).

For level creating. You can create Level class and define create, update (and other functions you need) and put there code you want to repeat. And after that, use this methods (create\update) in your level stages.

Can you tell more about what errors you get.

[SteveMavic]

So, I've tried to call a function inside preload and create.

This is content of that function.

function StageCreate(){
			//	Play background music
			Music = this.game.sound.play('OutSideMine');
			Music.loopFull(1);

			this.game.physics.startSystem(Phaser.Physics.ARCADE);

			this.game.add.sprite(0, 0, 'sky');

			//	Setting up player
			this.player = this.game.add.sprite(32, this.game.world.height - 150, 'dude');
			this.game.camera.follow(player);
			this.game.physics.arcade.enable(player);
			player.body.bounce.y = 0;
			player.body.gravity.y = 500;
			player.body.collideWorldBounds = true;

			//  Animacje chodzenia w prawo i lewo
			WalkLeft = player.animations.add('left', [3, 2, 1, 0], 10, true);
			WalkRight = player.animations.add('right', [6, 7, 8, 9], 10, true);
			//	Animacje biegania w prawo i lewo
			SprintLeft = player.animations.add('sprint_left', [20, 21, 22], 10, true);
			SprintRight = player.animations.add('sprint_right', [23, 24, 25], 10, true);
			//	Animacje atakowania w prawo i lewo
			AttackRight = player.animations.add('attack_P', [12, 13, 14, 14], 10, false);
			AttackLeft = player.animations.add('attack_L', [17, 16, 15, 15], 10, false);
			AttackRight.onComplete.add(this.animStop, this);
			AttackLeft.onComplete.add(this.animStop, this);	

			player.frame = 5;

			cursors = this.game.input.keyboard.createCursorKeys();

}

I wanted to call this function in 'create' and console log said "game is not defind".

[LTNGames]

Have you setup any namespace? What variable is assigned to Phaser.Game ? From what I see your function is created in global space, which means calling 'this.' will associate itself with the window object, unless you have a game object in global space you will get the error your recieving.

You have to use the variable assigned to Phaser.Game so

// This is the variable you would use
var game = Phaser.Game(width, height, canvas, '')

so instead of calling: 

this.game.load.image('bunny', 'assets/sprites/bunny.png');

you would do something like :

game.load.image('bunny', 'assets/sprites/bunny.png');

An easy way around this would be to setup a namespace like this. You can check out the project templates here for good examples of how to set them up.  https://github.com/photonstorm/phaser/tree/master/resources/Project%20Templates/Basic

//This is a namespace, you store everything inside of this instead of filling up the global space.
var Game = Game || {};

//When you first create your game the first thing you do is this
Game = Phaser.Game(640, 800);

//What I do is this
var Game = Game || {};
Game.Phaser = Game.Phaser || {};

//Then I assign phaser to Game.Phaser
Game.Phaser = Phaser.Game()

//Then I create all functions within Game like so
Game.State_Boot = function() {
};

I end up with a tidy little object with everything I have in my Game object at my disposal.

Hope this helped in some way, I can't really know what is wrong unless I see more of your code, you can do a quick console.log(this); inside your function to see what 'this' is referring to. 

[SteveMavic]

In index.html between <script></script>

	(function() {
		var game = new Phaser.Game(1200, 600, Phaser.AUTO, '');
		game.state.add("Boot",boot);
		game.state.add("Preload",preload);
		game.state.add("Field",field);
		game.state.add("Town",town);
		/*game.state.add("GoldMine",goldMine);
		game.state.add("DiaxMine",diaxMine);
		*/game.state.start("Boot");
	})(); 

My game states (in this example field state) are written like that

var field = function(game){}

field.prototype = {
	preload: function(){
        //some stuff right here
	},
	create: function(){
        StageCreate(); // basic player animations itp.
        // other methods and functions in specific state (level)
	},
	update: function(){
        //some stuff right here
	}
}

 

[LTNGames]

Your game variable contianing Phaser.Game is inside of an IIFE, which means anything inside of it can't be accessed unless you export it or remove the IIFE altogether.

//Your way
(function() {
		var game = new Phaser.Game(1200, 600, Phaser.AUTO, '');
	})();

//Namespace way
var Game = Game || {};
Game.Phaser = Game.Phaser || {};
	(function($) {
// Assign Phaser.Game to our namespace Game.Phaser
		Game.Phaser = new Phaser.Game(1200, 600, Phaser.AUTO, '');
	})();

// Or don't do a IIFE at all
var game = new Phaser.Game(1200, 600, Phaser.AUTO, '');

If you remove the IIFE or Anonymous function altogether then you should be able to access the game variable.

[SteveMavic]

It's working,


Thank you for help