느린 개발자

Unity WebGL 이란?

Unity 콘텐츠를 HTML5 기술과 WebGL 렌더링 API를 사용하여 웹 브라우저에서 실행하는 기술.

간단하게 Unity 빌드 옵션을 사용하여 javascript 프로그램으로 퍼블리싱 할 수 있다.

 

WebGL에서 실행하려면 모든 코드가 javascript여야 하며, 콘텐츠 대부분이 주요 데스크톱 브라우저의 최신 버전에서 지원됩니다. 각 브라우저에서 제공하는 지원 수준의 차이 가 있고, 현재 모바일 디바이스를 지원하지 않습니다.

 

Unity가 설치되어 있는 가정하에 Nuxt 프레임워크 환경에서 Unity Webgl 콘텐츠를 띄워보는 것을 설명드리겠습니다.

React도 환경이 잘 구축되어 있기 때문에 React에서도 간단하게 보여드리겠습니다.

---

1.  환경구성

이름	버전
Nuxt	2.15.8
Unity	2021.3.16

 

 

2. Unity 프로젝트 실행 및 폴더 구성

 

Unity 폴더 구성

• Plugins: Webgl 폴더를 추가하여 Unity 콘텐츠 내부에서 웹브라우저로 데이터 전송할 jslib 파일을 구성.
• Scenes: Unity 오브젝트의 모음, 스테이지, 장면 등.
• Script: Unity 콘텐츠를 제어할 스크립트 파일.

 

3. Unity 화면 구성 및 배치

 

Hierarchy

 

※ 최신버전이라 버튼이랑 Text가 Legacy라고 나오는데 Unity 쪽은 잘 모르고 테스트용이니 이걸로 생성하겠습니다.

• 버튼을 생성하여 테스트용이니 1이라는 문구로 만들어준다, (아무거나 상관없음)
• Text 선택하여 0으로 입력한다.

 

• Unity Hierarchy에서 마우스 왼쪽클릭하여 Create Empty선택해 GameManager라고 설정한다.

Create Empty

 

• 위에 폴더 구성에서 Script폴더에서  GameManager라는 C# 스크립트를 생성한다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;  //추가

public class GameManager : MonoBehaviour
{

      public Text testText; // Text UI
      public int score = 0; 

      public void CountUp() // 버튼에 연결할 함수
      {
        score +=1;
        testText.text = score.ToString();
      }

      void Start(){}
      
      void Update(){}

}

 

• Hierarchy에 GameManager에 C# 스크립트를 연결한다. (드래그 앤 드롭으로 해도 됩니다.)
• Test Text라는 칸에 Hierarchy - Canvas - Text(Legacy)를 드래그 앤 드롭하여 칸에 넣습니다.

inspector

 

• Hierarchy Canvas - Button으로 가서  Onclick 이벤트를 연결해 줍니다.
• On Click()에서 + 버튼을 클릭하여 생성 후 None(Object)에 드래그 앤 드롭으로 Hierarchy  - GameManager를 연결합니다.

 

※주의) Sciprt 폴더 - GameManager(스크립트)는 Hierarchy - GameManager에 연결하고

Button on Click 이벤트에는 Hierarchy - GameManager를 연결합니다.

 

 

• 실행하여 "1"이라는 버튼을 클릭했을 때 Text가 증가하는지 확인하면 됩니다.

 

 

---

 

여기까지 유니티에서 간단한 숫자 증가를 확인할 수 있는 구성을 끝냈습니다.

다음 포스팅에서 이 콘텐츠를 WebGL로 빌드하여 웹브라우저 화면에 띄우는 부분을 진행해 보도록 하겠습니다.

 

틀린 부분이나 수정되어야 할부분은 댓글로 남겨주세요. 

 

읽어주셔서 감사합니다.