[Unity]ゲームを作ったらunityroomで公開してみよう ～WebGLで手軽にブラウザで～

はい、こんにちは。
@CortanMathです。

今回は、「unityroom」について書きたいと思います。

「unityroom」って何かといいますと、UnityでWebGL向けに書き出したゲームを公開できるサービスになります。

通常、Unityで作成したゲームを公開しようと思ったら、Apple StoreやGoogle Playに申請したり、自分のサイトとかでexeを配布したり、サーバーを契約してWebGL出力のものをアップデートしたり、

などといった手段があります。

しかし、いずれもお金がかかったり、手間がかかったりして大変です。

そこで、便利なのがこの「unityroom」です。

Twitterアカウントさえあれば簡単に登録でき、無料でゲームを公開することができます。

それに加えて、ゲームの評価機能、コメント機能などもあったりして、プレイヤーやほかのクリエイターと交流できる点も魅力的ですね。

Twitterアカウント自体簡単に取得できますから、いまTwitterアカウントを持っていない方でも手軽に始められます。

では、やってみましょう。

簡単に大まかな流れを書いておきます。

とはいっても、登録後は画面の設定項目に従うだけなので、あまり詳しくは書きません。

unityroomを使ってみる

まずは、unityroomに登録します。

こちらがそのサイトです。

https://unityroom.com/

登録ボタンを開くと、こんな感じの画面になると思います。

そうしたらTwitterでログインをクリックします。

アプリ認証しておいてください。

するとプロフィールの設定画面になります。

基本的には、Twitterに登録してあるプロフィールが表示されます。

変更したい部分は、ここで変更しておいてください。

プロフィールの登録が終わったら、早速ゲームを登録していきます。

あらかじめUnityの方から、WebGLで出力しておいてください。

出力方法ではないですけど、出力時の注意点についてはこちらに書きましたので、よければご覧ください。

[Unity]WebGL で出力する際の注意点 ～テキストが表示されない、画面サイズが合わないなど～

ゲームを登録するというボタンをクリックすると、このような画面が開きます。

タイトルや紹介文などを入力してください。

ゲームidというのは、そのゲームのURLに使われます。

設定が終わったら、その都度保存しておきましょう。

ゲームのアイコン画像などを設定します。

あとは左下にある、各設定項目を設定していってください。
画面の通りにやればすぐ終わると思います。

いろいろ設定がありますけど、基本設定と、WebGL設定、WebGLアップロードをやってお けば基本大丈夫です。

一通り終わったら、下の方にある公開設定から、自分の好きなものを選んでください。

多くの人に見てもらいたければ、一般公開にしておきましょう。

以上です。

おそらく簡単にゲームの公開ができたと思います。

自分がゲームをアップロードするだけでなく、他人のゲームをプレイするのも面白いですし、参考にもなると思いますので、積極的に使っていきましょう。

ちなみに僕が最初に作った作品は下の脱出ゲームになります。

https://unityroom.com/games/escape_from_storageroom

ということでこの記事を終わります。

ではさようなら。
またお会いしましょう。

もしよければ、LINEスタンプの方もよろしくお願いします。

https://line.me/S/sticker/7072968

無言で何かを伝えよう とする白男くん - LINE スタンプ | LINE STORE

白男くんが何もしゃべらずに、何か大事なことを伝えようとするスタンプです。

お そらくいつでも使えるLINEスタンプ集

[Unity]WebGLで出力する際の注意点 ～テキストが表示されない、画面サイズが合わないなど～

はい、こんにちは。
@CortanMathです。

この間、UnityでWebGL出力しようと思って、いくつかつまずいた点があったのでここに記録しておきます。

同じ症状で悩んでいる方のお役に立てれば、幸いです。

具体的に困った点は主に2つあります。

まず、「Unity上では動作していたのに、WebGLに持って行った際、日本語のテキストが表示されなかった」ということ。

そして、もう一つは、「WebGLとしてブラウザで動かしたとき、画面サイズの調節がうまくいかなかった」ということ。

画面のUIが崩れたり、あるいは、画面サイズが大きすぎて、スクロールしないと見れない状態に陥ったりしていました。

では、実際にそれぞれの解決策を見ていきましょう。

WebGLで日本語フォントが表示されない

まずは、テキストが表示されないという問題です。

Unityでは、テキストボックスを作成した際、標準で「Arial」というフォントを使用しています。

エディタ上で動かしている分にはこれで問題なく動くのですが、WebGLに書き出すと日本語が表示されなくなってしまいます。

これを防ぐためには、日本語対応のフォントを使うようにしましょう。

調べると無料のフォントもたくさんあります。

僕はこの「源流明朝」という無料のフォントを使用させていただきました。

https://github.com/ButTaiwan/genryu-font

ただ、著作権には気をつけてください。

2次作品に使用した場合、配布物に同梱してはいけないフォントなどもあります。

「配布可能か」、「商用利用はできるのか」、などのライセンスは良く確認しておいてください。

ちなみに先ほど僕が紹介したフォントは、「フォントを使用した制作物を有償・無償を問わず自由 に公開・配布」可能と書いてありました。

フォントが用意できたら、テキストボックスのフォントを変更します。

非常に簡単です。

TextコンポーネントのFontというところに、ダウントードしたttfファイルを設定して やるだけです。

フォントの変更はいつでもできますが、早めに済ませておいた方が良いでしょう。

