BasicNavigator works but with some jitter

game/js/game-app.js

@@ -122,7 +122,7 @@ export default class GameApp extends NiceGame {
     const now = performance.now();
 
     this.spawnRandomEnemy();
-    this.nextSpawnInterval = 60000 * 2;
+    this.nextSpawnInterval = 1800 * 2;
     this.nextSpawnTime = now + this.nextSpawnInterval;
 
     this.formations = [ ];
@@ -197,22 +197,25 @@ export default class GameApp extends NiceGame {
   }
 
   spawnRandomEnemy ( ) {
-    switch (2 /*NiceMath.randomRangeInt(1, 4)*/) {
-      case 1:
-        this.enemies.spawnBeardson();
-        break;
-
-      case 2:
-        this.enemies.spawnGroyper();
-        break;
-
-      case 3:
-        this.enemies.spawnTorba();
-        break;
-
-      case 4:
-        this.enemies.spawnFuentesFagFace();
-        break;
+    const count = NiceMath.randomRangeInt(1, 3);
+    for (let i = 0; i < count; ++i) {
+      switch (NiceMath.randomRangeInt(1, 4)) {
+        case 1:
+          this.enemies.spawnBeardson();
+          break;
+  
+        case 2:
+          this.enemies.spawnGroyper();
+          break;
+  
+        case 3:
+          this.enemies.spawnTorba();
+          break;
+  
+        case 4:
+          this.enemies.spawnFuentesFagFace();
+          break;
+      }
     }
   }
 

game/js/lib/game-background.js

@@ -396,7 +396,7 @@ export default class GameBackground {
         this.butterfly = new GameButterfly(
           this.game,
           this.game.images['bg:butterfly-002'],
-          new NiceVector2d(64, 120),
+          new NiceVector2d(320, 280),
         );
         this.butterfly.navigator.setMoveSpeed(40.0);
         this.butterfly.navigator.setTargetPosition(new NiceVector2d(503, 386));

game/js/lib/game-object.js

@@ -27,6 +27,13 @@ export default class GameObject extends NiceSprite {
 
   render (ctx) {
     super.render(ctx);
+    // this.renderDiagnostics(ctx);
+  }
+
+  renderDiagnostics (ctx) {
+    /*
+     * Render target dot (red)
+     */
 
     if (this.navigator) {
       ctx.beginPath();
@@ -34,8 +41,8 @@ export default class GameObject extends NiceSprite {
       ctx.ellipse(
         this.navigator.targetPosition.x,
         this.navigator.targetPosition.y,
-        8,
-        8,
+        4,
+        4,
         0,
         0,
         Math.PI * 2,
@@ -43,21 +50,48 @@ export default class GameObject extends NiceSprite {
       );
       ctx.fill();
 
+      /*
+       * Indicate desired rotation and move speed (red)
+       */
       ctx.beginPath();
       ctx.moveTo(this.position.x, this.position.y);
       ctx.lineTo(
-        this.position.x + (Math.cos(this.navigator.desiredRotation) * this.navigator.moveSpeed),
-        this.position.y + (Math.sin(this.navigator.desiredRotation) * this.navigator.moveSpeed)
+        this.position.x + (Math.cos(this.navigator.desiredRotation) * 20.0),
+        this.position.y + (Math.sin(this.navigator.desiredRotation) * 20.0)
       );
       ctx.strokeStyle = '#ff0000';
       ctx.lineWidth = 2.0;
       ctx.stroke();
 
+      /*
+       * render actual rotation/heading and last step taken
+       */
+
+      ctx.beginPath();
+      ctx.moveTo(this.position.x, this.position.y);
+      ctx.lineTo(
+        this.position.x + (Math.cos(this.rotation) * 10.0),
+        this.position.y + (Math.sin(this.rotation) * 10.0)
+      );
+      ctx.strokeStyle = '#0000ff';
+      ctx.stroke();
+
+      if (this.navigator.lastStep) {
+        ctx.beginPath();
+        ctx.moveTo(
+          this.position.x - this.navigator.lastStep.x,
+          this.position.y - this.navigator.lastStep.y
+        );
+        ctx.lineTo(this.position.x, this.position.y);
+        ctx.strokeStyle = '#00ffff';
+        ctx.stroke();
+      }
+
       const oldTextAlign = ctx.textAlign;
       ctx.textAlign = 'center';
       ctx.fillStyle = '#ffffff';
       ctx.font = 'bold 12px Larabie';
-      ctx.fillText(`${this.navigator.desiredRotation}`, this.position.x, this.position.y);
+      ctx.fillText(`${this.navigator.desiredRotation}`, this.position.x, this.position.y - 6);
       ctx.textAlign = oldTextAlign;
     }
   }

game/js/lib/game-player.js

@@ -33,7 +33,7 @@ export default class GamePlayer extends NiceSprite {
   async load ( ) {
     const jobs = [ ];
 
-    jobs.push(super.load('/dist/assets/img/big-baja-tex.png', CELL_WIDTH, CELL_HEIGHT));
+    jobs.push(super.load('/dist/assets/img/baja-tex.png', CELL_WIDTH, CELL_HEIGHT));
 
     jobs.push(this.voiceChannel.loadQuip('tex-biggerfish'));
     jobs.push(this.voiceChannel.loadQuip('tex-candy'));

game/js/lib/game-zoomer.js

@@ -20,7 +20,7 @@ export default class GameZoomer extends GameObject {
     );
 
     this.navigator = new GameObjectBehaviors.BasicNavigator(game, this);
-    this.navigator.setMoveSpeed(120.0);
+    this.navigator.setMoveSpeed(160.0);
     this.navigator.setRotateSpeed(5);
     this.navigator.setTerminateAtTarget(false);
     this.addBehavior(this.navigator);
@@ -29,10 +29,16 @@ export default class GameZoomer extends GameObject {
   }
 
   chooseNewTarget ( ) {
-    this.navigator.setTargetPosition(new NiceVector2d(
-      this.game.getRandomPlayfieldX(this.image.width / 2.0),
-      32 + (Math.random() * 200),
-    ));
+    let newPosition;
+
+    do {
+      newPosition = new NiceVector2d(
+        this.game.getRandomPlayfieldX(this.image.width / 2.0),
+        32 + (Math.random() * 200),
+      );
+    } while (newPosition.isNear(this.position, this.navigator.moveSpeed));
+
+    this.navigator.setTargetPosition(newPosition);
   }
 
   update (elapsed, now) {

game/js/lib/object-behaviors/basic-navigator.js

@@ -4,7 +4,7 @@
 
 'use strict';
 
-import { NiceMath } from "dtp-nice-game";
+import { NiceMath, NiceVector2d } from "dtp-nice-game";
 
 export class BasicNavigator {
 
@@ -89,15 +89,33 @@ export class BasicNavigator {
 
     // update gameObject rotation towards the desired rotation
     if (this.gameObject.rotation !== this.desiredRotation) {
-      const ldist = Math.abs(this.gameObject.rotation - this.desiredRotation);
-      const rdist = Math.abs(this.desiredRotation - this.gameObject.rotation);
-      if (ldist <= rdist) {
-        this.gameObject.rotation += TURN_AMOUNT;
+      if (AT_DESTINATION) {
+        if (this.gameObject.rotation < this.desiredRotation) {
+          this.gameObject.rotation += TURN_AMOUNT;
+          if (this.gameObject.rotation > this.desiredRotation) {
+            this.gameObject.rotation = this.desiredRotation;
+          }
+        }
+        if (this.gameObject.rotation > this.desiredRotation) {
+          this.gameObject.rotation -= TURN_AMOUNT;
+          if (this.gameObject.rotation < this.desiredRotation) {
+            this.gameObject.rotation = this.desiredRotation;
+          }
+        }
       } else {
-        this.gameObject.rotation -= TURN_AMOUNT;
-      }
-      if (NiceMath.isAngleNear(this.gameObject.rotation, this.desiredRotation, TURN_AMOUNT)) {
-        this.gameObject.rotation = this.desiredRotation;
+        let dir = this.targetPosition
+          .clone()
+          .subtract(this.gameObject.position)
+          .normalize()
+          .rotate(-this.gameObject.rotation - (Math.PI / 2.0));
+        if (dir.x < 0) {
+          this.gameObject.rotation -= TURN_AMOUNT;
+        } else {
+          this.gameObject.rotation += TURN_AMOUNT;
+        }
+        if (NiceMath.isAngleNear(this.gameObject.rotation, this.desiredRotation, TURN_AMOUNT)) {
+          this.gameObject.rotation = this.desiredRotation;
+        }
       }
     }
 
@@ -110,10 +128,12 @@ export class BasicNavigator {
      * the gameObject's current rotation
      */
 
-    let deltaX = Math.cos(this.gameObject.rotation) * this.moveSpeed * TIME_SCALE;
-    let deltaY = Math.sin(this.gameObject.rotation) * this.moveSpeed * TIME_SCALE;
-    this.gameObject.position.x += deltaX;
-    this.gameObject.position.y += deltaY;
+    this.lastStep = new NiceVector2d(
+      Math.cos(this.gameObject.rotation) * MOVE_AMOUNT,
+      Math.sin(this.gameObject.rotation) * MOVE_AMOUNT
+    );
+    this.gameObject.position.x += this.lastStep.x;
+    this.gameObject.position.y += this.lastStep.y;
 
     if (this.gameObject.position.isNear(this.targetPosition, MOVE_AMOUNT)) {
       this.gameObject.position = this.targetPosition.clone();