昨日は台風で最大警戒していたため作業無し。いよいよあとちょっとでお題発表です！その前にできる最低限の準備をしてしまいましょう。
目次
- 目次
- Unityバージョンの確認
- プロジェクト作成とGitHubやUnity Collaborateへパブリッシュ
- ビルドテストとデプロイ
- unityroomへアップロード
- 使うであろうアセットをインポートしておく
- -1日目まとめ
- 参考URL
Unityバージョンの確認
unityroomで使えるUnityの最新版は2019.2.xです。バージョンを決めてしまいましょう。
- ビルドの速さ、機能の多さ、パフォーマンスの良さを重視するなら、Unity2019.2の最新版
- Unity公式を信じて安定版を選ぶなら、Unity2018.4の最新版
- 短期間だしリスクを減らしたいなら、今お使いのやつ。ただしUnity2019.3以降は除く
今回、自分は複雑なことはやらないので不具合は出なかろうということで最新の2019.2.9でいってみます。
本来は一番安定しているはずの2018.4.9ですが、不具合があるというのをTLで見たことがあります。自分が使っている範囲では問題は起きてないのですがちょっと不安です。安定を求める場合は、今お使いのバージョンを使う方が無難かも知れません。
バージョンを決めたら、必要に応じて本体とWebGLのパッケージをインストールします。
プロジェクト作成とGitHubやUnity Collaborateへパブリッシュ
お題が発表される前なのでタイトルは決まっていませんが、自分の場合は1週間ゲームジャムの時期でプロジェクトを作成してしまいます。今回は2019年の10月開催なので、u1wgj-1910のような名前でプロジェクトを作成しています。
プロジェクトを作成したら、すかさずGitHubやUnity Collaborateなどでバージョン管理を開始するのがオススメです。一人で開発する場合はコンフリクトのリスクもないので、作業を進めたらすぐにコミットとプッシュをしておけばいざという時になんとかなります。
ビルドテストとデプロイ
WebGLビルドはいろいろ起きるので、一度ビルドしておくのがよいです。
プラットフォームをWebGLに切り替え
プラットフォームはあとで切り替えると時間がかかるので、最初にWebGLに切り替えてしまいましょう。
Player Settings
WebGLに切り替えたら、Player Settingsで以下のようなものを設定しておきます。
- Company Name
- ResolutionのDefault Canvas WidthとHeight
- 解像度がすでに決まっていたら解像度もこの時点で設定します。まだ決めてない場合は、unityroomのデフォルト値である
960x540にしておくと楽です
- 解像度がすでに決まっていたら解像度もこの時点で設定します。まだ決めてない場合は、unityroomのデフォルト値である
- Unityのバージョンが古い場合、Memory Sizeの設定が必要かも知れません。
256MBにしておくとunityroomのデフォルトのサイズになるので楽です
あとは適宜、必要そうな項目があれば。
仮プログラム
何も表示しないと動いているか分からないので、Time.timeを表示する以下のようなスクリプトを作って、Main Cameraにアタッチします。
- HierarchyウィンドウからMain Cameraを選択します
- InspectorウィンドウからAdd Componentをクリックして、New Scriptをクリックして、
DrawTimeという名前でスクリプトを作成します - スクリプトを以下のものに差し替えます
using UnityEngine; public class DrawTime : MonoBehaviour { private void OnGUI() { GUI.Label(new Rect(20, 20, 100, 40), Time.time.ToString()); } }
- 上書き保存してUnityに戻ります
以上で実行すると、起動してからの経過秒数が表示されます。
以上できたら、WebGLでビルドしてエラーが出ないことを確認します。エラーが出たら、ニムさんの以下のブログなどで原因を探してください。
日本語のフォルダー名やファイル名を使っていることが一番可能性が高いです。特に、ユーザー名が日本語というのは致命的です。新しく半角英数のユーザー名の新しいユーザーを作るとかしか対策がない場合があるので、早めの確認が必要なのです。
注意
ビルドが成功したらDrawText.csスクリプトは不要なので、Main CameraからRemoveして、ファイルを削除してください。
unityroomへアップロード
unityroomへアップロードするには、Twitterアカウントが必要です。詳しいアップロード方法は以下のnaichiさんのブログをご参照ください。
以上で、無事に動作が確認できれば安心です！
これを締め切りギリギリにやろうとすると、思わぬ不具合にぶち当たることが多々あります。まだ本格的に作業を始められないこの時間を使ってやっておくのが吉です。
使うであろうアセットをインポートしておく
TextMeshPro
TextMeshProは使いますよね。ということで、以下をやっておきます。
- WindowメニューからTextMeshPro > Import TMP Essential Resourcesを呼び出して、Importをクリックします
WebGLはフォントを組み込まないと日本語が表示されません！@thorikawaさんの以下のブログを参考に、とりあえず汎用的に利用できそうな日本語フォントを作成しておくとよいです。
フリーフォント探しはcolissさんのこちらがオススメ。
ネットランキング
ネットランキングは組み込んでおいた方がいいです。naichiさんの以下のブログの通りに進めれば、20分もあれば組み込めるはず。
画像付きツイート
やまださんがimgurという画像共有サービスを利用した画像付きツイートのライブラリを公開してくださっています。
ユウさんが手順を丁寧に書かれておりますので、こちらをご参考に。
-1日目まとめ
ここまでの作業は、どのような企画であっても共通の手順なので事前に行っておくと吉です。
- Unityのバージョンの決定とインストール
- プロジェクトの作成とGitHubやUnity Collaborateへのパブリッシュ
- プラットフォームをWebGLに切り替え
- Player Settingsを設定
- WebGLビルド
- unityroomへアップロード
- よく利用するアセットやサービスのインポートと動作確認
あとは必要に応じて、シーンの切り替えやら、音声の再生やら、よく使うアセットなどをインポートしておくとよいでしょう。
さて、あと少しでお題発表です。参加される皆様、頑張りましょう！！
参考URL
- フリーゲーム投稿サイト unityroom
- UnityのWebGLビルド時に起こるエラーと解決法 – ニムサイト
- 【unity】unityroomに投稿する方法 - naichi's lab
- UnityのText Mesh Proアセットで日本語を使うときの手順 - Qiita
- 2019年用、日本語のフリーフォント377種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス
- 【Unity、WebGL】なるべく簡単にオンラインランキング機能をつけるサンプル - naichi's lab
- GitHub - ttyyamada/TweetWithScreenShotInWebGL: WebGLでサムネイル付き画像ツイートをするサンプルです
- 【Unity1Week】 WebGLで画像つきツイートをしたい！ - 初心者がUnityでなんかしちゃうぞBlog
