본문 바로가기

Graphics/playcanvas

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

https://developer.playcanvas.com/en/user-manual/

playcanvas korean user manual 

제가 Founder인 Dave한테 한국어번역 추가해달라고 메일보냈는데 씹혔습니다.
그래서 제 맘대로 번역해보려 합니다.

제 경험과 생각을 추가해서 PlayCanvas 유저메뉴얼을 작성해보겠습니다.

User Manual

이 메뉴얼은 플레이캔버스플랫폼을 이해하기위한 레퍼런스입니다.

웹과 모바일에 게임을 빌드하는 것과 플레이캔버스 에디터를 이용해 씬(Scenes)을 만드는것 그리고 엔진에 관한 자바스크립트 코딩까지

이 메뉴얼 읽으면 모든 과정을 곧 이해할수 있을것입니다.

Introduction

플레이캔버스란? 플레이캔버스는 웹 컨텐츠를 제작하기 위한 HTML5기반 비주얼 개발 플랫폼입니다.

웹 기반이기때문에 에디터를 위해 프로그램을 설치할 필요도 없고, 어떤 장치에서도 브라우저만 되면  접속할수 있습니다.

제가 느낀 개발자입장에서 비주얼 개발 플랫폼의 장점은 아래와 같습니다.

[일반적으로] 요즘 코드로만 3D 그래픽스로 개발하는 경우는 없습니다. OpenGL 만 가지고 상용 제품을 만들려면 만들수가 있지만, 시간 (즉 비용)이 너무 많이 소요됩니다. 그렇기때문에 디자이너들도 쉽게 할수있는 Unity나 Unreal이 등장했습니다. WebGL 분야에서도 마찬가지로 오직 코드기반의 three.js 대신 누구나 쉽게할수 있는 에디터 기반의 그래픽툴의 등장은 필연적이였습니다.  사실 일반적으로 WebGL로 내보내는것은 Unity나 Unreal 에서 HTML5 output으로 내보내지만, baking 해서 내보내기때문에 동적재질 및 모델 구성에는 어려움이 있습니다. 최근에야 pixel streaming이나 lavina 같은 기술이 있지만 배보다 배꼽이 커지는 상황이기 때문에, 웹 렌더에서 보여줄수있는 최고의 퀄리티와 가볍고 초기로딩이 빠르면서 유저와 웹을통해 상호작용하는 측면에서 플레이캔버스가 정말좋은 도구같습니다.  많은 학생들이 openGL로 그래픽을 공부하곤 하는데 컴퓨터그래픽스 개념잡는 용도로 PlayCanvas Engine을 활용하는것도 많이 도움이 될것 같다는게 제 생각입니다. 또한 Unreal 처럼 엔진이 Github에 오픈소스로 풀려있기때문에 엔진구조를 익힐수 있어서 좋습니다.

[에디터로개발하는경우] 디자이너는 온라인에디터에서 집중하고, 개발자는 개발에디터에 만 집중하면 됩니다. 심지어 동시 접근이 가능해서 빠르게 개발을 할수 있습니다. 온라인에디터는 Unreal과 Unity와 달리 직관적이여서 개발자도 쉽게 익힐수 있습니다.

[엔진으로 작업하는경우] 저는 Angular에 WebGL을 프로젝트를 올리기위해 three.js와 PlayCanvas를 검토했었습니다. 3D작업을 하기위해서는 실제로 모델링하는 디자이너 뿐만 아니라.. 빛이랑 재질.. 많은 부분에 디자이너의 힘이 필요합니다. 만약 디자이너가 에게 모델만 받고 재질작업이랑 조명, 배경을 만약 three.js로 개발자가 직접하게 된다면 의도된 퀄리티도 안나올뿐만 아니라 시간도 오래걸립니다. 하지만 플캔으로 개발하게 되면 디자이너가 (아니면 개발자가 직접) 직접 온라인 에디터로 구현 및 검증을 하고 개발에 들어갈수 있어서 정말 편합니다. 

The PlayCanvas Workflow

플캔으로 3D 웹앱을 만드는건 정말 쉽습니다. 

1. 에셋을 만들거나 업로드합니다.

위에 스크린샷 처럼 모델 에셋을 업로드합니다. 일반적으로 이런 모델들은 3ds max나 maya, blender 등 이런곳에서 만들어집니다. 이런곳에서 만들고 export FBX 나 OBJ 와 같이 일반적이 포맷으로 내보내는데 이런 포맷을 PlayCanvas에 임포트해서 사용할수 있습니다. (JSON 포맷으로 컨버팅됩니다) 플레이 캔버스는 3D 모델과 이미지 그리고 오디오 파일에 대한 다양한 산업 표준 포맷을 지원합니다. 

