callidus

Members
  • Content Count

    13
  • Joined

  • Last visited

  1. Thanks to both of you, this solved my problem. Damn this community is fast I posted this like an hour ago lol.
  2. I have been trying to separate my code into states but no matter what I try the game comes up with a black screen, and an error saying "No state found with the key: playTest " . Here is my code: Thanks for any help this has been bothering me for a while *Note: each colour is a different file (index,load and playTest). Index: <!DOCTYPE html><html> <head><meta charset="utf-8" /><script src="phaser.js"></script><script src="load.js"></script><script src="playTest.js"></script></head> <body> <script> function create() { var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'game'); game.state.add("load",load);game.state.add("playTest",playTest);game.state.start("playTest");};</script></body</html> load: var load = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create}); function preload() {cursors = this.game.input.keyboard.createCursorKeys(); //allows keyboard inputthis.game.load.image("sky","assets/sky.png");} function create() {this.game.state.start("playTest")} play: var playTest = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update,}); function create() {this.game.add.image(0,0,"sky");this.game.add.text(16,16,"test");this.game.scale.pageAlignHorizontally = true; //centers canvasthis.game.scale.pageAlignVertically = true;this.game.scale.refresh(); } function update() { }
  3. In my game I want an animation to play when the player collides with a red block and dies. I used the arcade physics system and said a function called gameOver should trigger when the player and a block overlap. The animation I'm using is an explosion, the function then calls for the player to be killed and removed from the canvas and for the explosion sprite to be added and for it's animation to play. The problem is that the function only plays the first frame, I'm assuming this is because either the function only runs once after they overlap or because the player dies and therefore without the player nothing is overlapping and the function stops. Tl;Dr: how do you make a death animation play after a sprite dies Thanks for any help My code: *Note the relevant part is coloured green. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update,});var Rx = Math.random () * 800; // ball spawns in a random placevar Ry = Math.random() * 600;var Bx = Math.random () * 800; var By = Math.random() * 600;var Gx = Math.random () * 800 var Gy = Math.random() * 600;var colours = ["redBlock","greenBlock","blueBlock"];var colour = colours[Math.floor(Math.random()*2)];var score = 0; var scoreText;var collideCounter = 0;var playerX = 10;var playerY = 10; function preload() {cursors = game.input.keyboard.createCursorKeys(); //allows keyboard inputthis.game.load.image("redBlock","assets/red.png");this.game.load.image("greenBlock","assets/green.png");this.game.load.image("blueBlock","assets/blue.png");this.game.load.spritesheet("explosion","assets/explosionSheet.png",433,410);this.game.load.image("block","assets/block.png");} function create() {this.game.physics.startSystem(Phaser.Physics.ARCADE);this.game.scale.pageAlignHorizontally = true; //centers canvasthis.game.scale.pageAlignVertically = true;this.game.scale.refresh(); Rblock = game.add.group(); Rblock.enableBody = true; for (var i = 1; i < 4 ; i++){var RblockT = Rblock.create(i * Rx,i * Ry,"redBlock"); // x and y are randomy coordinates the ball spawns atRblockT.body.velocity.setTo(200,200);RblockT.body.collideWorldBounds = true; RblockT.body.bounce.set(1);} Bblock = game.add.group(); Bblock.enableBody = true; for (var i = 1; i < 4; i++){BblockT = Bblock.create(i * Bx,i * By,"blueBlock"); // x and y are randomy coordinates the ball spawns atBblockT.body.velocity.setTo(200,200);BblockT.body.collideWorldBounds = true; BblockT.body.bounce.set(1);} Gblock = game.add.group(); Gblock.enableBody = true; for (var i = 1; i < 4 ; i++){GblockT = Gblock.create(i * Gx,i * Gy,"greenBlock"); // x and y are randomy coordinates the ball spawns atthis.game.physics.arcade.enable(Gblock);GblockT.body.velocity.setTo(200,200);GblockT.body.collideWorldBounds = true; GblockT.body.bounce.set(1);} player = this.game.add.sprite(10,10,"block");this.game.physics.arcade.enable(player);player.body.collideWorldBounds = true;player.scale.setTo(0.2,0.2); explosion = this.game.add.sprite(800,700,"explosion");explosion.animations.add ("explode",[1,0,2],2,true); scoreText = this.game.add.text(16,16,"Score:0",{ FontSize: "32px",fill: "#CCFFFF"});test = this.game.add.text(16,32,"test:",{ FontSize: "32px",fill: "#CCFFFF"});test2 = this.game.add.text(16,50,"test:",{ FontSize: "32px",fill: "#CCFFFF"});} function update() {this.game.physics.arcade.overlap(player,Rblock,gameOver,null,this);this.game.physics.arcade.overlap(player,Gblock,addPointG,null,this);this.game.physics.arcade.overlap(player,Bblock,addPointB,null,this); function addPointR (player, RblockT){score += 1;scoreText.text = "Score:" + score;RblockT.kill();} function addPointG (player, GblockT){score += 1;scoreText.text = "Score:" + score;GblockT.kill();} function addPointB (player, BblockT){score += 1;scoreText.text = "Score:" + score;BblockT.kill();} function gameOver(){player.kill();explosion = this.game.add.sprite(player.body.x,player.body.y,"explosion");explosion.anchor.setTo(0.5,0.5);explosion.animations.play("explode");} playerY = player.body.velocity.y; //playerY tracks the y coordinate of the player and is used to tell where the explosion should spawnplayerX = player.body.velocity.x; //playerX tracks the x coordinate of the player and is used to tell where the explosion should spawnplayer.body.velocity.x = 0;player.body.velocity.y = 0; if (cursors.up.isDown){player.body.velocity.y += -200;} if (cursors.down.isDown){player.body.velocity.y += 200;} if (cursors.left.isDown){player.body.velocity.x += -200;} if(cursors.right.isDown){player.body.velocity.x += 200;}}
  4. *face-palm*, thanks, didn't even notice the for loop started at 0.
  5. In my code im trying to have 3 diff colour blocks spawn in various areas on the screen, but one of the three red blocks spawns exactly on top of a blue one every single time. It makes no sense as I am using a math.random and have even used a game.add.text to make sure that the numbers aren't exactly the same yet it keeps happening. The relevant code is in green, thanks for any help. My code: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update,});var Rx = Math.random () * 800; // ball spawns in a random placevar Ry = Math.random() * 600; // X and Y coordinate for each colour blockvar Bx = Math.random () * 800; var By = Math.random() * 600;var Gx = Math.random () * 800 var Gy = Math.random() * 600;var text; var colours = ["redBlock","greenBlock","blueBlock"];var colour = colours[Math.floor(Math.random()*2)]; function preload() {cursors = game.input.keyboard.createCursorKeys(); //allows keyboard inputthis.game.load.image("block","assets/block.png");this.game.load.image("redBlock","assets/red.png");this.game.load.image("greenBlock","assets/green.png");this.game.load.image("blueBlock","assets/blue.png");} function create() {this.game.physics.startSystem(Phaser.Physics.ARCADE);this.game.scale.pageAlignHorizontally = true; //centers canvasthis.game.scale.pageAlignVertically = true;this.game.scale.refresh(); for (var i = 0; i < 3 ; i++){Rblock = this.game.add.sprite(i * Rx,i * Ry,"redBlock"); // x and y are randomy coordinates the ball spawns atthis.game.physics.arcade.enable(Rblock);Rblock.body.velocity.setTo(200,200);Rblock.body.collideWorldBounds = true; Rblock.body.bounce.set(1);} for (var i = 0; i < 3; i++){Bblock = this.game.add.sprite(i * Bx,i * By,"blueBlock"); // x and y are randomy coordinates the ball spawns atthis.game.physics.arcade.enable(Bblock);Bblock.body.velocity.setTo(200,200);Bblock.body.collideWorldBounds = true; Bblock.body.bounce.set(1);} for (var i = 0; i < 3 ; i++){Gblock = this.game.add.sprite(i * Gx,i * Gy,"greenBlock"); // x and y are randomy coordinates the ball spawns atthis.game.physics.arcade.enable(Gblock);Gblock.body.velocity.setTo(200,200);Gblock.body.collideWorldBounds = true; Gblock.body.bounce.set(1);} player = this.game.add.sprite(10,10,"block");this.game.physics.arcade.enable(player);player.anchor.set(0.5);player.body.drag.set(100);player.body.maxVelocity.set(300);//player.scale.setTo(0.2,0.2);player.body.collideWorldBounds = true; game.add.text(16,16,Rx + Ry);game.add.text(16,40,Bx + By);} function update() { if (cursors.up.isDown){this.game.physics.arcade.accelerationFromRotation(player.rotation,200,player.body.acceleration);}else{player.body.acceleration.set(0);}if (cursors.left.isDown){player.body.angularVelocity = -300} else if(cursors.right.isDown){player.body.angularVelocity = 300;}else{player.body.angularVelocity = 0;}}
  6. Thank you very much for the answer, it worked perfectly.
  7. I'm trying to spawn a randomly coloured block and to do so I am using math.random and the console says everything is loading but the assets aren't loading. There are no errors in it but can anyone find an error that might be causing the assets not to load? Parts of the code that's relevant is coloured green. Thanks for any help. My Code: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update,});var x = Math.floor(Math.random () * 800); // ball spawns in a random placevar y = Math.floor(Math.random() * 600);var text; var colour = Math.random() * 3;function preload() {cursors = game.input.keyboard.createCursorKeys(); //allows keyboard inputthis.game.load.image("block","assets/block.png");this.game.load.image("redBlock","assets/red.png");this.game.load.image("greenBlock","assets/green.png");this.game.load.image("blueBlock","assets/blue.png");} function create() {this.game.physics.startSystem(Phaser.Physics.ARCADE);this.game.scale.pageAlignHorizontally = true; //centers canvasthis.game.scale.pageAlignVertically = true;this.game.scale.refresh(); block = this.game.add.sprite(x,y,"colour"); // x and y are randomy coordinates the ball spawns atthis.game.physics.arcade.enable(block);block.body.velocity.setTo(200,200);block.body.collideWorldBounds = true; block.body.bounce.set(1); player = this.game.add.sprite(10,10,"block");this.game.physics.arcade.enable(player);player.scale.setTo(0.2,0.2);player.body.collideWorldBounds = true;} function update() { player.body.velocity.x = 0;player.body.velocity.y = 0; if(colour < 1){colour = "redBlock";} if(colour < 2){colour = "blueBlock";} if(colour < 3){colour = "greenBlock";} if(cursors.left.isDown){player.body.velocity.x += -200; } if(cursors.right.isDown){player.body.velocity.x += 200;} if(cursors.down.isDown){player.body.velocity.y += 200;} if(cursors.up.isDown){player.body.velocity.y += -200;}}
  8. I want a ball to bounce but my current code isn't working and I don't know why, thanks for any feedback. My Code: * I have made the parts of the code which are relevant green var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update,});var x = Math.floor(Math.random () * 800); // ball spawns in a random placevar y = Math.floor(Math.random() * 600);var text; function preload() {cursors = game.input.keyboard.createCursorKeys(); //allows keyboard inputthis.game.load.image("block","assets/block.png");this.game.load.image("redBlock","assets/red.png");this.game.load.image("greenBlock","assets/green.png");this.game.load.image("blueBlock","assets/blue.png");} function create() {this.game.physics.startSystem(Phaser.Physics.ARCADE);this.game.scale.pageAlignHorizontally = true; //centers canvasthis.game.scale.pageAlignVertically = true;this.game.scale.refresh(); block = this.game.add.sprite(x,y,"redBlock"); // x and y are randomy coordinates the ball spawns atthis.game.physics.arcade.enable(block); player = this.game.add.sprite(10,10,"block");this.game.physics.arcade.enable(player);player.scale.setTo(0.2,0.2);player.body.collideWorldBounds = true; } function update() { player.body.velocity.x = 0;player.body.velocity.y = 0; block.body.velocity.x += 50;block.body.velocity.y += 50; if(x > game.world.width){ //if the balls x coordinate is larger than the width of the screen make the x velocity block.body.velocity.x = block.body.velocity.x * -1; //of the ball the opposite of what it is, making it seem like it bounces off of it.} if(x < game.world.width - game.world.width){ //if the balls x coordinate is smaller than the width of the screen make the x velocity block.body.velocity.x = block.body.velocity.x * -1; //make it bounce} if(y > game.world.height){ //if the balls y coordinate is larger than the height of the screen make it bounceblock.body.velocity.y = block.body.velocity.y * -1;} if(y < game.world.height - game.world.height){ //if the balls y coordinate is smaller than the height of the screen make it bounceblock.body.velocity.y = block.body.velocity.y * -1;} if(cursors.left.isDown){player.body.velocity.x += -200; } if(cursors.right.isDown){player.body.velocity.x += 200;} if(cursors.down.isDown){player.body.velocity.y += 200;} if(cursors.up.isDown){player.body.velocity.y += -200;}}
  9. http://www.youtube.com/channel/UCLj4fAgRzjHaD7vICKaUbZA/videos This channel has everything step by step from the beginning of setting up phaser to using it for mobile games. It deserves more attention. It currently has about 5 views per video.
  10. I downloaded Brackets and opened my files in it, but once I open the html file the canvas is all black and two errors come up. These are, error 1: Failed to load resource: the server responded with a status of 400 (Bad Request) and error 2: Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://127') does not match the recipient window's origin ('http://127'). *note: I took out some of the numbers in the brackets of the second error since it displays personal data regarding the server. Thanks for any help
  11. Thank you everyone for your answers and especially Chupup for your suggestion of using brackets. The program fixed my problems.
  12. Is a local web server like cloud9 necessary to code in phaser? I heard about it recently but up until now i have simply been opening the canvas on my web browser and everything has been working fine. I dont use anything like cloud9 to run my code and havent had any problems. But even the phaser setup talks about downloading a local web server. So ultimately im confused, do we really need one, and if so why. I dont seem to have any problems just coding and opening it in my browser.
  13. I'm trying to have my sprite jump, and the conditions are if he is on the floor and if I'm pressing the up key. But he wont jump even when he's on the floor. When taking "player.body.touching.down" out of the code the sprite jumps so I'm assuming something in my code is interfering with hit detection between the player and the ground. Here is the code: (I have coloured the part of the code which I assume is the problem and anything that is relevant green) Any help is greatly appreciated var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update,});var rightCounter = 0;var leftCounter = 0;var score = 0;var scoreText;var obstacles;var highScore = 0;var highScoreText;var x = 50;var y = -50; function preload() {cursors = game.input.keyboard.createCursorKeys(); //allows keyboard inputgame.load.spritesheet("doggie","assets/doggie.png",32,32);game.load.image("treat","assets/cookie.png");game.load.image("sky","assets/sky.png"); game.load.image("platform","assets/platform.png");game.load.spritesheet("boulder","assets/boulderComplete.png",95,96);} function create() {game.physics.startSystem(Phaser.Physics.ARCADE);this.game.scale.pageAlignHorizontally = true; //centers canvasthis.game.scale.pageAlignVertically = true;this.game.scale.refresh(); game.add.image(0,0,"sky");scoreText = game.add.text (350,16, "Score:" + score, { fontSize: '32px', fill: '#ffffff' });highScoreText= game.add.text (16,16, "Highscore:" + highScore, {fontSize: "11px", fill: "#ffffff" }); ground = game.add.group(); ground.enableBody = true; var platform = ground.create(0,game.world.height - 30,"platform");platform.body.immovable = true;platform.scale.setTo(3,1) treat = game.add.sprite(200,0,"treat");game.physics.arcade.enable(treat)treat.body.gravity.y = 300; treat.body.bounce.y = 0.2; treat.body.collideWorldBounds = true; treat.scale.setTo(0.2,0.2); player = game.add.sprite(300,game.world.height - 100,"doggie"); game.physics.arcade.enable(player);player.body.gravity.y = 480; player.body.bounce.y = 0.2; player.body.collideWorldBounds = true; player.animations.add ("left",[0,1],5,true)player.animations.add ("idleLeft",[1],5,true)player.animations.add ("idleRight",[2],5,true)player.animations.add ("right",[2,3],5,true) boulder = game.add.sprite(100,-10,"boulder"); game.physics.arcade.enable(boulder);boulder.body.gravity.y = 1000; boulder.body.bounce.y = 0.2; } function update() {player.body.velocity.x = 0; if (cursors.left.isDown){ player.body.velocity.x = -300;player.animations.play("left");leftCounter += 1;rightCounter = 0;} else if (cursors.right.isDown){ player.body.velocity.x = 300;player.animations.play("right");leftCounter = 0; rightCounter +=1; }else if (cursors.up.isDown){player.body.velocity.y = -200;player.animations.play("idleLeft"); // This is the part of the code that doesn't work}else if (leftCounter > 0) { player.animations.play("idleLeft")}else if (rightCounter > 0){ player.animations.play("idleRight")}if (highScore<score){ highScore = score;highScoreText.text = "Highscore:" + highScore;}else {highScoreText.text = "Highscore:" + highScore;} function eatTreat() {treat.kill()treat = game.add.sprite (Math.floor(Math.random()*800),0,"treat")game.physics.arcade.enable(treat)treat.body.gravity.y = 300; treat.body.bounce.y = 0.2; treat.body.collideWorldBounds = true; treat.scale.setTo(0.2,0.2);score += 1;scoreText.text = "Score:" + score;} function boulderReset(){boulder.kill();boulder = game.add.sprite(Math.floor(Math.random() * 800),-10,"boulder"); game.physics.arcade.enable(boulder);boulder.body.gravity.y = 1000; boulder.body.bounce.y = 0.2; } function gameOver(){score = 0;scoreText.text = "Score:0", score;} game.physics.arcade.overlap(player,treat,eatTreat,null,this);game.physics.arcade.overlap(boulder,ground,boulderReset,null,this);game.physics.arcade.overlap(boulder,player,gameOver,null,this); game.physics.arcade.collide(player,ground);game.physics.arcade.collide(treat,ground);game.physics.arcade.collide(boulder,ground);}