Need help with Aiming using gamepad

Phaser 3
1


Hi there. I have a player object with some ui elements on the player to show the aiming. Im using a gamepad for input. It is in the style of a top down shooter.

The stick input is assigned to velocity, and the angle from the body is assigned to the blue pointer. The blue pointer can point in a direction, but once the left stick is released, the angle of the body resets to 0, and the blue pointer resets its position based on the bodys angle. 0 has the blue pointer pointing in the right direction.

I want the blue pointer to retain its position even after the left stick is released.

I’m having trouble trying to find a solution. Im guessing there maybe better ways to implement this. Any help or suggestions will be very much appreciated.

import { Entity } from "./Entity";

import { PlayerIdleState } from '../states/state-types/PlayerIdleState.js';
import { StateMachine } from '../states/StateMachine.js';
import { PlayerAttackState } from "../states/state-types/PlayerAttackState";

export class Player extends Entity {
  constructor(scene, x, y, texture) {
    super(scene, x, y, texture)
    this.scene = scene
    this.body.setSize(13, 10)

    this.playerStateMachine = new StateMachine('idle', {
      idle: new PlayerIdleState(),
      attack: new PlayerAttackState()
    }, [this, scene])

    this.text = this.scene.add.text(20, 20, "")

    this.isMoving = true

    this.body.setAllowDrag(true);
    this.body.setDrag(300, 300);
    this.body.setMaxVelocity(110, 110);

    this.graphics = this.scene.add.graphics({ fillStyle: { color: 0x2266aa } });
    this.circle = new Phaser.Geom.Ellipse(0, 0, 40, 40);

    this.setFrame(7)
    this.setOffset(20, 19)
  }
  update() {
    this.graphics.clear();
    this.graphics.lineStyle(2, 0x00aaaa);
    this.graphics.strokeEllipseShape(this.circle);
    
    this.circle.x = this.body.x
    this.circle.y = this.body.y
    
// stick axes
    this.pad = this.scene.input.gamepad.getPad(0);

    if (this.isMoving) {
      if (this.pad) {
        if (this.pad.axes.length) {

          var axisH = this.pad.axes[0].getValue();
          var axisV = this.pad.axes[1].getValue();

          let circumferencePoint = Phaser.Geom.Ellipse.CircumferencePoint(this.circle, this.body.angle);
          this.graphics.fillPointShape(circumferencePoint, 10);

          this.body.velocity.x += 9 * axisH;
          this.body.velocity.y += 9 * axisV;

        }
      }
    }
    this.playerStateMachine.step()
  }
}
2

I found a solution. I used a conditional to exclude the 0 from the left stick input and stored the last value into a variable, using that variable as its angle when the left stick returns to its default position, or is not being used.

  update() {
    this.graphics.clear();
    this.graphics.lineStyle(2, 0x00aaaa);
    this.graphics.strokeEllipseShape(this.circle);

    this.circle.x = this.body.x + 6
    this.circle.y = this.body.y + 6

    this.pad = this.scene.input.gamepad.getPad(0);

    // Movement
    if (this.isMoving) {
      if (this.pad) {
        if (this.pad.axes.length) {
          let axisH = this.pad.axes[0].getValue();
          let axisV = this.pad.axes[1].getValue();
          this.body.velocity.x += 9 * axisH;
          this.body.velocity.y += 9 * axisV;
        }
      }
    }
    // Direction Point
    if (this.pad) {
      if (this.pad.axes.length) {
        let controllerAngle = this.pad.leftStick.angle()
        if (controllerAngle == 0) {
          this.circumferencePoint = Phaser.Geom.Ellipse.CircumferencePoint(this.circle, this.storedVar);
          this.graphics.fillPointShape(this.circumferencePoint, 10);
        } else {
          this.circumferencePoint = Phaser.Geom.Ellipse.CircumferencePoint(this.circle, controllerAngle);
          this.graphics.fillPointShape(this.circumferencePoint, 10);
          this.storedVar = controllerAngle

        }
      }
    }
    this.playerStateMachine.step()
  }

Yet again, I had problems again and realised you can used the left sticks length and angle to get the desired result.

// Direction Point
    if (this.pad) {
      if (this.pad.axes.length) {
        let controllerAngle = this.pad.leftStick.angle()
        if (this.pad.leftStick.length() > 0) {
            this.circumferencePoint = Phaser.Geom.Ellipse.CircumferencePoint(this.circle, controllerAngle);
          this.graphics.fillPointShape(this.circumferencePoint, 10);
          this.storedVar = controllerAngle
        } else {
          this.circumferencePoint = Phaser.Geom.Ellipse.CircumferencePoint(this.circle, this.storedVar);
          this.graphics.fillPointShape(this.circumferencePoint, 10);
        }
      }
    }

This got me where I wanted it.