전체 Phaser 3 게임 개발 가이드: 파트 0(설치 및 가져오기)
무엇에 대한 거지?
Phaser 3는 HTML 또는 브라우저에서 비디오 게임을 개발하기 위한 간단하고 완전하며 효율적인 Javascript 라이브러리입니다. Phaser 3는 개발 중 단순성과 가벼운 환경(CPU 및 처리 능력을 많이 차지하는 Unity 또는 Unreal과 달리) 때문에 초보자에게 좋습니다. 가이드의 이 부분에서는 다음 작업을 완료합니다.
그런 다음 우리가 만들고 있는 프로젝트의 세부 사항과 Phaser에서 첫 번째 "Hello World"를 실행하는 방법에 대해 자세히 설명하는 곳으로 넘어갈 것입니다(저를 믿으세요. 소리보다 훨씬 더 흥미진진합니다).
필요한 유일한 요구 사항은 다음과 같습니다.
모든 작업이 완료되었으면 시작하겠습니다!
설치
There are many ways for installing Phaser 3 into your machine:
각각에는 이점과 결과가 있지만 다른 섹션이나 기사에 대한 것입니다. 지금은 자신에게 가장 적합한 것을 선택하십시오.
NPM
Phaser 3 is available through the NPM Registry 따라서 프로젝트 폴더로 이동하여 다음을 실행하기만 하면 됩니다.
npm install phaser콘솔에서!
기본적으로 그게 전부입니다! 설치가 완료되면 다른 방법을 건너뛰고 how to import the library.으로 이동할 수 있습니다.
Source Code
This library is Open Source which means it's source code is free to download and edit from a public repository (Github in this case). You can either download the zip/tar.gz file from the Phaser 3 Repository 또는 git을 사용하여 저장소를 프로젝트에 복제할 수 있습니다.
git clone https://github.com/photonstorm/phaser.git또는 Github's CLI 도구가 있는 경우 다음을 실행할 수 있습니다.
gh repo clone photonstorm/phaser그런 다음 나중에 가져올 파일이
phaser.js에 있는 phaser/dist/phaser.js라는 것을 명심하십시오. 이 작업을 완료하면 how to import the Phaser 3 library.으로 바로 이동할 수 있습니다.JS File
The simplest and easiest way you can install Phaser, it's to just download the js file from here: phaser.js
그런 다음 프로젝트 폴더에 라이브러리를 포함하기만 하면... 완료!
CDN
For those who don't know, a CDN (Content Delivery Network) is used to import library (an almost infinite amount of libraries) from the internet without needing to install them locally! Lucky for us, Phaser has it's own CDN! Installing it is easy, you just need to go to the index.html file (or your main html file) and included into the browser's
<head> tag as a <scrpt src="$PHASER_LIBRARY_CDN> <html>
<head>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
</head>
<body>
...
</body>
</html>
라이브러리 가져오기
With which ever method you chose! There are two main ways of importing the library:
Require inside javascript file
If you are familiar with commonjs, than you know that when we talk about importing the library, we are actually requiring it's contents into a variable. This variable will have ALL the functionality we need from the library.
If you installed through npm, then you can simply write this into your main javascript file:
const Phaser = require('phaser');
If you installed through github or just downloaded the javascript file, you basically do the same step, but specifying the library's directory:
With Github, it's highly likely that you import the library like this:
const Phaser = require('./phaser/dist/phaser.js');
Or if you downloaded the phaser.js file into a custom directory then you would import the library like this:
const Phaser = require('./path/to/library/phaser');
//REPLACE 'path/to/library/' WITH THE PHASER DIRECTORY
Regarding which step you chose, you would actually need a bundling tool to compile your code (we will get into bundling in another section, so don't worry yet).
Including in HTML file This step was already done in the CDN install 섹션을 참조하십시오. 물론 사용하는 설치 방법에 따라 다르게 수행됩니다.기본적으로
<head>를 사용하여 html 파일의 <script src="src"> 태그 안에 phaser.js 스크립트를 포함합니다. 여기서 "src"는 Phaser 라이브러리입니다.npm을 사용한 경우:
<html>
<head>
<script src="./node_modules/phaser/dist/phaser.js"></script>
</head>
<body>
...
</body>
</html>
Github를 사용한 경우:
<html>
<head>
<script src="./phaser/dist/phaser.js"></script>
</head>
<body>
...
</body>
</html>
phaser.js 파일을 사용자 정의 디렉토리에 저장한 경우:
<html>
<head>
<script src="./path/to/library/phaser.js"></script>
</head>
<body>
...
</body>
</html>
이것으로 모두 끝났습니다.
우리가 배운 것...
이 파트에서는 게임을 만드는 데 필요한 기본 요구 사항, 필요한 라이브러리를 설치하는 방법 및 라이브러리를 프로젝트로 가져오는 방법을 배웠습니다. Part 1에서 프로젝트 내부에 "Hello World"프로그램을 생성하여 작업이 순조롭게 진행되는지 확인합니다.
중요: commonjs(
require("$PHASER_LIBRARY") )를 사용하여 라이브러리를 가져온 경우 Part 0.5으로 이동하여 browserify를 사용한 기본 번들링에 대해 알아보세요.
Reference
이 문제에 관하여(전체 Phaser 3 게임 개발 가이드: 파트 0(설치 및 가져오기)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/the_unfactoring_guru/complete-phaser-3-game-development-guide-part-0-installation-and-importing-4903텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
