Follow @SBC_Games
Previous Phaser tutorials:
Phaser tutorial: DronShooter - simple game in Typescript - Part 2
Phaser tutorial: adding 9-patch image support to Phaser
Phaser tutorial: DronShooter - simple game in Typescript - Part 1
Phaser tutorial: custom easing functions for tweening and easing functions with parameters
Phaser tutorial: sprites and custom properties for atlas frames
Phaser tutorial: manage different screen sizes
Phaser tutorial: How to wrap bitmap text
This is third and final part of short tutorial series on creating simple Phaser shooter game with Typescript. In Part 1 we ended with drone sprite hanging in the air above postapocalyptic city. In Part 2 we animated it and made it move.
First adjust your State class with adding some constants and private variables and also delete most of the create() method:
Next add new lines into create() method:
The first line creates cannon barrel sprite and places it in the middle bootom. Next we adjust anchor of it as shown on this image:
New anchor is point around which rotations will be done.
In this part we will add cannon, missiles and collisions with drones. To do this we have to check input and employ physics. We will use P2 physics engine.
Adding cannon
First adjust your State class with adding some constants and private variables and also delete most of the create() method:
class State extends Phaser.State { private static CANNON_SPEED = 2; private static MISSILE_SPEED = 6; private _cannon: Phaser.Sprite; private _cannonTip: Phaser.Point = new Phaser.Point(); private _space: Phaser.Key; // ------------------------------------------------------------------------- preload() { // background image this.game.load.image("BG", "bg.jpg"); // load sprite images in atlas this.game.load.atlas("Atlas", "atlas.png", "atlas.json"); } // ------------------------------------------------------------------------- create() { // background this.add.image(0, 0, "BG"); // set physiscs to P2 physics engin this.game.physics.startSystem(Phaser.Physics.P2JS); } }
Next add new lines into create() method:
create() { // background this.add.image(0, 0, "BG"); // set physiscs to P2 physics engin this.game.physics.startSystem(Phaser.Physics.P2JS); // cannon - place it in the bottom center this._cannon = this.game.add.sprite(this.world.centerX, this.world.height, "Atlas", "cannon"); // offset it from position this._cannon.anchor.setTo(-0.75, 0.5); // make it point straight up this._cannon.rotation = -Math.PI / 2; // cannon base - place over cannon, so it overlaps it var base = this.game.add.sprite(this.world.centerX, this.world.height, "Atlas", "base"); base.anchor.setTo(0.5, 1); }
The first line creates cannon barrel sprite and places it in the middle bootom. Next we adjust anchor of it as shown on this image:
Next, we are rotating it to point straight up. Rotation is -π/2, which may be confusing at first sight. From school we know, that 90 degrees is π/2. But in Phaser the y coordinate is flipped and y axis has values increasing downwards with 0, 0 in top left corner. Here are some values on unit circle (values in parenthesis are alternative values you can use - it does not matter if you rotate -π/2 or 3π/2). The red arc is showing our future limits for cannon movement from -π/4 to -3π/4:
With last line we add cannon base sprite. This sprite covers part of the cannon barrel and it is static part of cannon.
If you now compile and run you should see this construct in the bottom of the screen:
Moving cannon
Now, let's move it. Add next few lines to create() method:
// Game input this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT); this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT); this._space = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); // following keys will not be propagated to browser this.game.input.keyboard.addKeyCapture([Phaser.Keyboard.LEFT, Phaser.Keyboard.RIGHT, Phaser.Keyboard.SPACEBAR]);
With this we say which keys we will use and we also prevent propagating presses of these keys to browser - it will be consumed by our game.
Beside this we have to add update() method to our State class. This method is called every frame and we will check key presses in it:
update() { // shortcut var keyboard: Phaser.Keyboard = this.game.input.keyboard; // left and right key if (keyboard.isDown(Phaser.Keyboard.LEFT)) { // calculate frame independent speed - 45 degrees (PI/4) in 1 second adjusted with cannon speed this._cannon.rotation -= this.time.elapsedMS * State.CANNON_SPEED / 1000 * (Math.PI / 4); } else if (keyboard.isDown(Phaser.Keyboard.RIGHT)) { this._cannon.rotation += this.time.elapsedMS * State.CANNON_SPEED / 1000 * (Math.PI / 4); } else if (this._space.justDown) { // fire missile console.log("Fire missile"); } // limit cannon rotation to left and right to +/- 45 degrees ... -135 to -45 degrees here this._cannon.rotation = Phaser.Math.clamp(this._cannon.rotation, -1.5 * Math.PI / 2, -0.5 * Math.PI / 2); }
We check left and right key and if pressed (isDown()), then we adjust cannon rotation. The speed of rotation is π/4 in sec. by CANNON_SPEED, which is 2. So, cannon is rotation with speed π/2 in second.
Space key is tested differently. We do not want to know, whether it is down, but whether it was pressed. If so, we will lunch missile. Currently, as we do not have missiles yet, we just lunch message to console.
In the end we check whether cannon rotation is not beyond its limits. We use clamp method from Phaser.Math class for it. This method helps you to keep value between two limits with single line of code.
Swarm
Now we have drone and moving cannon. Next, we will spawn swarm of drones. Our dron class is ready from previous part, so this will should be easy. Add few private variables to State class:
private _drones: Phaser.Group; private _dronesCollisionGroup: Phaser.Physics.P2.CollisionGroup; private _missiles: Phaser.Group; private _missilesCollisionGroup: Phaser.Physics.P2.CollisionGroup;
And add next lines to create method:
// allow inpact events this.game.physics.p2.setImpactEvents(true); // collision groups for drones this._dronesCollisionGroup = this.game.physics.p2.createCollisionGroup(); // collision groups for missiles this._missilesCollisionGroup = this.physics.p2.createCollisionGroup(); // drones group this._drones = this.add.group(); this._drones.physicsBodyType = Phaser.Physics.P2JS; this._drones.enableBody = true; // create 8 drones this._drones.classType = Dron; this._drones.createMultiple(8, "Atlas", "dron1"); this._drones.forEach(function (aDron: Dron) { // setup movements and animations aDron.setUp(); // setup physics var body: Phaser.Physics.P2.Body = aDron.body; body.setCircle(aDron.width / 2); body.kinematic = true; // does not respond to forces body.setCollisionGroup(this._dronesCollisionGroup); // adds group drones will collide with and callback body.collides(this._missilesCollisionGroup, this.hitDron, this); //body.debug = true; }, this);
First, we are allowing impact events. Early we will also add missiles and we want to check collisions between them and drones. We will want P2 engine call our callback method when there is collision. If we forget to allow impact events our callback will not be called.
Next, we define two collision groups. One for drones and second for missiles. This helps us easily check collisions between all drones and all missiles.
For all the drones we create standard Phaser.Group. Setting physicsBodyType and enableBody on group means that these vales will be set on all sprites in this group. Our group contains 8 drones. We create them with call to createMultiple. As we are not creating standard sprites, but we want to create instances of our Dron class, which derives fro Phaser.Sprite, we first set classType to Dron.
Once drones are created we take one by one and set them. setUp() method randomizes position and movement. In next lines we create its physics shape - circle fits nice to our drone. We also put it into prepared collision group, so each drone is in it and we can refer them all in once as _dronesCollisionGroup. Finally, we say that this drone can collide with _missiles CollisionGroup, which will group similarly all missiles. Part of this setting is callback method if collision occurs. In our case it is hitDron() method. We add it to our State class:
private hitDron(aObject1: any, aObject2: any) { // explode dron and remove missile - kill it, not destroy (<Dron> aObject1.sprite).explode(); (<Phaser.Sprite> aObject2.sprite).kill(); }
Callback method hitDrone() is called by P2 engine with two parameters - first is drone that collided and second is object it collided with. All we do, is let the drone explode and we kill missile. If you recall explode() method in our Drone class, you will remember that after explosion animation is finished, drone is killed too.
Missiles
Similarly to drones, we add missiles in create() method:
// missiles group this._missiles = this.add.group(); this._missiles.physicsBodyType = Phaser.Physics.P2JS; this._missiles.enableBody = true; // create 10 missiles this._missiles.createMultiple(10, "Atlas", "missile"); this._missiles.forEach(function (aMissile: Phaser.Sprite) { aMissile.anchor.setTo(0.5, 0.5); // physics var body: Phaser.Physics.P2.Body = aMissile.body; body.setRectangle(aMissile.width, aMissile.height); body.setCollisionGroup(this._missilesCollisionGroup); body.collides(this._dronesCollisionGroup); // body.debug = true; }, this);
Only differences are: shape is not circle, but rectangle and we do not set collision callback here as it is enough if it is called from drone side once. It is enough to say that missiles can collide with all drones grouped in _dronesCollisionGroup.
While you still can not fire missiles you can compile and run game. You see swarm of drones in the sky. If you would like to check whether you set collision bodies right, you can uncomment "body.debug = true;" when iterating drones and missiles and add this render() method to your State class:
render() { // uncomment to visual debug, also uncommnet "body.debug = true;" when creating missiles and drones this._drones.forEach(function (aDron: Dron) { this.game.debug.body(aDron); }, this); this._missiles.forEach(function (aMissile: Phaser.Sprite) { this.game.debug.body(aMissile); }, this); }
With these color debug circles all deadly drones now looks like jolly carnival balloons:
And here is last and final piece - launching missiles. Go into update() method and replace console log with this code:
// get firtst missile from pool var missile: Phaser.Sprite = this._missiles.getFirstExists(false); if (missile) { // calculate position of cannon tip. Put distance from cannon base along x axis and rotate it to cannon angle this._cannonTip.setTo(this._cannon.width * 2, 0); this._cannonTip.rotate(0, 0, this._cannon.rotation); missile.reset(this._cannon.x + this._cannonTip.x, this._cannon.y + this._cannonTip.y); (<Phaser.Physics.P2.Body> missile.body).rotation = this._cannon.rotation; // life of missile in millis missile.lifespan = 1500; // set velocity of missile in direction of cannon barrel (<Phaser.Physics.P2.Body> missile.body).velocity.x = this._cannonTip.x * State.MISSILE_SPEED; (<Phaser.Physics.P2.Body> missile.body).velocity.y = this._cannonTip.y * State.MISSILE_SPEED; }
In first line we ask for free missile in group. It works like pool. When we created missiles, all of them were set exists = false. Now, we want to find first that does not exist, revive it and after it is killed (or its time expires), it falls into exists = false again.
We check, whether we got any free missile. If yes, we calculate position on the tip of cannon barrel and set with reset() method position of missile. Calling reset sets exists = true. Rotation of the missile is the same as rotation of cannon. Lifetime of missile is limited to 1.5 second. If this time is expired, missile falls automatically into exists = false and is ready for reuse.
Conclusion
If you compile and run now, you can move your cannon left to right with arrow keys. With space bar you can launch missiles and shoot drones.
During tutorial we created very simple game in less than 240 lines - see full listing bellow or download whole project.
While it is simple, it creates our Dron class derived from Phaser.Sprite, we use animations and custom tweening function, we handle input and also use P2 physics.
Here is our final game in action:
Complete code:
// ------------------------------------------------------------------------- // ------------------------------------------------------------------------- // ------------------------------------------------------------------------- class Game extends Phaser.Game { // ------------------------------------------------------------------------- constructor() { // init game super(640, 400, Phaser.CANVAS, "content", State); } } // ------------------------------------------------------------------------- // ------------------------------------------------------------------------- // ------------------------------------------------------------------------- class State extends Phaser.State { private static CANNON_SPEED = 2; private static MISSILE_SPEED = 6; private _cannon: Phaser.Sprite; private _cannonTip: Phaser.Point = new Phaser.Point(); private _space: Phaser.Key; private _drones: Phaser.Group; private _dronesCollisionGroup: Phaser.Physics.P2.CollisionGroup; private _missiles: Phaser.Group; private _missilesCollisionGroup: Phaser.Physics.P2.CollisionGroup; // ------------------------------------------------------------------------- preload() { // background image this.game.load.image("BG", "bg.jpg"); // load sprite images in atlas this.game.load.atlas("Atlas", "atlas.png", "atlas.json"); } // ------------------------------------------------------------------------- create() { // background this.add.image(0, 0, "BG"); // set physiscs to P2 physics engin this.game.physics.startSystem(Phaser.Physics.P2JS); // cannon - place it in the bottom center this._cannon = this.game.add.sprite(this.world.centerX, this.world.height, "Atlas", "cannon"); // offset it from position this._cannon.anchor.setTo(-0.75, 0.5); // make it point straight up this._cannon.rotation = -Math.PI / 2; // cannon base - place over cannon, so it overlaps it var base = this.game.add.sprite(this.world.centerX, this.world.height, "Atlas", "base"); base.anchor.setTo(0.5, 1); // Game input this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT); this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT); this._space = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); // following keys will not be propagated to browser this.game.input.keyboard.addKeyCapture([Phaser.Keyboard.LEFT, Phaser.Keyboard.RIGHT, Phaser.Keyboard.SPACEBAR]); // allow inpact events this.game.physics.p2.setImpactEvents(true); // collision groups for drones this._dronesCollisionGroup = this.game.physics.p2.createCollisionGroup(); // collision groups for missiles this._missilesCollisionGroup = this.physics.p2.createCollisionGroup(); // drones group this._drones = this.add.group(); this._drones.physicsBodyType = Phaser.Physics.P2JS; this._drones.enableBody = true; // create 8 drones this._drones.classType = Dron; this._drones.createMultiple(8, "Atlas", "dron1"); this._drones.forEach(function (aDron: Dron) { // setup movements and animations aDron.setUp(); // setup physics var body: Phaser.Physics.P2.Body = aDron.body; body.setCircle(aDron.width / 2); body.kinematic = true; // does not respond to forces body.setCollisionGroup(this._dronesCollisionGroup); // adds group drones will collide with and callback body.collides(this._missilesCollisionGroup, this.hitDron, this); //body.debug = true; }, this); // missiles group this._missiles = this.add.group(); this._missiles.physicsBodyType = Phaser.Physics.P2JS; this._missiles.enableBody = true; // create 10 missiles this._missiles.createMultiple(10, "Atlas", "missile"); this._missiles.forEach(function (aMissile: Phaser.Sprite) { aMissile.anchor.setTo(0.5, 0.5); // physics var body: Phaser.Physics.P2.Body = aMissile.body; body.setRectangle(aMissile.width, aMissile.height); body.setCollisionGroup(this._missilesCollisionGroup); body.collides(this._dronesCollisionGroup); // body.debug = true; }, this); } // ------------------------------------------------------------------------- update() { // shortcut var keyboard: Phaser.Keyboard = this.game.input.keyboard; // left and right key if (keyboard.isDown(Phaser.Keyboard.LEFT)) { // calculate frame independent speed - 45 degrees (PI/4) in 1 second adjusted with cannon speed this._cannon.rotation -= this.time.elapsedMS * State.CANNON_SPEED / 1000 * (Math.PI / 4); } else if (keyboard.isDown(Phaser.Keyboard.RIGHT)) { this._cannon.rotation += this.time.elapsedMS * State.CANNON_SPEED / 1000 * (Math.PI / 4); } else if (this._space.justDown) { // fire missile // get firtst missile from pool var missile: Phaser.Sprite = this._missiles.getFirstExists(false); if (missile) { // calculate position of cannon tip. Put distance from cannon base along x axis and rotate it to cannon angle this._cannonTip.setTo(this._cannon.width * 2, 0); this._cannonTip.rotate(0, 0, this._cannon.rotation); missile.reset(this._cannon.x + this._cannonTip.x, this._cannon.y + this._cannonTip.y); (<Phaser.Physics.P2.Body> missile.body).rotation = this._cannon.rotation; // life of missile in millis missile.lifespan = 1500; // set velocity of missile in direction of cannon barrel (<Phaser.Physics.P2.Body> missile.body).velocity.x = this._cannonTip.x * State.MISSILE_SPEED; (<Phaser.Physics.P2.Body> missile.body).velocity.y = this._cannonTip.y * State.MISSILE_SPEED; } } // limit cannon rotation to left and right to +/- 45 degrees ... -135 to -45 degrees here this._cannon.rotation = Phaser.Math.clamp(this._cannon.rotation, -1.5 * Math.PI / 2, -0.5 * Math.PI / 2); } // ------------------------------------------------------------------------- render() { /* // uncomment to visual debug, also uncommnet "body.debug = true;" when creating missiles and drones this._drones.forEach(function (aDron: Dron) { this.game.debug.body(aDron); }, this); this._missiles.forEach(function (aMissile: Phaser.Sprite) { this.game.debug.body(aMissile); }, this); */ } // ------------------------------------------------------------------------- private hitDron(aObject1: any, aObject2: any) { // explode dron and remove missile - kill it, not destroy (<Dron> aObject1.sprite).explode(); (<Phaser.Sprite> aObject2.sprite).kill(); } } // ------------------------------------------------------------------------- // ------------------------------------------------------------------------- // ------------------------------------------------------------------------- class Dron extends Phaser.Sprite { // ------------------------------------------------------------------------- public setUp() { this.anchor.setTo(0.5, 0.5); // random position this.reset(this.game.rnd.between(40, 600), this.game.rnd.between(60, 150)); // random movement range var range: number = this.game.rnd.between(60, 120); // random duration of complete move var duration: number = this.game.rnd.between(30000, 50000); // random parameters for wiggle easing function var xPeriod1: number = this.game.rnd.between(2, 13); var xPeriod2: number = this.game.rnd.between(2, 13); var yPeriod1: number = this.game.rnd.between(2, 13); var yPeriod2: number = this.game.rnd.between(2, 13); // set tweens for horizontal and vertical movement var xTween = this.game.add.tween(this.body) xTween.to({ x: this.position.x + range }, duration, function (aProgress: number) { return wiggle(aProgress, xPeriod1, xPeriod2); }, true, 0, -1); var yTween = this.game.add.tween(this.body) yTween.to({ y: this.position.y + range }, duration, function (aProgress: number) { return wiggle(aProgress, yPeriod1, yPeriod2); }, true, 0, -1); // define animations this.animations.add("anim", ["dron1", "dron2"], this.game.rnd.between(2, 5), true); this.animations.add("explosion", Phaser.Animation.generateFrameNames("explosion", 1, 6, "", 3)); // play first animation as default this.play("anim"); } // ------------------------------------------------------------------------- public explode() { // remove movement tweens this.game.tweens.removeFrom(this.body); // explode dron and kill it on complete this.play("explosion", 8, false, true); } } // ------------------------------------------------------------------------- // ------------------------------------------------------------------------- // ------------------------------------------------------------------------- function wiggle(aProgress: number, aPeriod1: number, aPeriod2: number): number { var current1: number = aProgress * Math.PI * 2 * aPeriod1; var current2: number = aProgress * Math.PI * 2 * aPeriod2; return Math.sin(current1) * Math.cos(current2); } // ------------------------------------------------------------------------- // ------------------------------------------------------------------------- // ------------------------------------------------------------------------- window.onload = () => { new Game(); };
No comments:
Post a Comment