앱인벤터 볼 컴포넌트
앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다.
이번 시간에는 앱인벤터의 볼(ball)컴포넌트를 활용하여 움직임의 속도나 방향을 지정하는 실습을 해보자.
볼 컴포넌트는 이미지 스프라이트와 다르게 이미지를 지정할 수 없다.
. 볼 컴포넌트
그리기&애니메이션 팔레트에서 볼 컴포넌트는 캔버스 컴포넌트에서 동작하는 컴포넌트이다. 처음 볼 컴포넌트를 drag&drop하면 검정색 작은 원 모양이 캔버스에 보인다. 블록 코딩으로 볼을 속도와 위치 등을 활용하여 마음대로 움직여보자.
팔레트
볼 컴포넌트는 '그리기&애니메이션'에 있다. 볼 컴포넌트를 오른쪽 뷰어에 Drag&Drop하면 추가된다. 본 예제에서는 볼 컴포넌트를 동작시키기 위해 텍스트박스 컴포넌트, 버튼 컴포넌트, 레이블 컴포넌트, 얀덱스번역 컴포넌트 구성한다.
뷰어
컴포넌트들을 추가했을 때, 기본적으로 사각형이 뷰어 화면에 출력된다.
뷰어에는 캔버스 컴포넌트와 볼 컴포넌트로 구성되어 있다.
스마트폰을 동서남북 기울이면 볼이 방향에 따라 움직이는 예제를 만들어보자.
컴포넌트
컴포넌트에는 Screen1아래에 볼 컴포넌트, 캔버스 컴포넌트 그리고 방향을 감지하는 자이로센서 컴포넌트로 구성된다.
. 캔버스 컴포넌트
. 볼 컴포넌트
. 자이로센서 컴포넌트
볼 속성값
볼 속성값에는 활성화, 방향, 시간간격, OriginAtCenter, 페인트색상, 반지름, 속도, 보이기여부, X, Y, Z 값이 있다.
활성화여부 값은 볼의 이동 여부를 결정한다. true값일 경우 활성화되어 볼 컴포넌트가 움직일 수 있으며, false 인 경우에는 볼 컴포넌트는 움직이지 않는다.
방향 값은 볼의 이동 방향을 결정한다. 값은 0~360의 범위이고, 0이면 오른쪽 방향이고, 90이면 위쪽 방향이며, 180이면 왼쪽 방향익, 270이면 아래쪽 방향을 움직인다.
시간간격 값은 볼 컴포넌트의 위치 값이 변경되는 주기는 설정한다. 값의 단위는 밀리초(milisecond)이다. 예로 속도가 10으로 설정되어 있고 시간간격 값이 100msec로 설정되어 있으면 100msec에 10픽셀만큼 이동하는 것이다. 1초면 100픽셀만큼 이동한다.
OriginaAtCenter 값은 공의 X/Y 좌표위치 기준을 지정하는 것으로, true이면 ball의 중심을 기준으로 X, Y 좌표를 삼으며 false이면 왼쪽 상단을 기준으로 X, Y 좌표값을 기준으로 삼는다.
페인트색상은 공의 색상을 지정한다.
반지름 값은 공의 반지름 값을 지정한다. 값의 범위는 0~1000000000값이다. 그러나 실제 공의 반지름값은 캔버스 크기에 따라 설정해야 할 것 같다.
속도 값은 볼의 움직이는 속도로, 밀리초마다 이동할 수 있는 픽셀 수이다.
보이기여부 값은 공의 보이기 여부를 지정한다.
X 값은 공의 캔버스 상의 X좌표값을 지정한다.
Y 값은 공의 캔버스 상의 Y좌표값을 지정한다.
Z 값은 공의 캔버스 상의 Z좌표값을 지정한다. Z 좌표 갑은 여러 공이나 이미지 스프라이트가 중첩디어 있을 경우 계층 순위를 지정한다. Z 값이 작을 수록 아래에 위치하게 된다.
볼 컴포넌트 이벤트 블럭들
. 볼 컴포넌트 충돌해을때 블럭
볼 컴포넌트가 다른 볼이나 이미지 스프라이트 컴포넌트와 충돌했을 때 실행되는 블럭이다. 인자값으로 '다른' 은 충돌한 컴포넌트의 개체를 반환한다.
. 볼 컴포넌트 드래그 블럭
스마트폰 사용자가 손으로 볼을 드래그 이벤트가 발생했을 때 볼 컴포넌트의 '충돌했을때' 블럭이 호출이 된다.
인자값으로 시작X, 시작Y, 이전X, 이전Y, 현재X, 현재Y값이 있다. 시작X, 시작Y값은 현재 드래그 이벤트 시작 좌표값이며
이전X, 이전Y값은 바로 이전의 점의 좌표값이고 현재X, 현재Y값은 드래그가 종료된 현재 좌표값이다.
. 볼 컴포넌트 모서리에닿았을때 블럭
공이 캔버스의 모서리에 닿았을 때 실행되는 블럭이다.
인자값으로 모서리가 반환되는데, 위치값을 반환한다. 위치값으로는 북(1), 북동(2), 동(3), 남동(4), 남(-1), 남서(-2), 서(-3), 북서(-4) 값이다.
. 볼 컴포넌트 플링했을때 블럭
사용자가 볼을 플링했을때(튕기듯 쓸어넘기는 이벤트) 실행이 되는 블럭이다.
인자값으로 X. Y는 플링 이벤트의 시작점이고 속도는 플링의 속도로 밀리초당 이동하는 픽셀수이다. 방향은 플링의 방향으로 0에서 360값의 범위를 가지고 있다. X속도, Y속도는 플링의 X, Y방향의 속도값이다.
. 볼 컴포넌트 더이상충돌하지않을때 블럭
공이 다른 공이나 이미지 스프라이트와 더이상 충돌하지 않을 때 실행되는 블럭이다.
인자값으로 '다른'은 더이상 충돌하지 않는 컴포넌트의 개체를 반환한다.
. 볼 컴포넌트 터치다운했을때 블럭
사용자가 공을 터치 다운했을 때 호출되며, X, Y값은 공을 터치한 위치의 X, Y좌표 값을 반환한다.
. 볼 컴포넌트 터치업했을때 블럭
사용자가 공을 터치 다운업했을 때 호출되며, X, Y값은 공을 터치한 위치의 X, Y좌표 값을 반환한다.
. 볼 컴포넌트 터치했을때 블럭
사용자가 공을 터치했을 때 호출되며, X, Y값은 공을 터치한 위치의 X, Y좌표 값을 반환한다
볼 컴포넌트 호출 블럭들
. 볼 컴포넌트 튕기기 블럭
볼을 모서리에서 튕겨서 움직이도록 만드는 블럭이다.
사용자가 공을 터치했을 때 호출되며, X, Y값은 공을 터치한 위치의 X, Y좌표 값을 반환한다
. 볼 컴포넌트 충돌여부가져오기 블럭
입력받은 '다른' 볼이나 이미지 스프라이트와 닿았는지 확인후 참 혹은 거짓을 반환한다.
. 볼 컴포넌트 경계안으로이동하기 블럭
공이 캔버스 범위 밖으로 이동한 경우, 볼을 캔버스 안으로 이동하는 블럭이다.
. 볼 컴포넌트 좌표로이동하기 블럭
공을 특정 좌표로 이동하는 블럭이다.
. 볼 컴포넌트 MoveToPoint 블럭<<나중에>>
공을 특정 좌표로 이동하는 블럭이다.
. 볼 컴포넌트 좌표바라보기 블럭
공을 이동하는 블럭이 아니라 공을 해당 좌표가 있는 방향으로 공의 방향을 변경하는 블럭이다.
. 볼 컴포넌트 스프라이트바라보기 블럭
입력받은 '다른' 개체의 이미지 스프라이트로 공의 방향을 변경하는 블럭이다.
볼 컴포넌트 가져오기/지정하기 블럭들
. 볼 컴포넌트 활성화 블럭
공의 활성화 여부를 지정하는 블럭이다. 값에는 참, 거짓 값을 지정할 수 있다.
. 볼 컴포넌트 방향 블럭
공의 이동 방향을 지정하거나 공의 방향값을 가져오는 블럭이다. 값에는 0~360의 값을 지정할 수 있다. 방향은 오른쪽이 0을 시작으로 왼쪽(시계방향 반대)로 해서 위쪽이 90, 왼쪽이 180, 아래쪽이 270의 값을 갖는다.
. 볼 컴포넌트 시간간격 블럭
공의 이동하는 간격을 밀리초로 지정하거나 현재 지정된 시간간격값을 가져오는 블럭이다.
밀리초는 1000밀리초는 1초를 의미한다.
. 볼 컴포넌트 반지름 블럭
공의 반지름 크기를 지정하거나 공의 반지름의 값을 가져오는 블럭이다.
. 볼 컴포넌트 속도 블럭
공의 움직이는 속도를 지정하거나 공의 움직이는 속도 값을 가져오는 블럭이다.
속도는 속도 속성값에서 설명하였듯이 밀리초마다 움직이는 픽셀 수이다. 예로 100의 의미는 1밀리초에 100픽셀을 움직이을 의미한다.(100pixel/msec)
. 볼 컴포넌트 X, Y, Z 블럭
볼의 캔버스 내에서 X, Y, Z, 좌표값을 지정하거나 Y, Z, 좌표값을 가져오는 블럭이다.
Z 값의 의미는 다른 공이나 다른 이미지 스프라이트가 중첩되어 있을 때 계층 순서를 의미한다. 값이 작을수록 아래에 위치하며 Z값이 제일 큰 것이 제일 위에 위치하는 개체이다.
지금까지 앱인벤터 볼 컴포넌트에 대해 설명하였다.
눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.
간단하지만 직접 해보면 이해하고 자신감이 생길거에요...
Just Do It!!!
Just Drag&Drop It!!!
감사합니다
'앱인벤터 > 앱인벤터 컴포넌트' 카테고리의 다른 글
| 앱인벤터 이미지스프라이트 컴포넌트 (1) | 2022.02.24 |
|---|---|
| 앱인벤터 캔버스 컴포넌트 (0) | 2022.02.23 |
| 앱인벤터 얀덱스번역 컴포넌트 (0) | 2022.02.20 |
| 앱인벤터 비디어플레이어 컴포넌트 (0) | 2022.02.19 |
| 앱인벤터 음성변환 컴포넌트 (0) | 2022.02.18 |
댓글