着色 tint

简介

1 .强行给原来的物体加一层颜色，比如人物受击时的变色

icon.setTint(0xff00ff, 0xffff00, 0x0000ff, 0xff0000)
1 .color1 ：左上角的颜色
2 .color2: 右上角的颜色
3 .color3:左下角的颜色
4 .color4:右下角的颜色

2 .365度随机变颜色

const top=this.hsv[this.i].color
    const bottom=this.hsv[359-this.i].color
    this.team.setTint(top,top,bottom,bottom)
    this.i++
    if(this.i==360){
      this.i=0
    }
//可以一组字全都变，也可以一个一个的单独变。这是利用时间戳，有点不可控

3 .着色和透明度变淡一起，可以实现毛玻璃效果
4 .透明的材质，可以变成各种各样的颜色，比如玻璃，我可以让他变成各种各样的效果

全都变白

1 .img.setTintFill(0xffffff);
2 .元素有了这俩个方法，isTinted()检查是否已被着色
3 .clearTint() 清除着色

着色也可以加tewwn 动画

1 .Tewwn 获取渐变的一些区间值
2 .使用这些区间值转换为颜色
3 .淡出效果

let _self=this
    this.scene.tweens.addCounter({
      from:255,
      to:0,
      duration:5000,
      onUpdate:function(tween){
        const value=Math.floor(tween.getValue())
        // console.log(this)
        // 这里的this是tweens对象
        _self.team.setTint(Phaser.Display.Color.GetColor(value,value,value))
      }
    })
着色渐变到某一个值

碎片逐渐拼成一个物体

1 .或者反向，物体逐渐碎成粉末
2 .核心原理是。canvas读取图片的每一帧颜色，把读取的颜色，着色到一个白色的纹理上面.用小方块组成完整的图像。就像像素在拼成图片一样

const source = this.textures.get('logo').source[0].image;
    const canvas = this.textures.createCanvas('pad', 108, 66).source[0].image;
    const ctx = canvas.getContext('2d');

    ctx.drawImage(source, 0, 0);

    const imageData = ctx.getImageData(0, 0, 108, 66);
//后两位数是图片原本的宽和高

    let x = 0;
    let y = 0;
    const color = new Phaser.Display.Color();

    for (var i = 0; i < imageData.data.length; i += 4) {
      const r = imageData.data[i];
      const g = imageData.data[i + 1];
      const b = imageData.data[i + 2];
      const a = imageData.data[i + 3];

      if (a > 0) {
        // const startX = Phaser.Math.Between(0, 1024);
        // const startY = Phaser.Math.Between(0, 768);

        // const dx = 200 + x * 16;
        // const dy = 64 + y * 16;

        const dx = Phaser.Math.Between(0, 1024);
        const dy = Phaser.Math.Between(0, 768);
        const startX =  x * 16;
        const startY = y * 16;

        // const image = this.add.image(startX, startY, 'pixel').setScale(0);
        const image = this.add.image(dx, dy, 'pixel').setScale(0);

        color.setTo(r, g, b, a);

        image.setTint(color.color);

        this.tweens.add({
          targets: image,
          duration: 2000,
          x: startX,
          y: startY,
          scaleX: 1,
          scaleY: 1,
          angle: 360,
          delay: i / 1.5,
          // yoyo: true,
          // repeat: -1,
          // repeatDelay: 6000,
          hold: 6000
//最后停下来的时候暂停最后的状态
        });
      }

      x++;

      if (x === 108) {
//图片的宽度
        x = 0;
        y++;
      }
    }

版本2

const source = this.textures.get('logo').source[0].image;
    const canvas = this.textures.createCanvas('pad', 108, 66).source[0].image;
    const ctx = canvas.getContext('2d');

    ctx.drawImage(source, 0, 0);

    const imageData = ctx.getImageData(0, 0,108,66);

    let x = 0;
    let y = 0;
    const color = new Phaser.Display.Color();

    for (var i = 0; i < imageData.data.length; i += 4) {
      const r = imageData.data[i];
      const g = imageData.data[i + 1];
      const b = imageData.data[i + 2];
      const a = imageData.data[i + 3];

      if (a > 0) {
        // const startX = Phaser.Math.Between(0, 1024);
        // const startY = Phaser.Math.Between(0, 768);

        // const dx = 200 + x * 16;
        // const dy = 64 + y * 16;

        const dx = Phaser.Math.Between(0, 200);
        const dy = Phaser.Math.Between(0, 200);
        const startX =  x * 16*0.1;
        // const startX =  x;
        const startY = y * 16*0.1;
        // const startY = y;

        // const image = this.add.image(startX, startY, 'pixel').setScale(0);
        const image = this.add.image(dx, dy, 'pixel').setScale(0.1).setAlpha(0);

        color.setTo(r, g, b, a);

        image.setTint(color.color);

        this.tweens.add({
          targets: image,
          duration: 2000,
          x: startX,
          y: startY,
          // scaleX: 1,
          // scaleY: 1,
          angle: 360,
          delay: i / 1.5,
          alpha:1,
          // yoyo: true,
          // repeat: -1,
          // repeatDelay: 6000,
          hold: 6000
        });
      }

      x++;

      if (x === 108) {
        x = 0;
        y++;
      }