Search the Community

Hello everyone, I am new tophaser. I am trying to draw small circle using bitmapData. when the function lunchFrom and loop calling without time event function it's fine working but when I am tryting call the function using this.game.time.event then nothing to draw on canvas. please help me. Thanks is advance . Please find below the code which I am using. this.game = new Phaser.Game(1152, 648, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update }); let particles = []; let mousePos = { x: 200, y: 200 } function preload() { } function create() { this.bmdAnimation = this.game.add.bitmapData(1152, 648); this.animationSprite = this.game.add.sprite(0, 0, this.bmdAnimation); this.context = this.bmdAnimation.ctx; // launchFrom.apply(this); // loop.apply(this); this.game.time.events.add(800, launchFrom, this); this.game.time.events.add(20, loop, this); } function update() { } function launchFrom() { mousePos.y-=5; let particle = new Particle(mousePos); particles.push(particle); } function loop() { for (let i = 0; i < particles.length; i++) { particles[i].update(); particles[i].render(this.context); } } export class Particle { position: any; color: number; alpha: number; size: number; flick: boolean; constructor(position) { this.position = { x: position ? position.x : 0, y: position ? position.y : 0 } this.color = Math.random() * 100 - 30; this.alpha = 1; this.size = 30; this.flick = false; } update() { this.position.y -= 0.1; } render(ctx) { ctx.save(); ctx.globalCompositeOperation = 'lighter'; var x = this.position.x; var y = this.position.y; var r = this.size / 2; var gradient = ctx.createRadialGradient(x, y, 0.1, x, y, r); gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")"); gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")"); gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)"); ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(this.position.x, this.position.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); ctx.restore(); }; }