Parcel을 사용하여 Phaser 3 게임 묶는 방법

Parcel을 사용하여 Phaser 3 게임 묶는 방법

 

설정 시간을 절약할 수 있는 직관적인 레이아웃

Unsplash의 Nate Grant 사진

초보자로서 Phaser 3 기술을 개발하고 싶을 때 적절한 리소스를 찾는 것이 때때로 어려울 수 있습니다. 하지만 항상 꿈꾸던 플랫포머를 만들고 싶어지게 만드는 튜토리얼이 여전히 존재합니다. 많은 경우 이러한 자습서는 몇 년 된 것입니다. 개인적으로 저는 오래되고 유지 관리되지 않은 튜토리얼을 디버깅하는 데 많은 시간을 보냈지만 Phaser로 바로 뛰어들고 싶었습니다.

이 튜토리얼에서는 프로젝트를 몇 초 만에 시작하고 Parcel을 사용하여 모든 것을 깨끗하고 깔끔하게 묶는 현재 Phaser 3 설정을 보여주고 싶습니다. Webpack 구성을 바꾸거나 Parcel을 업데이트하여 원하는 기존 Repo에 이 설정을 적용할 수 있어야 합니다. 우리는 이 글을 쓰는 시점까지 가장 최신 버전인 Parcel 2.4.1을 사용할 것입니다.

우리는 프로젝트에서 두 개의 패키지를 사용할 것입니다. 둘 중 하나를 사용하여 설치할 것입니다. yarn 또는 npm. 어떤 것을 사용해야 할지 잘 모르겠다면 아마도 npm. 나머지 기사에서는 다음을 사용할 것입니다. yarn비록 그것이 너무 중요하지 않아도!

yarn add -D parcel parcel-reporter-static-files-copynpm i --save-dev parcel parcel-reporter-static-files-copy

이 중 하나는 두 종속성을 한 번에 설치합니다. 모든 것이 순조롭게 진행되면 다음 부분으로 넘어가서 다음 예제와 함께 작동하도록 프로젝트를 설정하는 방법을 확인할 수 있습니다.

폴더 구조

내 현재 폴더 구조는 다음과 같습니다. 물론, 당신의 여정이 진행됨에 따라 다르게 보일 수 있고 또 그렇게 보일 수도 있지만, 저에게는 이것이 제가 매번 시작하는 방법입니다.

├── .parcelrc
├── .gitignore
├── package.json
├── src
│   ├── app.js
│   ├── assets
│   │   ├── audio
│   │   ├── fonts
│   │   └── images
│   │       └── example.png
│   ├── configs
│   │   ├── constants.js
│   │   └── phaserConfig.js
│   ├── index.html
│   ├── scenes
│   │   └── StartScene.js
│   └── styles.css
└── yarn.lock

Parcel을 두 곳에서 구성할 것입니다. package.json 파일. 아래에서 내 파일의 전체 버전을 찾을 수 있습니다. 내용을 자신의 package.json에 복사하려면 다음을 실행해야 합니다. npm install 나중에. 그러나 일반적으로 우리는 그렇게 하고 싶지 않습니다.package.json 생성해야 하며 붙여넣지 않아야 합니다.

패키지.json

우리의 start-script에는 다음을 사용하여 개발 환경을 시작하기 위한 호출이 포함되어 있습니다. index.html 소스 폴더 내부. 그만큼 --open 인수는 브라우저가 저절로 열리도록 프롬프트를 표시하므로 즉시 시작할 수 있습니다.

그만큼 build 조금 더 진행됩니다: rm -rf .dist 우리의 dist 폴더는 새 폴더를 만들 때마다 삭제됩니다. 이렇게 하면 이전 버전이 많이 쌓이는 것을 방지하고 최신 빌드만 사용할 수 있습니다. Windows를 사용하는 경우 이 시점에서 문제가 발생할 수 있습니다. 그냥 없애 rm -rf .dist && 갈 준비가 되어 있어야 합니다.

--no-source-maps Parcel에게 빌드하지 말라고 알려줍니다. 소스 맵입니다. 나는 개인적으로 dist 폴더에 추가 파일이 필요하지 않지만, 왜 필요한지 알고 싶다면 이것이 당신을 위한 것입니다.

두 번째로 신경써야 할 부분은 staticFiles 섹션 package.json. 이러한 옵션은 자산을 처리하는 데 필수적이므로 게임에서 사용할 때 올바른 공간에 배치됩니다. 이 예에서는 전체를 복사합니다. assets 소스 디렉토리의 폴더에서 새로 생성된 최상위 레벨로 dist 폴더. 특히 스크립트를 실행하고 내부에서 무슨 일이 일어났는지 조사하면 매우 자명합니다. dist 폴더.

.parcelrc

마지막 단계는 Parcel에 parcel-reporter-static-files-copy 플러그인. 이를 위해 프로젝트 루트에 .parcelrc 파일을 만들고 다음 정보로 채웁니다.

이것을 완전히 이해할 필요는 없지만, 궁금하다면 Parcel 문서의 플러그인 섹션을 확인하십시오.