[React + Unity] React TypeScript 환경에서 Unity WebGL Build 구동하기

Unity

사용버전
- 2021.3.3f1
- 2022.1.2f1

1. Unity WebGL Build 설정

---

• compression format을 지정해줄경우 react rendering시에 error를 발생시킨다

• webGL render시에 unity template를 없애고싶다면 해당 설정에서 선택해주면 된다

 

2. Build후 나온 결과물 확인

---

• Build: build 결과물이 담긴 폴더로 loader, framework, data, code file들이 담겨있다
• index.html: build 결과물을 불러오는 코드가 담긴 html 파일
  • 해당 파일을 react project내 public 폴더 안 index.html에 덮어 씌울경우 별다른 설정없이 webGL빌드를 불러와 웹에 띄울 수 있다. 클라이언트 레이아웃 수정이 필요하다면 붙여넣기시 제외해야한다.
• TemplateData: unity webGL을 웹에서 렌더링시 함께 보이는 테두리 템플릿에셋
  • 빌드 세팅에서 템플릿 minimal 선택시 해당 폴더는 생성되지 않는다

 

React

1. React Project 생성

---

CRA를 이용해 typescript react 프로젝트를 생성한다

npx create-react-app project-name --template typescript

 

2. unity webGL 지원 패키지 설치

---

react-unity-webgl

💡 unity 버전별로 설치해야하는 패키지 버전이 상이하니 주의해야한다

 

3. webGL Build 폴더 삽입

---

public 폴더안에 unity build시에 나온 산출물 폴더들을 삽입한다

💡 화면 레이아웃 수정 및 css 작업을 원할 경우 html 파일은 제외하고 삽입한다

 

4. tsx 코드 생성 및 수정

---

4-1. unity 지원 패키지 import

import Unity, { UnityContext } from "react-unity-webgl";

 

4-2. Unity tag에 넘겨줄 unity context 작성

• unity context란?

react-unity-webgl

const unityContext = new UnityContext({
  loaderUrl: "Build/robot.loader.js",
  dataUrl: "Build/robot.data",
  frameworkUrl: "Build/robot.framework.js",
  codeUrl: "Build/robot.wasm",
});

build 폴더의 경로와 하위 파일들의 경로를 넣어준다

 

4-3. Unity Tag를 이용한 코드 작성 및 props 전달

const App = () => {
  return (
    <div>
      <Unity unityContext={unityContext} style={{ width: 500, height: 500 }} />
    </div>
  );
};

export default App;

작성된 unityContext를 props로 넘겨준다

 

예시코드

---

import React from "react";
import logo from "./logo.svg";
import "./App.css";

import Unity, { UnityContext } from "react-unity-webgl";

const unityContext = new UnityContext({
  loaderUrl: "Build/robot.loader.js",
  dataUrl: "Build/robot.data",
  frameworkUrl: "Build/robot.framework.js",
  codeUrl: "Build/robot.wasm",
});
const App = () => {
  return (
    <div style={{
        display: "flex",
        justifyContent: "center",
        alignContent: "center",
      }}>
      <p>loading complete</p>
      <Unity unityContext={unityContext} style={{ width: 500, height: 500 }} />
    </div>
  );
};

export default App;

 

시연화면

---