CorayThan Posted September 1, 2017 Share Posted September 1, 2017 I'm trying to create a radial gradient that starts from a point and grows from there, a little like smoke filling a room. I started with this example: https://phaser.io/examples/v2/bitmapdata/radial-gradient And have been slowly tweaking it to meet my needs. My current issue is that when my tween stops running the entire thing disappears. It's probably a really obvious issue, but I'm a newb and can't find it, so was hoping for help! Here's what I've got (it's in Typescript): in create: this.radGrad = this.game.make.bitmapData(800, 600); this.radGrad.addToWorld(); this.radCircle = new Phaser.Circle(200, 200, 0); this.outerCircle = new Phaser.Circle(200, 200, 300); this.smokeTween = this.game.add.tween(this.radCircle).to( { radius: 300 }, 20000, Phaser.Easing.Sinusoidal.Out, true); In update: const grd = this.radGrad.context.createRadialGradient(this.radCircle.x, this.radCircle.y, this.radCircle.radius, this.outerCircle.x, this.outerCircle.y, this.outerCircle.radius); grd.addColorStop(0, "rgba(0,0,0,0.3)"); grd.addColorStop(1, "transparent"); this.radGrad.cls(); this.radGrad.circle(this.outerCircle.x, this.outerCircle.y, this.outerCircle.radius, grd); Link to comment Share on other sites More sharing options...
3man7 Posted September 2, 2017 Share Posted September 2, 2017 Well I'm new to Phaser as well but here's my take: The problem here is the value given to the radius in tween. Should've been half of the size given in 'outerCircle', which is 150. (this.outerCircle = new Phaser.Circle(200, 200, 300);) But for some reason it doesn't accept the perfect half, but by a point off. (149.9) (not sure why, hopefully someone could help me on this one) This is a dirty hack and I would definitely look into other ways of dealing with this kind of effect. //define variable var circleRadius = 300; //create this.outerCircle = new Phaser.Circle(200, 200, circleRadius); //update this.smokeTween = this.game.add.tween(this.radCircle).to( { radius: circleRadius / 2 - .1 }, 20000, Phaser.Easing.Sinusoidal.Out, true); Link to comment Share on other sites More sharing options...
CorayThan Posted September 5, 2017 Author Share Posted September 5, 2017 You're right that I was using the same number for diameter and radius. Later I tried removing the inner circle entirely, though, and just did a gradient from a center point, and had the same issue. Now I'm on a different computer and not having the same issue at all though ... maybe it is a browser-specific issue? Link to comment Share on other sites More sharing options...
Recommended Posts