OhMyPlane

자작 앱 개발 세 번째 이야기. 프로토타입을 하나의 앱으로 완성(?)할 때, 기억에 남아 있는 것들을 정리해 본다.

전체적인 장면(Scene) 구성

처음에 이런 형태로 생각했던 것은 아니고, 중간에 계속 바꿔가다가 완성된 장면들의 흐름은 다음과 같다.

점선으로 된 사각형이 하나의 장면이다. 빨간 화살표는 장면의 변경 경로를 표시했다. 게임 장면은 4개의 상태에 나누었고, 상태에 따라서 다른 장면으로 이동한다.

게임 외의 장면을 UI Kit을 이용해서 구현하려다 Sprite Kit의 Scene을 이용해서 구현했다. 이왕 Sprite Kit을 사용한 김에 다른 부분도 다 이를 이용해서 구현했다.

이미지 작업

장면마다 배경 화면이 필요하다. 그리고 Tappy Plane에 없는 버튼에 필요한 이미지를 만들어야 했다.

kenney.nl에서 제공하는 다른 이미지들을 살펴보고 이것저것 사용할 수 있는 것들을 조합했다. 벡터 이미지 파일을 Inkscape를 이용해서 이리저리 조합했다. 크기 및 색상, 위치, 각도 등등을 변경도 하고 여러 이미지를 조합도 하면서 이미지를 만들었다.

참고로 색상 변경 시 Tappy Plane 디자인에서 사용한 색상 중 하나를 선택해서 사용했다. 거기서 사용한 색상을 벗어나면 왠지 이질감이 느껴지지 않을까 하는 생각에 다른 색상을 사용하지 않았다.

이미지 작업을 직접 해보니 디자이너에 대한 존경심이 생긴다. 대단하신 양반들~

Sprite Kit에는 버튼이 없다.

막상 구현을 시작하고, 버튼이 필요해 추가하려고 하는데 Sprite Kit에서 버튼을 제공하지 않는다는 것을 알았다. 흐~ 이미지를 이용해서 버튼을 직접 구현해야 했다. UI Kit으로 다시 구현할까 고민했지만, 그냥 진행했다.

버튼 이미지는 하나만 만들어 놨었는데, 버튼 눌림에 대한 이미지를 추가로 만들었다. 디자이너가 보면 “피식~” 하겠지만, 이런 이미지 작업의 성취감이 놀라웠다.

Credit 장면

설정처럼 생긴 버튼을 누르면 이동하는 장면인데, 설정할 수 있는 것을 하나도 넣지 않고 Credit만 보여주고 있다. 여기에 도와준 사람들 이름 넣고 생색내고 있다. 개인적으로 이 앱에서 제일 중요한 부분이다. 하하하~~~

게임 보완

천장 막기

7살 둘째가 발견했던 천장 뚫기 신공을 막는 작업이다. 역시 이미지 작업이 필요하다. 하단에 사용된 배경 이미지를 상하로 뒤집어 사용해보니, 세로가 더 긴 iPad에서 공간이 생겼다. 게임 난이도를 같게 유지하기 위해 상단 장애물의 높이를 바닥에서 일정하게 유지했기 때문이다.

역시 Inkscape를 이용해서 위쪽에 이미지를 추가로 덧붙였다. 이런 단순(?) 작업도 시간이 오래 걸린다. 흑흑~

효과 넣기

비행기가 고장 났을 때, 나오는 연기와 충돌했을 때 효과를 Sprite Kit의 Particle을 이용해서 만들었다. 이 효과는 코드로 만들거나, Xcode에서 제공되는 도구를 이용해서 만들 수 있다.

비행기가 고장 났을 때, 나오는 연기는 XCode에서 Particle 편집기를 이용해 눈으로 보면서 만들었다.

충돌했을 때의 효과는 2D iOS & tvOS Games by Tutorials 책의 DropCharge에서 사용되었던 코드를 수정하여 사용했다.

성능 개선

개발하는 동안 가지고 있는 iPhone 6S에서 테스트할 때는 티가 안 나다, 큰애의 iPhone 4S에서 테스트해보니 정상적인 게임을 할 수 없을 정도로 버벅댔다.

XCode에서 제공하는 Instruments를 이용해서 병목 지점을 확인해 보았다. 게임 실행 중 이미지가 필요할 때마다 불러오는 부분이 문제였다.

게임 장면에서 필요한 이미지 종류와 개수는 정해져 있으므로 게임 시작 전에 필요한 이미지들을 메모리에 올려놓는 형태로 수정했다. 필요할 때, 만들고 필요 없으면 제거했던 것을 재사용할 수 있게 수정했다.