PART 1 앱 인벤터 프로젝트 05 무당벌레 추적

게임 앱의 인기 성공 스토리 <무당벌레 추적> 앱을 만들어보자. <앵그리 버드> 출시 첫 해 5천만 건 이상 다운로드 <무당벌레 추적> 앱을 만들어보자. 폰을 기울여 무당벌레를 움직인다. 1인칭 게임: 사용자는 무당벌레가 되어 게임에 몰입

무엇을 만드는가? <무당벌레 추적>에서 사용자가 할 수 있는 동작들 폰을 기울여 무당벌레를 이동시킴 생명력은 에너지 막대를 통해 확인 진딧물을 잡아먹으면 에너지 회복 자신을 잡아먹으려는 개구리를 피해 다님

무엇을 배우는가? <무당벌레 추적>을 만들며 배우는 것들 여러 개의 ImageSprite를 사용하면 충돌 알아냄 OrientationSensor 컴포넌트로 폰의 기울음 알아내고, ImageSprite 위치 조정 ImageSprite의 영상을 바꿈 Canvas 컴포넌트에 선분을 그림 하나의 Clock 컴포넌트로 여러 이벤트를 동시 제어 변수를 사용하여 상태 표시 (무당벌레의 에너지 상태) 매개변수를 가진 프로시저 and 블록

프로젝트 생성 프로젝트 만들고, 라이브 테스팅 연결 프로젝트 이름은 “LadybugChase” Screen1의 Title 속성은 “무당벌레 추적” 무당벌레, 진딧물, 죽은 무당벌레, 개구리 이미지와 개구리 울음소리 파일 다운로드 파일을 Media 영역에 추가

컴포넌트 설계 <무당벌레 추적> 앱이 사용할 컴포넌트 목록

컴포넌트 초기 배치 점진적 프로그래밍 기법 적용 프로그램 일부분을 만들어 테스트한 후, 제대로 작동하면 다른 부분으로 확장하는 방식 여기서는 먼저 무당벌레를 이동시키는 부분을 만들어봄 Canvas 컴포넌트 끌어옴 ImageSprite 하나 끌어옴 OrientationSensor 끌어옴 Clock 끌어옴

컴포넌트 초기 배치 ImageSprite(Ladybug)의 속성들 Interval: 이동 주기, 여기서는 10밀리 초로 설정 Heading: 이동하는 방향을 0~360 사이의 각도 단위로 표시 (0은 오른쪽, 90은 위쪽, 180 은 왼쪽, 270은 아래쪽) Speed: 매 주기마다 이동할 거리

무당벌레 이동시키기 UpdateLadybug 프로시저 OrientationSensor 사용 Magnitude: 기운 정도를 0~1 범위로 표시 Angle: 기운 방향을 각도 단위로 표시 Speed는 Magnitude에 100을 곱했으므로 0~100 화소로 설정됨

에너지 막대 표시하기 Canvas 컴포넌트 추가 에너지 변수 생성하기 Width는 Fill parent, Height는 1화소로 설정 (두께가 1인 막대) 빨간 막대를 그려 넣어 에너지 수준 표시 에너지 변수 생성하기

에너지 막대 표시하기 에너지 막대 그리기 절차 (0,0)에서 (EnenrgyCanvas.Width,0)까지 하얀 선 그려, 이전 에너지 지움 (0,0)에서 (enenrgy,0)까지 빨간 선 그려, 새로운 에너지 표시 ‘선을 그린다’는 같은 일을 하는데 단지 선의 길이와 색깔만 다름  매개변수를 가진 프 로시저

에너지 막대 표시하기 DrawEnergyLine 프로시저를 만드는 절차 to procedure do 블록을 끌어옴 파란 창을 클릭하여 [그림 5-6] 띄움 매개변수 color 추가 매개변수 length 추가 창을 닫음 do 부분을 [그림 5-7]처럼 채움

에너지 막대 표시하기 DisplayEnergy 프로시저 리팩토링 DrawEnergyLine을 두 번 호출하여 에너지 막대를 새로 그려줌 리팩토링

굶어죽음 처리하기 게임 종료를 처리하는 GameOver 프로시저 Enabled 속성을 false로 설정하여 스프라이트의 항위 중단 스프라이트의 Picture를 죽은 무당벌레 이미지로 바꾸어 게임 종료 효과 얻음

