Transcript PPT - 앱 인벤터 2

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 프로시저를 만드는 절차
1. to procedure do 블록을 끌어옴
2. 프로시저 이름을 DrawEnergyLine으로 변경
3. 파란 창을 클릭하여 [그림 5-6]과 같이 띄움
4. 매개변수 color 추가
5. 매개변수 length 추가
6. 창을 닫음
7. do 부분을 [그림 5-7]처럼 채움
에너지 막대 표시하기
 DisplayEnergy 프로시저
 DrawEnergyLine을 두 번 호출하여 에너지 막대를 새로 그려줌
 리팩토링
굶어죽음 처리하기
 게임 종료를 처리하는 GameOver 프로시저
 Enabled 속성을 false로 설정하여 스프라이트의 동작 중단
 스프라이트의 Picture 속성을 죽은 무당벌레 이미지로 바꾸어 게임 종료 효과 얻음
굶어죽음 처리하기
 UpdateLadybug 프로시저의 확장
 에너지 수준을 하나 줄인다.
 새로운 에너지 막대를 그린다.
 energy가 0이면 게임을 끝낸다.
굶어죽음 처리하기
진딧물 추가하기
 진딧물로 게임을 더 신나게!
 게임을 좀 더 신나게 하려면 진딧물이 캔버스 여기저기에 나타나야 함
 무당벌레가 진딧물을 먹으면 에너지 막대는 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 확장
 진딧물의 방향을 바꿀 뿐 아니라 재등장시키도록 [그림 5-11]의 UpdateAphid를 확장
 프로그램은 어떻게 작동하는가?
• 만일 visible이 참이어서 진딧물이 살아있을 때는, then에서 20%확률로 방향을 바꿈
• 진딧물이 죽은 상태이면, else에서 5%확률로 (20번에 한번 꼴) 재등장
[다시 하기] 버튼 추가하기
개구리의 무당벌레 추적하기
 개구리를 나타내는 스프라이트 Frog 추가
 Interval을 10, Speed를 1로 설정하여 다른 것들보다 느린 움직임 효과
 Clock1.Timer에 call UpdateFrog 추가
 프로그램은 어떻게 작동하는가?
 10% 확률로 개구리 방향을 무당벌레 쪽으로 돌려놓음
 방향 계산은 아크탄젠트 atan2 이용
무당벌레 잡아먹기
 Ladybug.CollidedWith 확장
 진딧물 뿐만 아니라 개구리와의 충돌도 처리할 수 있게 확장
그림 5-17 무당벌레와 개구리의 충돌을 처리하는 코드 추가
무당벌레 귀환시키기
 RestartButton.Click 확장
소리와 진동 효과 추가
 밋밋한 게임에 소리와 진동 효과를 추가해 좀 더 재미있게!
전체 앱 프로그램
전체 앱 프로그램
전체 앱 프로그램
확장해 보기
감사합니다.