#初めに
フリック(https://twitter.com/TewiEwi_no96) ですω
モノづくりが好きな人はフォローをよろしくお願いします！
#動機
Elixir/PhoenixでもWebGL出来ないかな～と思い至り環境を整えてみましたω
#結果
https://twitter.com/TewiEwi_no96/status/1370654579063279617
#必要知識
・Phoenixサーバーを構築する知識
↓@piacerexさんの記事がお勧めです。
https://qiita.com/piacerex/items/a7558adc6856e3577dc6
・WebGLをBuild出来る知識
https://docs.unity3d.com/ja/2018.3/Manual/webgl-building.html
#実施環境
・Unity(2019.4.14f1)
・Phoenix v1.5.6
#手順
①新規にUnityのプロジェクトを作成しWebGLでBuild
Unityを立ち上げたら、File->Build Settings...を押してWebGLを選択、Buildを押してください。
余談：今回は適当にボックスを配置して、WASDでカメラを移動させるだけのものをサンプルとして作成しました。
②Buildした結果を格納するフォルダーを作成
新しいフォルダーを押して、フォルダを作成し、フォルダーの作成を押してください。
そうするとBuildされ、index.htmlファイルとBuildフォルダ、TemplateDataフォルダが生成されます。
今回使うのは、BuildフォルダとTemplateDataフォルダの二つですω
余談:今回のフォルダ名はbuildにしました。
③Phoenixサーバーを構築&起動
構築
mix phx.new webgl_sample --no-ecto
…
Fetch and install dependencies? [Yn] Y
…
cd webgl_sample
起動
iex -S mix phx.server
確認
ブラウザで「http://localhost:4000 」にアクセスすると、Phoenixで作られたWebページが見れます。
④UnityでBuildしたファイルをPhoenixサーバーにコピペ
BuildフォルダとTemplateDataフォルダを以下のフォルダにコピペ
webgl_sample/priv/static/js
⑤htmlと紐づけ
app.html.eexに下記のように追記する。
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="shortcut icon" href="<%= Routes.static_path(@conn, "/js/TemplateData/favicon.ico") %>"/>
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/js/TemplateData/style.css") %>"/>
<script src="<%= Routes.static_path(@conn, "/js/TemplateData/UnityProgress.js") %>"></script>
<script src="<%= Routes.static_path(@conn, "/js/Build/UnityLoader.js") %>"></script>
<script>
var unityInstance = UnityLoader.instantiate("unityContainer", "/js/Build/build.json");
</script>
</head>
<body>
...
</body>
</html>
index.html.eexに下記のように記載する。
<div class="webgl-content" style="margin-top: 350px;">
<div id="unityContainer" style="width: 960px; height: 600px"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
<div class="title">WebGL_test</div>
</div>
</div>
#完成
#終わりに
後はUnityのプラグインでjavascriptが動かせるのかやElixirの恩恵をどのように受けるのか試行錯誤できればな～って思う～
見てくれてありがとうごさいましたｂ
FUNBOXで支援してもらえると記事を書く励みになりますω