d r t w i n

본 예제에서는 3개의 드롭아이템이 제대로 놓여질 때 이 상황을 판정하여 최종 애니메이션을 구현하는 방식으로 접근하고 있습니다. 때문에 Update 함수를 통해 ITEM1~3이 완료되는지 체크하는 bool 변수를 포함하고 있습니다. 드래그드롭이 성공적으로 완료되...

드래그드롭이 완료된 직후에 밋밋한 상황을 향상시키기 위해서, 맞춰진 드롭아이템이 움직이는 애니메이션 효과를 연출해봅시다. 나뭇가지의 크기가 반복되는 장면을 만들면서 DopeSheet가 아닌 Curve를 활용해봅니다. 그래프로 미세한 움직임을 제어할 수 있...

드래그드롭 성공 시 뒷배경에 재미있는 이펙트를 보이게 하기 위해서, 상용 애셋을 활용해봅니다. 에셋은 아래에서 다운로드 하세요. 다운로드 : Cartoon FX Remaster 1.1.0.zip 먼저 원하는 애셋 효과를 탐색해서 마음에 드는 것을 찾아야 합니다. 이펙트가 ...

드래그 기능은 사전에 만들어놓은 Draggable 스크립트를 활용하여 구현해봅니다. 드롭존 기능 또한 DropZone 스크립트를 적용하면 쉽게 구현됩니다. 드래그 아이템의 외형적인 짝을 맞추기 위한 조건을 만들어줍니다. 더불어 해당되는 짝만 받아들이는 드롭존 ...

드래그 요소를 만들기 위해서 UI요소 중에서 Image를 하나 생성한 후, 이 소스이미지를 바꿔봅니다. Panel은 드래그될 아이템을 담는 일종의 용기 개념으로 설정해야 합니다. Panel은 그 안에 담기는 드래그 아이템을 정렬해주는 기능을 갖추어야 보기 좋은 레...

버튼 및 텍스트를 하나 만들고 이들의 기본 속성을 살펴봅니다. 특히 중요한 것은 Rect Transform의 개념 및 Anchor Preset 설정입니다. UI요소는 사각형 프레임 위에 놓일때의 좌표체계에 영향을 받기 때문에 레이아웃을 구조화할때 사전에 정렬부터 지정해놓...

세번째 장면은 드래그드롭 장면을 만들어보는 것입니다. 배경과 캐릭터 소스를 배치하여 기본적인 연출을 한 후, Canvas 요소에 대해 배워봅니다. 특히 Canvas는 UI를 만들기 위해 필요한 가장 상위 오브젝트이며, 처음에 함께 생성되는 EventSystem의 역할도 ...

만들어진 3개의 애니메이션을 순서대로 구동될 수 있도록 해주어야 합니다. 이를 위해서는 개별적인 애니메이션에서 다른 애니메이션을 구동시킬 수 있도록 해주는게 필요합니다. 따라서 애니메이션 창에서 이벤트 기능을 통해서 이를 구현하는 방법을 배워봅...

두번째 장면을 만들어봅니다. 이 장면에는 3개의 애니메이션을 구현할 예정입니다. 그런데 첫번째 장면과의 차이점이라고 한다면 3개의 애니메이션이 동시에 연출되는 것이 아니라 맨처음 하나만 존재하고, 그것을 클릭하면 애니메이션이 서서히 사라지면서 다...

화면 상의 한 오브젝트를 클릭 시, 눌려진 오브젝트만 애니메이션 반응하는 것이 아니라 다른 오브젝트에도 동작 반응을 이끌어내는 것, 아마도 멋진 장면 연출을 위해 꼭 필요한 상황일 것입니다. 어찌보면 다소 어려운 개념처럼 느껴질 수 있겠지만, 원리는 ...