Phaser.Graphics placement in Phaser.Sprite

[johugo]

Hello, 

I am working for the first time with Phaser and instead of creating .png files I want to create all my game graphics via the Phaser.Graphics object. I started out to place the Phaser.Graphics objects onto a Phaser.Sprite object and add the sprite to the game. Works fine, except there seems to be a problem regarding the placement. The Graphic objects are not placed in the center of the sprite. This causes the problem of a incorrect angle calculation. So I have 2 questions:

1. Is this the best way to create a Phaser.Graphics only based game ?

2. Why is the positioning of the objects not how i except them to be ?

 

Thank´s for your help

 

import Phaser from 'phaser'

class ForceControl extends Phaser.Sprite {
	constructor(game, x, y) {
		super(game, x, y)

		this.directionIndicator = this.drawRectangle()

		this.addChild(this.drawCircle())
		this.addChild(this.directionIndicator)

		this.game.add.existing(this)

		this.inputEnabled = true
		this.events.onInputDown.add(this.onDown, this)
		this.events.onInputUp.add(this.onUp, this)
		this.input.useHandCursor = true;


		this.updateForce = false

		this.center = this.drawDot()
		this.center.x = this.x
		this.center.y = this.y
		this.addChild(this.center)

		this.mouse = this.drawDot()
		this.mouse.x = this.game.input.x
		this.mouse.y = this.game.input.y
		this.addChild(this.mouse)

	}

	onDown() {
		console.log("ForceControl down")
		this.updateForce = true
	}

	onUp() {
		console.log("ForceControl up")
		this.updateForce = false
	}

	drawRectangle() {
		let graphics = new Phaser.Graphics(this.game, this.x, this.y)
		graphics.lineStyle(2, 0xFF000,1)
		graphics.arc(0, 0, 15, 0, Math.PI, false);
		graphics.drawPolygon( [{x:15, y:0}, {x:0, y:30}, {x:-15, y:0}] );

		return graphics
	}

	drawCircle() {
		let graphics = new Phaser.Graphics(this.game, this.x, this.y)
		graphics.lineStyle(2, 0xFF0000,1)
		graphics.drawCircle(0, 0, 30);

		return graphics
	}

	drawDot() {
		let graphics = new Phaser.Graphics(this.game, this.width / 2, this.height / 2)
		graphics.lineStyle(2, 0xFF0000,1)
		graphics.drawCircle(0, 0, 10);

		return graphics
	}

	getAngle(p1, p2) {
		// angle in radians
		let angleRadians = Math.atan2(p2.y - p1.y, p2.x - p1.x);

		// angle in degrees
		let angleDeg = (Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI);

		return angleDeg
	}

	update() {

		if(this.updateForce) {

			let angle = this.getAngle({x: this.x, y: this.y}, {x: this.game.input.x, y: this.game.input.y})
			console.log("Angle:"+angle)

			this.directionIndicator.angle = angle

			this.mouse.x = this.game.input.x
			this.mouse.y = this.game.input.y

		}
	}

}

export default ForceControl