見出し画像

いきなりVR!Unity未経験者がCluster Creator Kitで始めるワールド制作(後編)

こんにちは、マチコーと申します。

普段は制作系学生団体の運営をやりつつ、『れーぞく!ネクロマンスちゃん』という全方位STGゲームの制作をしています。最近はXR開発を目論みながらUnityを学んでいます。


前編では思いのほか反響があり、驚きました。


元々、私が所属しているサークルの新入生やUnity初学者向けに「『Roll a Ball』よりも手軽で、かつ達成感も感じられるチュートリアルを提供したい」という思い(あとは単純にcluster人口を増やしたいという願望)から衝動的に筆を執ったのですが、まさかここまでの反応を頂けるとは思い及びませんでした。

改めて御礼申し上げますと同時に、VRプラットフォームの注目度の高まりをひしひしと感じています。clusterの思想には個人的に多くの点で共感しているので、今後の展開が非常に楽しみです!


まさかclusterの中の人にも観測されるとは


私事ですが帰省が重なってしまい、期間が開いてしまったので改めて紹介しますと、この記事では

「Unity未経験者〜初心者」「プログラミング未経験者」をターゲットに、

「自分の世界をVR空間で表現する」「Unityの無限なる可能性に気付く」ことを到達目標に据え、

Unityのインストールから、自作ワールドをclusterへアップロードするまでの一連の流れを解説します。


後編では「前回のおさらい」のあと、前編の続きとして「Cluster Creator Kitを導入してみる」「Unityを触ってみる」「ワールドを作ってみる」「自作ワールドをアップロードしてみる」をお送りします。

前回と同様、公式リファレンスの参照もよろしくお願いします!




前回のおさらい

まずは、以下のソフトウェアをインストールしていることを確認してください。

cluster(for Windows / for Mac)
Unity Hub


更にUnity Hub上で加えているUnityバージョン、モジュールを確認してください。

Unity 2019.2.21f1
Android Build Support
iOS Build Support
Mac Build Support (Windowsユーザーの場合)
Windows Build Support(Macユーザーの場合)

スクリーンショット 2020-03-11 4.08.55

スクリーンショット 2020-03-11 4.12.37



Cluster Creator Kitを導入してみる

それではいよいよCluster Creator Kitなるものを導入してみます。

今回はプロジェクトの立ち上げから始めるのでCluster Creator Kitではなく、Cluster Creator Kit Sampleという色々コミコミなサンプルを流用します。こちらのサンプルには既にCluster Creator Kitが導入されており、入れてしまえさえすればすぐにワールドを作ることが可能になります。


「既に自分で構築したワールドをclusterに持っていきたいよ!」という方はCluster Creator Kitを導入するのが賢明でしょう。その場合はこちらの公式ドキュメントをご参照ください。


余談ですが、ここでうっかりSampleとKitを取り違えた筆者は30分ほど悩み、髪の毛を3本なくしました。深夜にも関わらずご教示いただいたねおりん様(@noir_neo)、本当にありがとうございました!


GitHubとかいうなんかよくわからん英語のページにアクセスすると、以下のようなページが表示されます。

スクリーンショット 2020-03-27 3.57.37

スクリーンショット 2020-03-27 4.01.34

「Clone or download」という緑色のボタンを押すと、このようなプルダウンが表示されます。落ち着いて「Download ZIP」を選びましょう。

ダウンロードが完了したらエクスプローラー(Macの場合はFinder)に移動し、たった今ダウンロードしたzipファイルを解凍します。


続いてUnity Hubを開きます。

スクリーンショット 2020-03-27 2.21.25

ウィンドウ右上にある「リストに追加」をクリックすると、エクスプローラー(Macの場合はFinder)が立ち上がります。

スクリーンショット 2020-03-27 4.03.21

先程解凍した「ClusterCreatorKitSample-master」というファイルを選択し「開く」を選ぶことで、プロジェクト欄の中に追加されます。

あとは生まれたてホヤホヤのプロジェクトをクリックすればUnityが立ち上がります。

