NEW 앱인벤터2 강좌34. 컴포넌트 탐구 – 공(Ball)

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

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


0. 개요

공 컴포넌트는 캔버스 컴포넌트 안에서 공처럼 동작하는 둥근 원형 모양의 컴포넌트입니다.
속성에서 움직임의 속도나 방향을 지정할 수 있습니다.
또한 공은 속도와 시간간격을 지정해두면 따로 블록을 쓰지 않아도 스스로 움직입니다.
속도의 기본값은 0이니, 만약 스스로 움직이지 않는다면 속도를 확인해보세요.

이미지 스프라이트와는 달리 공 컴포넌트에는 이미지를 지정할 수 없습니다.

1. 형태

공 컴포넌트는 캔버스 컴포넌트 안에만 배치할 수 있습니다.
먼저 캔버스 컴포넌트를 두고 안에 공 컴포넌트를 놓아보면 검정색의 작은 원이 생긴것을 볼 수 있습니다.
이 공은 캔버스 내에서 드래그 앤 드롭으로 자유롭게 위치 변경이 가능합니다.

2. 속성

공(Ball) 속성

속성명

설명

활성화(Enabled)

속도가 0이 아닐 때 공의 이동여부를 지정합니다.

속도가 0이면 공이 이동하지 않기 때문에 이 속성은 의미가 없습니다.

방향(Heading)

공의 이동 방향을 지정합니다.

오른쪽이 0이고 위쪽이 90입니다.

즉, 오른쪽을 기준으로 반시계 방향으로 각도가 증가합니다.

시간간격(Interval)

공의 위치가 업데이트되는 시간 간격(밀리초)입니다.

예를 들어 속도가 10이고, 시간간격이 50이면 공은 50밀리초마다 10픽셀을 이동합니다.

OriginAtCenter

공의 X, Y좌표의 기준을 참이면 공의 중심을 기준으로, 거짓이면 왼쪽 상단을 기준으로 지정합니다.

페인트색상(PaintColor)

공의 색상을 지정합니다.

반지름(Radius)

공의 반지름입니다.

속도(Speed)

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

기본값은 0으로, 움직이지 않습니다.

보이기여부(Visible)

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

X

공의 캔버스 상의 X좌표를 지정합니다.

Y

공의 캔버스 상의 Y좌표를 지정합니다.

Z

공의 캔버스 상의 Z좌표를 지정합니다.

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

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

3. 블록

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

공(Ball) 이벤트 블록

블록

설명

ㄴ 다른 [컴포넌트]

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

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

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

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

ㄴ 시작 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 [숫자]

공을 터치하면 해당 위치의 좌표를 반환하며 실행됩니다.

공(Ball) 함수 블록

블록

설명

ㄴ 모서리 [숫자]

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

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

ㄴ 다른 [컴포넌트]

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

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

공이 캔버스의 좌표 범위를 벗어난 경우 캔버스의 경계 내부로 옮겨줍니다.

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

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

ㄴ X [숫자]

ㄴ Y [숫자]

공을 해당 좌표로 이동합니다.

ㄴ X [숫자]

ㄴ Y [숫자]

해당 좌표가 있는 방향으로 공의 방향을 변경합니다.

ㄴ 대상 [컴포넌트]

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

공(Ball) 속성 지정 블록

블록

입력형식

설명

논리

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

만약 거짓이라면 속도에 관계없이 공은 스스로 움직이지 않습니다.

숫자

공의 이동 방향을 지정합니다.

오른쪽이 0이고 위쪽이 90입니다.

즉, 오른쪽을 기준으로 반시계 방향으로 각도가 증가합니다.

숫자

공이 속도에 지정된 픽셀만큼 움직일 시간 간격을 밀리초로 지정합니다.

예를 들어 속도가 10이고, 시간간격이 50이면 공은 50밀리초마다 10픽셀을 이동합니다.

색상

공의 색상을 지정합니다.

숫자

공의 반지름을 지정합니다.

숫자

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

논리

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

숫자

공의 캔버스 내에서의 X좌표를 지정합니다.

숫자

공의 캔버스 내에서의 Y좌표를 지정합니다.

숫자

공의 캔버스 내에서의 Z좌표를 지정합니다.

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

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

공(Ball) 속성 블록

블록

반환형식

논리

숫자

숫자

색상

숫자

숫자

논리

숫자

숫자

숫자

컴포넌트

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. 튕기기

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

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

댓글

제목과 URL을 복사했습니다