Unity WebGL 과 HTML 페이지에서 Javascript와 코드 공유하기.

프로젝트 구성 

안녕하세요. 유니티의 WebGL은 유니티 클라이언트를 웹 페이지에 올릴 수 있도록 만들어진 플랫폼입니다. 

그렇기에 간혹 유니티와 웹 페이지 간의 코드를 서로 호출해야되는 필요가 있을 수 있는데요. 

예를들면, 유니티 클라리언트에 있는 UI 캔버스에 글을 쓰거나,  혹은 HTML 에 있는 텍스트 박스에 글을 써야할 때 

유니티 WebGL의 기본 키보드 focus 기능을 꺼야될 필요성이 있을 수 있습니다. 

이것을 해결하기 위해서는 자바 스크립트에서는 SendMessage() 함수를...

유니티 C# 코드에서는 Application.ExternalCall() 함수를 잘 활용해야됩니다. 

유니티 코드 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
 
public class HtmlInputManager : MonoBehaviour
{
    void Start()
    {
#if (UNITY_WEBPLAYER || UNITY_WEBGL) && !UNITY_EDITOR
    try {
        Application.ExternalCall("GameControlReady");
    } catch (System.Exception e) {
        Debug.LogError("GameControlReady function not on webpage"+e);
    }
#endif
    }
 
    // This function will be called from the webpage
    public void FocusCanvas(string p_focus)
    {
#if !UNITY_EDITOR && UNITY_WEBGL
    if (p_focus == "0") {
        WebGLInput.captureAllKeyboardInput = false;
    } else {
        WebGLInput.captureAllKeyboardInput = true;
        Debug.Log("capture input all");
    }
#endif
    }
}
 

Javascript 코드 

 <script>
    var unityInstance = UnityLoader.instantiate("unityContainer",  "Build/tag-app.json", { onProgress: UnityProgress });
 
    var gameReady = false;
 
    // Called by Unity in GameControl's start function
    function GameControlReady() {
      gameReady = true;
    }
 
    function FocusCanvas(focus) {
      if (gameReady) {
        unityInstance.SendMessage("HtmlInputManager", "FocusCanvas", focus);
      }
    }
 
    document.addEventListener('click', function (e) {
      if (e.target.id == "#canvas") {
        FocusCanvas("1");
      }
      else {
        FocusCanvas("0");
      }
    });
  </script>

이때 HtmlInputManager는 스크립트 이름은 선택이지만, 스크립트가 적용된 오브젝트의 이름은 동일해야 됩니다. 

그래야만 FocusCanvas() 함수를 호출할 수 있습니다.