Side note: Amazing library called Tweakpane

This post is not about a new danmaku pattern. Instead it is a remarkable library I found which has made the testing of new danmaku generators much easier. It is called Tweakpane.

It is described as follows:

Tweakpane is a compact pane library for fine-tuning parameters and monitoring value changes, inspired by dat.GUI.

I think it's easier to see what it does by looking at the screen image.

The official home page here explains how to use it. It is very straightforward.

You need to load the library. As I am running on CodePen, I simply include the following to load it from the CDN.

https://cdn.jsdelivr.net/npm/tweakpane@3.0.5/dist/tweakpane.min.js

Then you need to create the pane. I have created it as a global variable, by sticking the relevant code after the line to instantiate the Phaser game object.

const game = new Phaser.Game(config);
const pane = new Tweakpane.Pane();

Then you need to add the parameters you want to adjust to the tweakpane. I have put all of that in a function and called it createTweakPane

function createTweakPane() {
  const PARAMS = {
    BulletSpeed: danmaku.bulletSpeed,
    ShootDelay: danmaku.timeBetweenBullets,
    CannonsNo: danmaku.numberOfCannons,
    RotationRate: danmaku.body.angularVelocity
  };
  BulletSpeed = pane.addInput(PARAMS, "BulletSpeed", {
    min: 10,
    max: 500,
    step: 10
  });
  BulletSpeed.on("change", function (ev) {
    danmaku.bulletSpeed = ev.value;
  });
  ShootDelay = pane.addInput(PARAMS, "ShootDelay", {
    min: 10,
    max: 500,
    step: 10
  });
  ShootDelay.on("change", function (ev) {
    danmaku.timeBetweenBullets = ev.value;
    danmaku.machineGun.delay = ev.value; // need to change property of the timer event of danmaku object
  });
  CannonsNo = pane.addInput(PARAMS, "CannonsNo");
  CannonsNo.on("change", function (ev) {
    danmaku.numberOfCannons = ev.value;
  });
  RotationRate = pane.addInput(PARAMS, "RotationRate");
  RotationRate.on("change", function (ev) {
    danmaku.body.angularVelocity = ev.value;
  });
}

Of course, you need to call this function from the main create function.

 createTweakPane();

And that's it! Take a look at the below CodePen Pen. This is the multiple sprial danmaku created in lesson 6 with the tweakpane allowing you to control 4 parameters: (i) Bullet speed, (ii) Time betwen bullets, (iii) Number of Cannons, and (iv) Rotation Velocity of the Cannons. You will probably find that adjusting the parameters usually lead to patterns that you did not imagine!