weo_af

Controls through multiple levels

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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}

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.