csimpson.web Posted July 7, 2014 Share Posted July 7, 2014 Hi guys, i seem to have coded myself into a corner trying to build this game and could do with a bit of advice... basically just trying to get the cannon ball to hit the house - then destroy it in three stages.. cannot figure out how to get collison detection running - if i can get it to console log on hit , i can get the rest running .. any help is greatly appreciated .<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Phaser - Making your first game, part 1</title> <script type="text/javascript" src="js/phaser.min.js"></script> <style type="text/css"> body { margin: 0; } </style></head><body><script type="text/javascript">var GameState = function(game) {};var bullet;var houseState_1;var spawnEnemy;var enemy;// Load images and soundsGameState.prototype.preload = function() { this.game.load.image('bullet', 'assets/bullet.png'); this.game.load.image('background', 'assets/background.png'); this.game.load.image('houseState_1', 'assets/house_state1.png'); this.game.load.image('barrel', 'assets/barrel.png'); this.game.load.image('cannon', 'assets/cannon.png');};// Setup the exampleGameState.prototype.create = function() { // Set stage background color this.background = game.add.sprite(game.world.centerX, game.world.centerY, 'background'); this.background.anchor.setTo(0.5, 0.5); // Create an object representing our gun this.gun = this.game.add.sprite(95, this.game.height - 395, 'barrel'); this.z = 1; this.cannon = game.add.sprite(10, 200, 'cannon'); this.cannon.inputEnabled = true; this.z = 2; // Define constants this.SHOT_DELAY = 300; // milliseconds (10 bullets/3 seconds) this.BULLET_SPEED = 800; // pixels/second this.NUMBER_OF_BULLETS = 20; this.GRAVITY = 980; // pixels/second/second // Set the pivot point to the center of the gun this.gun.anchor.setTo(0.5, 0.5); // Create an object pool of bullets this.bulletPool = this.game.add.group(); for(var i = 0; i < this.NUMBER_OF_BULLETS; i++) { // Create each bullet and add it to the group. var bullet = this.game.add.sprite(0, 0, 'bullet'); this.bulletPool.add(bullet); // Set its pivot point to the center of the bullet bullet.anchor.setTo(0.5, 0.5); // Enable physics on the bullet this.game.physics.enable(bullet, Phaser.Physics.ARCADE); // Set its initial state to "dead". bullet.kill(); this.spawnEnemy(); } // Turn on gravity game.physics.arcade.gravity.y = this.GRAVITY; game.physics.collide(bullet, houseState_1, collideCallback, null, this); console.log("something"); // Simulate a pointer click/tap input at the center of the stage // when the example begins running. this.game.input.activePointer.x = this.game.width/2; this.game.input.activePointer.y = this.game.height/2 - 100;};GameState.prototype.spawnEnemy = function() { this.game.add.sprite(690, 170, 'houseState_1'); this.game.physics.arcade.enableBody(this); this.checkWorldBounds = true; this.onOutOfBoundsKill = true; //console.log('boom')};GameState.prototype.shootBullet = function() { // Enforce a short delay between shots by recording // the time that each bullet is shot and testing if // the amount of time since the last shot is more than // the required delay. if (this.lastBulletShotAt === undefined) this.lastBulletShotAt = 0; if (this.game.time.now - this.lastBulletShotAt < this.SHOT_DELAY) return; this.lastBulletShotAt = this.game.time.now; // Get a dead bullet from the pool var bullet = this.bulletPool.getFirstDead(); // If there aren't any bullets available then don't shoot if (bullet === null || bullet === undefined) return; // Revive the bullet // This makes the bullet "alive" bullet.revive(); // Bullets should kill themselves when they leave the world. // Phaser takes care of this for me by setting this flag // but you can do it yourself by killing the bullet if // its x,y coordinates are outside of the world. bullet.checkWorldBounds = true; bullet.outOfBoundsKill = true; // Set the bullet position to the gun position. bullet.reset(this.gun.x, this.gun.y); bullet.rotation = this.gun.rotation; // Shoot it in the right direction bullet.body.velocity.x = Math.cos(bullet.rotation) * this.BULLET_SPEED; bullet.body.velocity.y = Math.sin(bullet.rotation) * this.BULLET_SPEED;};// The update() method is called every frameGameState.prototype.update = function() { // Rotate all living bullets to match their trajectory this.bulletPool.forEachAlive(function(bullet) { bullet.rotation = Math.atan2(bullet.body.velocity.y, bullet.body.velocity.x); }, this); // Aim the gun at the pointer. // All this function does is calculate the angle using // Math.atan2(yPointer-yGun, xPointer-xGun) this.gun.rotation = this.game.physics.arcade.angleToPointer(this.gun); // Shoot a bullet if (this.game.input.activePointer.isDown) { this.shootBullet(); }};var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game');game.state.add('game', GameState, true);</script></body></html> Link to comment Share on other sites More sharing options...
lewster32 Posted July 7, 2014 Share Posted July 7, 2014 You are not defining houseState_1 anywhere after it's initialised. You create the sprite in your spawnEnemy function but you don't give it a variable, so houseState_1 remains as 'undefined'. You need to change the spawnEnemy function to the following:GameState.prototype.spawnEnemy = function() { houseState_1 = this.game.add.sprite(690, 170, 'houseState_1'); this.game.physics.arcade.enableBody(houseState_1); houseState_1.checkWorldBounds = true; houseState_1.onOutOfBoundsKill = true; //console.log('boom') };It also looks like you're calling spawnEnemy once for every bullet you put into your pool - is this correct? It seems to me this will create lots of houses (20) in the same place. Link to comment Share on other sites More sharing options...
csimpson.web Posted July 7, 2014 Author Share Posted July 7, 2014 ah, yes i see .. i got it running but the house drops away before i can shoot it to make contact? Link to comment Share on other sites More sharing options...
lewster32 Posted July 7, 2014 Share Posted July 7, 2014 The house isn't resting on anything, it either needs to be resting on an invisible 'floor' and colliding constantly with it, or the world bounds, or you need to fix the object in place (which if you don't want the house to move anywhere, would be the preferred option) via body.immovable = true Link to comment Share on other sites More sharing options...
csimpson.web Posted July 7, 2014 Author Share Posted July 7, 2014 thanks for your help , ill have a bash at figuring it out Link to comment Share on other sites More sharing options...
lewster32 Posted July 7, 2014 Share Posted July 7, 2014 If you go back to the example you've based this on, you'll see after the 'turn on gravity' bit there's a section where the ground is created: this.ground = this.game.add.group(); for(var x = 0; x < this.game.width; x += 32) { // Add the ground blocks, enable physics on each, make them immovable var groundBlock = this.game.add.sprite(x, this.game.height - 32, 'ground'); this.game.physics.enable(groundBlock, Phaser.Physics.ARCADE); groundBlock.body.immovable = true; groundBlock.body.allowGravity = false; this.ground.add(groundBlock); }You could get away with making a single ground sprite and leaving off the third parameter, then using body.setSize to make it the width of your screen: var groundBlock = this.game.add.sprite(0, this.game.height - 32); this.game.physics.enable(groundBlock, Phaser.Physics.ARCADE); groundBlock.body.setSize(this.game.width, 32, 0, 0); groundBlock.body.immovable = true; groundBlock.body.allowGravity = false; harrywatson 1 Link to comment Share on other sites More sharing options...
Recommended Posts