굶어죽음 처리하기 UpdateLadybug 프로시저의 확장 에너지 수준을 하나 줄인다. 새로운 에너지 막대를 그린다. energy가 0이면 게임을 끝낸다.

굶어죽음 처리하기

진딧물 추가하기 진딧물로 게임을 더 신나게! 진딧물을 나타내는 ImageSprite 추가 게임을 좀 더 신나게 하려면 진딧물이 캔버스 여기저기에 나타나야 함 무당벌레가 진딧물을 먹으면 에너지 막대는 1만큼 증가 잡아 먹히면 순간 사라졌다가 임의 위치에 다시 나타남 진딧물을 나타내는 ImageSprite 추가 Picture를 진딧물 이미지로 설정 Interval을 10으로 설정하여 무당벌레와 마찬가지로 10밀리 초마다 이동 Speed를 2로 설정하여 무당벌레가 잡을 수 있을 정도로 조정

진딧물 추가하기 진딧물 이동시키기 실험 결과 대략 50밀리 초에 한 번씩 방향을 바꾸면 좀 더 재미있는 게임 Clock1의 타이머가 10밀리 초로 설정되어 있으므로, 타이머 다섯 번 반복에 해당 두 가지 구현 방법 TimerInterval이 50밀리 초인 또 다른 Clock 사용 그냥 Clock1을 사용하며, random fraction 블록으로 조정하는 방법  여기서는 이 방법 사용

진딧물 추가하기 프로그램은 어떻게 작동하는가? 타이머가 끝나면 Clock1.Timer 이벤트 발생  10밀리 초로 설정되어 있으므로 이벤트가 초당 100번 발생 이벤트가 발생하면 UpdateLadybug와 UpdateAphid를 순서대로 호출 UpdateAphid는 0~1 사이의 난수 생성 난수가 0.2보다 작으면(1/5 확률로 발생) 진딧물 방향을 0~360도 사이로 바꿈

무당벌레의 진딧물 먹기 EatAphid 프로시저가 할 일 음식을 먹었으므로 에너지를 50만큼 증가 진딧물은 먹혔으므로 사라짐 (ImageSprite가 실제로 사라지는 것이 아니라 Visible 속성 을 false로 설정) 진딧물의 Enabled 속성을 false로 바꿔 움직임 멈춤 잠시 후 임의 위치에 진딧물 다시 나타남

무당벌레와 진딧물의 충돌 감지하기 프로그램은 어떻게 작동하는가? Ladybug.CollidedWith 이벤트는 무당벌레가 다른 ImageSprite와 충돌할 때마다 발생 매개변수 other에는 충돌한 ImageSprite의 이름이 저장되어 있음 현재는 다른 ImageSprite가 Aphid뿐이므로 굳이 누구와 충돌했는지 확인 불필요  하지만 명시적 으로 확인하는 방어적 프로그래밍이 바람직함 Aphid의 Visible 속성도 확인해야 한다.  왜?

무당벌레와 진딧물의 충돌 감지하기

진딧물 재등장시키기 UpdateAphid 확장 프로그램은 어떻게 작동하는가? visible이 참이어서 진딧물이 살아있을 때, then에서 20%확률로 방향을 바꿈 진딧물이 죽은 상태이면, else에서 5%확률로 (20번에 한번 꼴) 재등장

[다시 하기] 버튼 추가하기

개구리의 무당벌레 추적하기 개구리를 나타내는 스프라이트 Frog 추가 프로그램은 어떻게 작동하는가? Interval을 10, Speed를 1로 설정하여 다른 것들보다 느린 움직임 효과 Timer에 call UpdateFrog 추가 프로그램은 어떻게 작동하는가? 10% 확률로 개구리 방향을 무당벌레 쪽으로 돌려놓음 방향 계산은 아크탄젠트 atan2 이용

무당벌레 잡아먹기 Ladybug.CollidedWith 확장 진딧물 뿐만 아니라 개구리와 충돌도 처리할 수 있게 확장

무당벌레 귀환시키기 RestartButton.Click 확장

소리와 진동 효과 추가 밋밋한 게임에 소리와 진동 효과 추가해 좀 더 재미있게!

전체 앱 프로그램

전체 앱 프로그램

전체 앱 프로그램

확장해 보기