페이드 인/아웃 효과 만들기

GUI에 검은색 이미지 추가하기

아래에 제공된 검은색 이미지 에셋을 업로드하고 GUI에 추가해줍니다.

GUI에 검은색 이미지 추가하기

검은색 이미지 GUI 기본 설정하기

a. 오브젝트의 이름을 black으로 설정해줍니다.
b. 화면 크기 변화에 반응하면서 화면 전체를 덮을 수 있도록 설정합니다.
    b-1. 사이즈 단위를 퍼센트(%)로 x,y 값을 100으로 설정해줍니다.
    b-2. 검은색 이미지의 비율이 유지되지 않도록 Maintain AspectRatio를 꺼줍니다.
c. 검은색 이미지가 안 보이는 상태로 시작될 수 있게 투명도를 100으로 설정해줍니다.

검은색 이미지 GUI 기본 설정하기

페이드 인/아웃 TWEEN 스크립트 작성하기

검은색 이미지 GUI에 오브젝트(클라이언트) 스크립트를 추가해줍니다. TWEEN을 통해 검은색 이미지의 불투명도를 조절해줍니다.
yoyo()를 사용하기 때문에 페이드 인/아웃 전환 시간은 tween.to(object, duration)에서 duration의 2배가 됩니다.

const black = GUI.getObject('black');
black.hide();
black.material.opacity = 0
const tween = new TWEEN.Tween(black.material);
// 페이드 인/아웃 전환 시간 조정 가능, 기본은 1000ms
tween.to({opacity : 1});
tween.onStart(() => black.show())
.onComplete(() => black.hide());
tween.easing(TWEEN.Easing.Circular.InOut);
tween.yoyo(true).repeat(1);

화면 전환 상황에서 TWEEN 실행시키기

검은색 이미지의 불투명도가 1일 때(화면이 완전히 가려질 때), 플레이어를 이동시킵니다.

tween.onUpdate(() => {
    // 검은색 이미지가 불투명도가 1일 때 이동
    if(black.material.opacity === 1) {
        PLAYER.spawn();
    }
});
function Update(dt) {
    if(PLAYER.position.y < -5) tween.start();
}