이번 시간에는 점프 버튼을 추가하고, 버튼을 누르면 캐릭터가 점프하게 만들어 보겠습니다.
점프 버튼을 붙일 HUD를 선언해 줍니다.(HUD에 붙여야 캐릭터가 움직여 화면이 바뀌더라도 원래 위치에 그대로 있습니다. 나중에 사용할 캐릭터 체력바, 공격 버튼, 점수표시 등도 HUD에 붙여줄 것입니다.)
점프를 위해 필요한 값들(착지 상태, 점프시키는 충격량, 충돌 물체 이름) 선언
onCreateScene() 메서드 안에 createCollision() 메서드 실행
캐릭터 스프라이트와 벽이 충돌하면 플레이어는 착지한 것으로 정의해 줍니다.
callController() 메서드 안에 점프 버튼을 만들어 줍니다.
점프 버튼 클릭시 y방향으로 impulse를 적용해 주면 캐릭터가 점프하게 됩니다.
이번 시간에는 캐릭터에 여러 애니매이션을 적용하는 방법에 대해 알려 드리겠습니다. 이전 시간까지 캐릭터는 오른쪽만 바라보고 있기 때문에 왼쪽으로 움직이면 문워크(?)로 움직였습니다.
먼저 왼쪽으로 달리는 애니메이션 스프라이트를 추가해 줍니다.
findShape() 메서드로 왼쪽으로 달리는 스프라이트를 정의해 줍니다.
showPlayer() 메서드에 왼쪽으로 달리는 애니매이션 스프라이트를 정의해 주고 오른쪽 달리기와 동일하게 작성후 setFlippedHorizontal() 메서드를 이용해 좌우를 반전 시켜 사용합니다.
바디는 오른쪽 달리기와 같은 바디를 사용하고 나머지는 오른쪽 달리기와 동일하게 작성합니다. 왼쪽으로 달릴 때만 보여 지도록 일단은 애니메이션 스프라이트를 보이지 않게 해줍니다.
컨트롤러가 왼쪽일 때 왼쪽 달리기 애니매이션 스프라이트를 사용하게 해줍니다.
이제 캐릭터가 왼쪽으로 달릴 수 있게 되었습니다. 여러 애니매이션 스프라이트를 붙여 놓고 필요할 때 보여주는 방식으로 구현해 봤는데 이 내용은 책에 없어서 제가 혼자서 생각한 것이라 더 좋은 방법 알고 있는 분 계시면 저에게 좀 알려주세요!
이번 시간에는 지난 시간에 만들었던 콘트롤러를 이용해 캐릭터를 움직여 보겠습니다.
캐릭터가 움직일 때 속도, 상태, 방향 관련해 변수 및 캐릭터의 애니메이션 스프라이트, 바디도 선언해 줍니다.
onCreateScence() 메서드안에 캐릭터 애니매이션 스프라이트와 바디도 정의해 줍니다.
findShape() 메서드는 위와 같이 정의해 줍니다.
controller x 값에 따라 캐릭터 정지, 오른쪽 이동, 왼쪽 이동 메서드가 실행되도록 작성합니다.
정지, 오른쪽 이동, 왼쪽 이동 각각의 메서드를 작성해 주면 됩니다.
이번 시간에는 캐릭터를 조정할 수 있는 콘트롤러를 만들어 보겠습니다.
게임 액티비티에 DigitalOnScreenControl을 선언해 줍니다.
onCreateScene() 메서드 안에 callController() 메서드를 만들고 scene에 digitalOnScreenControl도붙여 줍니다.
위와 같이 callController() 메서드를 작성해 줍니다.
게임을 실행시켜 보면 위와 같이 controller가 추가 된 것을 확인하실 수 있습니다.
다음 시간에는 콘트롤러로 캐릭터를 조종할 수 있도록 만들어 보겠습니다.
이전 시간에는 벽에 물리 엔진을 적용해 케릭터가 바닥에 서 있을 수 있도록 만들어 주었습니다. 하지만 케릭터가 공중 부양하는 현상이 있었는데 이번 시간에는 이것을 개선해 보겠습니다.
사용하는 케릭터 이미지의 여백도 바디로 인식되어 나타나는 현상입니다. 이를 해결하기 위해서 케릭터의 몸통 부분만 바디로 인식하도록 변경해 보겠습니다.
그리고 나중에 발견한 문제 인데 이미지 스프라이트의 중심이 바디가 되는데 그래서 위와 같이 캐릭터가 중앙에 오도록 이미지를 수정해 주었습니다.
showPlayer() 메서드를 수정해 몸통 부분만 body로 적용시켜 주고
게임을 시행해 보면 정상적으로 땅에 서있는 케릭터를 확인하실 수 있습니다.
이번 시간에는 물리 엔진을 이용해 벽을 만들어 보겠습니다.
이전까지 만들었던 타일 맵을 열고 Layer -> New -> Object Layer 를 선택하고 오브젝트의 이름은 ‘wall’ 로 합니다.
상단에서 오브젝트의 모양을 결정하고(여기서는 사각형) 벽에 해당하는 영역에 그려 줍니다. Ctrl 키를 이용하면 타일 사이즈에 딱 맞는 사각형을 만들 수 있습니다.
만든 타일맵 저장 후 에디터로 열어 타일셋 이미지의 경로와 wall 오브젝트에 타일맵의 가로, 세로 타일 갯수를 입력해 줍니다.
각 wall의 x, y, width, height는 정수 여야 합니다.(float일 경우 에러 발생하면서 화면이 정상적으로 표시 되지 않습니다.
onCreateScene() 메서드 안에 scene에 타일맵을 붙인 다음에 loadObject() 메서드를 만들고
loadObject() 메서드를 만들어 오브젝트의 이름이 wall이면 loadWallFromObjects()라는 메서드가 실행되도록 합니다.
loadWallFromObjects() 메서드를 위와 같이 작성해 줍니다.
scene에 추가된 모든 객체는 mEntityList에서 관리합니다. mEntityList에 값을 넣어 두면 findShape() 메서드에서 맵에 지정한 이름으로 오브젝트를 가져올 수 있습니다.
이전에 만들었던 showPlayer()(spawnPlayer에서 showPlayer로 변경) 메서드를 “player”라는 이름을 매개 변수로 던질 수 있게 변경 후 게임을 실행해 보면
이제는 플레이어가 나타난 후 더이상 아래로 떨어지는 않는 것을 확인하실 수 있습니다. 오히려 캐릭터가 공중으로 뜨는 현상이 있는데 이것은 다음 시간에 수정하도록하겠습니다.
이번 시간에는 캐릭터에 Box2D 물리 엔진을 적용해 보겠습니다.
물리 엔진을 사용하기 위해 Box2D extension을 assets 폴더와 동일한 위치에 위치 시킵니다.(첨부 소스 참고)
build.gradle(Module: app) 에 조금 전 추가한 라이브러리 위치에 대해 위와 같이 작성해 주고 Sync Now 를 눌러 주면 물리 엔진 사용이 가능해 집니다.
먼저 게임 액티비티에 Physicsworld를 선언해 줍니다.
onCreateScene() 메서드 안에 위와 같이 physicswolrd를 정의해 줍니다.
위와 같이 작성해주면 플레이어에 물리 엔진이 적용됩니다.
FixtureDef 정의시 필요한 Category bits는 2진수로 바꿔보면 각각의 위치가 겹치지 않는 고유한 값이 가지도록 정의해 줍니다.
Mask bit는 각각의 물체가 서로 겹치지 않음을 정의 할 때 사용합니다.(위에서는 플레이어는 벽과 적과는 겹치지 않음을 의미합니다.)
이제 게임을 실행시켜 보면 플레이어가 화면에 나타나자 마자 중력의 영향으로 아래로 떨어저 버리는 것을 확인하실 수 있습니다.
다음 시간에는 벽에 물리 엔진을 적용해 캐릭터가 벽을 만나면 더이상 떨어지지 않도록 만들어 보겠습니다.
이번 시간에는 애니매이션 이미지를 구현하는 방법에 대해 설명해 드리겠습니다.
사용할 애니매이션 이미지는 위와 같이 문이 열리는 이미지입니다.
먼저 사용할 애니매이션 이미지를 TiledTextureRegion을 이용해 선언해 줍니다.
onCreateResources() 메서드 안에 소스 이미지 이름, 애니메이션 column/row의 수를 입력해 줍니다.
onCreateScene() 메서드 안에 각 애니매이션 타일 별 재생 시간, 시작 타일, 마지막 타일, 반복 여부를 위와 같이 작성하시면 됩니다. 게임을 실행해 보면 시작시 문이 열리는 애니매이션이 적용된 것을 확인하실 수 있습니다.
이번 시간부터는 조금 더 고급게임?을 만들 수 있도록 물리 엔진을 활용하는 방법에 대해 알려 드리겠습니다.
물리 엔진을 사용하기 위해 Box2D extension을 libs 폴더에 넣어 줍니다.(타일맵 사용을 위해 TiledMap extension도 같이 폴더에 넣어 주겠습니다.) library 추가 후에는 항상 File -> Sync Project with Gradle files 실행해 줍니다.
이것으로 물리엔진 및 타일맵 사용을 위한 세팅은 완료되었습니다. 다음은 타일맵 사용법에 대해 설명해 드리겠습니다.
타일맵을 만들기 위해 Tiled 라는 툴을 다운받아 사용합니다.
Tiled 설치 후 실행 -> New Map 클릭
format -> Base64(zlib compressed) 를 선택하고, 만들고자하는 타일의 수, 한 타일의 픽셀 입력후 Save As… 클릭 -> 파일 이름 입력
타일맵이 만들어 지면 New Tileset… 클릭
Browse.. 를 눌러 타일맵 만들 때 사용할 타일셋 이미지를 불러와 Save As… 클릭
위와 같이 타일맵을 눌러 본격적으로 타일 맵을 작성합니다.
타일 맵을 그리는 방법은 오른쪽에서 타일셋을 골라 상단에 채워 넣는 방법을 선택하고 그림그리듯이 타일 맵을 채우고 타일맵 완성 후 저장해 줍니다.
하지만 지금 상태로 사용하면 에러가 발생하는데 이것은 AndEngine은 개발이 중단 되었지만 Tiled 는 지금되 계속해서 업데이트가 되고 있기 때문에 tmx 파일의 포맷이 달라서 그런 것 같습니다.(?) 만들어진 tmx 파일을 에디터를 이용해 열어 보면 위와 같이 xml 포맷인 것을 알 수 있는데, 제가 참고했던 책의 예제와 비교해보니 3번째 라인의 포맷이 다른 것을 발견했습니다.
위와 같이 책소스를 참고해 tmx 파일을 수정해 주면 정상적으로 사용하실 수 있습니다.
assets 폴더에 tmx 폴더를 만들고 위에서 수정한 tmx 파일을 넣어주고, 타일셋 이미지는 gfx 폴더에 넣어 줍니다.
게임 엑티비티에 TMXTiledMap을 선언해 주고
onCreateScene() 메서드에 위와 같이 작성
게임을 실행해 보면 위와 같이 조금 전 만든 타일맵이 화면에 보여 지는 것을 확인하실 수 있습니다.
이 게임에서는 달리다 보면 곰이 출현하고 케릭터는 점프를 통해 곰을 피하거나 피하지 못하면 게임이 끝나도록 하였습니다.
케릭터와 유사하게 GameObject를 상속받는 Bear 클래스를 만들고, 시간이 지날수록 곰이 빨리 달리도록 위와 같이 작성해 줍니다.
달리기 버튼 누르다보면 곰이 출현하도록게임 Activity에 달리기 버튼 안에 Math.random()을 이용해 랜덤한 시점에 곰이 출현하도록 위와 같이 작성해 줍니다.
충돌 감지를 위해 scene.registerUpdateHandler() 메서드 안에 위와 같이 충돌 조건 및 충돌시 처리할 내용을 작성해 주면 됩니다.
완성된 게임(Finger Runner)
