OhMyPlane

자작 앱 개발 두 번째 이야기. 이번에는 프로토타입 구현할 때 기억에 남는 것들을 끄적여 본다.

이미지 작업

그림을 그리거나, 이미지를 다루는 능력이 많이 부족하므로 난이도가 높게 느껴진다.

다양한 화면 대응

iPad, iPhone 및 tvOS를 대상으로 하므로 다양한 화면크기에 대해 고려를 해야 한다. 2D iOS & tvOS Games by Tutorials 책에서 제시한 방법을 그대로 사용하였다.

가로 화면만을 지원할 것이기 때문에 배경의 크기가 2048x1536 크기이고, 화면 상태가 Aspect Fill이면 모든 화면 크기에 대응할 수 있다. iPad의 경우 2048x1536으로 보일 것이고, iPhone의 경우 화면 크기에 맞춰 보일 것이다.

이미지 편집

Tappy Plane에 포함된 png 파일들의 크기가 작아 png 파일을 그대로 사용할 수 없었다. 대인배 kenney.nl에서 벡터 그래픽 파일도 같이 배포하고 있으므로 원하는 크기의 이미지를 뽑아낼 수 있었다.

“svg”, “swf” 두 파일로 제공하고 있었는데, 어떤 도구를 사용해야 할지 몰랐다. 인터넷을 통해서 Inkscape을 알게 되었다. 이 소프트웨어 덕분에 추가 비용 없이 “svg” 파일을 사용할 수 있었다. 이런 결과물들을 세상에 베푸는 사람들은 복 받아야 한다!!

Inkscape을 이용해서 필요한 이미지들을 적당한 크기로 뽑아냈다.

중간에 이미지 합성, 편집이 필요할 경우 Inkscape와 Pixelmator를 사용했다.

소스 코드 구현

게임을 구현한 소스 코드는 GitHub 저장소에 올려두었다. 자세한 코드 구현에 대한 설명은 소스 코드로 대체하고 기억에 남은 것들만 몇 개 정리한다.

Camera

Sprite Kit에서 Camera에 대한 기능을 제공한다. 화면에 보이고 싶은 부분을 Camera로 지정하면 된다.

그냥 사용하면 될 줄 알았으나, 버그가 있다. 사용하는 이미지가 그대로 사용되는 iPad에는 문제가 없으나, 크기가 변경되어 적용되는 iPhone에서는 원한 위치로 Camera가 옮겨지지 않는다. 화면크기로 인해서 잘려나가는 크기를 계산해서 Camera 위치를 수정해야 한다. 역시 “2D iOS & tvOS Games by Tutorials” 책에서 제시한 방법을 그대로 사용하였다.

Physics Body

비행기와 지형 및 장애물 충돌을 검사하기 위해 충돌 검사 대상이 되는 Physics Body를 지정해줘야 한다. 비행기의 경우 적당한 크기의 원을 사용했고, 지형과 장애물은 이미지를 사용했다.

이미지를 사용할 때, 두 가지 문제점을 겪었다. 첫 번째는 이미지가 조금 이상(?)하면 Physics Body로 지정 안 되는 문제였고, 두 번째는 SpriteNode의 anchorPoint를 CGPoint.zero로 변경했을 때 오동작했다.

Pixelmator로 투명 부분을 자동 선택 후, 역 선택하는 형태로 이미지를 만들어 사용했었다. 첫 번째 문제가 발생하는 경우, 이미지의 외곽을 선으로 따라 그려 이미지를 새로 만들어서 사용하니 정상 동작했다.

두 번째 문제는 anchorPoint를 수정하지 않고, 좌표를 잘 계산해서 사용했다.

배경 음악

테스트할 수 있는 정도로 구현되고 나니 뭔가 심심하다. 배경 음악이 필요한 단계이다.

게임 분위기에 맞게 필요한 음악을 찾는 것도 문제이다. 그런 음악이 어디 있는지도 모르지만, 사용권이 보통 문제가 될 것이기 때문이다. 계속 반복되는 간단한 음악은 GarageBand의 Loop를 조합하면 만들 수 있는 것을 알고 있었기에 이번에는 직접 만들었다. 게다가 사용권 문제도 없다.

프로토타입을 위해서 게임 중과 실패 시 나오는 2가지 배경음악을 만들었다. 게임 중에 나오는 배경 음악은 긴장감이 느껴지게 하였고, 실패 시 나오는 배경 음악은 약간 놀리는 느낌이 들게 하였다. 순전히 개인적인 느낌이라 다른 이들은 어떤지 모르겠다.

그렇게 만든 배경 음악을 Soundcloud에 올려두었다.

프로토타입 테스트

프로토타입이 얼추 만들어졌고, 테스트하면서 설정들을 조금씩 바꿔나갔다.

첫 테스트를 두 딸아이가 했는데, 7살 둘째 녀석의 점수를 보고 깜짝 놀랐다. 최고 점수를 찍었다. 어떻게 하나 봤더니, 비행기를 화면 위쪽으로 계속 날린다. 그러더니 비행기가 화면 밖으로 사라졌다. 크크크… 화면 위가 뚫린 것을 알아채더니 그렇게 꼼수를 쓴다. 며칠 뒤 화면 상단을 막았더니 막았다고 잠시 난리 쳤다. 흐흐흐…