NEW 앱인벤터2 강좌35. 컴포넌트 탐구 – 이미지 스프라이트(ImageSprite)

이 글은 읽는데 약 10분이 걸립니다.

전체 강좌 목록:
http://semicolon1.kr/appinventor.html


0. 개요

이미지 스프라이트 컴포넌트는 공 컴포넌트와 함께 캔버스 컴포넌트에 넣을 수 있는 또다른 컴포넌트입니다.
이름대로 형태를 이미지로 지정하기 때문에 캔버스 내에서 움직이는 이미지 등을 넣을 때 사용됩니다.
또한 공 컴포넌트와 마찬가지로 속도와 시간간격을 설정해두면 다른 블록 없이 스스로 움직이는 기능도 가지고 있습니다.

참고로 공 컴포넌트와 블록이 거의 유사한것을 볼 수 있습니다.

1. 형태

이미지 스프라이트 컴포넌트는 캔버스 컴포넌트 안에만 배치할 수 있습니다.
먼저 캔버스 컴포넌트를 두고 안에 이미지 스프라이트 컴포넌트를 놓아보면 이미지 스프라이트 아이콘이 생긴것을 볼 수 있습니다.
이는 아직 사진이 지정되지 않아서 그렇습니다. 만약 속성에서 사진이 지정되면, 그 이미지로 보입니다.
이미지 스프라이트 컴포넌트는 캔버스 내에서 드래그 앤 드롭으로 자유롭게 위치 변경이 가능합니다.

2. 속성

이미지 스프라이트(ImageSprite) 속성

속성명

설명

활성화(Enabled)

활성화 여부를 지정합니다.

만약 거짓이면 속도와 시간간격이 지정되어있어도 움직이지 않습니다.

방향(Heading)

이미지 스프라이트의 이동 방향을 지정합니다.

오른쪽이 0이고 위쪽이 90입니다. 반시계 방향으로 가면서 증가합니다.

높이(Heght)

이미지 스프라이트의 높이를 px단위로 지정합니다.

너비(Width)

이미지 스프라이트의 너비를 px단위로 지정합니다.

시간간격(Interval)

속도에 지정된 픽셀을 몇 밀리초마다 이동할지 지정합니다.

사진(Picture)

이미지 스프라이트의 사진을 지정합니다.

회전하기(Rotates)

참이면 스프라이트가 방향을 바꿀 때 이미지도 같이 회전합니다.

거짓이면 스프라이트가 방향을 바꿔도 이미지는 회전하지 않습니다.

자세한건 아래쪽 상세 문단을 참고해주세요.

속도(Speed)

시간간격에 지정된 밀리초마다 이동할 픽셀 수를 지정합니다.

만약 시간간격이 50 밀리초이고, 속도가 10이면 스프라이트는 50밀리초마다 10픽셀을 이동합니다.

보이기여부(Visible)

보이기 여부를 지정합니다.

X

이미지 스프라이트의 캔버스 내에서의 X 좌표를 지정합니다.

Y

이미지 스프라이트의 캔버스 내에서의 Y 좌표를 지정합니다.

Z

이미지 스프라이트의 캔버스 내에서의 Z 좌표를 지정합니다.

이는 다른 공이나 이미지 스프라이트가 겹쳐져있을 때 계층 순위를 지정합니다.

Z가 작을수록 아래에 깔립니다.

3. 블록

사진 위에 ★이 붙어있는 블록은 글 하단에 상세 설명이 있습니다.

이미지 스프라이트(ImageSprite) 이벤트 블록

블록

설명

ㄴ 다른 [컴포넌트]

이미지 스프라이트가 다른 활성화된 공이나 이미지 스프라이트 컴포넌트와 충돌했을 때 실행됩니다.

충돌 판정의 기준은 두 컴포넌트가 회전되어 있든 아니든 회전되어 있지 않다고 가정하고 서로 닿았는지 확인하는 방식입니다.

즉, 회전된 가로 세로 길이가 동일하지 않은 컴포넌트의 충돌 판정은 정확하지 않을 수 있습니다.

매개변수 다른은 충돌한 컴포넌트의 개체를 반환합니다.

ㄴ 시작 X [숫자]

ㄴ 시작 Y [숫자]

ㄴ 이전 X [숫자]

ㄴ 이전 Y [숫자]

ㄴ 현재 X [숫자]

ㄴ 현재 Y [숫자]

사용자가 이미지 스프라이트를 드래그하는 모션을 할 경우 실행됩니다.

이 이벤트는 드래그하는 동안 지속적으로 반복해서 실행됩니다.

시작X, 시작Y는 현재 드래그 모션의 시작점,

이전X, 이전Y는 바로 전에 지나친 점의 좌표,

현재X, 현재Y는 지금 지나고 있는 점의 좌표입니다.

참고로 사용자가 이미지 스프라이트를 드래그 해서 이 이벤트가 발생해도, 이미지 스프라이트는 실제로 움직이지 않습니다.

스프라이트를 움직이려면 [좌표로 이동하기]블록 등을 이용해서 직접 구현해야합니다.

ㄴ 모서리 [컴포넌트]

