Pong 게임 만드는 방법 - hyperPong

참고: 이 튜토리얼의 완성된 프로젝트 파일은 이 문서의 끝에서 확인할 수 있습니다.

소개

이번 튜토리얼에서는 처음부터 Pong과 유사한 게임을 만들어보겠습니다. 이번 튜토리얼에서는 hyperPad의 더 고급 기능과 동작을 다룰 예정이므로, 기본적인 hyperPad 편집기 사용법을 알고 있다고 가정합니다. 게임을 처음부터 만들기 위해 더 익숙해질 필요가 있다고 생각되면, 먼저 전체 가이드 - 플랫폼 게임 만들기 튜토리얼을 확인할 수 있습니다.

Pong은 단 두 개의 패들과 공으로 구성된 간단한 2인용 게임으로, 간단한 디지털 탁구 버전으로 생각할 수 있습니다. 각 플레이어는 테이블의 양쪽에 있는 패들을 제어하며, 패들은 앞으로와 뒤로만 움직일 수 있고, 공을 상대방 플레이어 쪽으로 치게 됩니다. 플레이어가 공을 놓치면 다른 플레이어가 점수를 얻습니다. 먼저 11점에 도달한 플레이어가 승리합니다!

우리의 Pong 게임은 1인 모드(플레이어 대 AI), 2인 모드(플레이어 대 플레이어), 또는 0인 "관람" 모드(AI 대 AI)에서 플레이할 수 있는 옵션을 포함할 것입니다.

1부: 프로젝트 설정 및 메인 메뉴

새 프로젝트를 생성하여 시작해 보겠습니다.

hyperPad의 프로젝트 메뉴를 열고 새 프로젝트를 탭합니다. 프로젝트에 이름을 지정하고 다음을 탭합니다. 방향은 기본값으로 두며 가로 모드로 설정합니다. 이번 튜토리얼에서는 장치 지원이 iPad 4:3으로 설정됩니다. 다음 화면에서는 "조감도"를 선택하고 나머지는 기본값으로 두십시오.

새 프로젝트가 준비되면 게임 자체에 바로 들어가기 전에 메인 메뉴를 설정하는 것을 빠르게 시작해 보겠습니다. 먼저 장면의 이름을 "메인 메뉴"로 변경합시다.

프로젝트/장면 메뉴 버튼을 탭하고 "장면 1" 옆의 기어 버튼을 탭합니다.

설정 옵션을 탭하고 장면의 이름을 "메인 메뉴"로 변경합니다. 저장을 탭하여 설정 창을 저장하고 닫습니다.

다음으로, 초기 복고풍 게임인 아케이드 Pong에 전통을 지키기 위해 배경 색상을 검정으로 설정할 수 있습니다.

