【Playcanvas】Image Elementのフェード処理【2D】
の「fade.js」では3Dオブジェクトにアタッチしたマテリアルのフェードアウト処理を行っています。
今回はこのスクリプトを改造し2D Screen上で表示する「Image element」のフェードアウト処理を実装します。
(タイトル画面やUIでは「Image element」の方が取り扱いやすいため調査した次第です)
「Image element」では「Texture」「Material」のいづれか一方を指定します。
両方とも対応した形になります。
※「Material」を使う場合はアタッチした「Material」の「OPACITY」の「Blend Type」を「Alpha」にしてください。
この指定がないと透過度が変わらないからです。
var Fade = pc.createScript('fade');
Fade.attributes.add('event', { type:'string' });
Fade.attributes.add('type', {
type: 'number',
enum: [
{ 'In': 0 },
{ 'Out': 1 },
{ 'InOut': 2 }
]
});
Fade.attributes.add('duration', { type:'number', default: 0.25 });
// initialize code called once per entity
Fade.prototype.initialize = function() {
var app = this.app;
this.timer = 0;
app.on(this.event, function () {
this.timer = this.duration;
}, this);
this.displayType = 'none';
this.model = null;
this.model = this.entity.element;
if (this.entity.element.material.name === 'Untitled') {
this.displayType = 'texture';
} else {
this.displayType = 'material';
}
};
// update code called every frame
Fade.prototype.update = function(dt) {
if (this.timer > 0) {
this.timer = Math.max(this.timer - dt, 0);
// Normalize
var x = (this.duration - this.timer) / this.duration;
var y;
switch (this.type) {
case 0:
y = x;
break;
case 1:
y = 1 - x;
break;
case 2:
y = Math.abs((x / 2 + 0.25) % 0.5 - 0.25) * 4;
break;
}
var enabled = false;
enabled = this.model.enabled;
if (enabled && y === 0) {
this.model.enabled = false;
y = 1;
} else if (!enabled && y > 0) {
this.model.enabled = true;
}
switch (this.displayType) {
case 'material':
var material = this.model.material;
material.opacity = y;
material.update();
break;
case 'texture':
this.model.opacity = y;
break;
default:
break;
}
}
};