원형 도구'Noodl'로 캐릭터의 머리를 쓰다듬어 수줍게 하기(간이판)

Noodl을 사용하면 폭발 속도로 간단한 상호작용을 만들 수 있다.
금번
1. 좋아하는 캐릭터의 그림 준비
2. 화면을 만지는 곳에 손을 표시한다
3. 손 위치에 따라 얼굴이 빨개진다
를 참고하십시오.
사용하는 기교에는'화상 추출','터치 위치의 추출','조건 판정','상태 변화'가 있다.
캔버스 크기 변경
화면에서 Noodl 태그 왼쪽의 [・]에서 Project settings를 선택하여 Width 및 Height를 표시할 크기로 설정합니다.
이번 Width x Heigt = 1920x1080, Fill Mode = Asspect Fit

역할 이미지 삽입
Noodl은 JPG 및 PNG를 지원합니다.사용하고자 하는 이미지 Drop & Drag을 Noodl 화면에 담으면 프로젝트에 들어갈 수 있습니다.Image 노드를 사용하여 미리 캡처된 이미지를 호출할 수 있습니다.
● Drag & Drop 시 누들 반응은 없지만 완전히 흡수됐으니 안심하세요.

Image 노드를 작성하고 Image Path에서 이미지를 선택합니다.Size Mode를 Explicit로 설정하면 캔버스 크기와 이미지 크기가 일치하지 않아도 디스플레이를 확장할 수 있습니다.

터치 위치 감지 및 반영
터치 화면의 위치를 반영하는 대상으로서 이번에는'손'의 이미지를 가져옵니다.
Image 노드에 이미지를 삽입하여 크기를 적절하게 조정합니다.

Touch Position 노드 생성

Touch Position 노드에서 Image 노드로 Noodl 당기기

Position X 간 Position Y 간 연결
이렇게 미리보기 화면을 만지면 그림이 그 위치로 이동한다.

* 이미지의 왼쪽 위 구석은 Touch Position입니다.중심이 되려면 Image 노드의 모 노드에 그룹 노드를 끼워서 조정합니다.

상태 설정
손 위치가 머리일 때 볼을 빨간색으로 염색하고 싶어요.
손의 위치가 특정 범위 내에 있는지 여부를 판정하여 볼의 빨간색을 투명하게 하거나 불투명하게 한다.
빨간 볼 만들기

Rectangle 노드를 사용하면 쉽게 만들 수 있습니다.Corner Radius, Blur Length를 조정하여 경계 상자가 흐릿한 타원을 만들 수 있습니다.

Position 및 Rotation을 사용하여 위치를 조정할 수 있습니다.

Blend Mode에 따라 배경과 색상을 블렌드할 수 있습니다.

생성 상태
States 노드에 따라 손의 위치가 머리에 있는 상태와 없는 상태를 정의합니다.상태에 따라 변경할 Value를 정의합니다.
이번에는'오'와'천체'두 가지 상태에 대해'오파시티(투명도)'를 설정한다.
Opacity(불투명도)를 자랑할 때는 0, 데이트할 때는 1이다.
States에서 Rectangle로 Noodl을 연결하고 Opacity 사이를 연결합니다.이렇게 하면 오기를 부릴 때는 Rectangle가 투명해지고dere가 불투명해진다.스타트의 머리와 섀시를 바꿔 확인할 수 있다.

위치(조건) 판정 및 상태(상태) 변화
Position X 및 Position Y의 Noodl을 건너뛰면 그림에서 데이터를 볼 수 있습니다.이 그림을 클릭하면 그림이 사라지지 않고 화면에 저장되어 데이터를 감시할 수 있습니다.
손을 판정하려는 범위 내에서 범례의 Position 값을 확인한 후 조건을 결정합니다.
이번에는 다음과 같은 범위로 설정한다.< X < 1600 -90 < Y < 100
Expression 노드에서 조건 판정에 대한 공식을 작성합니다.1300 < X && X < 1600 && -90 < Y && Y < 100 ＊1300 < X < 1600처럼 부등식을 한꺼번에 기재할 수 없기 때문에 가늘게 썰어야 한다.
위의 부등식이 모두 True일 경우 Result는 True이며 False가 하나라도 Result는 False입니다.
Expression 노드에서 다음 공식을 사용하여 True 판정기 및 False 판정기를 작성합니다.
True 판정기Result == trueFalse 판정기Result == false각 판정기의 Result를 States 노드에 연결하는 to Oh와 to de re가 완성됩니다.
{0} 범위 밖 False 의 경우 >

범위 내에서 True를 소유한 경우

총결산
누드로 귀여운 거 만들었어요.