이미지 스프라이트가 캔버스의 모서리에 닿았을 때 실행됩니다.

모서리는 닿은 모서리의 위치에 따라 다음과 같은 정수로 반환됩니다:

북(1), 북동(2), 동(3), 남동(4), 남(-1), 남서(-2), 서(-3), 북서(-4)

ㄴ X [숫자]

ㄴ Y [숫자]

ㄴ 속도 [숫자]

ㄴ 방향 [숫자]

ㄴ X속도 [숫자]

ㄴ Y속도 [숫자]

사용자가 이미지 스프라이트를 플링(튕기듯이 빠르게 스와이프)모션을 할 경우 실행됩니다.

매개변수 X, Y는 플링의 시작점입니다.

속도는 플링의 속도를 밀리초당 px수입니다.

방향은 플링의 플링 방향(-180도 ~ 180도)*입니다.

*각주: 레퍼런스에는 0~360이라 되어있으나 실제로 해보면 -180~180으로 나옵니다. 자세한건 아래 상세 문단 참조.

X속도, Y속도는 플링 모션의 X, Y방향의 속도입니다.

ㄴ 다른 [컴포넌트]

이미지 스프라이트가 다른 공이나 이미지 스프라이트와 더이상 충돌하지 않을 경우(서로 닿아있지 않을 경우) 실행되는 이벤트입니다.

매개변수 다른은 더이상 충돌하지 않는 컴포넌트의 개체를 반환합니다.

ㄴ X [숫자]

ㄴ Y [숫자]

이미지 스프라이트를 터치 다운(손이 닿는 순간) 해당 위치의 좌표를 반환하며 실행됩니다.

ㄴ X [숫자]

ㄴ Y [숫자]

이미지 스프라이트를 터치 업(손이 떨어지는 순간) 해당 위치의 좌표를 반환하며 실행됩니다.

ㄴ X [숫자]

ㄴ Y [숫자]

이미지 스프라이트를 터치하면 해당 위치의 좌표를 반환하며 실행됩니다.

이미지 스프라이트(ImageSprite) 함수 블록

블록

설명

ㄴ 모서리 [숫자]

입력받은 모서리에서 튕겨지는 것 같은 움직임을 만듭니다.

일반적으로 매개변수 모서리는 [모서리에 닿았을 때] 이벤트에서 반환한 매개변수 모서리여야 합니다.

또는 드롭다운에서 선택 가능합니다.

ㄴ 다른 [컴포넌트]

– (반환) 충돌여부 [논리]

입력받은 컴포넌트와 현재 컴포넌트가 닿아있는 상태인지 확인 후 참 또는 거짓을 반환합니다.

이미지 스프라이트가 캔버스의 좌표 범위를 벗어난 경우 캔버스의 경계 내부로 옮겨줍니다.

만약 스프라이트의 좌우가 범위를 벗어나면 스프라이트의 왼쪽이 경계에 맞춰집니다.

만약 스프라이트의 상하가 범위를 벗어나면 스프라이트의 위쪽이 경계에 맞춰집니다.

ㄴ X [숫자]

ㄴ Y [숫자]

이미지 스프라이트를 해당 좌표로 이동합니다.

ㄴ cordinates [리스트]

이미지 스프라이트를 해당 좌표로 이동합니다.

이 때 좌표는 (x, y) 쌍의 리스트 하나로 받습니다.

ㄴ X [숫자]

ㄴ Y [숫자]

해당 좌표가 있는 방향으로 이미지 스프라이트의 방향을 변경합니다.

ㄴ 대상 [컴포넌트]

입력받은 스프라이트 개체를 향해 방향이 변경됩니다.

이미지 스프라이트(ImageSprite) 속성 지정 블록

블록

입력형식

설명

논리

활성화 여부를 지정합니다.

만약 거짓이면 속도와 시간간격이 지정되어있어도 움직이지 않습니다.

숫자

이미지 스프라이트의 이동 방향을 지정합니다.

오른쪽이 0이고 위쪽이 90입니다. 반시계 방향으로 가면서 증가합니다.

숫자

스프라이트의 높이를 px 단위로 지정합니다.

숫자

속도에 지정된 픽셀을 몇 밀리초마다 이동할지 지정합니다.

텍스

이미지 스프라이트의 사진을 지정합니다.

논리

참이면 스프라이트가 방향을 바꿀 때 이미지도 같이 회전합니다.

거짓이면 스프라이트가 방향을 바꿔도 이미지는 회전하지 않습니다.

숫자

시간간격에 지정된 밀리초마다 이동할 픽셀 수를 지정합니다.

만약 시간간격이 50 밀리초이고, 속도가 10이면 스프라이트는 50밀리초마다 10픽셀을 이동합니다.

논리

스프라이트의 보이기 여부를 지정합니다.

숫자

스프라이트의 너비를 px 단위로 지정합니다.

숫자

이미지 스프라이트의 캔버스 내에서의 X 좌표를 지정합니다.

숫자

이미지 스프라이트의 캔버스 내에서의 Y 좌표를 지정합니다.

숫자

