Jump to content

Beginning with States in phaser ...


Recommended Posts

I put my game a menu before starting to play, I've watched a tutorial, but I can not make it work. 
I have the following: 
State game.js: Cargo all states and call the load state. 
// Initialize Phaservar game = new Phaser.Game(640, 480, Phaser.CANVAS, 'ejemplo');//var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'ejemplo', { preload: preload, create: create, update: update });// Define all the statesgame.state.add('load', load_state);  game.state.add('menu', menu_state);  game.state.add('play', play_state);  // Start with the 'load' stategame.state.start('load');  
State load.js: load everything needed and switches to the menu. 
var load_state = {      preload: function() {         game.load.image('bet', 'assets/rocket.png');        game.load.image('ball', 'assets/ball.png');        game.load.image('background', 'assets/backg.png');    },    create: function() {        // When all assets are loaded, go to the 'menu' state        this.game.state.start('menu');    }};
State menu.js: Here the game menu appears. Press Space bar to discuss the game. 
var menu_state = {      create: function() {        // Call the 'start' function when pressing the spacebar        var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);        space_key.onDown.add(this.start, this);         // Defining variables        var style = { font: "30px Arial", fill: "#ffffff" };        var x = game.world.width/2, y = game.world.height/2;        // Adding a text centered on the screen        var text = this.game.add.text(x, y-50, "Press space to start", style);        text.anchor.setTo(0.5, 0.5);     },    // Start the actual game    start: function() {        this.game.state.start('play');    }};
State play.js: Here is the code of the game itself.
var play_state = {//var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'ejemplo', { preload: preload, create: create, update: update });	   /* function preload() {        game.load.image('bet', 'assets/rocket.png');        game.load.image('ball', 'assets/ball.png');        game.load.image('background', 'assets/backg.png');    } */		    create: function() {		var playerBet;	var computerBet;	var ball;	var computerBetSpeed = 190;	var ballSpeed = 300;	var ballReleased = false;		var score = 0;	var scoreText;		var score2 = 0;	var scoreText2; 	var ballHitsBet;        this.game.add.tileSprite(0, 0, 640, 480, 'background');				this.ball = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'ball');		this.game.physics.startSystem(this.Phaser.Physics.ARCADE);		this.game.physics.arcade.enable(ball);		this.ball.anchor.setTo(0.5, 0.5);				this.ball.body.collideWorldBounds = true;		this.ball.body.bounce.setTo(1, 1);						this.computerBet = this.createBet(620, this.game.world.centerY);		this.playerBet = this.createBet(20, this.game.world.centerY);				this.computerBet.body.collideWorldBounds = true;			this.computerBet.body.bounce.setTo(1, 1);			this.computerBet.body.immovable = true;				this.game.input.onDown.add(this.releaseBall, this);				//Score		this.scoreText = this.game.add.text(290, 16, '0', { fontSize: '64px', fill: '#000' });		this.scoreText2 = this.game.add.text(350, 16, '0', { fontSize: '64px', fill: '#000' });    }    update: function() {        if(this.computerBet.y - this.ball.y < -15)		{            this.computerBet.body.velocity.y = this.computerBetSpeed;        }		else if(this.computerBet.y - this.ball.y > 15) 		{            this.computerBet.body.velocity.y = this.-computerBetSpeed;        } 		else 		{            this.computerBet.body.velocity.y = 0;        }				//Moviendo raqueta		if (this.game.input.keyboard.isDown(Phaser.Keyboard.UP))   		{			this.playerBet.body.velocity.y = -190;    	}				if (this.game.input.keyboard.isDown(Phaser.Keyboard.DOWN))   		{			this.playerBet.body.velocity.y = 190;    	}        //Check and process the collision ball and racket        this.game.physics.arcade.collide(this.ball, this.playerBet, this.ballHitsBet, null, this);        this.game.physics.arcade.collide(this.ball, this.computerBet, this.ballHitsBet, null, this);				this.checkGoal();    }			//Funciones	 createBet: function(x,y) {		var bet = game.add.sprite(x, y, 'bet');			game.physics.arcade.enable(bet);		bet.anchor.setTo(0.5, 0.5);			bet.body.collideWorldBounds = true;			bet.body.bounce.setTo(0, 0);			bet.body.immovable = true;			return bet;	}			releaseBall: function() {	        if (!ballReleased)		{            ball.body.velocity.x = ballSpeed;            ball.body.velocity.y = ballSpeed;            ballReleased = true;        }    }			ballHitsBet: function(_ball, _bet) {	        var diff = 0;        if (_ball.y < _bet.y) 		{            //If ball is in the left hand side on the racket            diff = _bet.y - _ball.y;            _ball.body.velocity.y = (-10 * diff);        } 		else if (_ball.y > _bet.y)		{           //If ball is in the right hand side on the racket            diff = _ball.y -_bet.y;            _ball.body.velocity.y = (10 * diff);        }		else 		{            //The ball hit the center of the racket, let's add a little bit of a tragic accident(random) of his movement            _ball.body.velocity.y = 2 + Math.random() * 8;        }    }		checkGoal: function() {	        if (ball.x < 15) 		{             setBall();			 score2 += 1;    		 scoreText2.text = '' + score2;        } 		else if (ball.x > 625) 		{            setBall();			score += 1;    		scoreText.text = '' + score;        }    }     setBall: function() {        if (ballReleased) 		{            ball.x = game.world.centerX;            ball.y = game.world.centerY;            ball.body.velocity.x = 0;            ball.body.velocity.y = 0;            ballReleased = true;						ball.body.velocity.x =  190;			ball.body.velocity.y = 190;        }    }	};
Errors are giving me javascript of the following: 
Uncaught SyntaxError: Unexpected identifier - In this line of play.js:
update: function() {
And another error, who I believe that more important..
Uncaught ReferenceError: play_state is not defined - in this line of game.js: 
game.state.add('play', play_state);  

Why is not the state play? 


The result is that I get the Menu screen with the text Press Space to start, but when I press start, nothing happens ... 
And if I put it directly run the state play, the screen goes black, does not work.
Link to comment
Share on other sites

You are missing commas in your play state.

var play_state = {    create: function() {    }, //HERE    update: function() {    }, //HERE    createBet: function(x,y) {    }, //HERE    releaseBall: function() {    }, //HERE	    ballHitsBet: function(_ball, _bet) {    }, //HERE    setBall: function() {    }};
Link to comment
Share on other sites

Don't use the min version of phaser, use the regular unminified version and then come back and tell us what line the error is on. Also what version of phaser.

For development you should not use minified files, it makes it hard to debug. When you are done and what to put the game out to the public you can then use the minified version.

Link to comment
Share on other sites

In the index.html I have just this:

<html>    <head>  <meta charset="utf-8" />  <title>Pong</title>  <style>    #ejemplo{      width: 640px;      margin: auto;      margin-top: 20px;    }  </style>  <script type="text/javascript" src="phaser.js"></script>  <script type="text/javascript" src="load.js"></script>  <script type="text/javascript" src="menu.js"></script>  <script type="text/javascript" src="play.js"></script>  <script type="text/javascript" src="game.js"></script></head><body>  <div id="ejemplo"> </div></body></html>
Link to comment
Share on other sites

Not sure the problem, but I would fix it by getting a minimum working example with phaser.js. Include just phaser.js and a game.js with game.js being:

function preload() {  console.log('preload');}var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'ejemplo', { preload: preload });

Once you have that you can start adding back on and see where the problem occurs.

Link to comment
Share on other sites

Not sure, maybe a problem with the phaser.js file, I doubt it, but I have not used it. I guess go back to the phaser.min.js file for now, but solving this



That has fixed my old problem. Thanks!!!!
And my menu screen appears ..
Now the same thing happens to me: 
Uncaught TypeError: Can not read property 'hasOwnProperty' of undefined 
It says the error is in the file phaser ... phaser.min.js line 15.



you will need to work harder to fix. Figure out where in your play_state the phaser call is that is causing the error. You can do this using debugger or console statements, to narrow in to the function call so that we can figure out what the issue is.

Link to comment
Share on other sites

Well you can put the line "debugger;" at the top of your play_state preload and use Chrome's development tools to step through your code.

Does Dreamweaver run the server for you? I am guessing so, that could have lead to the issue with phaser.js not sure how dreamweaver handles files and serving them to the client.

Personally I would say not to use Dreamweaver, a good text editor and a webserver to serve the files is all you need. But that may be just my personal preference as I have never used Dreamweaver.

Link to comment
Share on other sites

You can use google chrome to debug javascript https://developer.chrome.com/devtools/docs/javascript-debugging

Or you can use the Firefox addon firebug http://getfirebug.com/javascript


Additionally you can use codevinskys yeoman generator to setup a basic phaser project automatically http://www.codevinsky.com/phaser-tutorial-getting-started-with-generator-phaser-official/



Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...