1
1. Off-line 환경에서 게임 App 개발 준비하기 이제부터 간단한 게임 앱을 만들어 보아요. 로켓으로 UFO를맞추는 게임이에요. 여기서는 모든 것을, 인터넷 이 연결되어 있지 않은 Off-line환경에서 개발하고 확인 하기로 해요.
우선, ‘Ai2LiveComplete’폴더를 찾아 그안에 있는 ‘WinStartAIServer’를 두번 click하세요. 지난번에 익 힌 것처럼, DOS창에 가상의 서버에 대한 url이 나와요.
그럼, Chrome browser를 open하세요. 가상서버 url인 http:// localhost:8888을 typing하세요. 작은 창이 나타나면 ‘Log In’ button을 click하세요. 화면 위에 있는 ‘Project’ menu에서 ‘Import project from my computer’를 선택하고, Home page에서 download받은 ‘AI2_ Game_1.aia’file을 찾으세요.
2
우리의 첫 번째 App이 나왔어요. 4가지 버튼에 대한 ‘Components’와 ‘Properties’ 구역의 내용을 우리의 게임 App에 맞춰 수정하세요. Palette’구역에서 ‘Button’하나를 가져와서 ‘Your level:’버튼 오른편에 두세요.
Palette’구역에서 ‘Ball’과 ‘ImageSprite’를 가져와서 ‘Viewer’구역의 ‘Canvas’ component안에 두세 요. Ball의 색을 바꾸고,
3
Download받은 로켓 image의 Y축의 값을 230으로 하세요. 게임할 때 X축은 자유롭게 움직여야함으로, 따로 값을 setting하지 않아 요.
4
2. 로켓에서 볼을 쏘고 Score가 증가하는 Coding Project’ menu에서 ‘Import project from my computer’를 선택하고, Home page에서 download받은 ‘AI2_Game_2.aia’file을 찾아서, 이제까지 여러분이 한 것과 비교해 보세요. Coding을 하기위 해 ‘Blocks’화면으로 가서, 기존에 있던 Block들은 휴지통으로 보내세요. 스토리를 만들어 보아요. 로켓은 볼을 위로만 쏠 수 있어요. 볼이 Canvas의 천정에 닿을 때마다 Score가 1씩 증가해요. 일정 Score에 도달하면 Grade level이 바뀌도록 coding해요. 볼은 로켓을 touch할 때만 보이고 속도를 programing할 수 있어요. 로켓의 위치는 X좌표를 따라 손으로 drag를 해서 움직일 수 있 어요. when Screen1.Initialize’블록을 가지고와서, 처음에는 Ball이 보이지 않게 하세요.
‘when R.Touched’블록을 가지고와서, 로켓을 touch했을 때 볼이 보이게하고, 속도와 방향을 정하세요. 90도는 정확하 게 위로만 쏜다는 뜻이에요.
‘when R.Dragged’블록을 가지고와서, 스마트폰에서 손으 로 로켓을 X축으로만 움직일 수 있도록 해요.
5
‘when B.EdgeReached’블록을 가지고와서, Ball이 Canvas의 천 정에 닿았을 때 Ball은 보이지 않게 하고, ‘Score’가 1씩 증가 하도록 하세요.
6
3. 문제해결 - Debugging 앞에서 coding한 결과를 Emulator로 먼저 확인하기로 해요. ‘aiStarter’ icon 을 click하세요. ‘Connect’ menu안에 있는 ‘Emulator’를 선택하세요. 로켓을 click하고 X축으로 움직이면서, 2가지 문 재를 발견할 수 있어요.
첫 번째 문제는, Ball이 로켓의 위치와 상관없이 계속 가운데에서 그것도 Canvas 천정에서만 생겼다 없어 졌다해요. 두 번째 문제는, ‘Score’가 로켓을 click한 것과 상관없이 계속 증가해요. 우선 두 번째 문제를 해결하기 위해, ‘when B.EdgeReached’블록안에 Ball의 Speed가 ‘0’이 되게하는 블록을 추가해요.
그런다음, ‘when Reset_Button.Click’블록을 가져와서 ‘Score’가 ‘0’이 되도록 하세요. Home page 에서 download받은 ‘AI2_Game_3.aia’file을 찾아서, 이제까지 여러분이 한 것과 비교해 보세요.
7
이제, 첫 번째 문제를 해결하기로 해요. ‘when R.Touched’ 블록안으로 ‘call B.MoveTo’블록을 가져오세요.
그런다음, x소켓은 로켓의 중앙이 되도록, y소켓은 로켓의 윗부분이 되도록 coding하 세요.
‘Designer’화면의 ‘Palette’구역에서 가져온 ‘ImageSprite’를 UFO로하고, Download받은 UFO image의 Y축의 값을 ‘0’으로 하세요. ‘Blocks’화면에서 로켓에서 쏘아올린 Ball이 UFO를 맞췄을 때만, Score가 올라가고 UFO의 X축의 위치가 Random하도록 Program을 수정해요.
8
4. Game App 완성하기 이제 ‘Your level’부분만 Coding 하면 우리의 Game App은 완성 이 되요. ’to procedure’블록을 가져와서 이 Subroutine이름을 ‘Grade’로 정하고 ‘when UFO. CollidedWith other’블록에서 call하도록 해요.
Grade A,B,C,D에 대한 각각의 조 건을 만들려면 ‘if-then-else’가 연속으로 필요한데, AI2에서는 ‘ifthen’만 있어요. 그래서, ‘if-then’ 의 왼쪽 위에 있는 파란색 box인 ‘mutator’를 이용해요.
9
Game은 1분동안만 하기로 해요. 그래 서, Score와 Grade도 그동안만 변화도 록Timer를 setting하기로 해요. ‘Designer’화면에서 ‘Clock’블록을 가져오 세요. ‘Clock1’ component의 ‘TimerInterval’ 기본값이 1000ms 즉, 1초로 되어 있어요. 정확한 Game시간 계산을 위해, App을 처음시작할 때와 Reset 때 Timer가 enable되도록 ‘Blocks’화면에 서 coding하세요.
TimerInterval이 1초이므로 ‘when Clock1.Timer’가 60번 call되면, 1분동안 Game을 하게 되요. Game이 끝난 후 ‘Game Over!!’라는 message가 화면에 나오게하고, 로켓이 화면에서 사라지게 해요. Game이 끝났는데도 ‘Score’가 계속 올라가는 것을 방지하려면, Ball speed를 0으로 하면 되요. Reset버 튼을 click했을 때 초기화면이 되도록 하면, 우리의 Game App이 완성!!
10