※なぜかプロジェクトが開けない方へ
「Git」「Xcode」の片方、もしくは双方が欠けている可能性があります。こちらの公式ドキュメントにトラブルシューティングの記載がありますが、なんのこっちゃ分からない方はご自身でググるか、私のTwitterアカウント宛てにDMしてください
ここで心を折ってしまうのはもったいないですよ!一緒に頑張りましょう!



Unityを触ってみる

いよいよUnityを触っていきます!


スクリーンショット 2020-03-27 4.20.21

立ち上がったUnityの見た目は、縮尺こそ違うかもしれませんが大体こんな感じです。


このままでもUnityを触るには申し分ないのですが、作業効率を考えるとレイアウトを変えた方が良いかと思われます。ここはお好みでどうぞ。

スクリーンショット 2020-03-27 16.14.55

スクリーンショット 2020-03-27 16.15.26

「Window」→「Layouts」→「2 by 3」を選択するとこのようなレイアウトになります。今後はこのレイアウトで説明していきます。


ここで右から二番目の枠(プロジェクトビューといいます)に注目します。

プロジェクトビューはゲームで使う素材を管理するウィンドウです。このウィンドウに画像、音声、3Dモデル、etc……のような素材をドラッグ&ドロップすることで、素材を追加することができます。

スクリーンショット 2020-03-27 16.26.23

スクリーンショット 2020-03-27 16.36.59

Assets/ClusterVR/Scenesの中を覗いてみると、Unityアイコンが6つ見えますね。これはシーンと呼ばれるもので、ゲームではタイトル画面、メニュー画面、戦闘画面等のそれぞれがシーンで構成されています。プロジェクトが家とすれば、シーンが部屋といったところでしょうか?

clusterでいうところのワールドはこのシーンそのものです。つまり複数のシーンを制作すれば、ひとつのプロジェクト内で複数のワールドを作ることができます。


右上の「MinimalSample」をダブルクリックで開いてみましょう。

スクリーンショット 2020-03-27 17.31.35

左上のウィンドウはシーンビューといい、素材(オブジェクト)を配置してシーンを作成するのが主な役割です。右クリックしながらドラッグで視点操作、WASD+Q+Eで視点移動ができます。

右のウィンドウはヒエラルキービューといい、シーンビューに配置したオブジェクトの名前を一覧で表示します。オブジェクトはファイルのように階層構造にすることができますが、その表示や編集もできます。

左下のウィンドウはゲームビューといい、ゲームを実行した際の見え方を確認することができます。今は「Display 1 No cameras rendering」と表示されていますが、シーン上にカメラオブジェクトがあればここにゲーム画面が表示されます。


なおClusterCreatorKitを導入している場合、実行するとサンプル用のカメラが生成されるので、カメラオブジェクトを置く必要はありません。

試しに実行してみましょう!

スクリーンショット 2020-03-27 22.42.07

画面上部にある3つのボタンは「実行ツール」で、ゲームの実行や停止を行うことができます。左の再生ボタンを押してください。

スクリーンショット 2020-03-27 22.47.36

するとこのように、ゲームビューに画面が表示されました!この状態を便宜上プレビュー状態と呼ぶことにしましょう。


プレビュー状態では、cluster内のワールドのように移動/視点操作ができます(この記事を執筆している段階ではジャンプは未実装です。いつか実装されたら泣いて喜びます)。操作はcluster同様、WASDか方向キーで移動左クリックしながらドラッグで視点移動です。

スクリーンショット 2020-03-27 22.55.59

グリグリ動かしていると気づいたかもしれませんが、シーン上にさっきまで居なかった矢印とカメラマークが追加されています。またヒエラルキービューには「PreviewOnly」という水色のオブジェクトが追加されています。

スクリーンショット 2020-03-27 22.59.16

PreviewOnlyの三角をクリックし、「DesktopPlayerController」をクリックしてみると、なにやら一番右のウィンドウに英語と数字が出てきました。

ここはインスペクタといい、シーンビューで選択したオブジェクトの詳しい情報を表示します。例えばTransformという欄を見ると、「Position」「Rotation」「Scale」という三要素、そしてそれぞれにXYZの値が与えられていますが、これらでそのオブジェクトが今「シーン内のどこにいるか」「何度回転しているか」「もとの大きさの何倍か」を表しているのです。


