New to Phaser - A question about tweening a group (typescript class)

[Fractal Games]

Hey everyone,

My team and I just started a small start-up Fractal Games for HTML5 games to be deployed on Android, iOS and web. We chose Phaser - it works really great - props to Rich and his team.

 

Being new to Phaser I managed to get really far in the game without any problems but now I am making my first post on the forum to get some help and hopefully will be able to help others when I get more experience. Before writing this - i tried google, examples.phaser.io and this forum for about 10 hours.

 

So here is the situation:

 

1.) I am trying to make buttons like these:

 

2.) I am making a typescript class which extends Phaser.Group (I tried extending Phaser.Button also and I still get the same problem).

class CircularButton extends Phaser.Group {    FONT_STYLE: any;    positionX: number;    positionY: number;    id: string;    size: number;    alpha: number;    colour: string;    text: string;    icon: string;    callback: Function;    context: any;    constructor(game: Phaser.Game, id: string, positionX: number, positionY: number, size: number, alpha: number,        colour: string, text: string, callback: Function, context: any, icon?: string) {        super(game);        this.id = id;        this.positionX = positionX;        this.positionY = positionY;        this.size = size;        this.alpha = alpha;        this.colour = colour;        this.text = text;        this.callback = callback;        this.context = context;        this.icon = icon;        var bitmapData = new Phaser.BitmapData(game, "circles", this.size, this.size);        GraphicUtils.DrawConcentratedCircles(bitmapData, this.size, this.colour, this.alpha);        var sprite = game.add.sprite(positionX, positionY, bitmapData);        this.FONT_STYLE = {            font: "27pt Signika",            fill: "#ffffff",        };        var iconSprite = this.game.add.sprite(this.positionX + size / 2, this.positionY + size / 2, this.icon);        iconSprite.anchor.x = 0.6;        iconSprite.anchor.y = 0.6;        var tempText = game.add.text(this.positionX + this.size / 2, this.positionY + this.size / 2, this.text, this.FONT_STYLE);        tempText.anchor.x = 0.5;        tempText.anchor.y = 0.5;        tempText.align = "center";        tempText.lineSpacing = -2.25;        if (this.icon != null) {            tempText.position.y = this.positionY + this.size * 0.8;        }        sprite.inputEnabled = true;        sprite.input.useHandCursor = true;         sprite.events.onInputDown.add(this.callback, this.context);    }}

Notes: GraphicUtils.DrawConcentratedCircles is a simple static method which draws the Concentric circles. I tried to tidy up my code so that it is easier to read.

 

3.) Now I instantiate those buttons in my StatisticsState.

 this.iqPointsButon = new CircularButton(this.game, "IqPoints", this.game.width * 0.109259, this.game.height * 0.5583333, 303, 0.2, "#cccccc", "IQ POINTS\nWON",            function () { console.log("clickedCircularButton") }, this);        this.game.add.existing(this.iqPointsButon);

4.) And try to tween them(in different ways because it doesn't work):

  var tweenTest = this.game.add.tween(this.iqPointsButon).to({ positionX: 1000 }, 5000);        tweenTest.start();        var tween = this.game.add.tween(this.iqPointsButon).to({ x: 1000 }, 5000);        tween.start(); 

Notes: Both 4.) and 5.) happen in the create() method.

 

5.) Problems:

Main problem is that the buttons show fine, the click handler works, but none of the buttons tween. My final goal would be to add them to a new group, foreach them and tween accordingly depending on the button clicked (which should be fine). I just can't seem to tween eigher of them

 

Second smaller problem is that when I decrease further the linespacing, the text gets cut off at the bottom. This is not a huge problem but if you could give me your opinion, I would be thankful.

 

Thank you for your time.

[Fractal Games]

Solved: 

Should be doing  this.add (sprite), this.add (text) and so on. My class remains empty with the code above and only draws on the screen.

 

Still can't figure out the text cuts - it happened even without linespacing today.