Gammerr

So states are the right way of creating screens in the game, right? So let's say I have a menu state and I have a game state, so my game state looks like that: var gameState = { init: function(levelData) { this.levelData = levelData++; }, create: function() { var jumpLebel = game.add.text(140, 200, 'press ESC to jump to MENU', { font: '25px Arial', fill: '#ffffff'}); var escKey = game.input.keyboard.addKey(Phaser.Keyboard.ESC); escKey.onDown.addOnce(this.goToMenu, this); }, start: function() { this.game.state.start('menu', true, false, levelData); } }; Where is the right place to put my init variables of the game on the init function? after the init function? on the create function? should be in another state file? maybe the bootState? Can you help me with that structure please? Also I'm watching the tutorials of Pablo at udemy.com and he's not explaining why sometimes he's using 'this' and sometimes not, for example (section #4, Lecture #39 - Basic Structure): create: function() { this.ground = this.add.sprite(0, 500, 'ground'); var platform = this.add.sprite(0, 300, 'platform'); this.player = this.add.sprite(100, 200, 'player', 3); }

oops, it's a Javascript issue - I had a mistake in the if statement, I wrote else if ( score => 70 && score < 90 ) instead of else if ( score >= 70 && score < 90 )

The idea sounds great, I wonder if it's possible with Phaser