試しにプレビュー状態で、ゲームビューを一度クリックして移動してみると、DesktopPlayerControllerくんのインスペクタのTransformのPositionの値が変わっていくのがわかります。

またプレビュー状態で床の外に出ると、床の上へワープします

スクリーンショット 2020-03-28 1.17.07

「やだな、またこの床だ」



それでは、ここからワールドを構成する要素についてお話しします!

スクリーンショット 2020-03-28 0.23.24

Systemの中に「DespawnHeight」「SpawnPointEntrance」というオブジェクトが入っていますね。順番に確認していきましょう。

スクリーンショット 2020-03-28 1.12.52

「DespawnHeight」はプレイヤーが接触すると消滅する高さのことです。

スクリーンショット 2020-03-28 1.11.28

「SpawnPointEntrance」は実行時、およびDespawnHeightで消滅した際に再出現する地点のことです。中央から伸びる赤い線は、出現時のプレイヤーの向きを表しています。画像はプレビュー状態ですが、赤い線が伸びる方を向いていることがわかります。

ちなみにこのSpawnPointEntranceは複製して配置することもでき、その場合は再出現時の地点がその中からランダムに選ばれるという仕様があります。
使い方に思いを巡らせてみるのも楽しいかもしれませんね!


この2つのオブジェクトのおかげで、「床の外に出ると床の上にワープする」というインタラクションが実現していたのですね。

では今プレイヤーが立っている床は何なのだ、というと答えは「Environment」の中にあります。

スクリーンショット 2020-03-28 1.33.06

「StaticObjects」の中に「Plane」が、「Colliders」の中に「PlaneCollider」が入っています。

ここでインスペクタをご覧いただくと分かりますが、Planeの方には「Mesh Renderer」という欄が、PlaneColliderには「Mesh Collider」という欄があります。かなりざっくり言えば、Rendererが見た目Colliderが当たり判定です。床が床のように見えているのはRendererのおかげで、自分が床の上に乗っているのはColliderのおかげだということですね。


ついでにEnvironment/Lightingsの中にある「DirectionalLight」も見てみましょう。

これはスポットライトのように局地的に照らす光源とは違い、太陽光のように無限遠から光を放つ光源です。光源から離れても光の強さは減衰せず、たとえ位置を変えても光の当たり方が変わらないのが特徴です。

スクリーンショット 2020-03-28 3.52.23

角度を変えてみると、画像のように夕焼けっぽい色合いにすることだってできます。作りたいワールドの雰囲気に合わせ、適宜調整を加えてみるといいでしょう。



さて、ワールドを構成する要素は以上です!

正直なところ「ふーん、これはそういうものなのね」と雰囲気を掴んでもらえたらOKです。何度も触っていれば否でも応でも覚えることになるでしょうから。



お待たせしました!いよいよ本題であるワールド作りのお時間です!


ワールドを作ってみる

Window/Asset Storeを選択すると、以下のようなウィンドウが表示されます。もしUnity IDを作っていない場合、ここで作っておくことをおすすめします。

スクリーンショット 2020-03-29 5.16.17

スクリーンショット 2020-03-29 5.18.30

これは「アセットストア」といい、ゲーム制作で使用するための素材(=アセット)を売買するためのオンラインストアです。

右に記載されているカテゴリを見れば一目瞭然ですが、3Dモデル以外にも絵に音楽にエフェクト、果てはUnityの拡張機能など、Unityにまつわるありとあらゆる素材がここアセットストアに集まっています。私もいつもお世話になっています。


さて、何はともあれワールドを作るには3Dモデルが必要です。

ここからは皆さんの想像力、もとい創造力が試されるターンです。自分の好きな世界観や好きなもの、好きなシチュエーションを思い浮かべ、それを実現できそうなアセットをくまなく探しましょう。

アセットの中には無料のものも有料のものもありますが、私はお試しということで無料のアセットを探してみます。

スクリーンショット 2020-03-29 5.26.50

図のように「3D」「Free Assets」にチェックを付けてみました。


おびただしい数のアセットが表示されていますが、私はその中でも「House Pack」というアセットを見つけました。こいつを使って中世の町並みのようなワールドを作ってみます。

スクリーンショット 2020-03-29 5.33.55

