こんにちは。
今回は、Cloud9環境でRuby on Rails、Herokuを使ってUnityWebGL作品を公開する方法を紹介します。
Cloud9環境でRails、Herokuを使用したUnityWebGL作品の公開方法がググっても見つからない！
↓
試行錯誤してなんとかできた！
↓
ネットに公開して、これから同じことをする人の助けになればいいな！
こんな考えから方法を紹介するに至りました。
Cloud9・Rails・Heroku・UnityWebGLとピンポイント気味ですが、
自分の備忘録的な感じにもなるかなと考えています。
対象者
Cloud9環境でRuby on Rails、Herokuを使用してUnityWebGL作品を公開したい人
手順
まず最初に、[Railsチュートリアル3章・3-1]
(https://railstutorial.jp/chapters/static_pages?version=5.0#sec-sample_app_setup)を参考に
新しいRailsプロジェクトを作ります。
僕の環境だと、新しいプロジェクトを作成するときに
bundle install
の前に
bundle update
を実行しないとダメでした。
リスト3.3、3.4は行わなくて良いです。
リスト3.5は
root ‘static_pages#index’
とします。
次に[Railsチュートリアル3章・3-2-1]
(https://railstutorial.jp/chapters/static_pages?version=5.0#sec-generated_static_pages)を参考に静的ページを作ります。
リスト3.6は
rails generate controller StaticPages index
として実行します。
ここで、app/views/static_pages/index.html.erbが作られていることを確認します。
次にUnityに移ります。
UnityのメニューからFile→BuildSettingsを選びます。
- ビルドしたいSceneをドラッグ
- PlatformでWebGLを選択してSwitch Platformを押す
- Development Buildのチェックを外す
これらを行ったら、Buildを押してビルドします。
ビルドには数分かかります。
ビルドが終わると、2つのフォルダと1つのファイルが作成されます。
※追記
Unity5.6では、作成されるファイルが5.5以前と違っています。
そのため、手順が若干違ってきます。注意してください！
Unity5.6の場合
index.htmlを適当なブラウザで開き、ページのソースを表示します。
（Chromeだと右クリック→ページのソースを表示）
そしてRailsに戻り、
HTMLの中身を全てindex.html.erbにコピーします。
Buildフォルダをapp/assets/javascriptsの中に置きます。
TemplateDataフォルダをapp/assets/imagesの中に置きます。
次にindex.html.erbを編集します。
TemplateData/***
Build/***
となっている全てのパスの先頭に
../assets/
を追加します。
また、Buildフォルダの中にある
◯◯.jsonも修正します。
◯◯.data.***
◯◯.asm.***
となっている全てのファイル名の先頭に
../Build/
を追加します。
最後に、config/production.rbにある
config.assets.compile = falseを
config.assets.compile = trueに変更します。
ここまでできたら、cloud9上でサーバ起動を行い
UnityWebGLが表示できているかどうかを確認します。
表示できていたらgit、Herokuにpushします。
これでHeroku上でUnityWebGLが起動できていると思います。
Unity5.5以前の場合
index.htmlを適当なブラウザで開き、ページのソースを表示します。
（Chromeだと右クリック→ページのソースを表示）
そしてRailsに戻り、
HTMLの中身を全てindex.html.erbにコピーします。
Releaseフォルダをapp/assets/javascriptsの中に置きます。
TemplateDataフォルダをapp/assets/imagesの中に置きます。
次にindex.html.erbを編集します。
TemplateData/***
Release/***
となっている全てのパスの先頭に
../assets/
を追加します。
僕の場合、こんな感じです。
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | test</title>
<link rel="stylesheet" href="../assets/TemplateData/style.css">
<link rel="shortcut icon" href="../assets/TemplateData/favicon.ico" />
<script src="../assets/TemplateData/UnityProgress.js"></script>
</head>
<body class="template">
<div class="template-wrap clear">
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="600px" width="960px"></canvas>
<br>
<div class="logo"></div>
<div class="fullscreen"><img src="../assets/TemplateData/fullscreen.png" width="38" height="38" alt="Fullscreen" title="Fullscreen" onclick="SetFullscreen(1);" /></div>
<div class="title">test</div>
</div>
<script type='text/javascript'>
var Module = {
TOTAL_MEMORY: 268435456,
errorhandler: null, // arguments: err, url, line. This function must return 'true' if the error is handled, otherwise 'false'
compatibilitycheck: null,
backgroundColor: "#222C36",
splashStyle: "Light",
dataUrl: "../assets/Release/unityruby.data",
codeUrl: "../assets/Release/unityruby.js",
asmUrl: "../assets/Release/unityruby.asm.js",
memUrl: "../assets/Release/unityruby.mem",
};
</script>
<script src="../assets/Release/UnityLoader.js"></script>
</body>
</html>
最後に、config/production.rbにある
config.assets.compile = falseを
config.assets.compile = trueに変更します。
ここまでできたら、cloud9上でサーバ起動を行い
UnityWebGLが表示できているかどうかを確認します。
表示できていたらgit、Herokuにpushします。
これでHeroku上でUnityWebGLが起動できていると思います。
Unityデータの更新方法
Unity側で修正を行ったときに、
Rails側でUnityデータの更新を行う方法です。
- UnityでWebGLビルドを行う
- Releaseフォルダをapp/assets/javascriptsの中に置く
- TemplateDataフォルダをapp/assets/imagesの中に置く
以上を行ったあとcloud9上でサーバ起動を行い、
UnityWebGLが表示されていることを確認します。
その後git、HerokuにpushすればUnityデータが更新されます。
おわりに
いかがでしたか？
あなたも手軽にUnityの作品を公開しちゃいましょう！
質問・意見などありましたらお気軽にどうぞ！