React × Unityでできること　もっとも使われているゲームエンジンをReactで使うには　

UnityはWebGL対応

青山広大氏：ヤフーの青山です。『React × Unity』ということで発表させてもらえればと思います。

言語としては、ReactだったりTypeScriptだったり、Javaだったり、フロント、バックエンド問わず仕事しています。趣味はショッピングと自作キーボードで、ものづくり全般が好きです。休日とかは猫と一緒にアニメ見たりしてゆっくりとしています。

なんでUnityなのか、というところから説明していけたらと思います。Unityって「ゲーム作れるすごいやつだよね」だと思うんです。対応プラットフォームを見ますと、PCだったり、iOSだったり、Androidだったり、WebGLだったり……ん？　WebGL？

つまり、Webの世界にゲームの表現力をもってこれるんじゃないかな！？　ということで、今回はReact × Unityについて話せたらなと思います。

今日のゴール

今日のゴールは、実際にReactとUnityは連携できるぞというのを実感してもらえたらなと思っています。React × Unityの「×（かける）」の部分、どうやるか一番気になりますよね。僕もここが最初気になりました。ということで、みんな大好きnpmで検索すると、「react-unity-webgl exact match」ということで、まさしくこれですね。

「React Unity WebGL provides an easy solution for embedding Unity WebGL builds in your React application……」、うん、これ使えばできそうだなということで。今回はこのライブラリを使ってやっていこうかなと思います。

連携できるって言っても、何を以って連携できるぞと言えるのかというのがあると思うんですけれども、3点あると思っています。

1点目がReactのコンポーネントとしてUnityのビルド結果を表示できる。Reactの画面にゲームの画面が表示できたら連携できるかなというところです。2点目がReactからUnityのメソッドを呼び出せる。3点目は、逆にUnityからReactのメソッドを呼び出せる。

この3点を満たせれば、連携できると言っていいんじゃないかなと思います。まず上から順に、ReactのコンポーネントとしてUnityのビルド結果を表示できるというのを確認していこうと思います。トゥ！

UnityをWebGLでビルドする

ということで、まずUnityをWebGLでビルドします。Unity側の作業です。UnityのところのビルドセッティングでWebGLを選んであげまして、ビルドボタンを押します。

するとこのようなかたちでビルド結果が出まして、unitywebという拡張子のものであったり、jsonファイルであったり、UnityLoaderというjsファイルが出力されます。Unity側の作業は以上です。あとはこれをReactで取り込んでいこうと思います。ピッ！

Reactでビルド結果を取り込む

これも本当簡単でして、まずReactでcreate-react-appなどをしまして、初期状態のReactの画面を作ります。そこのpublicフォルダに先ほどのビルド結果をそのままボーンともってきちゃってください。以上です。

あとはReact側の作業で、react-unity-webglライブラリを読み込んでもらって。先ほどのビルド結果の2つのjsonファイルとJavaScriptファイルをライブラリに取り込ませてあげます。ライブラリがunityコンポーネントというものを持っているので、そいつをそこに取り込ませてあげます。

今回はわかりやすくするためにReact側ではHeaderコンポーネントを作って、Mix Leapという文字を表示させています。これで完成です。

どうなるか見てみましょう。ポン！ポチッと。ブラウザ上でこのようなかたちでヘッダーの部分に先ほどの文字列と、下のほうにゲーム画面が確認できるかなと思います。これで1点目のReactのコンポーネントとしてUnityのビルド結果は表示できたと言えると思います。

ReactでUnityのメソッドを呼び出す

じゃあ2点目いきます。one by oneでジャンジャンいきますね。ReactからUnityのメソッドを呼び出せることを確認していきます。

まずReact側の作業です。React側でUnityのメソッドを呼ぶボタンなどを作りましょう。MoveRightButton（［右へ］ボタン）。これをonClickするとUnity側のBallオブジェクトのMoveRightメソッドに対して1という数字を渡します。これが右に1移動するみたいなかたちで実装できたらなと思っています。こいつを先ほどのHeaderのUnityコンポーネントの間に入れる感じで作ります。

