Jump to content

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

Fractal Games

Recommended Posts

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.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...