장면 설정 버튼을 탭하고 배경을 선택합니다. "색상 변경" 버튼을 탭하고 색상을 검정(#000000FF)으로 설정합니다.

이제 메인 메뉴에 제목 레이블을 추가해 보겠습니다. 특별 객체 버튼을 탭하고 레이블을 선택합니다.

텍스트 필드에 게임 이름을 입력하고(이번 튜토리얼에서는 "hyperPong"이 입력되었습니다), 글꼴 크기를 크지만 너무 크지 않은 값으로 설정합니다. "hyperPong" 제목에는 72포인트가 좋은 크기입니다. 색상을 흰색(#FFFFFFFF)으로 변경하고 메뉴 상단 중앙에 배치합니다.

이제 버튼으로 모든 모드의 플레이를 채울 수 있는 메인 메뉴 씬이 완성되었습니다. 메뉴는 현재 상태로 두고, 플레이 가능한 게임을 만든 후에 완성합니다.

2부: 게임 씬 및 패들 설정

프로젝트 메뉴 버튼을 탭하고 "장면 추가"를 선택합니다. "게임"이라고 명명하고 "생성"을 탭합니다. 이제 게임 씬에서 빈 캔버스가 보여야 합니다. 메인 메뉴 씬에서 했던 것처럼 다시 한번 장면 설정 버튼을 탭하고 배경을 검정(#000000FF)으로 변경합니다.

플레이어 패들 생성 작업을 해 보겠습니다. 특별 객체 버튼으로 이동하여 "빈 객체"를 선택합니다. 색상을 흰색(#FFFFFFFF)으로 변경하고 불투명도 슬라이더를 최대값으로 설정합니다.

객체의 이름을 "Player-1"으로 변경하고 물리학 모드를 물리학으로 설정하고 통과 가능성을 활성화합니다.

통과 가능성을 활성화하는 이유는 공이 패들을 칠 때의 상호작용을 보다 세밀하게 제어할 수 있도록 하기 위함입니다. 공의 속도와 방향을 수동으로 제어할 수 있는 것이 필요합니다.

Player-1 객체 속성에서 변환 탭으로 가고 X 배율을 25%로 설정하고 게임 필드 왼쪽으로 이동합니다.

다음으로 패들이 움직일 수 있도록 일부 제어 장치를 추가하겠습니다. 패들이 선택된 상태에서 물리학 반응 탭으로 돌아가 행동 편집기로 들어갑니다.

상호작용 섹션 아래에 있는 조이스틱 아날로그 행동을 배치합니다(찾을 수 없다면 고급 탭을 탭해야 할 수 있습니다). 이렇게 하면 씬 편집기에 조이스틱이 자동으로 생성됩니다.

하지만 패들이 조이스틱 움직임으로만 움직일 수 있도록 하고 싶지 않습니다. AI도 움직일 수 있도록 하고 싶습니다.

사용자 정의 섹션 아래에 박스 컨테이너를 배치합니다. 패들이 움직일 방향을 저장하기 위해 사용됩니다. 이렇게 하면 조이스틱을 제어하는 사용자나 AI가 하나의 값으로 이동할 수 있습니다. 기본값은 0으로 설정되어야 하며, 이름을 잘 지어 작업이 더 쉬워지도록 하는 것이 좋습니다. "이동 방향"이 적절해 보입니다.

박스 컨테이너를 선택한 상태에서, "입력 필드 변경" 버튼을 누르고 '예'를 탭합니다. 이렇게 하면 박스 컨테이너로 Set Input Field 행동이 생성되어 필요할 때 값을 변경할 수 있게 됩니다. Set Input Field를 조이스틱 아날로그와 연결합니다.

Set Input Field 행동을 선택하고, 조이스틱 아날로그의 출력 값을 새 값 필드에 드래그합니다. "y" 속성을 선택합니다. 이제 이동 방향 박스 컨테이너는 플레이어가 조이스틱을 얼마만큼 위로 또는 아래로 움직이는지를 추적하게 됩니다(y축).

이제 조이스틱이 얼마나 위아래로 움직이는지를 추적하고 있으므로, 플레이어가 조이스틱에서 손을 떼면 0으로 리셋해야 합니다. 그렇지 않으면 패들이 마지막으로 기억한 방향으로 계속 움직일 것입니다.

상호작용 섹션 아래에서, 스톱드 터칭 행동을 추가하고 그것의 속성을 열어보세요. 기본적으로 플레이어가 패들을 터치하지 않을 때 추적하고 있지만, 우리는 조이스틱에서 손을 떼면 추적하고 싶습니다.

객체 속성을 탭하여 변경하고 조이스틱을 선택합니다. 선택하려면 글로벌 UI 레이어를 선택해야 할 수도 있습니다. 선택한 후 확인 버튼을 누릅니다. 행동은 현재 조이스틱이 추적하는 객체로 되어 있어야 합니다.

이전에 만든 Set Input Field를 탭하고 복제합니다. 복제된 Set Input Field를 스톱드 터칭 행동에 연결하고 새 값 속성을 0으로 설정합니다.

이제 우리의 이동 방향 박스 컨테이너 변수는 조이스틱의 위아래 움직임을 추적하고 조이스틱에서 손을 떼면 0으로 리셋됩니다. 이는 패들이 이동하도록 알려주는 훌륭한 방법이므로 계속 진행하여 패들에 움직임을 부여해 봅시다.

사용자 정의 섹션 아래에 타이머 행동을 추가합니다. 속성에서 간격을 0으로 설정하십시오. 이 타이머는 가능한 한 자주 실행되며(프레임당 한 번), 패들의 움직임을 매우 자주 업데이트할 수 있는 기회를 제공합니다.

패들의 속도를 설정하기 전에 이동 방향 박스 컨테이너의 값이 합리적인 범위 내에서 클램프되도록 설정하여 너무 높거나 낮아지지 않도록 합니다. 그렇지 않으면 패들이 어떤 경우에는 너무 빠르게 움직일 수 있습니다.

논리 섹션 아래에 있는 최소 행동과 최대 행동을 배치합니다. 타이머에 최소 행동을 연결하고 최대 행동을 최소와 연결합니다. 다음과 같은 모습이 되어야 합니다:

최소 행동의 속성에서 첫 번째 값을 이동 방향 행동의 출력 값으로 설정하고 두 번째 값을 1로 설정합니다.

최소 행동은 주어진 가장 작은 숫자를 출력합니다. 따라서 Move Direction 값이 1보다 높아지면 1을 출력하고, 그렇지 않으면 이동 방향 값을 그대로 출력합니다.

최대 행동의 속성에서 첫 번째 값을 최소의 출력 값으로 설정하고 두 번째 값을 -1로 설정합니다.

최대 행동은 주어진 가장 큰 숫자를 출력합니다. 따라서 Move Direction 값이 -1보다 낮아지면 -1을 출력하고, 그렇지 않으면 최소의 값을 출력합니다(1 또는 Move Direction 중 더 낮은 값을).

이 모든 것은 결과적으로 최대 값이 -1과 +1 사이에 클램프된 Move Direction 값임을 의미합니다. 이를 통해 패들이 움직일 수 있는 속도를 완벽하게 제어할 수 있습니다!

-1에서 +1까지의 범위는 다루기 쉬우나, 이를 패들 속도로 직접 사용하면 너무 느릴 것입니다.

논리 섹션 아래에 Multiply Values 행동을 배치하고 최대 행동에 연결합니다. 첫 번째 값은 최대 행동의 출력 결과를 설정하고, 두 번째 값은 좋은 "최대 속도" 값으로 설정합니다.

현재 20으로 설정하십시오. 나중에 패들이 느리거나 너무 빨리 움직인다고 생각하면 이 숫자를 더 높거나 낮은 숫자로 설정할 수 있습니다.

Multiply Values 행동은 이제 -20에서 +20까지의 좋은 속도 범위를 제공합니다.

이제 패들의 속도를 설정할 때입니다. 물리학 섹션에서 Set Velocity 행동을 추가하고 Multiply Values 행동에 연결합니다. "x" 필드를 0으로 설정하고 "y" 필드는 Multiply Values 행동의 출력 결과로 설정합니다.

실행해 보세요! 게임을 플레이할 때 패들은 조이스틱이 위아래로 이동하는 대로 움직여야 합니다.

테스트하는 동안 아마 눈치 챘겠지만 아무것도 패들이 화면을 벗어나는 것을 막지 않습니다. 다음 부분에서는 모든 것을 시각적으로 유지하기 위해 경계를 추가할 것입니다.

3부: 게임 경계 설정

계속하기 전에 좋은 게임 디자인을 염두에 두세요. 플레이어 패들은 화면 중앙에 있지 않고, 게임을 구성할수록 가장자리 쪽에 가까워질 것입니다. 이는 UI 요소(예: 조이스틱)와 게임 요소(예: 패들)가 겹치는 문제로 이어질 수 있습니다.

사용자가 조작하는 특정 플레이 가능 영역으로 사용하는 대신에, 패들이 공조정 조이스틱 밑으로 가려지지 않도록 제안된 경계를 안쪽으로 설정해야 합니다. 그렇게 함으로써 플레이어의 손이 플레이 가능 영역 아래쪽 근처에 가려지지 않도록 합니다. 이 거리를 사용할 수 있으며, 게임 요소가 플레이 쪽으로 빠져나가지 않도록 단단히 유지할 수 있습니다.

특별 객체 버튼을 탭하고 새로운 빈 객체를 만듭니다. 새 빈 객체를 탭하여 속성을 엽니다.

물리학 모드를 벽으로 설정하고 통과 가능성을 비활성화합니다. 시각적으로 볼 수 있도록 색상을 설정하고 불투명한 어두운 회색(#1F1F1FFF)이 잘 맞습니다. 마찰은 0%로, 반발은 100%로 설정합니다.

이제 벽의 변환 탭에서 Y 배율을 200%로 설정하고 화면 영역의 위쪽으로 이동시킵니다. 화면 영역을 가득 채우도록 늘리십시오. 정확하게 배치하는 데 도움이 된다면 그리드 스냅 모드를 켤 수도 있습니다.

이제 벽을 복제하고 복제본을 아래쪽으로 이동합니다.

다시 복제하고 X 배율을 200%로 설정합니다. 그런 다음 높이를 늘려서 화면에 맞추고, 화면 왼쪽으로 놓습니다.

다시 가로 벽을 복제하고 오른쪽 화면으로 이동합니다. 이제 완전히 둘러싼 게임 필드를 보유하고 있어야 합니다:

이제 게임을 플레이할 때, 패들이 벽을 통해 움직일 수 있는 것을 바로 알 수 있을 것입니다. 이는 두 가지 이유 때문입니다. 패들을 "통과 가능"으로 설정했고 패들의 속도를 매 프레임 강제로 설정하고 있습니다. 괜찮지만 패들이 벽 안으로 이동하지 않도록 하는 방법을 구현해야 합니다.

그 행동을 구현하기 위해 플레이어의 위치를 벽의 위치와 비교합니다. 그렇다면 플레이어를 다시 플레이 가능 필드로 이동시키십시오.

조금 더 쉽게 구현할 수 있도록, 위쪽 벽을 탭하고 Y 앵커 포인트를 0%로 변경합니다. 이렇게 하면 벽의 위치가 자기 자신 아래쪽으로 고정됩니다. 앵커 필드를 잠금 아이콘을 눌러 잠금을 해제해야 할 수도 있습니다.

마찬가지로 아래 벽의 Y 앵커 포인트를 100%로 변경하여 아래쪽 벽의 위치를 자기 자신 위쪽으로 고정합니다.

이제 경계 검사 동작을 구현할 준비가 되었습니다. 패들을 탭하고 행동 편집기로 이동합니다.

첫째로, 논리 섹션에서 경계 상자를 검색하여 추가합니다. 기본적으로 패들을 사용할 수 있도록 설정해야 합니다. 이 행동은 패들의 아래쪽/왼쪽 좌표 및 크기를 제공합니다.

다음으로, 논리 섹션에서 값 추가를 배치하고 경계 상자 행동에 연결합니다. 값 추가 속성에서 첫 번째 값을 경계 상자 결과 "y"로 설정하고 두 번째 값을 경계 상자 결과 "height"로 설정합니다.

이 결과는 패들 상단의 위치가 될 것입니다. 가독성을 위해 이 행동의 이름을 "값 추가 - 패들 상단"처럼 유용한 이름으로 변경할 수 있습니다.

이제 패들이 위쪽 벽이나 아래쪽 벽으로 밀리는지 확인해 보아야 합니다. 변환 섹션 아래에 있는 Get Position 행동 두 개를 추가하고 두 개의 Add Values 행동에 연결합니다.

첫 번째 Get Position 행동은 바닥 벽을 추적하고 두 번째 Get Position 행동은 상단 벽을 추적하도록 설정합니다. 가독성을 위해 이러한 행동의 이름을 바꿔 주는 것이 좋습니다. 이제 다음과 유사한 형식이 되어야 합니다:

각 Get Position 행동에 대해, 논리 섹션에서 값을 빼기 행동을 추가하고 연결하세요.

아래쪽 벽에 연결된 관계식에서 첫 번째 값을 Get Position Bottom Wall 결과 "position_y"로 설정하고 두 번째 값을 Get Bounding Box "y"로 설정합니다.

다음으로 연결된 다른 Subtract Values 행동의 속성에서 Get Position 상단 벽 결과의 첫 번째 값을 Get Position Top Wall 결과 "position_y"로 설정하고 두 번째 값을 Add Values - Player Top 결과로 설정합니다.

이러한 빼기 작업은 벽에 패들이 있다면, 패들을 "밀어내기" 위해 얼마나 멀리 밀어야 하는지를 알려줍니다. 이제 우리는 해야 할지를 체크해야 합니다.

논리 섹션에서 If 행동을 추가하여 각 분기점에 연결합니다.

다면 아래 벽 분기에 연결된 If 행동에서 첫 번째 값을 연결된 Subtract Values 행동의 결과로 설정하고 조건을 >("보다 큰")로 설정하며 두 번째 값을 0으로 설정합니다.

위쪽 벽 분기에 연결된 If 행동에서 첫 번째 값으로 연결된 Subtract Values 행동의 결과를 설정하고 조건을 <(\