ではUnity側のほうを見ていきましょう。Unity側は先ほどのBallオブジェクトにひもづくBallControllerなどを作りまして、そこに呼び出したいMoveRightメソッドを作ります。MoveRightメソッドに1が渡ってきたら、ここのX座標に1が入ってきてプラスされる。なので右にX座標分ずれるという動作ができるかなと思います。これで実際にビルドして、結果を見てもらいましょう。

バーン！　ということで。［右へ］を押すと、パーン、パーン、パーンと右へプラス1するのが確認できます。あ、ついでに［左へ］ボタンも作りまして-1を渡しています。すると逆方向にちゃんと動きます。これで2点目、ReactからUnityのメソッドを呼び出せるというのが確認できたのではないかなと思います。

UnityからReactのメソッドを呼び出す

続きまして3点目いきます。逆にUnityからReactのメソッドを呼び出せる。確認していきます。ドーン！

React側の作業としまして、Unity側のChangeYearメソッド、これはイベントハンドラーですね、が呼び出された際に、React側のsetYearというメソッドを呼びます。こちらは先ほど紹介がありましたHooksを使っています。Hooksで2020という値を初期値に持っていて、そいつをHeaderで読み込んで。ここのMix Leapのあとのyearの部分に渡しています。

初期値は2020なので最初は2020と表示されていますが、Unity側でChangeYearメソッドで例えば2021などの数字が渡りますと、ここのsetYearにセットされて、Headerの部分、ここが2021になれば連携できるぞと言えるかなと思います。React側の作業は終わりです。ということで、バーン！

Unity側、この作業だけちょっと面倒くさくて、プラグインを作らなきゃいけないんですけれども。1行目はそういうものだと思ってください。2行目、3行目が大事でして、Unity側のChangeYearメソッドに対してReact側のChangeYearメソッドをひもづけるという、本当シンプルなプラグインを作りました。

あとはこれをUnity側で呼び出します。先ほどのプラグインをDllImportというかたちで取り込みまして、ChangeYearメソッドをここで定義しています。

Unityのゲーム画面に、OnClickUnityButtonがセットされたボタンがあって、押されたとしましょう。そのときに、ChangeYearが2021という数字を渡して実行されます。これだけでUnity側の作業も完了です。

動作見ていきましょう。UnityButton押しますね。ポンッと。今変わったの見えましたかね？　ここのヘッダーの部分です。たぶん見逃した方が多いと思うので、もう1回やります。ボタンを押しますと……2020が2021になりましたね。

ということで、3点目。UnityからReactのメソッドを呼び出せる。これも確認できたかと思います。1、2、3全部確認できたので、ReactとUnityは連携できるという実感を持ってもらえたんじゃないかなと思います。

連携すると、こんなことができる

まあ連携できるとは言っても、これ何に使うんだと。みなさんのやる気を引き出そうかなと思いまして、実際に作ってみました！　上の部分がヘッダーでReactで実装しています。下の部分はUnityのゲーム画面です。再生しますね。

食品ストアを作ってみました。ユニティちゃんというモデルがいるんですけれども、その子がビールの棚に近づくと……このようなかたちでReactのモーダルが動きます。実際に表示を確認できるかなと思います。もうこの時間なので、みなさんビールとか飲みたくなっているんじゃないでしょうか。

ビールだけじゃなくソーダとかでもいいですけども。梅酒ソーダ割りうまいですよねという感じで。ちゃんと連携できるということを確認できるかなと思います。

最後、お酒いっぱい飲んだので、水も飲んどきましょう。カートもちゃんと押すと、プラス2というかたちで入ってますね。というのが確認できたかなと思います。

というわけで、完！という感じで。みなさん家に帰って……あ、みなさんもう家ですね。家でちょっとやってみてください！（笑）。以上です。