Controls through multiple levels

[weo_af]

I am very much new to Phaser and Game Development in general and I had a quick questions about player controls through multiple states.

 

I recently made a small "game" that had a player walking through different levels that I created using different states. But I just copied and pasted the code for movement in the update function for each different state. I assume there is a better way to do this, maybe in a separate function somewhere, but where? 

 

Any help would be greatly appreciated.

[weo_af]

Okay I've been trying to work this out on my own and this is what I have so far.

 

In my MainMenu State I have:

BasicGame.Player = function (game) {};BasicGame.Player.prototype = {	create: function (game, x, y) {		this.test = "new player created";		console.log(game);		this.jumpSound = game.add.audio('jump');		this.player = game.add.sprite(x, y, 'player');        game.physics.arcade.enable(this.player);        this.player.body.collideWorldBounds = true;        this.player.body.gravity.y = 1000;        this.player.animations.add('left', [1, 2, 3, 4, 5, 6, 7, 8], 10, true);        this.player.animations.add('right', [9, 10, 11, 12, 13, 14, 15, 16], 10, true);        this.player.frame = 17;        return this.player;	},	update: function (cursors) {		this.player.body.velocity.x = 0;        this.player.body.velocity.x = 0;        console.log(this.game);        if(cursors.left.isDown) {            this.player.body.velocity.x = -150;            this.player.animations.play('left');            this.direction = 'left';        }        else if(cursors.right.isDown) {            this.player.body.velocity.x = 150;            this.player.animations.play('right');            this.direction = 'right';        }        else if(cursors.down.isDown && this.player.body.onFloor()) {            if(this.direction === 'left') {                this.player.frame = 18;            }            else if(this.direction === 'right') {                this.player.frame = 19;            }        }        else {            this.player.animations.stop();            if(this.direction === 'left') {                this.player.frame = 0;            }            else if(this.direction === 'right') {                this.player.frame = 17;            }        }        if(cursors.up.isDown && this.player.body.onFloor()) {            if(!this.jumpSound.isPlaying){                this.jumpSound.play();            }            this.player.body.velocity.y = -400;        }	}}

And then in my Game state creat function I have

this.player = BasicGame.Player.prototype.create(this.game, 20, 150);

And in the update function I have 

BasicGame.Player.prototype.update(this.cursors);

It's working pretty well but I'd definitely be interested in knowing if there is a better way to achieve this.

[fariazz]

I think it's not a good idea to create one state for each level.

 

Instead you can pass a parameter with the level data to a single state, so you can use a single state to load "any" level.

 

Passing a parameter to a state:

var levelData = {  playerStartingLocation: {x:10, y: 20},  enemies: [    {x:30, y: 30},    {x:40, y: 40},    {x:50, y: 50}  ],  goalLocation: {x: 100, y: 80}}this.game.state.start('Game', true, false, levelData);

Access this in the init method of your state:

init: function(levelData) {  this.levelData = levelData},create: function() {  //create player and other stuff according to levelData},update: function() {  //your player controls code just once, so you don't have to repeat it anywhere else}

[weo_af]

Is there additional benefits to having it all in one state? I'm not disagreeing but I'm just curious. I really appreciate the advice. Also would you create a level data object for each level and then when you reach the end of a level just load levelData2 (for example) into the state?

[fariazz]

The benefit is that if your game has several levels and you want to change how your game works, you have to modify one files instead of say 20

 

You could have one big object with all the levels data or individual objects per level (really up to you).

 

For example:

var level1 = { ......      nextLevel: 'level2',  //you can specify what the next level is in each level, so you can always know what the "next level" is once you complete the current level}

Or a single object:

var levels = [  {id: 1,   playerStart: {x: 10, y: 20},  ...},  {id: 2,  ...}]

You can also load the level data from external JSON files (my preferred option), as then you separate the game content from the game engine. I explain in this tutorial how to do it. In that way you create different text files for each level.

 

Hope this helps!

[weo_af]

This is very helpful! I'm definitely going to check out this tutorial more and decide the best way for my needs! I really appreciate the help!