Search the Community

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.