Hey, I'm trying to create a game when items falling down and there is a character at the bottom that needs to collect some of the items and you get points depends on what you're choosing. I'm sure there is a better way to do it, that's why I'm posting it, I need help with that. If you'll run this code, you'll see that if you end up with a score more than 70 for example it's not showing the text that I wrote on the if statement, in the code search for ---> else if ( score => 70 && score < 90 ) code: var game = new Phaser.Game(1136, 640, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('sky', 'assets/sky.png'); game.load.image('star', 'assets/star.png'); game.load.image('cloud', 'assets/cloud.png'); game.load.image('pocket', 'assets/pocket.png'); } var cursors; var randomNumberX; var cloud; var cloudGroup; var pocket; var sky; var tryAgain; var score = 0; var scoreText; var gameOverTextStyle; var gameOverScreen = false; var gameOverText; var cloudOutIndex = 0; var cloudText = { "Wants director role" : 10, "Director role \n requires masters" : 10, "Works at nonprofit" : 20, "Nonprofit called \n Just for Girls" : 10, "Organization focuses \n on young women" : -5, "Organization helps \n with job prep" : -5, "Current director \n is leaving soon" : 5, "Been preparing for \n the director role" : 10, "Been at the \n company 5 years" : 5, "Passionate about work" : 5, "Needs more education \n to be successful" : 10, "Director does a lot \n of grant writing" : 5, "Loves working at \n Just for Girls" : -5, "Wants more info \n about grant writing" : 10, "Always had a goal \n to get masters" : 10, "Now feels like the \n right time for masters" : 10, }; var cloudLength = Object.keys(cloudText).length; function create() { game.physics.startSystem(Phaser.Physics.ARCADE); cursors = game.input.keyboard.createCursorKeys(); spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); sky = game.add.tileSprite(0, 0, 1136, 640, 'sky'); tryAgain = game.add.text(game.world.centerX, game.world.centerY, 'Try Again', { fill: '#ebfa46'} ); tryAgain.anchor.set(0.5); tryAgain.inputEnabled = true; tryAgain.visible = false; tryAgain.input.useHandCursor = true; tryAgain.events.onInputDown.add(restartGame, this); cloud = game.add.sprite(0, -400, 'cloud'); pocket = game.add.sprite(568, 568, 'pocket'); game.physics.arcade.enable([cloud, pocket]); var cloudTextStyle = { font: "bold 16px Arial", fill: "#000", align: "center" }; cloudGroup = game.add.group(); cloudGroup.alpha = 0.8; Object.keys(cloudText).forEach(function(key, i){ // random number for the location of the clouds randomNumberX = Math.floor(Math.random() * 780) + 1; // create text with a style var textElement = new Phaser.Text(game, 40, 30, key, cloudTextStyle); // create a new sprite at a random world location and assign it to a variable named cloud var cloud = cloudGroup.create(randomNumberX, i * (-300), 'cloud'); // append for each cloud item the text from the array cloud.addChild( textElement ); cloud.customParams = { score: cloudText[key] } game.physics.arcade.enable(cloud); cloud.body.velocity.y = 120; cloud.anchor.set(0); cloud.checkWorldBounds = true; cloud.events.onOutOfBounds.add(cloudOut, this); }); pocket.body.collideWorldBounds = true; pocket.body.allowGravity = false; pocket.body.immovable = true; // The score scoreText = game.add.text(16, 16, 'score: 0', { fontize: '32px', fill: '#fff' }); // Game Over Text gameOverTextStyle = { fontSize: "32px", fill: "#000", align: "center" }; } function update() { sky.tilePosition.x -= 0.3; cloudGroup.forEach(function(item, i){ game.physics.arcade.overlap(item, pocket, collisionHandler, null, this); }); pocket.body.velocity.x = 0; // Movement if (cursors.left.isDown) { // Move to the left pocket.body.velocity.x = -700; } else if (cursors.right.isDown) { // Move to the right pocket.body.velocity.x = +700; } else { pocket.animations.stop(); } if ( gameOverScreen ) { spaceKey.onDown.addOnce(restartGame); } } function collisionHandler (item, pocket) { cloudOutIndex++; score += item.customParams.score; scoreText.text = 'score: ' + score; item.destroy(); if ( score < 0 ) { cloudGroup.visible = false; gameOverText = game.add.text(game.world.centerX, game.world.centerY -150, 'Listen Again \n Remember, only pocket the most important info.', gameOverTextStyle ); gameOverText.anchor.set(0.5); tryAgainScreen(); } else { // when all the clouds are off the screen if ( ( cloudLength - 1 ) * 2 + 1 == cloudOutIndex ) { if ( score < 40 ) { gameOverText = game.add.text(game.world.centerX, game.world.centerY -150, 'Listen Again \n Remember, only pocket the most important info.', gameOverTextStyle ); gameOverText.anchor.set(0.5); } else if ( score => 40 && score < 70 ) { gameOverText = game.add.text(game.world.centerX, game.world.centerY -150, 'Great! \n Your pocketing skills are getting there.', gameOverTextStyle ); gameOverText.anchor.set(0.5); } else if ( score => 70 && score < 90 ) { gameOverText = game.add.text(game.world.centerX, game.world.centerY -150, 'Excellent! \n You know a thing or two about pocketing.', gameOverTextStyle ); gameOverText.anchor.set(0.5); } else if ( score == 90 ) { gameOverText = game.add.text(game.world.centerX, game.world.centerY -150, 'Perfect Score! \n You are a pocket expert.', gameOverTextStyle ); gameOverText.anchor.set(0.5); } tryAgainScreen(); } } } function cloudOut(item) { cloudOutIndex++; // when all the clouds are off the screen if ( ( cloudLength - 1 ) * 2 + 1 == cloudOutIndex ) { if ( score < 40 ) { gameOverText = game.add.text(game.world.centerX, game.world.centerY -150, 'Listen Again \n Remember, only pocket the most important info.', gameOverTextStyle ); gameOverText.anchor.set(0.5); } else if ( score => 40 && score < 70 ) { gameOverText = game.add.text(game.world.centerX, game.world.centerY -150, 'Great! \n Your pocketing skills are getting there.', gameOverTextStyle ); gameOverText.anchor.set(0.5); } else if ( score => 70 && score < 90 ) { gameOverText = game.add.text(game.world.centerX, game.world.centerY -150, 'Excellent! \n You know a thing or two about pocketing.', gameOverTextStyle ); gameOverText.anchor.set(0.5); } else if ( score == 90 ) { gameOverText = game.add.text(game.world.centerX, game.world.centerY -150, 'Perfect Score! \n You are a pocket expert.', gameOverTextStyle ); gameOverText.anchor.set(0.5); } tryAgainScreen(); } } function tryAgainScreen() { gameOverScreen = true; tryAgain.visible = true; cloudGroup.visible = false; pocket.visible = false; scoreText.visible = false; } function restartGame() { cloudOutIndex = 0; score = 0; gameOverScreen = false; create(); } function render() { // cloudGroup.forEach(function(item){ // game.debug.body(item); // }); // game.debug.body(pocket); }

Where is the try again button?

Thank you so much!

for each one I want to add a text, so let's say I created a loop of 5 items I will have 5 texts that I want to display on each one

OK, I tried that cloudGroup = game.add.group(); for (var i = 0; i < 2; i++) { randomNumberX = Math.floor(Math.random() * 580) + 1; // Create a new sprite at a random world location cloudGroup.create(randomNumberX, i * (-300), 'cloud1'); cloudGroup.addChild(game.make.text(0, 0, 'sprite' + i)); } and I'm getting an error Uncaught TypeError: Cannot read property 'velocity' of undefined

How can I use this loop of Phaser examples and add.text to each one of the object that we created in the group? var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create}); function preload() { game.load.image('sonic', 'assets/sprites/sonic_havok_sanity.png'); } var yourGroup; function create() { // Here we'll create a new Group yourGroup = game.add.group(); // And add 10 sprites to it for (var i = 0; i < 10; i++) { // Create a new sprite at a random world location yourGroup.create(game.world.randomX, game.world.randomY, 'sonic'); } // Each sprite is now a member of yourGroup } Edit: I'm so close to the solution now, Common guys you've got to help me, not that much left here var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('sky', 'assets/sky.png'); game.load.image('cloud1', 'assets/cloud.png'); game.load.image('pocket', 'assets/pocket.png'); } var cursors; var randomNumberX; var cloud1; var cloudGroup; var pocket; var score = 0; var scoreText; var text1; function create() { game.physics.startSystem(Phaser.Physics.ARCADE); cursors = game.input.keyboard.createCursorKeys(); game.add.image(0, 0, 'sky'); cloud1 = game.add.sprite(0, -400, 'cloud1'); pocket = game.add.sprite(568, 568, 'pocket'); game.physics.arcade.enable([cloud1, pocket]); var cloudTextStyle = { font: "bold 16px Arial", fill: "#000", align: "center" }; cloudGroup = game.add.group(); for (var i = 0; i < 2; i++) { randomNumberX = Math.floor(Math.random() * 580) + 1; // Create a new sprite at a random world location cloudGroup.create(randomNumberX, i * (-300), 'cloud1'); } cloudGroup.forEach(function(item){ game.physics.arcade.enable(item); item.body.velocity.y = 80; item.anchor.set(0); }); // game.physics.arcade.gravity.y = 200; // cloud1.body.bounce.y = 0.95; pocket.body.collideWorldBounds = true; pocket.body.allowGravity = false; pocket.body.immovable = true; // The score scoreText = game.add.text(16, 16, 'score: 0', { fontize: '32px', fill: '#fff' }); text1 = game.add.text(0, 0, "Organization", cloudTextStyle, cloudGroup); text1.anchor.set(0.5); } function update() { cloudGroup.forEach(function(item){ game.physics.arcade.overlap(item, pocket, collisionHandler, null, this); }); pocket.body.velocity.x = 0; // Movement if (cursors.left.isDown) { // Move to the left pocket.body.velocity.x = -350; } else if (cursors.right.isDown) { // Move to the right pocket.body.velocity.x = +350; } else { pocket.animations.stop(); } // Text cloudGroup.forEach(function(item){ item.alpha = 0.85; text1.x = Math.floor(item.x + item.width / 2); text1.y = Math.floor(item.y + item.height / 2); }); } function collisionHandler (cloud1, pocket) { cloud1.destroy(); text1.destroy(); score += 10; scoreText.text = 'Score: ' + score; }

I think I'm missing something with the for loop that I created and groups var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('sky', 'assets/sky.png'); game.load.image('bubble1', 'assets/rectangle.png', 220, 103); game.load.image('pocket', 'assets/pocket.png'); } var bubble1; var pocket; var cursors; var score = 0; var scoreText; var text1; function create() { var randomNumber = Math.floor(Math.random() * 550) + 1; game.physics.startSystem(Phaser.Physics.ARCADE); game.add.image(0, 0, 'sky'); game.stage.backgroundColor = '#63b3cf'; for ( i=0; i < 3; i++ ) { bubble1 = game.add.sprite(randomNumber, 0, 'bubble1'); } game.physics.enable(bubble1, Phaser.Physics.ARCADE); bubble1.body.velocity.y = 60; // This adjusts the collision body size. // 220x10 is the new width/height. // See the offset bounding box for another example. bubble1.body.setSize(220, 103, 0, 0); pocket = game.add.sprite(568, 568, 'pocket'); game.physics.enable(pocket, Phaser.Physics.ARCADE); pocket.body.immovable = true; pocket.body.collideWorldBounds = true; cursors = game.input.keyboard.createCursorKeys(); // The score scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#fff' }); var bubbleTextStyle = { font: "16px Arial", fill: "#fff", align: "center" }; text1 = game.add.text(0, 0, "Bubble1", bubbleTextStyle); text1.anchor.set(0.5); } function update() { game.physics.arcade.overlap(bubble1, pocket, collisionHandler, null, this); pocket.body.velocity.x = 0; // Movement if (cursors.left.isDown) { // Move to the left pocket.body.velocity.x = -150; } else if (cursors.right.isDown) { // Move to the right pocket.body.velocity.x = +150; } else { pocket.animations.stop(); } // Text text1.x = Math.floor(bubble1.x + bubble1.width / 2); text1.y = Math.floor(bubble1.y + bubble1.height / 2); } function collisionHandler (bubble1, pocket) { bubble1.destroy(); score += 10; scoreText.text = 'Score: ' + score; }

Hey, I'm building this game that rectangles are falling from the top of the screen and there is a character at the bottom that needs to catch it. Now I need to add something like 20 rectangles with different text on each one, so I didn't want to create 20 sprites, I wanted to create 1 sprite for the rectangle and use the same sprite for the 20 objects. How would you do that?

Thank you for the reply! The problem is when the characters lands to the ground and the user is still holding the left key it's not going back to the walking animation. Can you help me with that too? I want to stop this single-frame when it's landing and animate the walking again, this is the walking animation that I have player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('right', [5, 6, 7, 8], 10, true);

I'm following this game example: https://phaser.io/examples/v2/games/starstruck When the character jump to the right or left you can see that the legs are still animated I want to change the animation if the user press up+left / up+right so basically I need to show only one keyframe, I tried something like that: ( see the lines where I set the keyframe to be 1 and another line I set it to be 6 ) I will appreciate your help function update() { // Collide the player and the stars with the platforms var hitPlatform = game.physics.arcade.collide(player, platforms); game.physics.arcade.collide(stars, platforms); // Checks to see if the player overlaps with any of the stars, if he does call the collectStar function game.physics.arcade.overlap(player, stars, collectStar, null, this); // Reset the players velocity (movement) player.body.velocity.x = 0; if (cursors.left.isDown) { // Move to the left player.body.velocity.x = -150; player.animations.play('left'); } else if (cursors.right.isDown) { // Move to the right player.body.velocity.x = 150; player.animations.play('right'); } else if (cursors.left.isDown && cursors.up.isDown) { player.frame = 1; } else if (cursors.right.isDown && cursors.up.isDown) { player.frame = 6; } else { // Stand still player.animations.stop(); player.frame = 4; } // Allow the player to jump if they are touching the ground. if (cursors.up.isDown && player.body.touching.down && hitPlatform) { player.body.velocity.y = -300; } }