habibieamrullah Posted July 24, 2017 Share Posted July 24, 2017 Hi guys, I've searched but I didn't find any answer. May be I didn't know exact search keyword to navigate me to the answer. My question is, if I have a player sprite that dynamically change its direction (always in rotating left & right) then I want it to shoot toward its direction (not toward mouse pointer or any object, but its direction, its front), what should I do? I've tried to use game.physics.arcade.moveToXY but I don't know how to calculate the x & y for it. Thank you. Link to comment Share on other sites More sharing options...
Nesh108 Posted July 24, 2017 Share Posted July 24, 2017 You basically want to have a forward vector in relation to the player's rotation angle, correct? You can fire a bullet depending on the current rotation of the sprite/player. Given the position of the center of the player (simplified as a circle) and its rotation, you can find the X,Y coordinates of the front. With that, you can then create a forward vector and shoot in that direction. Ositoozy 1 Link to comment Share on other sites More sharing options...
Ositoozy Posted July 24, 2017 Share Posted July 24, 2017 Hey, Have you tried using the track sprite method from the Phaser.Weapon class? Example http://www.codeowl.tech:3000/ You may need to login with some username Also pickup one of the orbs to be able to shoot Codebase: https://github.com/code0wl/Multiplayer-Phaser-game Phaser example with code: https://phaser.io/examples/v2/weapon/asteroids Nesh108 1 Link to comment Share on other sites More sharing options...
habibieamrullah Posted July 24, 2017 Author Share Posted July 24, 2017 1 hour ago, Nesh108 said: You basically want to have a forward vector in relation to the player's rotation angle, correct? You can fire a bullet depending on the current rotation of the sprite/player. Given the position of the center of the player (simplified as a circle) and its rotation, you can find the X,Y coordinates of the front. With that, you can then create a forward vector and shoot in that direction. I know how to get current rotation of the player sprite, by using player.angle and then I'll get the rotation angle. But what to do then? How to convert that rotation degree into an X&Y coordinates based on it? Link to comment Share on other sites More sharing options...
Nesh108 Posted July 24, 2017 Share Posted July 24, 2017 That moves away from gamedev and becomes trigonometry territory. Just for you: x = (r * sin( angle )) + player_pos.x y = (r * cos( angle )) + player_pos.y r: is the radius of the sprite of the player. From the center of the sprite to the (x,y) position that you calculate will give you the direction of your bullet. Link to comment Share on other sites More sharing options...
samme Posted July 24, 2017 Share Posted July 24, 2017 See Phaser.Physics.Arcade#velocityFromRotation Link to comment Share on other sites More sharing options...
habibieamrullah Posted July 25, 2017 Author Share Posted July 25, 2017 Thank you guys for your helps. It's really helpful and make me learn more. But, I'm sorry I'm still confused how to implement it. I've tried velocityFromRotation() but the result is, bullets fired toward 0,0 coordinate. What did I miss in this code below? var game = new Phaser.Game(gameWidth, gameHeight, Phaser.AUTO, "SpaceBandits", { preload : preload, create : create, update : update }); var firingAllowed = true; function preload() { game.load.image('playership', 'assets/playership.png'); game.load.image('enemyship', 'assets/enemyship.png'); game.load.image('bullet', 'assets/bullet.png'); } var enemyCounts = 10; function create() { game.physics.startSystem(Phaser.Physics.P2JS); enemies = game.add.group(); var tempXPos = game.world.width/enemyCounts; for (var i = 1; i < enemyCounts; i++) { var enemy = enemies.create(tempXPos * i, 100, 'enemyship'); game.physics.p2.enable(enemy,false); } cursors = game.input.keyboard.createCursorKeys(); playerShip = game.add.sprite(game.world.width/2, game.world.height - 100, 'playership'); game.physics.p2.enable(playerShip); bullets = game.add.group(); bullets.enableBody = true; bullets.physicsBodyType = Phaser.Physics.ARCADE; bullets.createMultiple(50, "bullet"); bullets.setAll("checkWorldBounds", true); bullets.setAll("outOfBoundsKill", true); this.spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); }; function update() { enemies.forEachAlive(moveenemies,this); if (cursors.up.isDown){ playerShip.body.thrust(100); } else if (cursors.down.isDown){ playerShip.body.reverse(100); } if (cursors.left.isDown) {playerShip.body.rotateLeft(100);} else if (cursors.right.isDown){playerShip.body.rotateRight(100);} else {playerShip.body.setZeroRotation();} if (this.spaceKey.isDown){ if(firingAllowed){ fire(); firingAllowed = false; setTimeout(function(){ firingAllowed = true }, 300) } } }; function moveenemies (enemy) { accelerateToObject(enemy,playerShip,20); } function accelerateToObject(obj1, obj2, speed) { if (typeof speed === 'undefined') { speed = 20; } var angle = Math.atan2(obj2.y - obj1.y, obj2.x - obj1.x); obj1.body.rotation = angle + game.math.degToRad(90); obj1.body.force.x = Math.cos(angle) * speed; obj1.body.force.y = Math.sin(angle) * speed; } function fire(){ var bullet = bullets.getFirstDead(); bullet.reset(playerShip.x, playerShip.y); var shootTarget = game.physics.arcade.velocityFromRotation(playerShip.rotation, 60); game.physics.arcade.moveToXY(bullet, shootTarget.x, shootTarget.y); } This codes is modified from one of official Phaser examples. Link to comment Share on other sites More sharing options...
habibieamrullah Posted July 25, 2017 Author Share Posted July 25, 2017 4 minutes ago, habibieamrullah said: Thank you guys for your helps. It's really helpful and make me learn more. But, I'm sorry I'm still confused how to implement it. I've tried velocityFromRotation() but the result is, bullets fired toward 0,0 coordinate. What did I miss in this code below? var game = new Phaser.Game(gameWidth, gameHeight, Phaser.AUTO, "SpaceBandits", { preload : preload, create : create, update : update }); var firingAllowed = true; function preload() { game.load.image('playership', 'assets/playership.png'); game.load.image('enemyship', 'assets/enemyship.png'); game.load.image('bullet', 'assets/bullet.png'); } var enemyCounts = 10; function create() { game.physics.startSystem(Phaser.Physics.P2JS); enemies = game.add.group(); var tempXPos = game.world.width/enemyCounts; for (var i = 1; i < enemyCounts; i++) { var enemy = enemies.create(tempXPos * i, 100, 'enemyship'); game.physics.p2.enable(enemy,false); } cursors = game.input.keyboard.createCursorKeys(); playerShip = game.add.sprite(game.world.width/2, game.world.height - 100, 'playership'); game.physics.p2.enable(playerShip); bullets = game.add.group(); bullets.enableBody = true; bullets.physicsBodyType = Phaser.Physics.ARCADE; bullets.createMultiple(50, "bullet"); bullets.setAll("checkWorldBounds", true); bullets.setAll("outOfBoundsKill", true); this.spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); }; function update() { enemies.forEachAlive(moveenemies,this); if (cursors.up.isDown){ playerShip.body.thrust(100); } else if (cursors.down.isDown){ playerShip.body.reverse(100); } if (cursors.left.isDown) {playerShip.body.rotateLeft(100);} else if (cursors.right.isDown){playerShip.body.rotateRight(100);} else {playerShip.body.setZeroRotation();} if (this.spaceKey.isDown){ if(firingAllowed){ fire(); firingAllowed = false; setTimeout(function(){ firingAllowed = true }, 300) } } }; function moveenemies (enemy) { accelerateToObject(enemy,playerShip,20); } function accelerateToObject(obj1, obj2, speed) { if (typeof speed === 'undefined') { speed = 20; } var angle = Math.atan2(obj2.y - obj1.y, obj2.x - obj1.x); obj1.body.rotation = angle + game.math.degToRad(90); obj1.body.force.x = Math.cos(angle) * speed; obj1.body.force.y = Math.sin(angle) * speed; } function fire(){ var bullet = bullets.getFirstDead(); bullet.reset(playerShip.x, playerShip.y); var shootTarget = game.physics.arcade.velocityFromRotation(playerShip.rotation, 60); game.physics.arcade.moveToXY(bullet, shootTarget.x, shootTarget.y); } This codes is modified from one of official Phaser examples. And the main issue is in this fire() function: function fire(){ var bullet = bullets.getFirstDead(); bullet.reset(playerShip.x, playerShip.y); var shootTarget = game.physics.arcade.velocityFromRotation(playerShip.rotation, 60); game.physics.arcade.moveToXY(bullet, shootTarget.x, shootTarget.y); } Link to comment Share on other sites More sharing options...
samme Posted July 25, 2017 Share Posted July 25, 2017 function fire(){ var bullet = bullets.getFirstDead(); bullet.reset(playerShip.x, playerShip.y); // velocityFromRotation(rotation, speed, point) → {Phaser.Point} game.physics.arcade.velocityFromRotation(playerShip.rotation, 60, bullet.body.velocity); } Link to comment Share on other sites More sharing options...
habibieamrullah Posted July 25, 2017 Author Share Posted July 25, 2017 27 minutes ago, samme said: function fire(){ var bullet = bullets.getFirstDead(); bullet.reset(playerShip.x, playerShip.y); // velocityFromRotation(rotation, speed, point) → {Phaser.Point} game.physics.arcade.velocityFromRotation(playerShip.rotation, 60, bullet.body.velocity); } Many thanks samme, it somehow helps me to get there. I still have to tweak it... Because I see bullet shooting direction is not consistent. Link to comment Share on other sites More sharing options...
Recommended Posts