2017-08-14

【Unity 2017】WebページからWebGLに書き出したUnityの関数を実行する

　つまづいたので書きます．最初に適当な名前でプロジェクトを作成します．その後にスクリプトを作成しましょう．

NewBehaviourScript.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class NewBehaviourScript : MonoBehaviour {
 public Text txt;

 // Use this for initialization
 void Start () {
 
 }
 
 // Update is called once per frame
 void Update () {
 
 }

 void MyFunction (string str) {
 txt.text = str;
 }
}

次にHierarchyのCreateボタンを押して，テキストと空のゲームオブジェクトを作成しましょう．テキストはUI>Textから作成できます．からのゲームオブジェクトはCreate Emptyで作成できます．

f:id:Ponkotu:20170814164218p:plain

Textは画面に見える位置に配置しましょう．左の四角が書かれているアイコンをクリックしてください．

f:id:Ponkotu:20170814170540p:plain

Altキーを押しながら真ん中をクリックしてください．画面に文字が現れれば大丈夫です．

f:id:Ponkotu:20170814170639p:plain

f:id:Ponkotu:20170814170853p:plain

分かりやすいようにGameObjectの名前をMyGameObjectにします．

f:id:Ponkotu:20170814164604p:plain

MyGameObjectにNewBehaviourScriptをドラッグ＆ドロップしてアタッチします．そして，NewBehaviourScriptのNone(Text)の右にある〇をクリックして，Textを選択してください．

f:id:Ponkotu:20170814165428p:plain

最終的に，次のような表示になると思います．ここまで出来たらUnity側での作業はWebGL出力をするだけです．

f:id:Ponkotu:20170814174915p:plain

File>Build SettingsからWebGL出力を行います．

f:id:Ponkotu:20170814170009p:plain

f:id:Ponkotu:20170814165906p:plain

出力し終えたら，出力先のindex.htmlをテキストエディタで開いてください．まずUnityの関数を実行するボタンを表示させます．headタグの下に以下のように記述してください．

<head>
<center>
<button>出力テスト</button>
</center>
<meta charset="utf-8">

次にボタンが押されたときにUnityの関数を実行する部分を記述します．

<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/test.json", { onProgress: UnityProgress });
document.querySelector("button").addEventListener("click", function () {
gameInstance.SendMessage("MyGameObject", "MyFunction", "aiueo");
 });
</script>