同じフォントサイズに設定していても、フォントの種類によって微妙に大きさが異なったりします。

場合によっては、フォントを変えたことにより、後から微調整が必要になることもあります。
（実際、僕がそうでした。）

画面サイズがうまく合わない

続きまして、画面サイズの問題です。

最初にも書きましたが、WebGLで出力すると（WebGLに限った話ではないかもしれませんが）画面のUIが崩れたり、あるいは、画面サイズが大き すぎて、スクロールしないと見れないことがあります。

それぞれ解決していきましょう。

まず、uGUIの方です。

Canvasを選択し、「Canvas Scaler」という項目を見てください。

UI Scale Modeを「Scale With Screen Size」というのにしてください。

これにより、UIはスクリーンサイズに合わせてレイアウトを維持してくれます。

そして、その下の部分で、基本となる画面の解像度を設定してきましょう。
僕は、Unityにおける「Srandalone」のサイズにしています。

この部分をしっかり設定しないと、画面全体が表示されず、一部だけ拡大されて表示されるということが起こる可能性があります。

Screen Match Modeは「Expand」にしました。

これで、UIのレイアウトが崩れたり、画面の一部だけが表示される、なんてことは起こらなくなると思います。

そうしたら次に、ブラウザのサイズにゲーム画面サイズを合わせるということをやっていきましょう。

こちらも簡単です。
ある無料アセットを導入し、ビルド時のテンプレートにそれを選択すればいいのです。

まず、Asset Store で、「responsive」と検索しましょう。

そうしましたら、この「Responsive WebGL Template」というのをダウンロード、インポートし、プロジェクトに導入してください。

ビルドセッティングから「Player Settings」を開きます。

WebGLテンプレートで、先ほどインポートした「Responsive」を選択します。

これで、一通りの設定が終わりました。

後は、WebGLで出力するだけです。

ブラウザのサイズを変更すると、縦横比を保ったまま、ゲーム画面のサイズも変わります。




お疲れさまでした。

ではさようなら。
またお会いしましょう。

もしよければ、LINEスタンプの方もよろしくお願いします。

https://line.me/S/sticker/7072968

無言で何かを伝えよう とする白男くん - LINE スタンプ | LINE STORE

白男くんが何もしゃべらずに、何か大事なことを伝えようとするスタンプです。

お そらくいつでも使えるLINEスタンプ集

[Unity]2DのUIにおいてRect Transformをスクリプトで操作して回転する方法

はい、こんにちは。
@CortanMathです。

今回は、UnityでuGUIのオブジェクトに付与されている「Rect Transform」を操作し、オブジェクトを回転させてみたいと思います。

一般的にUnityのオブジェクト（3Dモデルなど）には、Transformコンポーネントが追加されていて、これをスクリプトからいじることで、 移動、回転、拡大縮小などの動きを実現できます。

一方、UIから追加できるオブジェクト（Canvasに乗せるオブジェクト）には、「Transform」ではなく、「Rect Transform」がついています。

おそらくこれは、UI系の座標はTransformの座標と区別する必要があるからなんでしょうね。
詳しいことはわかりませんが。

しかし、この「Rect Transform」というのがかなり複雑で厄介です。

アンカーだの、ピボットだの、いろいろ概念があって、僕もまだよく理解しきれていません。

でも、とりあえず、このオブジェクトたちを回転させることに成功したので、ここに書いておきます。

Rect Transform の移動

回転について書くといいましたが、まずは、少し移動についてみてみましょう。

あくまで、僕のメモ代わりなので、読み飛ばしていただいて構いません。

Rect Transformの付いたオブジェクトは次のように移動できます。

[SerializeField] GameObject obj;

private void moveObj(){

 Vector3 pos = obj.GetComponent<RectTransform>().anchoredPosition;
 pos.x += 550.0f;
 pos.y += 100.0f;
 obj.GetComponent<RectTransform>().anchoredPosition = pos;

}

まず、objを取得したあと、RectTransformコンポーネントからanchoredPositionを変数に代入します。

そこに、x方向、y方向にそれぞれ指定した移動量を足し引きし、最後、オブジェクトの位置座標に戻してやります。

少し回りくどいですね。

しかし、あるオブジェクトを現在の位置から相対的に動かしたい場合、こうしないといけないみたいです。
（もっと簡単な方法があるのかもしれませんが、いくら調べてもRect Transformに関する情報が少ない）

一方、ある絶対的な座標に移動させたい場合は、直接その座標を代入すればよいので、簡潔に済みます。

では、本題の回転に入ります。

Rect Transform の回転

Rect Transformに回転は、次のようになります。

[SerializeField] GameObject obj;

private void moveObj(){

 obj.GetComponent<RectTransform>().Rotate(0, 0, 7.0f);

}
  

たしか、これで左回転ができます。

これも、相対的な回転量、つまり、現在の状態からどれくらい回転させるかを指定できます。

とりあえず以上になります。

Rect Transformに関しては、まだ情報が少なく、少し苦労しました。

メモ的な記事でしたけど、お役に立てれば光栄です。

ではさようなら。
またお会いしましょう。

もしよければ、LINEスタンプの方もよろしくお願いします。

https://line.me/S/sticker/7072968

無言で何かを伝えよう とする白男くん - LINE スタンプ | LINE STORE

白男くんが何もしゃべらずに、何か大事なことを伝えようとするスタンプです。

お そらくいつでも使えるLINEスタンプ集