「Download」という青いボタンを押すとダウンロードが始まり、「Import」というボタンに変化します。そいつもクリックしてください。

スクリーンショット 2020-03-29 5.37.02

すると「Import Unity Package」という小さなウィンドウが出現しました。

ここには今からインポートするファイルが表示されており、ファイル名の隣のチェックを外すことで特定のファイルだけインポートしない、ということも可能になります。

私は特に困ることはないので、そのままインポートすることにします。右下の「Import」ボタンを押下してください。


スクリーンショット 2020-03-29 5.43.09

プロジェクトビュー(ゲームで使う素材を管理するウィンドウでしたね)を見てみると、先程インポートしたアセットがAssetsの中に追加されています。


もし「Prefabs」というファイルがあったら、それをダブルクリックで開いてみてください(画像はPerfabsとなっていますが……恐らくスペルミス?)。

スクリーンショット 2020-03-29 5.49.20

この中に入っているのが「プレハブ」です。プレハブは建築でいうところの設計図たい焼きでいうところの金型であり、オブジェクトを(たくさん)作るのに非常に便利なものです。

例えばシューティングゲームの弾や、アクションゲームの敵。その場でいちいち作るのは骨が折れますが、ある程度の寸法や性質が決まっていれば量産するのは楽そうですよね。


プレハブをシーン上に置くのは非常に簡単で、使いたいアセットを左クリックしたままシーンビュー、もしくはヒエラルキービューまでドラッグするだけです。

スクリーンショット 2020-03-29 6.03.09

あとはインスペクタやシーン上で位置、大きさ、角度を調整し、自分の心の中の未来予想図に沿ってどんどん置いてみましょう。

………………

…………

……

10分ほどで完成したのがこちらです。

スクリーンショット 2020-03-29 6.29.30

……中世の町並みというよりはダンジョンの一角といった装いですが、これは「すぐれたセンスがなくともワールドは簡単に作れる」ということを強調するための策です。本当ですよ?


スクリーンショット 2020-03-29 6.31.03

プレビュー状態にするとお分かりかと思いますが、見えてほしくないところまで見え、行ってほしくないところまで行ける状態になってしまっています。

ここで床の説明を思い出してほしいのですが……そうです、Colliderは当たり判定でしたね。つまりこのモデルたちにColliderを付けてやれば、ちゃんと干渉できるようになります。


まずはColliderを付けたいオブジェクトを選択し、インスペクタの欄を見てください。

スクリーンショット 2020-03-29 6.41.18

一番下に「Add Component」というボタンがあります。

ここでは「コンポーネント」というものをオブジェクトに付与できるのですが、コンポーネントとはオブジェクトを構成する要素のことです。ColliderやRenderer、自前で書いたスクリプト(プログラム)もコンポーネントとして扱われます。


スクリーンショット 2020-03-29 6.50.40

スクリーンショット 2020-03-29 6.50.14

Add Componentを選んだら「Physics」「Mesh Collider」を順番にクリックしてください。

これでオブジェクトにColliderを付与することができました!この調子でシーン中のオブジェクトにColliderを付けていきましょう。

ただしColliderは増やしすぎるとパフォーマンスの低下に繋がるので、目に見えないところやたどり着かないところ(背景)にあるオブジェクトへの適用は控えたほうが賢明です。

複雑な形のオブジェクトの場合、Mesh Colliderを付けると意図しない当たり判定になってしまうことがあります。その場合は「Box Collider」「Sphere Collider」等、別のColliderを組み合わせて使うことをおすすめします。


すべての編集が終わったらCtrl+S(Macならcommand+S)でシーンを保存してください。




自作ワールドをアップロードする

Cluster/ワールドアップロードを選択すると、画像のようなウィンドウが出現します。

スクリーンショット 2020-03-29 7.12.52

スクリーンショット 2020-03-29 7.15.31

「Wedでトークンを発行」を押すとブラウザが立ち上がり、clusterのWebサイトに移動します。ここでトークンを発行しなければならないのですが、トークンの発行にはclusterのアカウントが必要なので、ログインが必要な方はログインをお願いします。

スクリーンショット 2020-03-29 7.16.17

