この記事を三行にまとめると
ブログのPVも動画の再生回数も両方上がるし（本音）ユニティちゃんのプライベートを教えろとかじゃなければ
とりあえずゲーム作りの下準備はこれでOK
一ヶ月前くらいに宣言した通り、今日からこのブログはUnity編に突入します。このシリーズは基本的にYouTubeでも内容を紹介しています。動画も記事もほぼ同じ内容なのですが、動画の方で説明し忘れてるような部分などはこっちでカバーしていくので、できれば両方合わせて見てもらえるとありがたいです（訳：ブログのPVも動画の再生回数も両方上がると嬉しい）
今回はゲーム作りに入る前に必要な作業と、実際にゲームを作る際のUnityの画面の構成を見ていこうと思います。
ちなみに使用しているUnityのバージョンは「2018.2.11f1」とちょっち古いバージョンなんですが、機能に関する根幹の部分は最新のバージョンでもそれほど変わらないはずなので大丈夫だと思います。本シリーズを通してバージョン特有の機能にはなるべく触れないように気をつけます。
Unityの本体はここからダウンロードできます。
Dlownload – Unity
初めてダウンロードする場合は「Unityを選択 + ダウンロード」の方からダウンロードしてください。「Unity Hub」はすでにダウンロード済みの本体とバージョンの違うものをダウンロードしたい時などに使います。
インストールも特別な作業は必要ありません。他のアプリケーションをPCにインストールする時と同じ要領で手順を進めていけば良いです。
ただし本シリーズの最終目的はウェブサイトで公開することにあり、そのためには作ったゲームをWebGLという規格でビルドしなければなりません。なのでインストールする時に「WebGL Build Support」っていうコンポーネントを一緒に入れておく必要があります。
WebGLってのは……何だろな。ウィキペディアによるとブラウザで3DCGを表示するための標準仕様とのことですが……とりあえず自作のゲームをウェブで公開するにはこいつが必要ってことだね。
Wikipedia
WebGLはサポートしているブラウザとしていないブラウザがありますが、最近のブラウザは基本的に対応しているので大丈夫だと思います。
自分のブラウザが対応しているかどうか調べるには、例えばこんなサイトがあります。
https://masshiro.blog/a/does-my-browser-support-webgl.html
ここにアクセスして画面に「Yay」と出れば対応しています。
あと上の画像では「Visual Studio for Mac」というコンポーネントにチェックを入れていませんが、今回初めてプログラミングをやるという方はこれも一緒に入れといた方が良いです。たぶんWindowsだと「Visual Studio for Windows」になってると思う。
Visutal Studioというのはテキストエディタです。Unityでゲームを作っているとC#というプログラミング言語を使ってコードを書く機会がたびたびあるのですが、そのコードを書く時に必要になるアプリケーションです。別にメモ帳とかでもコードは書けますが、Visual Studioを使った方が圧倒的に便利で効率的です。もうスマホと伝書鳩くらい違うね。
すでに別のテキストエディタを使っている人はそっちを使うこともできるのでインストールしなくても大丈夫です。
プロジェクト作成画面はこんな感じです。
順番にざっくり見ていくと、まず「Project name」はプロジェクト名です。何でも良いです。ここでつけた名前が後でプロジェクトを管理するフォルダ名になります。
「Location」はフォルダの作成場所です。自分のPCの管理しやすい場所を任意に指定してください。
「Organization」はプロジェクトを管理するグループ的なものです。Unityは本体ダウンロード時にユーザー登録を求められるんですが、そのユーザーが属する組織の一覧がここに出てきます。僕のように友達が少ない場合は自分の作った組織に自分一人だけが属する状態になるので、ここは何を選んでも問題ないと思います。どうやらこの項目は必須らしいんで「俺ぁ組織には属さねぇ」という鋼の精神を持った人も今回は柔軟に受け入れてくだせぃ。
組織管理のページはこんな感じです。
プロジェクト作成画面の右上に「My Account」というのがありますが、ここをクリックするとブラウザでUnityのマイページが開きます。その中に「Organizations」という項目があるので、そこからこの画面にアクセスできます。僕のような孤高の一匹狼を気取っている奴にとっては組織は一つあれば十分ですが、もし複数の組織を管理する場合はここで新規に追加できます。
プロジェクト作成画面に戻りまして、「Template」はゲーム製作に使用するテンプレートです。2Dの脱出ゲームを作りたい場合は「2D」を選択します。うっかり3Dを選択しちゃったら2Dのゲームは作れないのかというと別にそんなことはないですが、たぶん設定を修正するよりはプロジェクトを作り直しちゃった方が早いと思います。この時点ではまだ何も作ってないしね。
「Add Asset Package」はアセットの追加です。Unityにはゲーム製作用の素材がいろいろと標準で用意されているらしいのですが、それを使う場合はここで追加します。今回は必要な素材は全て以下のサイトからいただいたのでアセットは追加しませんでした。
・いらすとや
・すべての国の国旗
・On-Jin ～音人～
この場を借りてお礼申し上げます。あざーっす！
「Enable Unity Analytics」はアナリティクスを使用するかどうかです。ONにしておけばgoogleアナリティクスみたいに公開したゲームのアクセス状況を見ることができます。せっかくゲームを作って公開するんだから、どれくらいの人がゲームを遊んでくれたかは気になるポイントだと思います。僕も気になる。それはもう、YouTubeの再生回数と同じくらい気になる。だからここはONで良いんじゃないでしょうか。
あとは「Create Project」ボタンを押せばプロジェクトが作成されます。
①はゲームウインドウです。作っている途中で動作確認をしたい場合にこの画面で挙動を確かめることができます。
②はヒエラルキーウインドウです。ゲーム画面に表示する画像や音声、ボタンなどの各パーツ（ゲームオブジェクト）の一覧をツリー構造で管理します。
③はインスペクターウインドウです。オブジェクトの詳細な設定（大きさとか位置とかクリックした時の動きとか）をここで行います。
④はシーンウインドウです。オブジェクトの位置とか大きさをマウスでビーッと引っ張って自由に変えたりできる画面なのですが、僕的には位置や大きさはインスペクターで数字をいじる方が設定しやすいので、正直この画面はあまり使わないです。画像のクリックポイントの調整などもここで行えるので便利だとは思うんですが、本作ではその作業も特に行わないので……これについては別の回でもうちょい詳しく話します。
⑤はプロジェクトウインドウです。ゲームに必要な素材はここで管理します。今回の場合で言うといらすとやさんからいただいた画像やOn-Jinさんからいただいた音声ファイルのことです。あとはスクリプトファイル（プログラムのコードを書くファイル）やシーンもここで管理します。
⑥はコンソールウインドウです。エラーが出たりするとここにエラーの内容が表示されるので、それを見てどんなエラーが出ているのか確認し、何言ってるか分からなければGoogle先生に訊くと良いでしょう。もちろんここのコメントや僕のYouTubeやTwitterなどにも気軽に質問を投げてもらえれば、ユニティちゃんのプライベートを教えろとかじゃなければなるべく答えられるように頑張ります。
ユニティちゃん
他にもいくつかウインドウがあるのですが、主にこの6つのウインドウの使い方が分かればゲーム作りには困らないかなと思います。他のウインドウを画面に追加したい場合は、上のメニューの「Window」から追加できます。逆にいらないウインドウがあればタブを右クリックして「Close Tab」で消せます。
このサイズは自由に変更できます。
たぶん今時は「16:9」の比率が一般的だと思うんですが、その比率に設定することもできますし、縦横それぞれのサイズを好きに入力することもできます。
僕は普段「Visual Studio Code」というテキストエディタを使っています。さっきのVisual Studioと名前は似てますけどこれはまた別のエディタです。このVSCodeというエディタもかなり便利なのでプログラミングと一緒に使い方を覚えるのも良いと思います。ぶっちゃけ僕もまだ全然使いこなせてないんですがね……スマホと同じで便利な機能がありすぎて逆に使いこなせないパターンよ。
今回はこんなとこですかね。言いたいことは基本的に動画の方で言っているので、次回以降も記事の方はそれをかいつまむ感じでいきたいなぁと考えております。あと冒頭でも言いましたが、動画で言い忘れてたこととか、後から気づいたことや知った情報があれば補足する感じですね。動画の方は脱出ゲームを作るために必要な説明をできる限り最小限に留めたかったので、記事の方では別にこんなこと知らなくてもゲームは作れるんだけど……みたいな部分にもあえて触れることがあるかもしれません。動画に比べると記事の方が読み飛ばすのは簡単なはずだから大丈夫だろう……たぶん。
まあ、その知らなくても良い部分の話を差し引いても、動画の方ではなるべく余計なことを言わないようにしている分、いらんことを言いたいしわ寄せがこっちに来てしまうとは思います。つまりいつもの通り、記事の方は冗長な駄文になる可能性が大です。でも読み飛ばすのが簡単だからあまり怒られることはないだろうと勝手に思い込むことにします。すいやせん。
とりあえずゲーム作りの下準備はこれでOKということで、次回から実際にゲーム画面の方を作成していきたいと思います。まずは画面を作る上での基盤とも言うべき画像オブジェクトの使い方から始めていきます。
それじゃあ、今後ともよろしくお願いしたびらめ。
本シリーズの記事の一覧はこちら
Unityで簡単な2D脱出ゲームを作ってウェブサイトで公開してみよう 〜エピローグ〜
今回はゲーム作りに入る前に必要な作業と、実際にゲームを作る際のUnityの画面の構成を見ていこうと思います。
ちなみに使用しているUnityのバージョンは「2018.2.11f1」とちょっち古いバージョンなんですが、機能に関する根幹の部分は最新のバージョンでもそれほど変わらないはずなので大丈夫だと思います。本シリーズを通してバージョン特有の機能にはなるべく触れないように気をつけます。
ダウンロード
動画ではいきなりプロジェクトの作成から説明を始めていますが、最初にやるべきは本体のダウンロードとインストールですよね。いきなり説明し忘れるという失態……先が思いやられます。さーせん。Unityの本体はここからダウンロードできます。
Dlownload – Unity
初めてダウンロードする場合は「Unityを選択 + ダウンロード」の方からダウンロードしてください。「Unity Hub」はすでにダウンロード済みの本体とバージョンの違うものをダウンロードしたい時などに使います。
インストールも特別な作業は必要ありません。他のアプリケーションをPCにインストールする時と同じ要領で手順を進めていけば良いです。
ただし本シリーズの最終目的はウェブサイトで公開することにあり、そのためには作ったゲームをWebGLという規格でビルドしなければなりません。なのでインストールする時に「WebGL Build Support」っていうコンポーネントを一緒に入れておく必要があります。
WebGLってのは……何だろな。ウィキペディアによるとブラウザで3DCGを表示するための標準仕様とのことですが……とりあえず自作のゲームをウェブで公開するにはこいつが必要ってことだね。
Wikipedia
WebGLはサポートしているブラウザとしていないブラウザがありますが、最近のブラウザは基本的に対応しているので大丈夫だと思います。
自分のブラウザが対応しているかどうか調べるには、例えばこんなサイトがあります。
https://masshiro.blog/a/does-my-browser-support-webgl.html
ここにアクセスして画面に「Yay」と出れば対応しています。
あと上の画像では「Visual Studio for Mac」というコンポーネントにチェックを入れていませんが、今回初めてプログラミングをやるという方はこれも一緒に入れといた方が良いです。たぶんWindowsだと「Visual Studio for Windows」になってると思う。
Visutal Studioというのはテキストエディタです。Unityでゲームを作っているとC#というプログラミング言語を使ってコードを書く機会がたびたびあるのですが、そのコードを書く時に必要になるアプリケーションです。別にメモ帳とかでもコードは書けますが、Visual Studioを使った方が圧倒的に便利で効率的です。もうスマホと伝書鳩くらい違うね。
すでに別のテキストエディタを使っている人はそっちを使うこともできるのでインストールしなくても大丈夫です。
プロジェクト作成
Unityでゲームを作るにはまずプロジェクトを作成しなければなりません。基本的には一つのゲームにつき一つのプロジェクトを作ることになります。複数のゲームをプレイできるようなものを作るならその限りではないと思いますが、今回はそういう構成ではないという前提で。プロジェクト作成画面はこんな感じです。
順番にざっくり見ていくと、まず「Project name」はプロジェクト名です。何でも良いです。ここでつけた名前が後でプロジェクトを管理するフォルダ名になります。
「Location」はフォルダの作成場所です。自分のPCの管理しやすい場所を任意に指定してください。
「Organization」はプロジェクトを管理するグループ的なものです。Unityは本体ダウンロード時にユーザー登録を求められるんですが、そのユーザーが属する組織の一覧がここに出てきます。僕のように友達が少ない場合は自分の作った組織に自分一人だけが属する状態になるので、ここは何を選んでも問題ないと思います。どうやらこの項目は必須らしいんで「俺ぁ組織には属さねぇ」という鋼の精神を持った人も今回は柔軟に受け入れてくだせぃ。
組織管理のページはこんな感じです。
プロジェクト作成画面の右上に「My Account」というのがありますが、ここをクリックするとブラウザでUnityのマイページが開きます。その中に「Organizations」という項目があるので、そこからこの画面にアクセスできます。僕のような孤高の一匹狼を気取っている奴にとっては組織は一つあれば十分ですが、もし複数の組織を管理する場合はここで新規に追加できます。
プロジェクト作成画面に戻りまして、「Template」はゲーム製作に使用するテンプレートです。2Dの脱出ゲームを作りたい場合は「2D」を選択します。うっかり3Dを選択しちゃったら2Dのゲームは作れないのかというと別にそんなことはないですが、たぶん設定を修正するよりはプロジェクトを作り直しちゃった方が早いと思います。この時点ではまだ何も作ってないしね。
「Add Asset Package」はアセットの追加です。Unityにはゲーム製作用の素材がいろいろと標準で用意されているらしいのですが、それを使う場合はここで追加します。今回は必要な素材は全て以下のサイトからいただいたのでアセットは追加しませんでした。
・いらすとや
・すべての国の国旗
・On-Jin ～音人～
この場を借りてお礼申し上げます。あざーっす！
「Enable Unity Analytics」はアナリティクスを使用するかどうかです。ONにしておけばgoogleアナリティクスみたいに公開したゲームのアクセス状況を見ることができます。せっかくゲームを作って公開するんだから、どれくらいの人がゲームを遊んでくれたかは気になるポイントだと思います。僕も気になる。それはもう、YouTubeの再生回数と同じくらい気になる。だからここはONで良いんじゃないでしょうか。
あとは「Create Project」ボタンを押せばプロジェクトが作成されます。
各ウインドウについて
プロジェクトの作成が完了するとこんな画面が出てきます。①はゲームウインドウです。作っている途中で動作確認をしたい場合にこの画面で挙動を確かめることができます。
②はヒエラルキーウインドウです。ゲーム画面に表示する画像や音声、ボタンなどの各パーツ（ゲームオブジェクト）の一覧をツリー構造で管理します。
③はインスペクターウインドウです。オブジェクトの詳細な設定（大きさとか位置とかクリックした時の動きとか）をここで行います。
④はシーンウインドウです。オブジェクトの位置とか大きさをマウスでビーッと引っ張って自由に変えたりできる画面なのですが、僕的には位置や大きさはインスペクターで数字をいじる方が設定しやすいので、正直この画面はあまり使わないです。画像のクリックポイントの調整などもここで行えるので便利だとは思うんですが、本作ではその作業も特に行わないので……これについては別の回でもうちょい詳しく話します。
⑤はプロジェクトウインドウです。ゲームに必要な素材はここで管理します。今回の場合で言うといらすとやさんからいただいた画像やOn-Jinさんからいただいた音声ファイルのことです。あとはスクリプトファイル（プログラムのコードを書くファイル）やシーンもここで管理します。
⑥はコンソールウインドウです。エラーが出たりするとここにエラーの内容が表示されるので、それを見てどんなエラーが出ているのか確認し、何言ってるか分からなければGoogle先生に訊くと良いでしょう。もちろんここのコメントや僕のYouTubeやTwitterなどにも気軽に質問を投げてもらえれば、ユニティちゃんのプライベートを教えろとかじゃなければなるべく答えられるように頑張ります。
ユニティちゃん
他にもいくつかウインドウがあるのですが、主にこの6つのウインドウの使い方が分かればゲーム作りには困らないかなと思います。他のウインドウを画面に追加したい場合は、上のメニューの「Window」から追加できます。逆にいらないウインドウがあればタブを右クリックして「Close Tab」で消せます。
ゲーム画面の大きさ
本作のゲーム画面は「640 × 480」というサイズに設定しています。このサイトのメインカラムの横幅が710ピクセルなので、それに収まるようなサイズを適当に設定しました。このサイズは自由に変更できます。
たぶん今時は「16:9」の比率が一般的だと思うんですが、その比率に設定することもできますし、縦横それぞれのサイズを好きに入力することもできます。
エディタの切り替え
すでに別のテキストエディタを使っている場合はそっちを使うこともできると言いましたが、じゃあUnityで使うエディタを変更するにはどうするかと言うと、画面左上のメニューから「Unity → Preference」を選択すると設定画面が出てくるので、その中の「External Tools」という項目の中にある「External Script Editor」で使いたいエディタを設定できます。僕は普段「Visual Studio Code」というテキストエディタを使っています。さっきのVisual Studioと名前は似てますけどこれはまた別のエディタです。このVSCodeというエディタもかなり便利なのでプログラミングと一緒に使い方を覚えるのも良いと思います。ぶっちゃけ僕もまだ全然使いこなせてないんですがね……スマホと同じで便利な機能がありすぎて逆に使いこなせないパターンよ。
今回はこんなとこですかね。言いたいことは基本的に動画の方で言っているので、次回以降も記事の方はそれをかいつまむ感じでいきたいなぁと考えております。あと冒頭でも言いましたが、動画で言い忘れてたこととか、後から気づいたことや知った情報があれば補足する感じですね。動画の方は脱出ゲームを作るために必要な説明をできる限り最小限に留めたかったので、記事の方では別にこんなこと知らなくてもゲームは作れるんだけど……みたいな部分にもあえて触れることがあるかもしれません。動画に比べると記事の方が読み飛ばすのは簡単なはずだから大丈夫だろう……たぶん。
まあ、その知らなくても良い部分の話を差し引いても、動画の方ではなるべく余計なことを言わないようにしている分、いらんことを言いたいしわ寄せがこっちに来てしまうとは思います。つまりいつもの通り、記事の方は冗長な駄文になる可能性が大です。でも読み飛ばすのが簡単だからあまり怒られることはないだろうと勝手に思い込むことにします。すいやせん。
とりあえずゲーム作りの下準備はこれでOKということで、次回から実際にゲーム画面の方を作成していきたいと思います。まずは画面を作る上での基盤とも言うべき画像オブジェクトの使い方から始めていきます。
それじゃあ、今後ともよろしくお願いしたびらめ。
本シリーズの記事の一覧はこちら
Unityで簡単な2D脱出ゲームを作ってウェブサイトで公開してみよう 〜エピローグ〜
