Tappy Plane 만들기 (Flappy Birds 클론)

소개:

안녕하세요! hyperPad에서 나만의 "Flappy Birds" 스타일 게임을 만드는 튜토리얼에 오신 것을 환영합니다.

우리 버전은 약간 다르기 때문에 Tappy Plane이라고 부르기로 했습니다.

이 튜토리얼은 비주얼 코딩을 배우고 싶어하는 초보자를 위해 디자인되었습니다. 튜토리얼 동안 hyperPad 인터페이스를 익히는 방법도 배울 수 있습니다.

이 튜토리얼에서는 Flappy Bird 스타일의 간단한 게임을 만들 것입니다. 게임은 플레이어가 화면을 탭하여 비행기를 위아래로 조정하며 여러 개의 절벽을 지나가는 방식으로 구성됩니다. 지나가는 각 절벽마다 점수를 부여하며, 충분한 점수를 얻으면 메달을 획득할 수 있습니다. 메달은 점수가 높을수록 가치가 증가하여 반짝이는 금메달까지 받을 수 있죠! 누가 반짝이는 것을 싫어하겠어요!?

hyperPad가 아직 없다면, App Store에서 다운로드할 수 있습니다: https://itunes.apple.com/app/apple-store/id886106438?mt=8

hyperPad에 대한 자세한 내용을 보려면 웹사이트를 방문하세요: http://www.hyperpad.com

이제 더 이상 지체하지 않고 시작해 볼까요!

1부: 시작하기

프로젝트 만들기:

우리가 먼저 해야 할 일은 새로운 프로젝트를 시작하는 것입니다. hyperPad를 로딩하면 프로젝트 화면이 보일 것입니다. 여기에서 생성한 모든 프로젝트와 다운로드한 프로젝트를 확인할 수 있습니다. 지금은 새로운 프로젝트를 시작하고 싶습니다. 아래의 화면에서 오른쪽 상단에 있는 새 프로젝트 버튼을 탭하세요.

그렇게 되면 팝업 창이 나타납니다. 여기서 프로젝트의 이름을 정하고 클라우드 백업을 원하면 설정할 수 있습니다. 또한, "샘플로 시작하기" 버튼을 탭하여 기본 프로젝트 중 하나를 가져올 수 있지만, 지금은 그렇게 하지 않을 것입니다. 프로젝트 이름을 Tappy Plane으로 정한 뒤 '다음' 버튼을 탭하세요.

새 화면에서는 우리가 디자인할 장치와 방향을 결정할 수 있습니다. 이 프로젝트의 경우 방향을 가로로 설정하고 장치 지원을 iPad로 설정하세요. 나중에 무언가를 변경해야 할 경우 걱정하지 마세요. 이러한 설정은 Global Settings 메뉴에서 언제든지 조정할 수 있습니다.

마지막으로 어떤 유형의 게임을 만들지 선택할 수 있습니다. 현재 hyperPad는 탑다운 모드와 측면 보기 모드 두 가지를 지원합니다. 탑다운 또는 새의 눈의 시선은 주로 Zelda 전환 전의 게임, Bejeweled 같은 퍼즐 게임 및 탑다운 슈팅 게임에 사용됩니다. 측면 보기는 Super Mario Bros와 같은 플랫폼 게임에서 일반적으로 사용됩니다.

두 버전은 거의 동일하게 작동하지만 작은 차이가 있습니다. 새의 눈의 보기 모드에서는 중력 설정이 비활성화되며(대신 공기 저항을 사용하여 화면으로 들어가는 중력을 시뮬레이션), 프로젝트를 만들 때 이를 염두에 두세요. Global Properties 메뉴에서 나중에 언제든지 변경할 수 있습니다.

이 튜토리얼에서는 측면 보기를 사용할 것이므로 이를 선택했는지 확인하세요. 다음으로는 중력 설정과 PTM 비율이 있습니다. 기본적으로 중력은 0 및 -25로 설정됩니다.

