[Phaser3.js 배우기] 2. GameObject와 Physics의 개념

[이전 포스팅]

이전 포스팅에서 살짝 언급했지만 GameObject와 Physics의 차이에 대해서 더 자세히 알아보려 한다.

GameObject와 Physics는 가장 중요한 개념 세 개 중의 두 가지이기 때문에 중요하다.

GameObject, Physics 그리고 Event 이렇게 3개를 주물러서

게임을 만드는게 Phaser의 게임제작 방식의 전부. 😁

 

그런데 현재 듣고있던 Phaser 튜토리얼에서

어떤 것은 scene의 add 메소드를 활용하고,

어떤 것은 this.physics.add를 사용하는데,

"물리엔진이 필요한 것은 physics를 사용해야돼요~"라고 어물쩡 말하고 넘어가서

나 혼자 더 공부해본 내용을 정리하려 한다.

 

https://bumang.tistory.com/316

[Phaser3.js 배우기] 1. Phaser3.js의 라이프사이클 파악

 

어차피 Physics나 GameObject나 Phaser 안의 내부 모듈일 뿐일 것이다.

Phaser라는 객체의 내부 구조와 위계만 파악하는게 빠른 학습의 지름길일 터이다..!

 

게임 내에 어떤 요소를 추가하고 싶다면 GameObject 추가 (this.add...)

앞서 말했듯 Phaser는 Scene의 생애주기로 게임이 진행된다.

이렇게 Scene을 만들어놓고 안에 어떤 요소를 추가하고 싶으면 어떻게 하는가?

Scene 클래스 안에 this.add.image, this.add.text... 등으로 선언한다.

 

this.add를 통해 생성할 수 있는 오브젝트 유형과 메서드는 다음과 같다.

add.image	이미지를 생성하고 씬에 추가.
add.text	텍스트를 생성하고 씬에 추가.
add.sprite	스프라이트(애니메이션 포함 가능)를 생성하고 씬에 추가.
add.rectangle	사각형 도형을 생성하고 씬에 추가.
add.circle	원형 도형을 생성하고 씬에 추가.
add.container	여러 게임 오브젝트를 그룹화하여 하나의 컨테이너로 관리.
add.tileSprite	타일 패턴으로 스프라이트를 생성하여 반복 렌더링.
add.bitmapText	비트맵 텍스트를 생성하고 씬에 추가.

 

이렇게 추가되는 요소들은 바로 Phaser.GameObject의 인스턴스이다.

GameObject는 이미지, 텍스트, 스프라이트 이미지 등 여러가지가 될 수 있지만 물리량을 가질 수 없다.

 

Physics의 주요 차이점

물리량이 무엇인가? 이동, 공격, 피격, 중력의 영향 등의 간섭을 받는 것은 

this.add로 생성한 오브젝트 말고 물리 엔진이 필요한 경우, this.physics.add를 사용해야 한다.

 

물리 영향을 받는 도트 스프라이트 추가

const player = this.physics.add.sprite(100, 200, 'player');
player.setVelocity(100, 200); // 속도 설정
player.setBounce(0.8);       // 반발력 설정

- 반환값: Phaser.Physics.Arcade.Sprite.

물리 이미지 추가

const box = this.physics.add.image(300, 400, 'box');
box.setGravityY(300); // 중력 설정

- 반환값: Phaser.Physics.Arcade.Image

 

이렇듯 this.add와 this.physics.add를 혼합하여 사용하는 경우가 많다.

예를 들어, 물리적 특성이 필요 없는 UI 요소(this.add.text)와

물리 기반의 캐릭터(this.physics.add.sprite)를 구분하여 Scene에 추가하는 것이다.

 

 

'this.add...' vs 'this.physics.add' ?

여기서 this는 게임오브젝트나 physics가 추가될 Scene이다.

this.add를 통해서 scene에다가 GameObject를 추가한다는 것은 알겠는데...

Physics모듈은 왜 this.physics.add로 추가해야되는가?

 

왜냐하면 Phaser.Scene에서 GameObject는 Scene 외부의 시스템이지만 

Physics는 Scene에 자동적으로 추가되어있기 때문이다.

Scene 인스턴스는 기본적으로 Physics 인스턴스를 하위에 가지고 있다.

 

this.physics.add의 역할은 현재 씬의 물리 엔진(Physics World)에 요소를 추가하는 것이다.

즉, 게임 오브젝트를 생성하고, 물리 연산(중력, 속도, 충돌 등)이 적용되도록 물리 엔진에 등록하는 과정이다.

 

*Scene 내부 구조

Scene은 게임 오브젝트를 관리하고, 물리 엔진, 카메라, 입력 시스템 등을 통합 관리하는 컨테이너 역할을 한다.

add	GameObject를 생성하고 씬에 추가하는 메소드.
physics	물리 시스템으로, 중력, 충돌, 속도 등을 관리.
input	입력 시스템으로, 키보드, 마우스, 터치 등을 처리.
time	시간 관리 시스템으로, 타이머와 딜레이 이벤트를 처리.
cameras	카메라 시스템으로, 씬의 특정 영역을 확대/축소하거나 이동.

 

 

*Physics의 구조 (Physics의 하위 클래스)

Phaser의 Physics는 여러 물리 엔진을 포함하며, 가장 널리 사용되는 엔진은 Arcade이다.

1. Phaser.Physics: 물리 시스템의 상위 모듈.
2. Phaser.Physics.Arcade: 가장 간단한 물리 엔진으로 빠르고 가벼운 충돌 처리를 제공.
3. Phaser.Physics.Matter: Box2D 기반의 더 정교한 물리 엔진.

Phaser
 └── Physics
      ├── Arcade
      │    ├── Sprite (Physics 기반 Sprite)
      │    ├── Image  (Physics 기반 Image)
      │    └── Group  (Physics 그룹)
      └── Matter
           └── Bodies (Matter.js 기반의 물리 객체)

 

 

왜 Physics는 Scene안에 기본적으로 포함되어있고 GameObject는 분리되어 있는가?

Phaser의 설계 철학: "씬 중심"

 

• 각 Scene은 독립적인 Physics 환경을 가질 수 있다.
• Scene 간 전환 시 물리 엔진도 함께 정리되므로, 자원 누수를 방지할 수 있다.

GameObject는 정적 오브젝트여서 연산에 큰 무리가 없지만,

물리량을 가진 오브젝트를 무한정 추가하면 비싼 연산을 많이 하니까,

Scene이 정리될 때 같이 정리되도록 설계한 것이다.

 

 

결국 GameObject를 Scene에 바로 추가하느냐, Scene의 Physics에 추가하느냐의 차이

this.physics.add는 물리 엔진(Physics.World)에 GameObject를 추가하고,

this.add는 물리 연산 없이 단순히 Scene에 GameObject를 추가하는 차이가 있다.

 

Phaser는 이 두 시스템을 독립적으로 제공하면서도, 필요에 따라 쉽게 통합할 수 있도록 설계되었다.

this.physics.add와 this.add의 구분은 개발자가 게임의 요구 사항에 맞게 유연하게 사용할 수 있도록 한다.