简介
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++;
}