이것들은 x 및 y 값, 즉 간단히 말해 우리의 게임 세계의 수평 좌표와 수직 좌표입니다. X는 수평, 즉 좌우를 나타내고 Y는 수직, 즉 위아래를 나타냅니다. 0 및 -25의 기본 설정은 객체를 좌우로 끌어당기는 중력은 없고, 초당 25미터의 비율로 떨어진다는 뜻입니다. 이 튜토리얼에서는 기본값으로 설정된 상태를 유지합니다.

PTM 비율은 포인트와 미터 간의 비율로, 한 hyperPad 미터에 몇 픽셀(포인트)이 있는지를 나타냅니다. 기본적으로 32 pt/m 또는 1미터당 32픽셀로 설정됩니다. 이는 예술 자산을 만들 때 고려해야 할 중요한 요소이므로, 모든 예술 자산은 이 비율을 따라야 합니다. 이 튜토리얼에서는 hyperPad 자산 라이브러리에서 제공되는 무료 자산을 사용할 것이므로 스케일을 변경할 필요는 없습니다.

이젠 생성 버튼을 탭하면 시작할 수 있습니다!

편집기:

프로젝트에 들어섰으니, 이제 다음과 같은 화면이 보일 것입니다:

이곳은 우리의 캔버스이며, 여기에 게임을 만듭니다. 화면 중앙에 얇은 초록색 테두리의 박스가 보일 것입니다. 이것은 우리의 화면 뷰를 나타냅니다. 이 박스 안에 배치된 모든 것은 게임 시작 시 즉시 보이게 되며, 박스 밖에 배치된 것은 렌더링되지 않습니다. 원하시면 잠시 주위를 눌러서 어떤 것이 어떤지를 확인해 보세요. 다음 단계로 넘어가기 전에요.

준비가 되었으면, 오른쪽 아래에 있는 서랍 아이콘을 탭하여 자산 브라우저를 열어주세요.

자산 라이브러리:

여기에서 우리의 게임에 사용할 모든 자산이 저장됩니다. 기본적으로 새로운 hyperPad 프로젝트에는 몇 가지 기본 자산만 포함되어 있습니다. 자신의 자산을 가져오거나 hyperPad 자산 상점에서 팩을 다운로드해야 합니다. 이 튜토리얼에서는 hyperPad 자산 상점에서 제공되는 자산을 사용하는 것에 집중할 것입니다. 왼쪽에는 네 개의 버튼이 있는 바가 보일 것입니다. Get Assets 버튼을 탭하여 Hyperpad Shop을 엽니다.

여기에서 우리 hyperPad가 설정한 무료 자산 팩을 찾아 프로젝트를 시작하는 데 도움을 줄 수 있습니다. Tappy Plane Asset Pack을 찾아 탭하세요.

이제 '가져오기' 버튼을 탭하여 가져오기를 시작하세요(노트: 오류가 발생하면 다시 탭하여 가져오기를 다시 시작하세요). 모든 작업이 완료되면 자산이 성공적으로 가져왔다고 메시지가 표시됩니다. 화면의 오른쪽 상단에 있는 닫기 버튼을 탭하여 hyperPad로 돌아가세요.

그렇게 간단합니다. 현재 다운로드 폴더에 Tappy Plane Pack 폴더가 생겼을 것입니다. 이를 탭하면 내부의 아트 자산이 나타납니다.

이제 게임을 조립해 보겠습니다.

2부: 게임 플레이

Flappy Bird를 잘 아신다면 게임 플레이 스타일이 익숙할 것입니다. 화면을 탭하여 새, 혹은 우리의 경우 비행기를 공중에 유지시키고, 오는 장애물에 부딪히지 않도록 해야 합니다. 이러한 장애물은 무작위 구성으로 생성되므로 매번 플레이할 때마다 다릅니다. 장애물을 성공적으로 피할 때마다 점수를 얻고 최고 점수가 기록됩니다.

비행기 추가하기:

