Danmaku in Phaser 3 (step 8): Washer Spiral

In lesson 2 we created a spiral danmaku which spit out a single stream of bullets which rotated. You could change the direction of rotation by changing the angular velocity parameter of the danmaku. In lesson 6 we created a version which spit out multiple stream of bullets which rotated. In lesson, we made a danmaku which spits out streams that rotate in opposite directions. In each case, each 'stream' of bullets continued to spin in the same direction. What if the direction of spin changed? Like a washing machine? That is the objective of this lesson. In Japanese this type of danmaku is called 洗濯機渦巻弾, literally translated means Washing Machine Spiralling Bullets.

Washer Spiral Danmaku

In all the spiralling danmaku created so far, we have used the physics.body's 'angularVelocity' property to 'automatically' rotate the direction of the 'cannon', i.e. the direction in which the bullet is fired, which is the 'angle' property of the physics body.

Use of Tween to manipulate angle

To change the direction of rotation, we could perhaps change the 'sign' of the 'angularVelocity' at fixed intervals. That could probably be achieved by creating another timer. However, in this lesson I will make use of something called a Tween. According to Phaser documentation, "A Tween is able to manipulate the properties of one or more objects to any given value, based on a duration and type of ease". The very powerful feature is the ability to choose different types of "ease", which can be used to create all sorts of different patterns. It is easier to understand how this may work by looking at the code.

this.swing = this.scene.tweens.add({
      targets: this,
      angle: this.startAngle + this.swingAngle,
      ease: this.swingType, 
      duration: this.cycleLength,
      repeat: -1,
      yoyo: true
    }); // end of tween which adjusts the angle

The above tween changes the angle property (angle:) of 'this' game object (targets) being the danmaku spawner (which has deliberately been created as a sprite) to change from the starting angle position (which is set by the configuration object fed to the danmaku spawner) to this.startAngle + this.swingAngle, over a specified period of time set by 'this.cycleLength'. In other words, the cannon swings from this.startAngle by this.swingAngle, over a time period of this.cycleLength. For example, the below DanmakuWrapper configuration will make 4 streams of bullets swing across an 90 degrees over 800 ms, in a linear fashion.

danmaku = new DanmakuWrapper(this, {
    x: enemy.x, // origin of the danmaku spawn
    y: enemy.y, // origin of the danmaku spawn
    shootAngle: 0, // direction in which the cannon faces, ie bullet direction.
    numberOfCannons: 4, // number of cannons
    bulletSpeed: 200, // speed of bullets fired from cannon
    bulletAcceleration: 0, // acceleration of bullets fired from cannon
    timeBetweenBullets: 60, // time between bullets in ms
    bulletType: "bullet7", // specify the bullet image to be used
    swingAngle: 90, // how many degrees the cannon rotates before it switches direction
    swingType: "Linear", // 'Linear', Cubic', 'Elastic', 'Bounce', 'Back'
    cycleLength: 800 // time taken for cannon to swing from one side to the other in ms
  });

Since the angle is being directly manipulated by the tween, we have got rid of the bulletAngleVelocity parameter altogether.