이미지 스프라이트의 캔버스 내에서의 Z 좌표를 지정합니다.

이는 다른 공이나 이미지 스프라이트가 겹쳐져있을 때 계층 순위를 지정합니다.

Z가 작을수록 아래에 깔립니다.

이미지 스프라이트(ImageSprite) 속성 블록

블록

반환형식

논리

숫자

숫자

숫자

텍스트

논리

숫자

논리

숫자

숫자

숫자

숫자

컴포넌트

4. 캔버스의 좌표

우리가 흔히 알고있는 함수 좌표 평면의 경우 원점 (0,0)은 정 중앙에 있습니다.
그러나 캔버스의 경우 캔버스 왼쪽 상단 모서리가 원점이고, 가로 세로로 갈수록 각각 X, Y값이 커집니다.
즉, 캔버스의 좌표에는 음수가 없습니다.

5-1. 충돌했을 때 & 더 이상 충돌하지 않을 때

충돌했을 때 이벤트는 서로 다른 두 스프라이트가 닿았을 때 실행됩니다.
여기서 스프라이트란 공 컴포넌트와 이미지 스프라이트 컴포넌트를 말합니다.
두 컴포넌트가 닿게 되면 자신과 충돌한 컴포넌트의 개체를 매개변수로 주면서 실행됩니다.

더이상 충돌하지 않을 때 이벤트는 충돌 상태였던 두 컴포넌트가 더이상 충돌 상태가 아니게 되면, 즉 둘이 붙어있다가 떨어지면 실행되며, 마찬가지로 충돌 상태였던 상대 컴포넌트의 개체를 매개변수로 주면서 실행됩니다.

5-2. 드래그

이 이벤트는 사용자가 이미지 스프라이트를 드래그를 시작할 때 부터 드래그 중일 때 지속적으로 실행됩니다.
각 매개변수가 뜻하는 것은 다음과 같습니다:

1. 시작X, 시작Y
현재 진행 중인 드래그가 시작된 지점의 좌표입니다.

2. 이전X, 이전Y
움직일 때 바로 이전에 지나쳐왔던 점의 좌표입니다.

3. 현재X, 현재Y
현재 지나가고 있는 점입니다.

즉, 만약 캔버스위의 뭔가를 드래그해서 옮기고 싶을 때, 해당 스프라이트의 이동 블록을 이벤트 블록 안에 넣고, 이동 좌표로 현재X, 현재Y를 넣으시면됩니다.

자세한 것은 이전 강좌인 33. 캔버스의 드래그 이벤트 상세 설명 문단을 확인해주세요.

5-3. 모서리에 닿았을 때

이 이벤트는 이미지 스프라이트가 이동하던 중 캔버스의 가장자리(모서리)에 닿았을 때 실행되는 이벤트입니다.
매개변수 모서리는 이미지 스프라이트가 닿은 모서리의 방향에 따라 다음과 같은 정수로 반환됩니다.

북(1), 북동(2), 동(3), 남동(4), 남(-1), 남서(-2), 서(-3), 북서(-4)

여기서 반환된 모서리 매개변수는 [튕기기]블록에서 사용할 수 있습니다.

5-4. 플링했을 때

플링이란 위에서도 설명했듯이 손가락을 튕기듯이 미는 동작을 뜻합니다.
만약 이미지 스프라이트에서 이러한 동작이 감지되면, 위 이벤트가 실행됩니다.
드래그와 달리 플링 중에 계속 실행되는것이 아닌, 플링이 종료되었을 때 한번 실행됩니다.

방향이라던가 기타 자세한 사항은 역시 이전 강좌인 33. 캔버스의 플링했을 때 이벤트 상세 설명 문단을 확인해주세요.

5-5. 튕기기

[모서리에 닿았을 때] 이벤트 블록과 같이 사용합니다.
이미지 스프라이트가 움직이던 중 캔버스의 모서리에 닿아서 해당 이벤트가 실행되면 매개변수로 반환된 모서리 매개변수를 이 블록의 모서리 부분에 넣습니다.

이렇게 하면 이미지 스프라이트가 모서리에 닿으면 멈추는 것이 아니라 다시 튕겨져서 움직이기 시작합니다.

6. 회전하기 속성

회전하기 속성은 이미지 스프라이트에만 있는 속성입니다. 이 속성의 기본값은 참입니다.
이 속성에 대해 자세히 알아보겠습니다.

먼저 아래 두 영상을 비교해보고 무엇이 다른지 한번 확인해보세요:

잘 보시면 왼쪽의 이미지 스프라이트는 모서리에 튕겨서 방향이 변경되어도 이미지가 회전하지 않습니다.
그러나 오른쪽의 이미지 스프라이트는 방향이 바뀌면 바뀐 방향으로 이미지 스프라이트가 회전하는 것을 볼 수 있습니다.

이렇듯, 이 속성이 참(기본값)이면 이미지 스프라이트의 방향에 따라 이미지도 회전합니다.
만약 속성이 거짓이면 이미지 스프라이트의 방향에 관계없이 스프라이트의 이미지는 회전하지 않습니다.

댓글

제목과 URL을 복사했습니다