앱인벤터로 슈팅 게임 만들기

앱인벤터를 이용해 슈팅 게임을 만들어보도록 하겠습니다.

우주선을 터치해면 공이 날아가서 외계인을 맞추는 게임입니다. 우주선을 드래그하면 좌우로 움직입니다. 공이 외계인을 맞추면 점수가 5점 오르지만 행성을 맞추면 5점 감점됩니다.

먼저 완성된 앱을 동영상으로 확인해봅시다.

---

동작영상

---

이미지

이번 앱에서 사용되는 이미지를 다운받을 수 있는 링크를 걸어두었습니다. 다운로드 받아서 사용하시면 됩니다.

 

1) 처음화면 배경 :  https://www.freepik.com/free-vector/gradient-outer-space-cover-collection_4137021.htm#page=1&query=space&position=3

2) 게임화면 배경 : https://www.freepik.com/free-vector/star-background-with-planets_1594486.htm#page=1&query=space&position=24

3) 우주선 이미지 : https://www.flaticon.com/free-icon/rocket_123369

4) 행성 이미지 : https://www.flaticon.com/free-icon/planet_2240730?term=space&page=1&position=34

5) 외게인 이미지 : https://www.flaticon.com/free-icon/ufo_214358?term=alien&page=1&position=44

---

화면구성

처음화면에 배경 이미지를 넣어줍니다. 그리고 스크린에 대한 속성을 바꿔줍니다.

수평정렬 : 가운데 

수직정렬 : 아래

배경이미지 : intro.jpg

화면에 버튼을 넣고 각각의 속성들을 바꾸어 줍니다.

배경색 : 분홍

글꼴크기 : 16

텍스트 : 게임시작 

텍스트색상 : 흰색

[스크린추가] 버튼을 클릭하고 두번째 스크린을 추가합니다.

스크린이름: Screen2

두번째 스크린에도 배경이미지를 넣고 속성을 변경해줍니다. 

수평정렬 : 가운데

베경이미지 : back.jpg

화면에 점수를 표시할 레이블을 드래그 해서 넣은 뒤, 캔버스를 나머지 화면을 꽉채우도록 크기를 조절합니다.

이미지스프라이트를 넣고 각각 로켓과 외계인 이미지를 넣어줍니다.  크기를 조절해줍니다.

높이 : 50픽셀

너비 : 50픽셀

블록코딩할 때 구별할 수 있도록 이름을 컴포넌트에서 이름바꾸기를 클릭해서 '우주선', '행성', '외계인1', '외계인2' 로 각각 바꾸어줍니다. 

공을 넣어주고 속성 값을 바꾸어줍니다.

페인트색상 : 노랑

이미지스프라이트가 서로 다른 시간동안 무작위로 움직이게 하기 위해서 시계를 3개 넣어줍니다. 

그리고 타이머 간격 값을 각각 다르게 입력해줍니다.  1초라면 1000을 입력합니다. 

---

코딩하기

디자이너 화면에서 블록 화면으로 들어갑니다. 

화면이 초기화되면 로켓의 좌표를 화면 가장 아래쪽으로 가도록하고 공이 보이지 않게 합니다.

로켓을 드래그 하면 X 값을 바꿔 손가락을 따라오게 합니다.

로켓을 터치했을 때 공의 좌표를 로켓의 위치로 바꾸어주고, 공이 위를 향해서 움직이도록 하고 보이게 합니다.

각각의 시계가 설정된 시간이 되면 이미지스프라이트들을 랜덤한 위치로 가게 합니다. 

공이 다른 행성과 충돌했는지, 외계인과 충돌했는지에 따라 점수를 5점 추가하거나 5점 깍도록 바꾸어 줍니다. 

---

확인하기

앱인벤터로 만든 앱을 스마트폰에 설치하기 위해 [빌드] - [앱(APK용 QR코드 제공)] 을 클릭해서 QR 코드를 만듭니다. 

설치할 스마트폰에서 네이버 앱을 열어 QR코드를 찍도록 합니다.

앱을 설치한 후 완성된 모습을 확인합니다. (완성~ :D )