앱인벤터 볼던지기 앱

앱인벤터 볼던지기 앱

 

앱인벤터 홈페이지에 나와 있는 튜터리얼을 참고해서 작성한 것이다. 튜터리얼의 목적은 앱인벤터의 많은 블록은 이해하고 활용할 수 있도록 도와주는 프로그램들로 구성되어 있다.

 

이번 튜터리얼은 볼더지기 앱이다. 캔버스 위에 볼 컴포넌트를  활용하여 볼을 움직이는 앱이다.

 

이번에는 캔버스 컴포넌트 위에 볼 컴포넌트를 움직여보는 앱을 만들어보자. 

기본 개념은 다음과 같다.

캔버스 컴포넌트 위에 볼 컴포넌트를 상/하/좌/우 움직여 보는 것이다.

 

자, 이제 시작해보자...

 

. 볼던지기 디자인

앱인벤터 볼던지기 디자인은 화면의 반 정도는 캔버스 컴포넌트를 배치하고 그 위에 볼 컴포넌트를 위에 올려놓는다.

 

앱인벤터 볼던지기앱 디자인 화면

 

. 볼던지기 기본 설계

캔버스 컴포넌트를 활용한다.

볼 컴포넌트를 캔버스 컴포넌트 위에 위치시킨다.

 

필요한 컴포넌트는 캔번스 컴포넌트와 볼 컴포넌트를 사용한다.

 

컴포넌트

앱인벤터 구성 요소는 디자이너 창의 왼쪽 팔레트 제목에 있다. 컴포넌트는 안드로이드 폰이나 아이폰에서 앱을 만들 때 사용하는 기본 요소이다. 화면에 버튼과 레이블 컴포넌트를 활용하여 화면을 구성하고 앱을 만들려고 한다.

 

캔버스 컴포넌트는 볼 컴포넌트가 움직일 수 있는 공간을 제공한다. 

볼 컴포넌트는 원형 모양으로 캔버스 컴포넌트에서 움직임을 제공한다.

 

캔버스 컴포넌트 설정값 설정하기

캔버스 컴포넌트에 알고 싶으면 아래 글을 참고하세요

앱인벤터 캔버스 컴포넌트

앱인벤터 캔버스 컴포넌트

캔버스의 높이 : 부모 요소에 맞추기

캔버스의 너비 : 부모 요소에 맞추기

 

볼 컴포넌트 설정값 설정하기

볼 컴포넌트에 알고 싶으면 아래 글을 참고하세요

앱인벤터 볼 컴포넌트

앱인벤터 볼 컴포넌트

 

볼 반지름 : 15 설정

 

설계 아이디어

캔버스 컴포넌트 위에 볼 컴포넌트를 움직이는 프로그램이다.

사실 특별한 기능은 없다.

. 공이 플링했을 때 공의 방향과 속도를 현재의 방향과 속도를 설정해준다.

. 공이 모서리에 닿았을 때, 공을 벽에 튕기기를 할 것이다. 인자로 현재 모서리에 닿은 '모서리'값을 입력한다.

 

코딩블럭

블록 코딩은 정말 간단한다.

우리가 무엇을 할 것인지 생각해보라.

스마트폰을 흔든다.

. 볼 컴포넌트에서 플링했을때 이벤트로 처리한다.

  . 볼 컴포넌트의 속도와 방향을 재설정한다.

볼을 움직인다.

볼이 벽에 닿으면 튕겨낸다.

  . 볼 컴포넌트가 '모서리에닿았을때' 이벤트 블럭을 활용하여 처리한다.

  . 닿으면 볼 컴포넌트의 '튕기기' 호출 블럭을 활용하여 볼을 튕겨낸다.

 

 

 

. 전역변수

없음.

 

 

. 플링했을때

볼 컴포넌트에서 플링했을때는 호출되는 블럭이다. 이 때 볼의 속도와 방향을 설정하여 볼을 해당하는 속도와 방향으로 움직인다.

 

앱인벤터 볼던지기앱 플링했을때 블록

 

. 모서리에 닿았을 때

볼이 모서리에 닿으면 호출되는 이벤트 블록이다.

볼이 모서리에 닿으면 볼을 벽에서 튕겨서 반대편으로 보낸다.

이 때 사용하는 블록이 볼 컴포넌트의 '튕기기' 블록이다.

앱인벤터 볼던지기앱 모서리에닿았을때 블록

 

실행결과 화면

 

앱인벤터의 볼던지기 앱을 작성하였다. 실행 결과 화면은 아래와 같다. 

 

첫번째 화면은 앱이 처음 구동되었을 때 화면이다. 

앱인벤터 볼던지기 앱 실행화면

 

앱인벤터 볼던지기 앱 실행 동영상은 아래와 같다.

 

앱인벤터 볼던지기 앱 실행 동영상

 

지금까지 '볼던지기' 앱을 작성하였다. 캔버스와 볼 컴포넌트에 대한 이해를 높이며 추후에 다양한 게임 등에 활용되는 컴포넌트이니 가장 기초적인 앱을 반드시 직접 작성해보고 이해하고 실습할 것을 추천한다.

 

눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.

간단하지만 직접 해보면 이해하고 자신감이 생길거에요...

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.