Skip to content
Snippets Groups Projects
Commit 4b38ff17 authored by dyddnrdl3@naver.com's avatar dyddnrdl3@naver.com
Browse files

add kor version

parent d1d753a5
No related branches found
No related tags found
No related merge requests found
...@@ -13,7 +13,7 @@ However, if you want to make game in modile environment not using mobile web bro ...@@ -13,7 +13,7 @@ However, if you want to make game in modile environment not using mobile web bro
# Why Phaser? # Why Phaser?
You many wonder why i talk about **Phaser** instead of **Unity** or other game engines. Here are some reasons why people use Phaser.<br> You many wonder why i talk about **Phaser** instead of **Unity** or other game engines. Here are some reasons why people use Phaser.<br>
* Using Phaser, you can make single game working on both Desktop and Mobile easily<br/> * Using Phaser, you can make single game working on both Desktop and Mobile easily<br/>
* This is Open Source Framework so you can use it freely and contribute to **[Phaser GitHub](https://github.com/photonstorm/phaser)** to improve it * This is Open Source Framework so you can use it freely and contribute to [**Phaser GitHub**](https://github.com/photonstorm/phaser) to improve it
* Unless you use third party app or other frameworks, only you need to run Phaser game is web browser like chrome or safariw * Unless you use third party app or other frameworks, only you need to run Phaser game is web browser like chrome or safariw
# How to prepare for using Phaser? # How to prepare for using Phaser?
## Before prepare for phaser ## Before prepare for phaser
...@@ -47,7 +47,7 @@ Below is basic structure using HTML, script and CDN. If you want to know each st ...@@ -47,7 +47,7 @@ Below is basic structure using HTML, script and CDN. If you want to know each st
physics: { physics: {
default: 'arcade', // choose physics engine among arcade, matter and impact default: 'arcade', // choose physics engine among arcade, matter and impact
arcade: { arcade: {
gravity: { y: 100 } // physics engine gravity: { y: 100 } // physics engine configuration
} }
}, },
scene: { scene: {
......
# What is Phaser?
Phaser는 HTML을 기반으로한 데스크탑과 모바일용 게임 프레임워크입니다.
Phaser는 JavaScript 혹은 TypeScript 기반에서 사용될 수 있습니다.
Phaser는 canvas와 WebGL을 통해 렌더링을 진행하므로, 데스크탑과 모바일 모두에서 사용할 수 있습니다.
하지만, 웹 브라우저를 사용하지 않고 모바일 환경에서 Phaser 게임을 실행시키고 싶으시다면 3rd party app을 찾아봐야 합니다.
<br/><br/>
보다 많고 자세한 내용을 확인하고 싶으시다면 아래 문서를 참조해주세요.
<br/>
<strong>Phaser Website</strong>: https://phaser.io <br/>
<strong>Phaser API docs</strong>: https://photonstorm.github.io/phaser3-docs/index.html <br/>
<strong>Phaser Examples</strong>: https://phaser.io/examples <br/>
<br/>
# Why Phaser?
아마, 왜 **Unity****Unreal**이 아닌 Phaser를 사용하는지 의문이 있으실 겁니다. 여러 가지 이유가 있지만, 다음 이유가 대표적인 예시입니다.<br/>
* Phaser를 활용하여 데스크탑과 모바일 모두에서 돌아가는 게임을 만들 수 있습니다. (모바일용과 데스크탑용 두 개를 분리할 필요가 없습니다)<br/>
* 오픈소스 프레임워크이므로 자유롭게 사용할 수 있으며, [**Phaser GitHub**](https://github.com/photonstorm/phaser)에서 Phaser의 발전에 기여할 수 있습니다.
* 3rd party app이나 다른 프레임워크를 사용하지 않는다면, 크롬이나 사파리 같은 웹 브라우저만으로 Phaser 게임을 실핼할 수 있습니다.
# Phaser를 사용하기 위해 어떤 준비를 해야하나요?
## Phaser를 준비하기 이전에
Phaser의 사용을 준비하기 이전에 보안 문제, CORS 제약 등의 문제 떄문에 로컬 웹서버를 준비하실 필요가 있습니다. 이에 대해서는 원하시는 로컬 웹서버를 준비하시면 됩니다.
## 환경 설정 이후
script에 CDN을 추가하거나 NPM을 통해 설치하실 수 있습니다. 혹은 GitHub이나 Phaser 아카이브에서 직접 다운 받으실 수 있습니다. 아래는 Phaser 아카이브 링크이며, 원하는 버전으로 다운 받으실 수 있습니다. 필요한 파일들을 NPM이나 GitHub 혹은 아카이브를 통해 다운 받으셨다면 이제 Phaser를 사용할 준비가 되셨습니다! (물론, CDN을 활용하실 수도 있습니다.)
<br/><br/>
<strong>Phaser Archive</strong>: https://phaser.io/download/archive <br/>
<br/>
**Using CDN**
<pre><code>&#60;script src="//cdn.jsdelivr.net/npm/phaser@3.51.0/dist/phaser.js"&#62;&#60;/script&#62;
</code></pre><br/>
# Phaser 게임의 기본 구조
아래는 HTML, Script 그리고 CDN을 활용한 기초적인 구조입니다. 만약, 아래 예시에서 사용하는 코드의 의미나 내용이 궁금하시다면, 문서 하단의 추가 주제 내용을 확인해주세요.
<pre><code>
&#60;!DOCTYPE html&#62;
&#60;html&#62;
&#60;head&#62;
&#60;script src="//cdn.jsdelivr.net/npm/phaser@3.51.0/dist/phaser.js"&#62;&#60;/script&#62;
&#60;/head&#62;
&#60;body&#62;
&#60;script&#62;
var config = {
type: Phaser.AUTO,
width: 800, // 캔버스 너비를 지정합니다.
height: 600, // 캔버스 높이를 지정합니다.
physics: {
default: 'arcade', // arcade, matter impact 중에서 어떤 물리 엔진을 사용할지 지정합니다.
arcade: {
gravity: { y: 100 } // 물리 엔진 설정값입니다.
}
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload (){
}
function create (){
}
&#60;/script&#62;
&#60;/body&#62;
&#60;/html&#62;
</code></pre><br/>
# 어떻게 Phaser 게임을 만드나요?
2D 횡스크롤 게임, 퍼즐 게임 등등 다양한 게임들을 만들 수 있습니다. 시작하는 단계로써, 다음 예시들을 참조하면 도움이 될 것입니다. [Phaser website game examples](https://phaser.io/examples/v3/category/games)
<br/><br/>
# Phaser 3에 대한 추가 주제
Phaser 게임 개발에 도움이 될 수 있는 여러 가지 특징, 차이 및 주제에 대해서 얘기하고자 합니다. 아래는 그 내용입니다.
<br/>
[<strong>Phaser Scene cycle</strong>](./lifecycle/README.md)<br/>
[<strong>Phaser Physics: arcade & matter</strong>](./physics/README.md)
\ No newline at end of file
...@@ -21,7 +21,7 @@ Usually, you can load images or other resources at **preload** and create Phaser ...@@ -21,7 +21,7 @@ Usually, you can load images or other resources at **preload** and create Phaser
--- ---
## Why we load resources at **preload** and make objects at **create**? ## Why we load resources at **preload** and make objects at **create**?
You may wonder why i suggest you to load resources at **preload** and create objects at **create**. Well, if you try you may see that some objects not being created well especially image related objects. This is because Phaser is based on JavaScript which makes loading resources asynchronously. Thus, to avoid such problem, i recommend you to load resources at preload and create phaser object at **create** but it is not mandatory nor official. You may wonder why i suggest you to load resources at **preload** and create objects at **create**. Well, if you try you may see that some objects not being created well especially image related objects. This is because Phaser is based on JavaScript which makes loading resources asynchronously. Thus, to avoid such problem, i recommend you to load resources at preload and create phaser object after **preload** but it is not mandatory nor official.
--- ---
## How can i change update rate? ## How can i change update rate?
...@@ -37,4 +37,4 @@ You may want to limi your update rate because of performance issue or other reas ...@@ -37,4 +37,4 @@ You may want to limi your update rate because of performance issue or other reas
} }
</code></pre> </code></pre>
Above code would let Phaser run **update** as half of default rate whcih means, if your Phaser game execute **update** 60 times a second, then above code block will make it 30 time a second. Above code would let Phaser run **update** as half of default rate whcih means, if your Phaser game execute **update** 60 times a second, then above code block will make it 30 time a second. But you can't increase it.
\ No newline at end of file \ No newline at end of file
...@@ -20,12 +20,12 @@ Phaser의 Scene은 크게 다음의 세 가지 상태로 이루어져 있습니 ...@@ -20,12 +20,12 @@ Phaser의 Scene은 크게 다음의 세 가지 상태로 이루어져 있습니
보통은 **preload** 에서 이미지 등의 리소스들을 불러와 저장해두며, **create** 에서 스프라이트 오브젝트를 비롯한 각종 게임 오브젝트를 생성합니다. 그리고 **update**에서 게임 로직을 구현하여, 게임이 로직에 맞게 돌아가도록 합니다(이벤트 리스너 등을 이용할 경우 **update**에서 작성하면 안 됩니다!). 하지만 **update** 는 주기적으로 실행되며, 이는 FPS와도 연관이 있음을 알고게셔야 합니다. 보통은 **preload** 에서 이미지 등의 리소스들을 불러와 저장해두며, **create** 에서 스프라이트 오브젝트를 비롯한 각종 게임 오브젝트를 생성합니다. 그리고 **update**에서 게임 로직을 구현하여, 게임이 로직에 맞게 돌아가도록 합니다(이벤트 리스너 등을 이용할 경우 **update**에서 작성하면 안 됩니다!). 하지만 **update** 는 주기적으로 실행되며, 이는 FPS와도 연관이 있음을 알고게셔야 합니다.
--- ---
## Why we load resources at **preload** and make objects at **create**? ## 왜 **preload**에서 리소스를 불러오고 **create**에서 게임 오브젝트를 생성하나요??
You may wonder why i suggest you to load resources at **preload** and create objects at **create**. Well, if you try you may see that some objects not being created well especially image related objects. This is because Phaser is based on JavaScript which makes loading resources asynchronously. Thus, to avoid such problem, i recommend you to load resources at preload and create phaser object at **create** but it is not mandatory nor official. 왜 제가 위에서 **preload**에서 리소스를 불러오고 **create**에서 게임 오브젝트를 생성하는지 궁금하실 수도 있습니다. 만약 Preload에서 특히 이미지와 관련된 게임 오브젝트인 Sprite나 다른 오브젝트를 생성해보면 문제가 발생하는 것을 보실 수 있을 것입니다. 이는, Phaser가 JavaScript를 기반으로 하고 있는데, 이 떄문에 리소스를 비동기적으로 불러오기 때문입니다. 그렇기에, 이러한 비동기적 실행으로 인한 문제를 방지하고자 **preload** 이후에 게임 오브젝트 생성을 추천드렸습니다 하지만 이는 필수가 아니며, 공식적인 내용은 아닐수 있습니다..
--- ---
## How can i change update rate? ## update의 주기를 바꿀 수는 없나요?
You may want to limi your update rate because of performance issue or other reason. And you can limit them since start by setting **config** for physics or using **physics.world.setFPS()** but it sometimes doesn't work depends on your Phaser version. Then, how should you do to do so? You can limit update rate by skipping some of update execution. Below is example 성능상의 문제나 혹은 다른 이유로 **update**의 실행 주기를 바꾸고 싶으실 수 있습니다. physics의 **config**를 통해서 초당 실행 횟수를 제한하거나 **physics.world.setFPS()** 함수를 이용하여 제한할수도 있지만, Phaser의 버전에 따라서 작동하지 않을 수 있습니다. 그런 경우에는 어떻게 할까요? update 실행을 일부 건너뜀으로써 이를 구현할 수 있습니다. 아래는 예시입니다.
<pre><code> <pre><code>
function update(){ function update(){
this.c += 1; this.c += 1;
...@@ -37,4 +37,4 @@ You may want to limi your update rate because of performance issue or other reas ...@@ -37,4 +37,4 @@ You may want to limi your update rate because of performance issue or other reas
} }
</code></pre> </code></pre>
Above code would let Phaser run **update** as half of default rate whcih means, if your Phaser game execute **update** 60 times a second, then above code block will make it 30 time a second. 위의 코드는 **update**가 기존 실행 횟수의 절반으로 실행 횟수를 줄입니다, 만약 당신이 만든 Phaser 게임에서 **update**를 초당 60회 실행 하였었다면, 위의 코드를 통해 초당 30회로 줄일 수 있습니다. 하지만 이를 증가시킬 수는 없습니다.
\ No newline at end of file \ No newline at end of file
...@@ -3,12 +3,9 @@ ...@@ -3,12 +3,9 @@
In Phaser, there are 3 type of phsic engines which are **arcade**, **matter** and **impact**. Among them, peolpe usually use **arcade** and **matter** (There are not even enough information about **impact** physics in <strong>[Phaser API docs](https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Impact.html)</strong>). Then you will wonder what is the difference between arcade physics and matter physics. In Phaser, there are 3 type of phsic engines which are **arcade**, **matter** and **impact**. Among them, peolpe usually use **arcade** and **matter** (There are not even enough information about **impact** physics in <strong>[Phaser API docs](https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Impact.html)</strong>). Then you will wonder what is the difference between arcade physics and matter physics.
--- ---
## performance: arcade vs matter ## performance comparison: **arcade** vs **matter**
If you searched about it before, then you would see many comments saying that **arcade** physics are more suitable in simple games because of performance issue. And yes, that is sort of true because while **matter** has more functions and complex advanced physics body which requires more memory. So, even if you make same simple game with **matter** physics, it spends more memory than one made widh **arcade** physics. There are some conversations about this and this one might be helpful: https://phaser.discourse.group/t/arcade-vs-matterjs-performance/7218. If you searched about it before, then you would see many comments saying that **arcade** physics are more suitable in simple games because of performance issue. And yes, that is sort of true because while **matter** has more functions and complex advanced physics body which requires more memory. So, even if you make same simple game with **matter** physics, it spends more memory than one made widh **arcade** physics. There are some conversations about this and this one might be helpful: https://phaser.discourse.group/t/arcade-vs-matterjs-performance/7218.
--- ---
## physics: arcade vs matter ## physics world comparison: **arcade** vs **matter**
From above, you may think 'why should we even consider about **matter** while it just wastes more memory thatn **arcade**?'. One of ther answer is that **matter** has more natural physic engine than **arcade** like complex shapes or chain of bodies. So, if you try to make game with high-level physics, you should use **matter** or mix it with **arcade** From above, you may think 'why should we even consider about **matter** while it just wastes more memory thatn **arcade**?'. One of ther answer is that **matter** has more natural physic engine than **arcade** like complex shapes or chain of bodies. So, if you try to make game with high-level physics, you should use **matter** or mix it with **arcade**.
---
## Examples of Phaser physics
# Phaser 3 Physics
## **arcade** vs **matter**
Phaser에는 세 가지의 물리 엔진이 있습니다. **arcade**, **matter** 그리고 **impact**입니다. 이중에서, 주로 **arcade****matter** 가 사용됩니다. (**impact**에 대해서는 공식 문서에도 내용이 많이 없습니다. <strong>[Phaser API docs](https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Impact.html)</strong>). 그렇다면, **arcade****matter**간에 무슨 차이가 있는 것인지 궁금하실 겁니다.
---
## 성능 비교: **arcade** vs **matter**
만약 이에 대해서 찾아보신 적이 있다면 **arcade**가 간단한 게임에 더 적합하다는 내용을 찾아보실 수 있을 것입니다. 물론, 이는 맞는 얘기입니다. **matter**는 보다 복잡하고 세밀한 물리 세계를 구현할 수 있고, 이는 보다 많은 메모리의 사용을 요구합니다. 그렇기에 똑같이 간단한 게임을 만들었더라도 **matter** 물리 엔진은 기본적으로 **arcade** 물리 엔진 보다 많은 메모리의 사용을 요구합니다. 이에 대해서 많은 토론과 내용이 있으며, 이 토론이 도움이 될 수 있습니다: https://phaser.discourse.group/t/arcade-vs-matterjs-performance/7218.
---
## 물리 세계 비교: **arcade** vs **matter**
위의 내용만 본다면 **matter****arcade**보다 많은 메모리를 소비하는데 굳이 쓸 필요가 있을까 하는 의문이 생길 수 있습니다. 그 대답 중 하나는 **matter****arcade** 보다 복잡한 오브젝트 body나 그들의 체인을 통한 연결 등 훨씬 복잡하고 다양한 물리 세계를 구현할 수 있다는 것입니다. 그러므로, 보다 복잡한 물리 세계를 구현하고 싶으시다면 **matter**를 사용하거나 **arcade**와 혼합하여 사용하실 수 있습니다.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment