본문 바로가기

Graphics/playcanvas

[translate] 플레이캔버스 유저 메뉴얼 Common Questions

이 토픽에서는 큰 질문에 대답하는식으로 전체적인 개요를 확인할수 있습니다. 세부적인 내용은 뒤에서 다루지만 링크를 걸어놨습니다.

어떻게 컴포넌트를 추가하나요?

엔티티에 컴포넌트를 추가하려면, 엔티티를 클릭하고 인스펙터(뷰포트 오른쪽 패널)에서 Add Component 를 클릭하면 됩니다.  아니면 계층패널(뷰포트 왼쪽)에서 엔티티 마우스 우클릭하고 Add Component 메뉴를 클릭해도 됩니다.

컴포넌트 종류보러가기

어떻게 스크립트를 추가하나요?

엔티티의 움직임을 컨트롤하기위해서 자바스크립트를 이용할수 있습니다. 엔티티에 스크립트 컴포넌트를 추가하고, 스크립트를 생성하면 됩니다.

스크립트 자세히보기

배경(Background) 색상을 어떻게 바꾸나요?

여러분의 씬에 있는 배경의 생상을 바꾸기위해서는 카메라 엔티티(카메라 컴포넌트를 추가한 엔티티가 맞는데 그냥 ㄷ줄여서 카메라 엔티티라고 쓰겠습니다) Clear Color 라는 속성을 변경하면 됩니다.

카메라 자세히보기

배경에 관해서는 skybox을 한번 보는것도 좋습니다. 

모델의 색상을 어떻게 바꾸나요?

모델이란 일반적인 용어이며 그래픽스에서 추상적으로 의미있는 한 덩어리를 지칭합니다.  모든 3D모델의 표면은 material 을 이용해 렌더링 됩니다. 메터리얼은 색상, 광택, 울퉁불퉁한 정도 같은 속성들을 정의할수 있습니다.

여러분은 새로운 메터리얼을 만들고 모델에 드래그해서 매터리얼을 적용할수있습니다. 물론 인스펙터(오른쪽패널)에서 메터리얼의 세부 속성을 컨트롤 할수있습니다. 

메터리얼 자세히보기

큐브맵은 어떻게 만드나요?

큐브맵은 3차원 배경이고, 이 배경은 텍스쳐 에셋 타입의 특수한 경우입니다.  무슨말이냐면.. 큐브맵은 각 표면을 나타네는 6개의 텍스쳐 에셋으로 구성됩니다. 

큐브맵을 만들기위해서는 에셋패널에서 + Add 버튼을 누르고 New Cubemap을 선택합니다. 그리고 6개의 텍스쳐들은 인스펙터의 큐브맵 프리뷰에 드래그합니다. PBR(Physically Based Rendering)을 사용하기 위해서는 세팅이 완료되면 반드시 Prefilter 버튼을 눌러주세요 (PBR은 여기서 다룸)

큐브맵 자세히보기

프리필터를 하지 않으면, 모델에 특정 메터리얼에 배경의 반사가 이뤄나지않고 검은색이 됨.

엔티티는 어떻게 만드나요? 

뷰포트 왼쪽 계층패널에서 +버튼을 클릭하면 새로운 엔티티를 만들수있습니다. 아니면 Root에 마우스 우클릭으로도 만들수 있습니다.

조명은 어떻게 추가하나요?

엔티티에 Light 컴포넌트를 추가해서 조명을 생성할수 있습니다. 계층패널에서 엔티티 우클릭후 디렉셔널 조명(Directional light), 스팟 조명(Spot light), 포인트 조명(Point light) 을 추가할수도 있습니다.

조명 자세히보기

새로운 쉐이더는 어떻게 만드나요?

WebGL은 기본적으로 OpenGL 기반이여서 쉐이더로 자연스럽게 GLSL (OpenGL shader language)를 사용합니다. 플캔역시 GLSL을 지원합니다. 

새로운 쉐이더는 쉐이더패널에서 만들수 있습니다.  Add Asset -> Shader  커스텀쉐이더를 만들어 재질에 새로운 효과나 애니메이션을 줄수도 있습니다 (예시: custom shader tutorial)

박스나 구 같은것도 만들수있나요?

플캔에는 박스나 구 그리고 캡슐같은 기본적인 도형(Primitive shape)이 있습니다. 자바스크립트의 기본자료형이 있는것처럼 말이죠. 기본도형속성을 가지고 있는 엔티티를 바로 생성할수도 있고, 모델 컴포넌트를 추가하면 원하는 도형을 선택 할수있습니다. (Box, Capsule, Sphere, Cylinder, Cone, Plane, Asset) 만약 FBX같은걸 올리려면 Asset을 선택하면 됩니다.

모델 자세히보기

스카이박스는 어떻게 만드나요?

씬에다가 스카이박스를 추가하려면 먼저 큐브맵 에셋을 만들어야합니다.  6개의 텍스쳐로 규브맵 에셋을 만들었다면, 드래그해서 뷰포트로 가져오면 적용이 됩니다.  또다른 방법은 플캔 에디터 좌측하단에 있는 설정 아이콘(Scene Settings)을 눌러서 스카이박스 부분에 있는 큐브맵을 설정해주면 됩니다. 

에셋은 어떻게 삭제하나요? 

씬에서 마우스로 클릭하고 Delete 키를 누르면 삭제가 됩니다. 다른 방법으로는 계층 패널에서 클릭후 계층 패널 우측상단에 있는 휴지통 아이콘을 클릭하면 됩니다. 또 다른 방법은 Entity를 우클릭한후 컨텍스트 메뉴에서 Delete를 클릭하는것 입니다. 

엔티티 복사는 어떻게 하나요?

엔티티의 복사본을 만들기위해서는 계층패널에서 엔티티를 우클릭후 컨텍스트 메뉴에서 Duplicate를 클릭하면 됩니다. (단축키 Ctrl+D)

또 다른 방법은 뷰포트에서 Ctrl+C 하고 Ctrl+V 하는 방법이 있습니다.

애니메이션은 어떻게 실행하나요?

3D 모델의 애니메이션을 실행하기 위해서는 엔티티를 생성하고 모델컴포넌트와 애니메이션컴포넌트를 추가해야합니다. 모델 컴포넌트는 여러분의 모델을 렌더하는 역할이고, 애니메이션 컴포넌트는 애니메이션을 실행하게 될겁니다.

모델을 렌더링하기 위해 에셋필드에 있는 모델에셋을 컴포넌트의 모델 부분에 드래그하고, 애니메이션을 실행하기위해 에셋필드에 잇는 애니메이션에셋을 컴포넌트의 애니메이션컴포넌트 부분에 드래그하면 됩니다.

사운드는 어떻게 추가하나요?

사운드를 추가하기위해서는 엔티티를 생성하고 그 엔티티에 Sound 컴포넌트를 추가하면 됩니다.  가지고 있는 사운드에셋을 사운드컴포넌트의 Slot 부분에 드래그 하면 됩니다.  그리고 사운드를 듣기위해서는 AudioListener 가 필요합니다. 역시 Enitity에 추가합니다 - 일반적으로 카메라 엔티티에 추가합니다.

여러분의 컴퓨터에 있는 오디오 파일을 에셋패널에 드래그하면 오디오 에셋이 생성됩니다.

오디오 튜토리얼

잘못된 컴포넌트를 추가했는데 컴포넌트를 삭제할수있나요?

컴포넌트를 삭제하기위해서는 뷰포트 우측에 있는 인스펙터에서 그림에 있는 Delete 버튼을 클릭하면 됩니다.

제 3D 모델을 렌더할수 있나요?

 

여러분의 3D 모델을 렌더하기위해서는 역시나 엔티티를 생성하고, 모델 컴포넌트를 등록하고, 에셋패널에 있는 모델을 드래그해서 우측 인스펙터의 모델 컴포넌트에 넣어주면 됩니다. 

단순한 방법으로는 그냥 에셋 패널에 있는 모델을 뷰포트에 드래그하면 됩니다. 그러면 위의 과정이 자동을 실행됩니다.

엔티티를 움직이거나 / 회전 / 크기를 조절할수 있나요?

엔티티를 움직히기위해서, 맨 좌측에 있는 Translate tool (좌측상단 로고 밑에 있음)을 클릭하면 되고, 회전하기위해서는 Rotate Tool 그리고 스케일을 조절하기 위해서는 Scale tool을 클릭하면 됩니다.

키보드 단축키 1 / 2 / 3 번 누르면 각각 이동 / 회전 / 크기 를 조절할수 있습니다.

에셋을 어떻게 업로드하나요?

여러분의 컴퓨터에 있는 에셋을 업로드하기 위해서는 단순히 마우스로 에셋패널에 드래그하면 됩니다. 여러분의 파일은 플캔자체 서버에서 프로세싱을 거친후 에셋패널에 추가됩니다.

이과정에서 JSON 형식으로 변환이됩니다. 

게임을 만들고 싶은데 물리는 어떻게 사용하나요?

엔티티에 물리속성을 추가하기위해서는, 엔티티에 Collision 컴포넌트와 RigidBody 컴포넌트를 등록해줍니다. Collision 컴포넌트는 충돌을 감지하고, RigidBody 컴포넌트는 기울어진 언덕에서 엔티티를 물리엔진에 의해 동작해 아래쪽으로 굴러가게 합니다.

좌측하단에 Scene Settings을 클릭하면 built-in 중력을 설정할수있습니다.

Collision and Triggers 튜토리얼

 

리얼타입 그림자는 어떻게 설정하나요?

실시간 그림자효과를 사용하기위해서는 조명엔티티(Light Component가 등록된 Entity)에서 Shadows를 클릭하고, 모델엔티티(Model Component가 등록된 Entity)에서도 Cast Shadows 속성을 enabled 로 하면 됩니다.

Light 엔티티에서 여러 Shadow type도 설정할수 있습니다.