Recommended Posts

     Hello everyone,
     I am new to
phaser. 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();
      };
 
    }
 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.