pixi.js 制作 流星雨效果

pixi.js 制作 流星雨效果

	//创建流星们
    creatShootingStart(){
      let startNum = 25;//个数
      this.startSp = [];//星星们的集合
      //流星消失的高度
      this.limetHeight = this.winH/2;

      for(let i=0;i<startNum;i++){
        let sprite = new PIXI.Sprite(PIXI.loader.resources[this.startImg[0].url].texture);
        this.initStartSprite(sprite)
        this.app.stage.addChild(sprite);
        this.startSp.push(sprite)
      }
      // 开始动画
       this.app.ticker.add(delta => this.gameLoop(delta));
    },
    gameLoop(delta){
      this.startSp.forEach((item,index) => {
        item.x -= item.vx
        item.y += item.vy
        item.alpha -= item.alphaVal
        if(item.x <= 0||item.y >= this.limetHeight){
          this.initStartSprite(item)
        }
      });
    },
    //初始化流星值
    initStartSprite(sprite){
      sprite.x = this.winW*Math.random();
      sprite.y = this.getRandomNum(0,50);
      sprite.rotation = -0.8;//星星的倾斜度
      //大小控制
      let scaleVar = Math.random()/3
      sprite.scale.set(scaleVar,scaleVar) //这是个变量
      // 速度控制
      let speedVal = this.getRandomNum(1,5)
      sprite.vx = speedVal; 
      sprite.vy = speedVal;
      //清晰度控制
      sprite.alpha = Math.floor(Math.random()*10)/10
      sprite.alphaVal = sprite.alpha*(sprite.vy/this.limetHeight)
    },
    //取随机数
    getRandomNum(min,max){
      return Math.floor(Math.random()*(max-min) + min);
    },