이제 기본 게임 플레이를 이해했으니 시작해 보겠습니다. 먼저 화면에 플레이어 캐릭터를 올려놓아야 합니다. 자산 브라우저에서 다운로드 폴더로 이동하여 아트 자산을 찾습니다. 비행기라는 폴더가 있어야 합니다.

해당 폴더를 열고 좋아하는 색상을 선택하세요. 그런 다음 첫 번째 비행기 그래픽을 선택하면 자산 라이브러리가 닫히고 주 편집기 화면으로 돌아가며 아래의 객체 도크에 비행기가 나타납니다. UI의 이 섹션은 객체 도크(Object Dock)라고 불립니다. 마지막으로 사용한 5개의 자산이 표시됩니다. 이제 비행기를 플레이 영역에 넣으려면 도크에서 캔버스로 비행기를 드래그하세요.

게임에 비행기가 추가되었으니 한 가지 조정이 필요합니다. 비행기를 선택하고 오른쪽에서 속성 탭을 엽니다. 우리가 하고 싶은 것은 비행기를 통과 가능한 벽 객체로 설정하는 것입니다. 간단히 패스 열을 찾아 탭하여 켭니다. 이렇게 하는 이유는 게임이 시작하기 전에 비행기가 떨어지지 않길 바라기 때문입니다. 또한 비행기를 통과 가능하게 설정하는 것은 현재로선 충돌을 없애기 위해서입니다.

이제 플레이 가능하게 만들기 위해 다이브 해 보겠습니다.

떨어지는 비행기:

게임을 시작하는 방법이 필요합니다. 이를 위해 버튼이 필요합니다. 간단한 그래픽을 사용하여 탭할 위치를 표시할 수 있지만 이 게임에서는 플레이어가 화면의 아무 곳이나 탭하도록 허용하고 싶습니다. 어떻게 할까요? 전체 화면을 버튼으로 만들겠습니다!

이를 달성하기 위해 가장 먼저 해야 할 일은 새로운 레이어를 만드는 것입니다. 이를 위해 비행기의 선택을 해제해야 합니다. 그렇게 하려면 비어있는 공간을 탭하기만 하면 됩니다. 선택이 해제되면 객체 속성이 닫히고 오른쪽에서 레이어 탭이 나타납니다. 나타나지 않으면 화면 오른쪽에서 왼쪽으로 손가락을 쓸어 레이어를 숨겨줍니다.

보시다시피 현재 기본적으로 세 개의 레이어가 있습니다. Global UI, Scene UI, 그리고 분리선 아래의 Main 레이어입니다. 레이어를 생성하려면 레이어 탭 하단에 있는 + 아이콘을 탭하십시오. 그러면 새로운 레이어의 이름을 입력하라는 메시지가 나타납니다. Button이라고 입력하고 확인을 누릅니다.

기본적으로 활성 레이어는 방금 생성된 레이어로 변경됩니다. 레이어를 사용할 때, 활성화된 레이어에 있는 객체만 선택할 수 있습니다. 이 방법은 게임을 만들 때 정리된 상태를 유지할 수 있는 좋은 방법이며, 원하지 않는 객체를 실수로 이동하지 않게 됩니다. 현재 작업 중인 레이어를 항상 기억하세요. 또한 다른 레이어 위에 놓인 레이어는 해당 레이어 위에 렌더링됩니다. 이렇게 하면 배경이 게임 영역을 덮는 일을 피할 수 있습니다.

이제 버튼을 생성하는 것은 매우 간단합니다. UI의 하단 오른쪽에 있는 특수 객체 버튼(비커 아이콘)을 탭하세요. 그러면 객체의 종류를 생성하는 메뉴가 나타납니다. 우리는 빈 객체를 원합니다. 탭하면 프로젝트 중앙에 작고 비어있는 사각형이 생성됩니다. 하지만 우리는 이것이 전체 화면을 차지하길 원합니다. 사각형 내부를 탭하여 선택하세요.