スクリーンショット 2020-03-29 7.20.36

「トークン作成」を選ぶとトークンが表示されるのでコピーします。

再びUnityに戻り、トークンを貼り付けて「このトークンを使用」を押します。

スクリーンショット 2020-03-29 7.23.42

こんなウィンドウになったらアカウント認証成功です!「新規作成」を押してください。

スクリーンショット 2020-03-29 7.27.11

するとこんな画面が現れるので、「ワールド名」「ワールドの説明」にそれぞれ記入します。

特に注意すべきは「画像の選択」で、これはclusterのワールド一覧にてサムネイル表示される画像です。画面のキャプチャを貼り付けるだけでもいいでしょうし、加工してみるのもいいかもしれません。

スクリーンショット 2020-03-29 7.30.40

用意し終えたら「'(ワールド名)'としてアップロードする」を押し、確認するウィンドウでもう一度「アップロード」を選択してください。


ここでプログレスバーが慌ただしく動き出し、ワールドの規模にもよりますが数分間待つことになります。なぁにTwitterでも眺めていればすぐですよ。

ところで私のTwitterアカウントはこちらです(著しく自然な導入)。



スクリーンショット 2020-03-29 7.36.28

スクリーンショット 2020-03-29 7.37.03

成功するとブラウザにはclusterのワールドWebページが、Unity側にはビルド結果が表示されます。

なおアップロードは何回でもやり直せるので、もし遊んでみて気になる点が出てきたらその都度修正して上げることができます!



画像45

ついに世界にひとつだけ、あなただけのワールドを作ることができました!

作成したワールドはclusterのWebページやアプリからアクセスできるほか、このようなURLを共有することで知人にも入ってもらうことができます。

ぜひTwitterでも自慢しましょう!



あとがき

「いきなりVR!Unity未経験者がCluster Creator Kitで始めるワールド制作」の内容は以上になります。前編を書いている時には、まさか前後編合わせて1万字以上もの記事になるとは思い及びませんでした。


私がこの記事を書いたのは、前編の冒頭でも申し上げた通り「一人でも多くの方々にクリエイターとしての一歩を踏み出してほしいから」です。

初めてCluster Creator Kitに触れたとき、ノンプログラミングでもそれなりに動くものが作れる!しかも全世界に公開できる!ということに私は驚嘆し、喜びを覚えました。

私自身も今はゲーム制作を日常的に行っていますが、プログラミングを覚え初めた頃は「とりあえず動くものを作る」というハードルがなによりも高く感じ、何度も何度も挫折していました。


初心者にとって、とにかく大切なのは「取っ掛かり」であると言い切れます。


このハンズオンでは小難しい要素の一切を省き、分かりやすく伝えることにとにかく苦心しました。

もしこのハンズオン記事を読んで、

「次は自分でUnityを使ってゲームを作ってみたい!」「clusterのワールド制作を継続してやりたい!」「3Dモデリングに挑戦したい!」

と、創作の取っ掛かりを掴んだ方がいらっしゃったら、本当に嬉しいです!




また記事を執筆している3月29日現在、都内は外出自粛が呼びかけられ、経済は冷え込み、イベントの自粛も続いています。私自身、初のサークル参加となるはずだったコミックマーケット98が中止になることが決まり、とてもショックを受けました。


しかしながら、こんな厳しい時こそエンタメの真価が問われているのだと思うのです。

家から出られない今だからこそ、ゲームは心を動かすメディアとして人々の心を灯し続けています。

現実では会えない人ともclusterならば、VRならば、実在感(プレゼンス)を感じながら交流することができます。


たとえば、VR空間上で会議を行うのはどうでしょうか?自作の創作物の展示場を作るのは?はたまた脱出ゲームを企画してみるのも面白いかも?

創作の可能性は無限大です!ぜひこれからも、あなただけの世界を作り続けてください!

私は同じクリエイターとして、あなたの挑戦を応援し続けます!!






私自身も、皆さんからの応援なくしては頑張れません。もし共感していただけたなら、私のTwitterアカウントをフォローしていただけると嬉しいです。


それでは、また次の記事でお会いしましょう!







いただいたサポートは、明日のアセット代として大切に使わせていただきます。