[Godot] 마스크 장착법

개요
본고는 Godot Engine에 마스크를 설치하는 방법을 소개할 예정이다.
마스크
마스크는 이미지의 특정 부분을 잘라서 이미지를 그리는 방법입니다.

이 GIF 애니메이션은 원형으로 그림을 뽑아서 그 부분만 그린다.
이미지 준비
마스크 이미지
마스크에 사용된 이미지는 자르려는 부분을 완전히 흰색(R,G,B)=(255,255,255)으로 설정하고 그리지 않으려는 부분은 통과 값을 0에 가깝게 만듭니다.

통과 값이 있는 이미지를 만들려면 GIMP와 같은 그래픽 도구가 필요합니다.
잠시 소재로 다음과 같은 이미지를 준비했습니다.

↑ 새하얗기는 하지만'mask.png'으로 저장한다.
배경 그림
배경에는 다음과 같은 이미지가 사용됩니다.파일 이름은'bg.jpg'로 저장됩니다.

객체 이미지 자르기
객체의 이미지를 추출하려면 다음 이미지를 사용합니다.ch.png으로 저장합니다.

프로젝트 작성 및 배경, 역할 구성
2D 장면(노드 이름은 "Main")을 만들고 "bg.jpg"과 "ch.pg"를 구성합니다.

캐릭터 이미지가 너무 커서... 신경 쓰면 줄일 수 있어요.
Light 2D 구성
마스크를 만듭니다Light2D.

어디에 추가할 수 있습니까? 단,ch노드 아래에서 미리 추가할 수 있습니다.

프로젝트에 "mask.png"을 추가하고 Light2D의 무늬로 설정합니다.

그리고 Light2D의 모드를'믹스'로 바꿨어요.

마스크 면의 재료 설정하기
ch 노드Sprite를 선택하고 검사자CanvasItem > Material > Material > [空]를 클릭하여 새 CanvasItemMaterial을 선택합니다.

표시된 CanvasItemMaterial을 클릭하여 선택LightMode > Light Only
이렇게 되면 마스크를 쓰게 된다.

스크립트를 사용하여 마스크 제어
Main(2D 장면)을 첨부하는 스크립트는 다음과 같습니다.
Main.gd

extends Node2D

onready var light = $ch/Light2D

func _process(delta: float) -> void:
    # ライトの座標をマウスの座標に設定する
    light.position = get_viewport().get_mouse_position()

이렇게 하면 마우스의 위치가 뽑히는데... 그래야 하는데 약간의 오차가 있을 수 있어요."ch"노드에 걸려 있기 때문에 "ch"노드가 원점에 설정되지 않았을 때 편차가 발생할 수 있습니다
따라서 Light2D를 Main 노드 바로 아래로 이동합니다.

그런 다음 스크립트를 수정합니다.
Main.gd

extends Node2D

onready var light = $Light2D # Mainノード直下に移動した

func _process(delta: float) -> void:
    # ライトの座標をマウスの座標に設定する
    light.position = get_viewport().get_mouse_position()

그러면 마우스 중심을 기준으로 주기가 수행됩니다.

가장자리를 흐릿한 이미지로 만들어 보세요.
원의 가장자리를 흐릿한 그림으로 만들면 경계가 흐릿해진다.
다음 이미지를 "mask2.png"으로 저장합니다.

그리고 프로젝트에 추가하여 Light2D > Texture에 분배합니다.

실행하면 흐릿해!

보태다
여러 개의 마스크를 동시에 사용하려는 경우CanvasItem > Visibility > Light Mask 설정이 마스크 이미지Light2D와 일치하면 특정 이미지에 대해 특정 마스크를 지정할 수 있습니다.

※ 추기
모델Mix이면 Light Mask 설정이 안 좋은 것 같아요.
여러 개의 마스크를 각각 적용하려면 아래 애니메이션처럼 Light2D의 모드를 Mask로 설정하고 ViewportTexture를 거쳐 마스크(미검증)를 진행해야 한다.

SPRITE MASK & TRAIL EFFECT - Godot Tutorial

참고 자료

How do I mask a sprite? - Godot Engine - Q&A