Image anchor and tween rotation

[Maks]

Hi everyone,

 

Basically, I'd like to have an image, which rotates from 0 to 360 and whose texture anchor is (0.5, 0.25). But I'd like center of rotation to behave like with anchor (0.5, 0.5). I've tried the pivot trick, but it won't works. Notice that I have my image's angle to equal the targeted sprite angle in update method.

 

Here's a simple Typescript code :

 

export class CameraFocusComponent extends Phaser.Image implements Component {    private _tween: {value: number} = {value: 0};    constructor(public target: Player) {        super(target.game, target.x, target.y, 'focus');        this.anchor.setTo(0.5, 0.25);        this.alpha = 0.5;        this.game.add.tween(this._tween).to({value: 360}, 2000, Phaser.Easing.Linear.None, true, 0, -1, false);        this.kill();        this.game.add.existing(this);        this.target.bringToTp();    }    update() {        (this.game.camera.target === this.target) ? this.revive() : this.kill();        this.x = this.target.x;        this.y = this.target.y;        this.angle = this.target.angle + this._tween.value;    }}

Any idea ?

 

[Maks]

Ok, got it working with pivot property

///<reference path='../../../typings/tsd.d.ts' />import {Component} from '../Component';import {Player} from '../Player';export class CameraFocusComponent extends Phaser.Group implements Component {    constructor(public target: Player) {        super(target.game);        var image = new Phaser.Image(this.game, 0, 0, 'focus');        image.alpha = 0.7;        image.anchor.setTo(0.5, 0.5);        this.pivot.x = 0;        this.pivot.y = -image.height / 4;        this.game.add.tween(image).to({angle: '+360'}, 2000, Phaser.Easing.Linear.None, true, 0, -1, false);        this.addChild(image);        this.hide();        this.game.add.existing(this);        this.target.bringToTop();    }    public show(): void {        this.visible = true;        this.renderable = true;        this.exists = true;    }    public hide(): void {        this.visible = false;        this.renderable = false;        this.exists = false;    }    update() {        (this.game.camera.target === this.target) ? this.show() : this.hide();        this.x = this.target.x;        this.y = this.target.y;        this.angle = this.target.angle;    }}