[TIL] 23.02.06 / PhotoFrame 기믹 1차 완성

TIL (Today I Learned)

 

오늘 해야할 것

• PhotoFrame 기믹 작업 완성

 

오늘 한 것

• PhotoFrame 기믹 작업

<상태 나누기>

1. State1_HandleBox

2. State2_OpenPhotoFrame

3. State3_Cross

4. State4_DropPhotoFrame

 

<구현 순서>

1. 왼쪽 핸들, 오른쪽 핸들 따로 있을 때 핸들 박스에 하나씩 갖다 대면 정해진 자리에 붙게 하고 싶다.

- HandleBox에 두 핸들이 온 상태여야지만 돌릴 수 있기 때문에 HandleBox의 상태를 만들어준다

- Closed, Rotatable, Open

- 정해진 자리를 만들어준다 : HandleEnterArea 만들기 

- 핸들 왼쪽, 오른쪽 만들어준다 

- 핸들 왼쪽/오른쪽을 놓으면 왼쪽/오른쪽에 따라 Visible True

 

 

- 정해진 자리에 왼쪽, 오른쪽 핸들이 모두 오면 Handle Box의 상태가 None에서 Rotatable 상태로 변한다

- Rotatable 상태일 때 RotateHandle() 함수가 실행될 수 있다.

 

2. 두 핸들이 모두 정해진 자리에 오면 상태가 변한다. (State1_HandleBox ->State2_OpenPhotoFrame)

Left만 오면 상태 변화

Left 핸들 잡히는 위치 이상함

3. State2_OpenPhotoFrame 상태일 때 RotatePhotoFrame 실행

OK

4. RotatePhotoFrame 끝나고 상태가 변한다. (State2_OpenPhotoFrame ->State3_Cross)

OK

5. Cross를 가져와서 자리에 놓으면 상태가 변한다 (State3_Cross->State4_DropPhotoFrame)

기존 크로스 안없어짐 -_- -> 라이브코딩

 

6. State4_DropPhotoFrame 상태일 때 안쪽에 있던 Small PhotoFrame이 떨어지면서 Key가 보인다. 

OK

키 아직 안둠

 

내일 진행할 것

• PhotoFrame 다듬기 + lerp 처리 할 것 하기

 

앞으로 진행할 것

• 인프런 C#, 유니티 강의 듣기 - UI 위주로 + 개미주식회사
• DirectX 2D 강의 밀리지 않고 듣기
• 모션 디자인 스쿨 둘러보기

Online Motion Design School - Animation Masterclasses for Designers

• Pico 빌드
• 에프터이펙트 표현식 연구하기 -> 문서화 
• 어도비 스크립트

Understanding the expression language (adobe.com)

[어도비 익스프레션] 01. 호기심의 시작 (tistory.com)

After Effects의 표현식 언어 (adobe.com)

애프터 이펙트의 표현식 언어 커닝 페이퍼: 여러분이 원하는 모든 것 - Shutterstock 블로그 한국어

After Effects 표현식 예제 (adobe.com)