React Native로 플랫폼 게임 만들기

이 시리즈에서는 React Native와 React Native Game Engine을 사용하여 고전적인 Donkey Kong 아케이드 게임의 리메이크를 개발할 것입니다. 이 게임은 모바일 전용 게임이므로 원래의 컨트롤을 크게 단순화 할 것입니다. 게임은 한 손가락으로 만 플레이 할 수 있어야합니다.

다음은 Google에서 달성하려는 목표를 미리 보여줍니다.

원본 게임에 익숙하지 않은 경우, 우리 캐릭터 Mario (처음에는 Jump Man으로 알려짐)가 Princess (원래 Pauline으로 알려짐)를 구출하면서 일련의 경사로를 따라 내려 오는 통을 피하려고합니다. 주요 길항제-콩. YouTube에서 제작중인 앱의 게임 플레이 데모를 확인하세요.

좋은 속도로 계속 진행하기 위해이 튜토리얼은 한 줄씩 설명하지 않습니다. 중요하고 게시 할 가치가있는 몇 가지 주제를 다룰 것입니다. 전체 소스 코드는 React Native Donkey Kong을 참조하세요.

프로젝트 설정

바닐라 React Native 또는 Expo 프로젝트를 초기화 한 후 다음 필수 구성 요소를 설치합니다.

React 네이티브 게임 엔진

이 라이브러리는 게임을 루프에서 실행하고 게임 개체 (플레이어, 발사체, 적, 사다리, 플랫폼 등)를 관리 / 조작하는 데 도움이됩니다. 특히 Component-Entity-Systems 패턴의 느슨한 구현 인 GameEngine 구성 요소를 사용할 것입니다.

JS 문제

이것은 2D 물리 라이브러리이며 일련의 경사로 아래로 발사체를 던지는 시뮬레이션을 도와줍니다 (위의 미리보기 참조). 또한 캐릭터 마리오를 공주쪽으로 경사로로 이동시키는데도 도움이됩니다.

기타 NPM 패키지

Spriters 리소스

Spriters Resource 웹 사이트에서 멋진 예술 작품과 저작물을 찾았습니다. 여기에서 Donkey Kong의 원본 ​​스프라이트 시트를 찾았습니다. 수많은 다른 게임에 대한 자산이 있습니다.

특히 게임 전반에 걸쳐 광범위하게 사용한 뛰어난 동키 콩 스프라이트 시트를 제공하는 Zeon에게 큰 감사를드립니다.

무분별

게임의 스프라이트를 편집, 슬라이스 및 크기 조정하기 위해 Aseprite라는 훌륭한 픽셀 아트 도구를 사용했습니다.

이 자습서에서는 아트 워크를 편집 할 필요가 없습니다. React Native Donkey Kong 저장소의 이미지 스프라이트를 사용하기 만하면됩니다.

게임 주체 시작

게임 개체는 게임 세계의 모든 게임 개체이며 (둘 중 하나라도 표시 될 필요는 없음) 원하는대로 추가하고 제거 할 수 있습니다. 우리 게임에서 이것은 Mario를 포함 할 것입니다; 플랫폼; 배럴; 공주님; Kong; 사다리 등

먼저 플랫폼 엔티티의 구성 요소를 코딩 해 보겠습니다. 다음 파일 platform.js 를 만듭니다.

mario.js (플레이어가 제어하는 ​​캐릭터)를 따라 가겠습니다.

constants.js 파일을 참조한 것을 눈치 채 셨을 것입니다. 여기에는 물리 엔진이 충돌해야하는 게임 개체를 결정하는 데 사용하는 충돌 범주 맵이 포함되어 있습니다.

첫 번째 (유일한) 수준을 만들고 entities.js 라는 파일을 만듭니다.

다음으로 App.js 파일을 업데이트하겠습니다.

아이를 GameEngine 구성 요소에 전달할 수 있으며 엔티티 이후에 렌더링됩니다.

게임 실행

이제 react-native run-ios 앱을 실행할 수 있으며 7 가지 플랫폼과 Mario가 GameEngine 구성 요소에 의해 렌더링되는 것을 볼 수있을 것입니다.

우리가하는 모든 일이 Android에서도 작동한다는 점에 유의해야합니다. 간결성을 위해 iOS를 고수하고 있습니다.

출시 예정

다음 게시물에서는 간단한 동작으로 시스템을 연결하고 캐릭터를 움직일 것입니다.

계속 지켜봐 주시기 위해 팔로우 (bberak)하세요.

링크 및 리소스