React 정보를 Unity로 보내기

이전 글[ Unity build 내용을 web에 띄워보자 ]에서 react-unity-webgl을 이용해서 Unity를 web에 띄우는 것까지 했습니다.

그런데 추가적인 처리 없이 unity가 실행된 페이지 이탈 후 다시 unity 페이지로 넘어가면

위와 같은 에러 메세지가 뜨게 됩니다....

해당 내용은 아마 Unity의 실행이 끝나지 않은 상태에서 페이지로 돌아오면 실행이 꼬여서 발생하는 것 같습니다...(?)

혹시 아니라면 댓글로 알려주시면 정말 감사하겠습니다!!!!

 

일단 그래서 React에서 페이지 이탈 시 Unity에게 페이지 이탈을 알리고 Unity를 종료시키기 위해서 

React 정보를 Unity로 보낼 필요가 있었습니다.

 

본 글은 이 페이지를 참고했습니다.

---

일단 React 정보를 Unity에 보내기 위해서는 jslib 파일이 필요합니다.!!

(jslib 파일은 Unity 내에서 javascript 코드를 사용할 수 있도록 지원하는 파일입니다.)

따라서  구성한 Unity 프로젝트의 Assets 폴더에 Plugins/WebGL 의 폴더를 생성하고  해당 폴더내에 

jslib 파일을 생성합니다 

 

파일 생성 방법은 메모장을 이용하여 파일을 만든 후 확장자만 jslib으로 변경하면 됩니다. 

 

파일을 생성 했다면 아래의 코드를 넣어줍니다.

mergeInto(LibraryManager.library, {
  GoToUnity: function () {
  try {
        window.dispatchReactUnityEvent("GoToUnity");
  } catch (e) {
    console.warn("Failed to dispatch event");
  }
  },
});

 

위 코드의 GoToUnity가 Unity에서 불려질 함수 이름입니다.

 

그 후 Unity에 Trigger라는 empty object를 생성합니다. (이름은 원하는걸 하셔도 됩니다)

 

이제 Trigger Object에 넣어줄 cs 파일도 만들어 보겠습니다.

코드는 아래와 같습니다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System.Runtime.InteropServices;
using UnityEngine.UI;
using TMPro;

public class Trigger : MonoBehaviour
{
    [DllImport("__Internal")]
    private static extern void GoToUnity();

    public TextMeshProUGUI token;

    void Start()
    {
#if UNITY_WEBGL == true && UNITY_EDITOR == false
        GoToUnity();
#endif
    }

    public void RecieveUnity(string coin)
    {
        token.text = coin;
    }
}

 

 

DllImport를 사용해서 외부의 함수를 호출하는데 이때 jslib파일에서 생성한 GoToUnity 함수를 불러왔습니다.

 

그 후 token이 잘 들어왔나 확인하기 위한 TextMeshPro를 설정하고 

 

시작 시 GoToUnity(); 함수를 가져왔습니다. 

 

이제 이 cs파일을 Trigger Object에 넣어준 후 WebGL로 Build해주면 Unity에서 해야할 것은 끝났습니다!!

---

이제 React 코드를 보겠습니다. 

일단 전체 코드는 아래와 같습니다.

import React, { useEffect, useCallback } from "react";
import { Unity, useUnityContext } from "react-unity-webgl";

function Uni() {
    const { unityProvider, sendMessage, addEventListener, removeEventListener } = useUnityContext({
        loaderUrl: "Build/Build.loader.js",
        dataUrl: "Build/Build.data",
        frameworkUrl: "Build/Build.framework.js",
        codeUrl: "Build/Build.wasm",
    });

    const sendToken = useCallback(() => {
        sendMessage('Trigger', 'RecieveUnity', 'nice');
    }, [sendMessage]);

    useEffect(() => {
        if (unityProvider) {
            addEventListener('GoToUnity', sendToken);
            return () => {
                removeEventListener('GoToUnity', sendToken);
            };
        }
    }, [unityProvider, sendToken, addEventListener, removeEventListener]);

    return (
        <div>
            <Unity unityProvider={unityProvider} style={{ width: '100%', height: '100vh', justifySelf: 'center', alignSelf: 'center' }} />
        </div>
    );
}

export default Uni;

 

먼저 sendMessage 부분을 보겠습니다.

sendMessage('Trigger', 'RecieveUnity', 'nice');

• Trigger는 Unity에서 생성한 Object이름을 넣어주는 곳입니다. 
• RecieveUnity는 호출 할 함수 이름입니다
• nice는 호출하는 함수에 제공하는 message입니다.

useEffect에는 unityProvider가 실행되면 EventListener가 GoToUnity 함수의 이벤트가 발생할 때 sndToken함수를 통해 Message를 보내게 됩니다.

 

그럼 최종적으로 

 

위 사진과 같이 nice라는 message가 유니티로 잘 전달 된 것을 볼 수 있습니다!!!

 

다음 글은 React에서 페이지 이탈을 감지하면 유니티가 종료되게 하는 코드로 돌아오겠습니다~~