2. 씬을 구성합니다.

저 가운데 네모난게 Scene인데, Scene은  여러개의 Entity들로 구성됩니다. 

스크린샷 왼쪽을 보면 여러 Entity가 있는데, Entity는 계층구조를 가집니다. 그리고 Entity는 모델이 될수도, 빛이 될수도, 효과가 될수도 있는데 그것은 Entity의 built in 컴포넌트를 이용해서 결정해줍니다. 사실상, Entity는 참조만 하는거고, 컴포넌트는 미리만들어논 설정의 집합이죠.. 그리고 그 설정의 집합에 네이밍을 해준겁니다.  이렇게 Entity와 Component가 합쳐지면 Model Entity, Camera Entity, Light Entity 뭐 이런게 되는겁니다. 그냥 Entity만 만들고 Component를 등록하지 않는 경우도 있습니다. 예를 들어 고양이 모델 엔티티와 고양이그림자 모델 엔티티 두개를 같이 사용할때, 움직일때마다 두 엔티티를 움직이게 하고 싶으면, 그위에 상위 무명 Entity를 만들고 컴포넌트는 추가하지않습니다. 그리고 그 무명 Entity 하위에 고양이와 그림자 엔티티를 등록하게 되면 그

무명 Entity만 컨트롤하면 둘다 움직이게 됩니다.

3. 코드(스크립트)를 작성합니다.

자바스크립트를 이용하는 것은 여러분의 엔티티들에게 특정한 행동을 줄수있습니다.

모델을 움직이게 한다던가, FPS 게임처럼 화면을 마우스에 따라 움직이게 한다던가, 사용자의 마우스클릭에 따라 어떤 반응을 만들던가 하는 것부터 시작해서 게임적 요소를 스크립트로 모두 구현할수 있습니다.

4. 어플리케이션을 배포합니다.

간단한 클릭한번으로 플레이캔버스에서 제공하는 호스팅을 통해 인터넷세상으로 무료로 배포가됩니다.

처음에 Playcanvas 로고가 뜨면서 로딩바가 뜨는데, 플캔 로고를 없애고 커스텀로고 및 로딩바를 구현하려면 월 $50 하는 Organisation Plan 로 할수 있습니다. 아니면 그냥 플캔 엔진을 사용하면 된다! 가격정책 자세히 보려면 (여기) 클릭!

또한, 플캔에서 제공하는 호스팅을 사용하지 않고, 자신만에 서버에 올릴수 있게 HTML5 export 또한 제공합니다. 월 $15 인 Personal Plan을 사용하면 됩니다. 이것도 그냥 플캔 엔진을 사용하면 됩니다

Key Features

Editor

플캔 에디터는 바로바로 씬을 만들고, 게임을 만들고 원하는 어플리케이션을 만들며 결과를 볼수있습니다. 에디터를 통해 에셋을 관리하고 자신의 팀원들과 채팅하며 실시간으로 동시편집을 할수 있습니다.

Asset

플캔은 당신의 어플리케이션에서 필요한 에셋을 생성하고, 관리합니다. 3D Graphics에서는 많은것들이 에셋으로 이루어 집니다. 뭐 예를 들어FBX 도 에셋이고, Material도 에셋입니다. 어떻게 보면 Entity에 built-in component를 적용하고 에셋을 적용한다고 생각하면 쉽게 이해가 될것 같습니다.

Publishing

플캔은 사용자가만든 WebGL 어플리케이션을 즉시 호스팅해줍니다. 사실 배포는 많은 잠제적 문제를 품고있고, 배포를 위해서는 빌드과정과 서버에 배포하는 과정 그리고 호스팅과정이 필요합니다. 하지만 플캔에서는 클릭한번으로 이모든것을 인터넷세상으로 내보냅니다. 자신이 만든 게임을 다른사람들에게 카톡으로 링크만 보냄으로써 보여줄수있다는건 참 매력적인것 같습니다.

Supported Browsers

플캔은 어떤 종속성없이 순수히 브라우저에서 동작합니다. 플캔의 Client-side 코드는 100% 자바스크립트와 HTML5입니다. 

브라우저 버전 윈도우 리눅스 안드로이드 iOS Chrome OS
크롬 9.0+  O O O O O O
파폭 4.0+ O O O O O  
익스플로러 11.0+ O          
엣지 12.0+ O          
사파리 8.0+   O     O  
오페라 12.9+ O O O O    

몇개 빼고 다 호환 됩니다.