List, ImageSprite 드래그

필름 버튼의 동작을 설계해 봅시다. 이 버튼은 계속 누르시다 보면, 일정 주기를 가지고 정해진 필름이 계속
반복되는 걸 기억하시면서. 시작!

Film 버튼 구상하기

Film 버튼을 클릭하면 5개의 필름이 순서대로 나오고, 6번 클릭은 필름이 없는 상태가 됩니다.
이렇게 1세트로 클릭을 할 때마다 계속 반복 됩니다.

우리는 리스트(list)를 사용하여 Film 리스트(list)를 만들고 Index값을 사용하여 세트 내에 Film을 선택할 수 있습니다.
( List와 Index를 잘 모르신다면 “어디야 ver.2.0”을 참고하세요 )
따라서
1. Index값을 저장할 변수가 필요하고, Index값을 1로 초기화 합시다.

(Film 버튼을 눌렀을 때 흐름을 조금 더 상세하게 쪼개봅시다)
2. 버튼을 누르면 Index값에 해당하는 Film을 List에서 고르고, Canvas에 표시합니다.

(다음에 눌렀을 때를 동작을 위해)
3. Index값을 1 늘려 놓습니다.

(싸이클을 돌리기 위해)
4. Index값이 7이 되면(사이클을 한바퀴 다 돌면) 다시 1로 돌립니다.

자 이제 동작을 설계해 봅시다.
Designer 화면의 Media 구역 Upload File을 클릭하여 필름 그림 5개(Film1.png ~ Film5.png)를 업로드 합니다.
그리고 아래와 같이 설계합니다.

Sticker 버튼 구상하기

Sticker 버튼도 Film 버튼과 같은 방식으로 동작합니다.
단지 다른 점은 list안의 파일이 Sticker1.png ~ Sticker5.png 이며, 이미지를 표현하는 곳이 StickerImageSprite입니다.

Sticker 드래그 시키기

Sticker를 ImageSprite로 만들었기 때문에 드래그가 가능합니다.
Blocks 화면의 Blocks 구역 StickerImageSprite 항목을 클릭해 보면 “when StickerImageSprite”.Dragged 블록이
있는 것을 확인할 수 있습니다. 이 블록은 ImageSprite가 Drag될 때 동작하며, 손가락의 위치를 인식하는 역할을 합니다.

currentX와 currentY는 현재 손가락의 x, y 좌표를 의미합니다. 즉, ImageSprite를 손가락의 x, y좌표를 받고
“call StickerImageSprite.MoveTo” 블록을 사용하여 매순간 손가락의 x,y 좌표로 움직여 준다면, ImageSprite가
손가락을 따라다니도록 만들 수 있습니다.

거의 다 왔습니다. 이제 Save하기 기능만 완성해 봅시다.
Save 기능은 이번이 처음이죠?
정신 바짝 차리고 화이팅!

댓글