![見出し画像](https://assets.st-note.com/production/uploads/images/131833100/rectangle_large_type_2_d3fba8ad0916cb065803f0c9ed6ca6b2.jpeg?width=800)
【cluster】Unityだけで作る簡単メタバース個展(②制作編)
こんにちは、エダホです。
前回の「①準備編」に続き、clusterでの個展を作る手順を紹介します!いよいよUnityでの制作に入ります!
事前にclusterとUnityの準備が前提となりますので、それらが済んでない方は前回の記事をご覧ください↓
前置き
筆者のPC環境の都合上、Windows10での画面や操作が基準になっています。Unity、clusterはMacにも対応していますので、ショートカットキーなどは適宜読み替えてください。(例:Alt→Option、Ctrl→Commandなど)
Unityプロジェクトの用意~Unity起動
Unityは「プロジェクト」と呼ばれる作業ファイル群を扱います。
サンプルプロジェクトのダウンロード
Unityのプロジェクトはゼロからでも作れますが、clusterがワールド制作のテンプレートとなる「サンプルプロジェクト」を公開してますので、そちらを利用します。
↓のリンクから、サンプルプロジェクトのzipをダウンロードしてください。(上記ページの「サンプルプロジェクト」と同じです)
https://github.com/ClusterVR/ClusterCreatorKitSample/archive/master.zip
ダウンロードしたzipを解凍すると、「ClusterCreatorKitSample-master」というフォルダが出来ますので、適当なフォルダに移動します。(※日本語が含まれないフォルダにしてください)
(この記事では「D:\local\work\cluster_lecture\prj」に置いています)
移動したあと、フォルダを適当な名前に変更してください。その名前がUnityのプロジェクト名となります。
(この記事では「cluster_koten_240303」としています)
![](https://assets.st-note.com/img/1709467490883-b6Rmz0EsWJ.png?width=800)
プロジェクトを開く(Unityの起動)
配置したプロジェクトを開く為、「Unity Hub」を起動します。
(Unity Hubをインストールしてない方は、「①準備編」をご覧ください)
![](https://assets.st-note.com/img/1708790199423-DUqSAF68Bd.png?width=800)
![](https://assets.st-note.com/img/1708790315205-Oiq1MmoLoZ.png?width=800)
Projectsタブを開き、「Add」を押すとプロジェクト選択ダイアログが開くので、先程配置したプロジェクトフォルダを選択して「Open」を押してください
![](https://assets.st-note.com/img/1708791100119-JYl8ZJvnVl.png?width=800)
![](https://assets.st-note.com/img/1709468244290-8ZZ6OElCs4.png?width=800)
初回はそのままUnityが起動し、選択したプロジェクトが開かれます。
![](https://assets.st-note.com/img/1709468290570-K1ceG0f3Dj.png?width=800)
![](https://assets.st-note.com/img/1709468373897-kJWp1HTjUA.png?width=800)
Unityの基本操作
ここで、Unityの画面・操作の簡単な説明を書いておきます。すでにご存知の方は、本章は読み飛ばしていただいて大丈夫です。
今回の手順に関わるものだけに絞っておりますので、もっと詳しく知りたい方は他の解説サイトや動画などもご参照ください。
尚、Unityの公式マニュアルは以下になります。(対応バージョンに沿ったマニュアルを参照してください)
画面の説明
Hierarchy、Sceneなど、初期状態で表示されている6種類のタブ・ウィンドウは基本的なものなので、全て使用します。それぞれ簡単に紹介します。
Scene・・・現在開いているシーン(ゲームの1ステージのようなもの)を3D空間で操作する画面です。最初はUntitled(無題)の新規シーンが開かれています。
Hierarchy・・・現在開いてるシーン内のオブジェクトを一覧・階層表示する画面です。Sceneビューでクリックしにくい場合は、ここからでもオブジェクトを選択できます。
Game・・・ゲームのプレイヤー視点の画面です。再生中、ゲーム内の操作はこちらで行います。
Project・・・Windowsのエクスプローラ(MacのFinder)のように、Unityプロジェクト内のファイルやフォルダを操作する画面です。
Inspector・・・シーン内で選んだオブジェクトや、Projectウィンドウで選んだファイルに対して、細かい設定を変更する画面です。
Console・・・エラーメッセージなどが表示される画面です。
![](https://assets.st-note.com/img/1708793769077-vPRz1uZeLN.png?width=800)
これら6つの画面は頻繁に使いますが、もし閉じてしまった場合は、メニューのWindow->Generalから復活できます。
![](https://assets.st-note.com/img/1708797202035-KVK7z85mzA.png?width=800)
Sceneビューの視点操作
まずはSceneビューの視点操作を覚えましょう。以下3つが基本となります。(Macの場合は、AltをOptionに置き換えてください)
Alt+マウス左ボタンドラッグ・・・カメラ(視点)の回転(回り込み)
Alt+マウス中ボタンドラッグ・・・カメラ(視点)の並行移動
Alt+マウス右ボタンドラッグ・・・カメラ(視点)の前後移動
![](https://assets.st-note.com/production/uploads/images/131959645/picture_pc_26485fe6355ae92118a42e4463287cc8.gif?width=800)
オブジェクトの作成
Hierarchyウィンドウ左上の「+」ボタンから、様々なオブジェクトを作成できます。試しに3D Object -> Cube(立方体)を作ってみましょう。
![](https://assets.st-note.com/img/1708798169486-NKWdjmHwve.png?width=800)
オブジェクトの操作
作成したCubeをHierarchyウィンドウかSceneビューで選択すると、操作できるようになります。ここでいう操作とは、「移動」「回転」「拡大縮小」です。シーンビュー左のボタンで、操作を切り替えることができます。
操作を切り替えると、オブジェクト上に三色(RGB)のハンドルが現れますので、それを掴んでドラッグすれば、操作することができます。
![](https://assets.st-note.com/production/uploads/images/131960345/picture_pc_4fc763c30db94edd2b98f3950e39110e.gif?width=800)
また、これらはショートカットキー「W」「E」「R」で切り替えられます。(キーボードの横並びで覚えると楽です)
![](https://assets.st-note.com/img/1708798780275-3k0fBjWffu.jpg)
また、回転については、Ctrl(MacはCommand)を押しながらハンドルを動かすことで、15度ずつステップ回転することができます。壁などを配置するときに使います。
![](https://assets.st-note.com/production/uploads/images/132808823/picture_pc_53455dccb7228362cf6e46e584c0a473.gif?width=800)
その他の操作
他のソフトと同様に、操作を間違えた際はCtrl+Zでアンドゥ(元に戻す)、
Ctrl+Yでリドゥ(やり直す)が出来ます。
また、編集したシーンはCtrl+Sで上書き保存が出来ます。
グローバル軸とローカル軸
移動や回転は、基準軸を変えることができます。シーンビュー上の左から2番目のボタンで切り替えができます。Globalにすると、シーン全体の軸が基準となり、Localにすると、オブジェクトの向きが基準となります。
![](https://assets.st-note.com/production/uploads/images/131960573/picture_pc_1f4fa3dab022a5b4af51c627eacf1903.gif?width=800)
Inspectorに数値入力
「移動」「回転」「拡大縮小」は、ハンドルを操作するだけでなく、InspectorのTransform欄に直接数値を入力することもできます。
正確な値にしたい場合はこちらを使います。
Position、Rotation、ScaleそれぞれのX,Y,Zに値を入れると、各軸に対応した変形が行われます。
![](https://assets.st-note.com/production/uploads/images/131960720/picture_pc_8b19d9d8b93830b15a6923d14ce83480.gif?width=800)
オブジェクトの初期位置の設定
ここで1つ、設定しておいた方がいいことがあります。Cubeなどのオブジェクトを作成すると、初期設定では「Sceneビューの中心」に作られるため、最初からPositionに数値が入ってしましまいます。
![](https://assets.st-note.com/img/1709470735377-i5D6v71hmN.png?width=800)
様々な事情で、最初は原点(PositionのXYZが全て0)に作られた方が都合がいいため、設定を変更します。
Edit->Preferencesで設定ウィンドウを開き、Scene Viewにある「Create Objects at Origin」をONにしてください。
![](https://assets.st-note.com/img/1709470886714-TZS2ogQXKh.png?width=800)
これで、Cubeなどのオブジェクトを作ったとき、原点に配置されるようになります。
![](https://assets.st-note.com/img/1709470909795-6FQOcFFT29.png?width=800)
サンプルシーンの利用
さて、ここから本格的に「個展ワールド」のシーンを作っていきます。シーンは新規で作成することもできますが、今回はclusterサンプルプロジェクト内に予め用意されている、サンプルシーンを利用します。
ProjectウィンドウでAssets->CrusterVR->Scenesを開き、「MinimalSample」というシーンファイルを見つけてください。(Projectウィンドウはアイコンサイズを最小にすると見やすくなります)
![](https://assets.st-note.com/img/1709471141329-hxHd3sS7xR.png?width=800)
Assetsフォルダを右クリック->Create->Folderで新規フォルダを作り、好きな名前を付けます(ここでは「MyKoten」とします)
![](https://assets.st-note.com/img/1709471205055-nCVe1axfAI.png?width=800)
「MinimalSample」を選択してコピー(Ctrl+C)し、さきほど作成したフォルダを開いて貼り付け(Ctrl+V)します。その後、好きな名前に変えてください。(ここでは「KotenWorld」とします)
![](https://assets.st-note.com/img/1709471331449-4BZh5hy8tz.png?width=800)
名前を付けたシーンをダブルクリックして開きます。
![](https://assets.st-note.com/img/1709471356908-Y5wnEmAqWo.png)
個展ワールドのテストアップロード
サンプルシーンの説明
シーン内には、「System」「Environment」というオブジェクトがあり、それぞれ子にいくつかのオブジェクトがあります。
![](https://assets.st-note.com/img/1709471445744-atogBcswUG.png?width=800)
Systemの中には、clusterのワールドに最低限必要なものが入っていますのでそのまま利用します。(初期位置の設定など)
Environmentの中には、地面やライティング(照明)のサンプルデータが入っています。こちらは自分のオリジナルに作り変えるので、最終的には使用しません。
テストアップロードの準備
まず、本格的に作り込む前に、clusterへのアップロードが正常にできるかテストします。
このままでも問題ありませんが、何もないのも寂しいのでCubeを1つ作って配置してみましょう。
![](https://assets.st-note.com/img/1709471636018-CVEpcHjimH.png?width=800)
配置後、Unityの再生ボタンを押すと、ワールドをテスト歩行することができます。
![](https://assets.st-note.com/img/1709471700352-ACF62cnXBt.png)
(真ん中は一時停止ボタン、右はステップ実行ボタンですが、今回は使いません)
![](https://assets.st-note.com/img/1709471798100-r9GR5xCBgU.png?width=800)
操作はclusterのPC版と同様で、以下のようになります。
W/A/S/Dキーで前後左右移動
画面をマウス左クリックしたまま動かすと視点移動
スペースでジャンプ
正常に移動できたら、再生ボタンをもう一度押して停止します。
トークンの設定
clusterのワールドアップロード用のウィンドウを表示します。
メニューのCluster->ワールドアップロードを開いてください。
![](https://assets.st-note.com/img/1709472040614-tJqkKhUryY.png)
ここで、clusterアカウントとの接続の為、「トークン」(一時的なパスワードのようなもの)というものを使用します。
「Webでトークンを発行」を押すと、clusterのトークン発行ページが開きます。
![](https://assets.st-note.com/img/1709472125561-JAWggbc1Aj.png?width=800)
Creater Kit トークンの欄にある「トークン作成」ボタンを押すと、トークンの文字列が表示されますので、それをコピーします。
![](https://assets.st-note.com/img/1709472345831-zBMmwQM8JK.png?width=800)
Unityのワールドアップロードウィンドウの「アクセストークンを貼り付けてください」の下に貼り付け(Ctrl+V)し、「このトークンを使用」を押します。
![](https://assets.st-note.com/img/1709472419883-huXdP0gQwO.png)
ワールドアップロードウィンドウの表示が変わり、右上に自分のclusterアカウント名が出れば、接続成功です。
![](https://assets.st-note.com/img/1709472447153-7WYp9O95sn.png)
新規アップロード
ワールドアップロードウィンドウの左側には、過去にアップロードしたワールドが表示されます。最初は何もないので「新規作成」を押します。
ワールド名と説明を入力します。今はテストなので適当でOKです。
(最初は非公開設定でアップロードされます)
次に「画像の選択」を押して、サムネイル画像を設定します。こちらも後できちんと作ればよいので、適当なスクリーンショットなどを設定しておけばいいでしょう。
![](https://assets.st-note.com/img/1709472834314-ztEYRA7teD.png?width=800)
入力が終わったら、保存を押して、「◯◯としてアップロードする」を押します。(アップロードは少し時間がかかります。)
clusterでのテスト
ワールドのアップロードが終わると、自動的にWebブラウザでワールドの管理画面(マイコンテンツ)が開きます。
![](https://assets.st-note.com/img/1709473016942-SyZTgMA9qK.png?width=800)
右にある「︙」->情報を編集をクリックするとワールド名や説明文、カテゴリなどを編集できます。
![](https://assets.st-note.com/img/1709473095010-YqSpgv8OXn.png?width=800)
![](https://assets.st-note.com/img/1709473185014-45R4kQLyc7.png)
今回は、このままテストとしてワールドを訪れてみましょう。
「ワールドに入る」を押し、次の画面で「clusterを起動」を押します。
![](https://assets.st-note.com/img/1709473273634-S2BYW3Yy00.png?width=800)
clusterが自動起動しない場合は、自分でスタートメニューやデスクトップなどからclusterを実行してください。また、すでにclusterを実行していて、他のワールドにいる場合は、一度「退出」すると、自分のワールドに遷移します。
![](https://assets.st-note.com/img/1709473416882-AilL19bwCT.png?width=800)
テストアップロードしたワールドに行けましたでしょうか。ここまで出来れば下ごしらえは完了です。
展示会場の制作
サンプル背景の非表示化
今使用したシーンには、最初からサンプルとして、チェック柄の床が置かれています。これらは使用しないため、非表示にしておきます。
HierarchyウィンドウでEnvironmentを選び、Inspectorウィンドウ左上のチェックボックスをオフにします。これで非表示となります。
(※正確には非表示でなく、機能として「無効(非アクティブ)」になっています)
![](https://assets.st-note.com/img/1709473562547-KO7MNRr7Ou.png?width=800)
ついでに、テスト用に作ったキューブも削除しておきましょう。Hierarchyで選んでDeleteキーで消せます。
![](https://assets.st-note.com/img/1709473659421-fqcCiFH7oQ.png?width=800)
床の配置
まずは床を配置します。Hierarchyの「+」から3D Object->Planeを選びます。
Planeとは、「厚みのない板」です。裏表があり、裏から見ると透明です。
![](https://assets.st-note.com/img/1709473698810-Y9bQ456Y7a.png?width=800)
配置したら、拡大縮小を行って、好みの広さになるよう調整します。Sceneビューのグリッド1マスが1mです。Planeは初期状態で10m四方の大きさです。今回はこのまま使います。
位置は、初期位置(XYZが全て0)のままで問題ありません。
壁の配置
次に壁を配置します。壁も、床と同様にPlaneを使います。床オブジェクトをコピーペーストしてもいいですし、「+」ボタンから作っても問題ありません。(ちなみに、Ctrl+C・Ctrl+Vによるコピペのほか、Ctrl+Dで複製できることを覚えておくと便利です)
![](https://assets.st-note.com/img/1709473889796-3RAhrfjmSb.png?width=800)
壁用のPlaneを4つ用意し、サイズ、位置、向きを調整して床の四方に配置します。端にぴったり合わせようとすると隙間ができることがあるので、やや交差する形で問題ありません。Planeは裏から見ると透明なので、不透明な面が内側に向くよう注意してください。
![](https://assets.st-note.com/img/1709475669687-X7DT2R7weg.png)
壁を配置するため、90度回転したい場合は、Ctrlキーを押しながら回転ハンドルを動かすと便利です。(Inspectorで数値入力しても問題ありません)
厚みのある壁の場合
今回、部屋の周りにのみ壁を配置したため、Planeしか使っていませんが、裏にも回り込めるように「厚みのある壁」を置きたい場合は、Cubeを使用します。
Cubeを平べったい形に拡大縮小し、壁として配置してください。(Cubeの初期サイズは、1mです)
![](https://assets.st-note.com/img/1709474753413-fBhhvhGx9b.png)
天井の配置
床、壁ができたので天井を付けます。これは床を複製して移動し、ひっくり返す(180度回転する)と楽でしょう。
![](https://assets.st-note.com/img/1709474850107-wxmc8E25VI.png)
空が見えるような会場にしたい場合は、天井なしでも面白いですね。
柱の配置
一応部屋は出来ましたが、少し飾りっ気を出したいので、四隅に柱を配置してみます。
柱は、Cubeを縦に伸ばしたものを配置します。壁に少しめり込むような形で置きましょう。
![](https://assets.st-note.com/img/1709475864503-hBTCV654fA.png?width=800)
部屋のレイアウトについて
今回の部屋は一例なので、部屋の広さや壁のデザインなどは、個展の雰囲気に合わせて好きにアレンジして問題ありません。(床は歩くために必要なので忘れないようにしましょう)
![](https://assets.st-note.com/img/1709476328468-ZKeEBi57q0.png?width=800)
![](https://assets.st-note.com/img/1709476489317-3S24QUny8S.png?width=800)
もちろん、blenderなどの3DCGソフトを使えば、もっと自由に部屋の形を作れます。それらを使える方は、挑戦してみてもいいでしょう。
(今回の記事はUnityのみで作る方法の紹介なので、Unityで作れるオブジェクトの組合せのみで構成しています。)
部屋オブジェクトの整理
さてここで、Hierarchyウィンドウを見てみると、PlaneやCubeがずらっと並んでいて、どれがどれやら分かりにくいです。
![](https://assets.st-note.com/img/1709476780527-m5BlNHFWzP.png)
作ったオブジェクトには適宜名前を付けます。Hierarchyで選択し再度クリックするか、F2キーを押すと名前の変更ができます。
(複数のオブジェクトを選び、Inspector上部の名前欄から一括変更もできます)
オブジェクトの名前は、半角英数字とアンダーバーのみとしてください。とりあえず、「Floor」「Wall」「Ceiling」「Pillar」などと付けておけばいいかと思います。
![](https://assets.st-note.com/img/1709476928903-tjqSjlewqy.png)
そして、これらを選択しやすくなるために1つのグループにまとめます。
「+」ボタンから「Create Empty」を選んでください。Hierarchyを見ると、「GameObject」というものが出来てるかと思います。ただし、Sceneビューを見ても何も表示されません。「GameObject」を選択すると、移動や回転、拡大はできます。
![](https://assets.st-note.com/img/1709477024987-Y1R99NMH4r.png?width=800)
「Create Empty」は、中身がなにもない、位置情報(Transform)のみを持つオブジェクトを作る、という意味です。(Nullと呼ばれることもあります)
色々使い道はありますが、今回はグループのようにまとめるために利用します。
名前を変え(例「Room」)、部屋のオブジェクトを選んでその上にドラッグ&ドロップすると、そのオブジェクトの子階層に入ります。これにより、親オブジェクトを選択して一括移動したり、Hierarchy上で畳んだりすることができるようになりました。
![](https://assets.st-note.com/img/1709477321603-wZyZNbkcuU.png?width=800)
マテリアル(色、質感)の設定
床や壁の色を、現状の白色から変えたい場合は、「マテリアル」というものを設定します。マテリアルとは、3Dオブジェクトの色や模様、質感(つるつる、ざらざらなど)を設定するものです。
まず、適用したいマテリアルを新規作成します。ProjectウィンドウのMyKotenフォルダの下に「Materials」フォルダを作りましょう。
そして、その中で右クリック->Create->Materialを選んでください。作られたマテリアルにはわかりやすい名前をつけておきます。(例えば「mat_wall」「mat_floor」「mat_ceiling」「mat_pillar」など)
![](https://assets.st-note.com/img/1709560670474-QTcliMlpVK.png)
作ったマテリアルを選ぶと、Inspectorに色々な設定項目が現れますが、今回はとりあえず色のみ設定します。一番上のAlbedoという項目で色を変更できます。
![](https://assets.st-note.com/img/1709477571151-7Xgj13AMpF.png)
マテリアルの適用
作ったマテリアルを部屋のオブジェクトに適用するため、ProjectウィンドウからSceneビュー内のオブジェクトへドラッグ&ドロップします。
![](https://assets.st-note.com/production/uploads/images/132824297/picture_pc_034b639687c077736d7afab23bfbddf6.gif?width=800)
マテリアルを複数のオブジェクトに一括指定する場合は、オブジェクトを複数選んだ状態でInspectorのMesh Rendererの中にあるMaterialsをひらき、その中にドラッグ&ドロップします。
![](https://assets.st-note.com/img/1709477808234-sfP2X2kfV0.png?width=800)
イラスト作品の配置
プロジェクトへのインポート
あらかじめ用意した作品画像を使うには、Unityに取り込む必要があります。
ProjectウィンドウのMyKotenフォルダに作品画像を置くフォルダ(例:「Illustrations」)を作り、その中に画像をドラッグ&ドロップします。
![](https://assets.st-note.com/img/1709478101518-moazrDhqGc.png?width=800)
画像がUnity内に取り込まれ、素材として使えるようになりました。
![](https://assets.st-note.com/img/1709478125986-rUFgBweN30.png)
作品用オブジェクトの用意
作品画像を飾るオブジェクトとして、Planeを使用します。飾りたい作品の数だけ、Planeを作成して並べてください。サイズはまだ適当で問題ありません。
![](https://assets.st-note.com/img/1709479768339-YoJcoj0EwQ.png?width=800)
Plane1つ1つに、作品画像をドラッグ&ドロップしていきます。
すると、画像と同じフォルダにMaterialsフォルダができ、自動的に画像が貼られたマテリアルがオブジェクトに設定されます。
![](https://assets.st-note.com/img/1709479826416-6vNAnTVGcL.png?width=800)
作品の縦横比に合わせる
次に、Planeの縦横比を作品に合わせます。
Windows標準のエクスプローラで作品画像を右クリック->プロパティを開き、詳細タブで幅と高さを確認します。
![](https://assets.st-note.com/img/1709479897870-7QID3eRg2G.png)
Planeを選択し、InspectorウィンドウのScale値に確認した値を入れます。画像の幅(横px)はScale X、高さ(縦px)はScale Zに対応しています。
そのままだと大きすぎる(数千mになってしまう)ので、小数点以下にいれるといいです。(例:横3728px => Scale Xに0.3728)
厚みがないため、Scale Yは関係ありませんが、とりあえず「1(Scale初期値)」にしておきましょう。
![](https://assets.st-note.com/img/1709480003571-K7jyP7g7zf.png?width=800)
縦横比を合わせたら、拡大縮小ハンドルの中心を掴み、等比拡大縮小して好きな大きさに調整しましょう。
作品画像を配置
大きさがちょうどよくなったら、壁の近くに移動・回転して配置します。
![](https://assets.st-note.com/img/1709480288885-OVRSeacv0s.png?width=800)
このとき、壁にピッタリ重なるように置くとチラついてしまうので、わずかに(1cm程度)浮かせるくらいがちょうどいいです。
(デジタル空間なのを活かして空中に浮かせても面白いですね!)
作品オブジェクトの整理
部屋オブジェクトと同様に、作品を貼り付けたPlaneオブジェクトに名前をつけ、Create Emptyから作れる空オブジェクトにまとめておきましょう。(名前は例えば「IllustPlane」「IllustGroup」とかでいいでしょう)
![](https://assets.st-note.com/img/1709480353246-TPxHBXnA88.png)
テストと配置調整
見え方のテスト
ここで一度、シーンを再生して歩いてみましょう。プレイヤー視点でみると、サイズ感や見え方の違いに気づくことがあります。
![](https://assets.st-note.com/img/1709480399381-jPInpX6ymj.png?width=800)
プレイヤー初期位置の調整
イラストを配置した場所によっては、プレイヤーの開始位置が合ってない場合があると思います。初期位置・方向の調整の仕方を紹介します。
サンプルシーンに最初からあったSystemというオブジェクトの下を開き、SpawnPointEntranceというオブジェクトを見つけます。
![](https://assets.st-note.com/img/1709480439977-iSx0mLQy8N.png?width=800)
この緑の球体がプレイヤーの初期位置、赤いラインが向いている方向となります。これらの位置を向きを変えれば、初期位置を変更できます。
今回、できれば作品に向いてスタートしたいので、今回は以下のように調整しました。
![](https://assets.st-note.com/img/1709480553462-b3cNORNUjI.png?width=800)
再生中の編集について
ここで1つ注意点があります。実際にプレイヤー視点で確認すると、もう少しイラストの位置を調整したい、とか壁の高さを変えたい、とか出てくるかと思います。
しかし、再生中に移動や拡大縮小をおこなった場合、再生を止めると元に戻ってしまいます。これはUnityの仕様です。
どうしても再生中の調整を保持しておきたい場合は、InspectorウィンドウのTransform欄を右クリックして、Copy->Componentでコピー、再生を止めた後に、再度Transform欄を右クリック->Paste->Component Valuesとすると、再生中にコピーした値を貼り付けることができます。
![](https://assets.st-note.com/img/1709480598938-ElEo4nlbZU.png)
![](https://assets.st-note.com/img/1709480618621-AZAs19wd3B.png)
ただし、この方法でコピーできるのは1つオブジェクトだけです。複数のオブジェクトの調整を保持して置きたい場合は、スクリーンショットなどを取っておいたほうが楽な場合もあります。
ライティング設定
ここまでで、とりあえず一通りの要素は配置しました。ここから「見た目を良くする」ためにライティング設定をしていきます。
ライト種類の説明
Unityで配置できるライトには以下のような種類があります。
Directional Light・・・平行光源。太陽光のように遠くから直線的に照らす光源です。
Point Light・・・点光源。豆電球のように1点から球状に広がる光源です。
Spotlight・・・スポットライト。その名の通り、スポットライトのように円錐形に範囲を絞った光源です。
Area Light・・・エリアライト。蛍光灯や光るパネルのような面積のある光源です。
今回は「イラスト展」の雰囲気を表現するため、Spotlight(スポットライト)を主に使用します。
(雰囲気によっては他のライトに置き換えても問題ありません)
ライトの作成と配置
ライトも、Planeなどと同様にHierarchyの「+」ボタンから作ります。
「+」->Light->Spotlightからライトを作ったら、作品を照らすちょうどいい位置に配置してみましょう。
![](https://assets.st-note.com/img/1709563730810-vFQT6Gscsn.png?width=800)
![](https://assets.st-note.com/img/1709563772591-D69VtftVSZ.png)
ライトについては、移動と回転の他、InspectorのLight欄にある項目も調整します。
Type・・・ここから他の種別のライトに変更できます。今回は「Spot」のまま使います。
Range・・・ライトが届く距離を設定します。
Spot Angle・・・スポットライトの照射範囲(角度)を設定します。
Color・・・ライトの色を設定します。
Mode・・・今は「Realtime」でいいですが、後ほど変更します。
Intensity・・・ライトの強さです。1がベースで強くしたり弱くしたりできます。
Indirect Multiplier・・・ライトが壁などに反射したときの強さです。
ライトの色や強さなどは何度も繰り返し調整することになるので、現状は仮でいいです。とりあえず、RangeとSpot Angleを作品にしっかり当たる程度にしておきましょう。
![](https://assets.st-note.com/img/1709563885435-UOlAcVRqqx.png)
ライトの複製
1つライトが配置できたら、複製(Ctrl+D)して移動・回転し、他の作品にも当てます。
![](https://assets.st-note.com/img/1709563924045-K0grsIdTlm.png)
![](https://assets.st-note.com/img/1709564005815-W0RzJShAfN.png?width=800)
![](https://assets.st-note.com/img/1709564063025-vm86mQLV8a.png?width=800)
(これは一時的なものなので、調整できたらチェックを戻してください)
ライトベイクの準備
リアルタイムライトの制限
ライトを3つ以上配置すると、Sceneビューで正常に表示されないかと思います。これは、「リアルタイムライト」に制限があるためです。
![](https://assets.st-note.com/img/1709564005815-W0RzJShAfN.png?width=800)
「リアルタイムライト」とは、ゲームの実行中、「常に計算し続けるライト」という意味です。例えば、このシーン上でライトを動かしたり、壁を動かしたりしたとき、常に照らされ方が位置が変わりますよね。これは、実は毎秒(毎フレーム)照明計算が発生しており、負荷が結構かかってきいます。
また、リアルタイムの計算では、壁からの反射光などは省略されるので、どことなく安っぽい見た目にしかなりません。(最近のハイスペックなPCではリアルタイムでも反射計算ができたりしますが、モバイルなどはまだまだ厳しいです)
そこで、「ライトベイク」というものを利用します。
ライトベイクとは
ベイクとは「焼く」という意味です。トーストに焼き色をつけるように、壁や床に「ライトの当たり方」を予め焼き付けておくことで、ゲームプレイ中の計算は軽くしよう、というのがライトベイクです。
また、事前計算に時間をかけられるので、計算が重い反射光の表現も入れることができ、全体的にリッチな見た目にすることができます。
一方デメリットとして、ベイクしたライトや、照らされる壁などは、ゲーム実行中に移動させることはできません。今回は「展示会場」という動かない風景なので、ライトベイクに向いています。
メッシュ結合の準備
ベイクの前準備として、今バラバラのパーツ(メッシュ)で出来ている壁・床・天井のオブジェクトを1つに結合します。(結合しなくても出来ないわけではありませんが、処理負荷やワールド容量が大きくなる可能性があります)
そのため、「①準備編」で入手したMesh Baker Freeを利用します。これは、「バラバラのメッシュを1つに結合する」ツールです。
Mesh Baker Freeをプロジェクトに導入する為、メニューのWindowからPackage Managerを開きます。上部の「Packages: XXXXX」という部分を「Packages: MyAssets」にすると自分がアセットストアで入手したアセットの一覧が表示されます。
![](https://assets.st-note.com/img/1709564463025-J5id8hTJRw.png)
その中から「Mesh Baker Free」を選び、右下の「Download」を押し、ダウンロードが終わったら「Import」を押します。
![](https://assets.st-note.com/img/1709564526251-Zvagf17JfA.png?width=800)
「Import Unity Package」というウィンドウが開くので、全てチェックが入った状態で「Import」を押します。インポートが終わったらPackageManagerは閉じて問題ありません。
![](https://assets.st-note.com/img/1709564567897-JPikCtW2NC.png)
![](https://assets.st-note.com/img/1709565294531-a5tB4DjfPO.png)
(※フォルダ内のファイルを触る必要はありません)
MeshBakerによるメッシュ結合
Hierarchyの「+」からCreate Other->Mesh Baker->Mesh Bakerを選びます。
![](https://assets.st-note.com/img/1709566200912-kj0fRki6Kw.png)
(数字部分は場合により変わります)
作成された「MeshBaker (0)」を選択すると、Inspectorに色々設定項目が表示されます。しかし、今回使用するのは2点だけです。
![](https://assets.st-note.com/img/1709566340650-uQmqxl3BNX.png)
やることは以下の3ステップです。
「Drag & Drop Renders Or Parents Here To Add Objects To Be Combined」と書かれている場所に、部屋オブジェクトをドラッグ&ドロップ
下の方のLightmapping UVsを「Generate_new_UV2_layout」に設定
最下部の「Bake」ボタンを押す
![](https://assets.st-note.com/production/uploads/images/132932083/picture_pc_81de840987d69b6148fb55652c4b730f.gif?width=800)
すると、「CombinedMesh-MeshBaker (0)-mesh」、その子として「MeshBaker (0)-mesh-mesh」というオブジェクトができます。これが1つに結合されたメッシュです。
今後はこちらを利用するので、元の結合前のオブジェクトはInspector左上のチェックを外し、非表示にしておきます。「MeshBaker (0)」オブジェクトは使用しないので、選択して削除しておきます。
![](https://assets.st-note.com/img/1709566828889-PsWAXX6G6R.jpg?width=800)
ライトをベイク対象にする
シーンに配置してあるスポットライトを選択し、InspectorのModeを「Baked」に変更します。これにより、ライトがベイク対象になります。
![](https://assets.st-note.com/img/1709566934686-aYuNg3gzV4.png)
メッシュをベイク対象にする
結合した部屋オブジェクト、および作品オブジェクトをライトベイクの対象にします。それぞれ選択し、Inspector右上の「Static」横のチェックをONにすればOKです。
![](https://assets.st-note.com/img/1709567105448-GNRYQbaLBi.png?width=800)
![](https://assets.st-note.com/img/1709567122629-7cUhw3T3eb.png)
この場合は「Yes, change children」でOKです。
ライトベイクの実行
ここまででライトベイクの準備は完了です。ここから、実際にベイク・調整をしていきます。
ライトベイク(低クオリティ)の実行
Window->Rendering->Lightingでライトベイクに関わる設定ウィンドウが開きます。(縦長なのでInspectorあたりと同じタブに入れておくと見やすいです)
![](https://assets.st-note.com/img/1709567224143-Z3nFQU8wdc.png)
このウィンドウ一番下の「Generate Lighting」を押すとベイクが始まるのですが、初期設定だと処理が重く時間がかかりすぎるので、まずは低クオリティ設定に下げ、短時間で結果を確認できるようにします。
まず、Generate Lightingボタン横の「Auto Generate」のチェックはOFFにしておきます。これは、シーンに変更があるたびにベイクを自動実行するかどうかの設定です。
![](https://assets.st-note.com/img/1709567258550-MgiQ4RHoqi.png)
そして、低クオリティ設定にするため、以下のような設定にします。(適切な値はPCスペックによるので、これらは参考値です)
Lightmapper・・・Progressive GPU (Preview)にします。(デフォルトだとProgressive CPU)PCスペックによりますが、GPUのほうがクオリティは下がり、処理が早くなります。
Direct Samples / Indirect Samples / Environment Samples・・・4~8ぐらいに下げます
Lightmap Resolution・・・4~8くらいに下げます
Max Lightmap Size・・・512~1024くらいに下げます
![](https://assets.st-note.com/img/1709567568601-mKIsqslPXL.png)
これらを設定したら、「Generate Lighting」を押してベイクしてみましょう。PCスペックによりますが、処理完了まで数十秒~数分くらいかかるかと思います。(実行中、シーンのライトなどを動かすと再処理が走ります)
![](https://assets.st-note.com/img/1709567354765-y3B42oaeEG.png)
ライトベイク結果の確認、調整
ベイクが終わったら、Sceneビューの見た目を確認します。試しにライトを動かしてみると、壁の明るさが動かないことがわかると思います。これが「ライトがベイクされている」状態です。
![](https://assets.st-note.com/production/uploads/images/132933053/picture_pc_9871d191392b32de053d74eed0ddf5eb.gif?width=800)
この見た目で、ライトの位置や強さなどを調整していきます。クオリティ設定を下げているため、壁などにぶつぶつやノイズが出ていますが、ここでチェックしたいは「明るさ/暗さ」や「照らされている範囲」なので、それらが良いかどうかで判断します。
ライトが暗いなと思ったら、RangeやIntensityを少し上げてみましょう。作品の明るさは良くて、部屋が暗い場合は、IndirectMultiplierを少し上げてもいいかもしれません。もしくは、新たにSpotlightやPoint Lightを追加してもOKです。(追加する場合は、ModeをBakedにします)
![](https://assets.st-note.com/img/1709567915447-vqV4Pneov4.png?width=800)
調整したら、再度「Generate Lighting」を押してベイク結果を確認、これを繰り返して見た目を調整していきます。
調整の際、Window->Rendering->Light Explorerというウィンドウを開くと、シーン内のライト設定を一覧で確認・調整できるので便利です。
![](https://assets.st-note.com/img/1709568042476-X4VlDIlBfB.png?width=800)
メッシュの再調整
壁や柱などの配置を修正したい場合は、一度非表示にした「結合する前のオブジェクト」を編集します。結合した方のメッシュ「MeshBaker-mesh-mesh」は削除し、結合前メッシュのInspector左上にチェックを入れましょう。
結合前のメッシュを調整したら、再度MeshBakerを使ってメッシュを結合し、ライトベイクをおこなってください。
ライトプローブ、リフレクションプローブについて
ある程度調整ができたら設定を上げてベイクをするのですが、その前にライト関連で必要なライトプローブ、リフレクションプローブというものを配置します。それぞれ簡単にいうと以下の役割があります。
ライトプローブ・・・メッシュに焼き付けた「ライトの明るさ情報」を、空中の位置ごとに記憶させるものです。clusterのアバターなどの動く物体にベイクしたライトの明るさを反映するために必要です。
リフレクションプローブ・・・シーン内の反射する物体(金属など)に映り込む風景を記憶させる(焼き付ける)ものです。背景やアバターにツルツルした素材(マテリアル)が設定されてる場合に反映されます。
役割を細かく把握する必要はありませんが、「ライトベイクする際はとりあえずこの2つを置いておく」とだけ覚えておきましょう。
ライトプローブの配置
ライトプローブは、「+」ボタンのLight->Light Probe Groupから作成します。作成すると、8つ黄色い球体がセットになったオブジェクトが作られます。この球体はゲーム実行時は見えず、「ライトの情報を覚える位置」を表してます。
![](https://assets.st-note.com/img/1709568210658-6hiIEMOm1B.png)
作成したライトプローブを選択し、Inspectorにある「Edit Light Probes」を押し、ライトプローブの編集モードに入ります。
![](https://assets.st-note.com/img/1709568255184-tjMCUMtUyw.png)
すると、黄色い球体を選択できるようになるので、それぞれを選択、移動し、大体部屋の4隅あたりに配置してください。位置はだいたいで良いです。(壁の向こうや床下に配置しないよう注意)
![](https://assets.st-note.com/img/1709568358341-XARXc3AauJ.png?width=800)
そして、隅の2つどれかを選択して「Duplicate Selected」を押し、そのまま移動して中心あたりにも配置します。このDuplicate Selectedと移動を繰り返し、ある程度部屋の内部に配置すればOKです。
![](https://assets.st-note.com/production/uploads/images/132933661/picture_pc_db8cfec91413bbabefdfc6ccd7c3199b.gif?width=800)
![](https://assets.st-note.com/img/1709568558411-6GHMMl2vBu.png?width=800)
リフレクションプローブの配置
リフレクションプローブは、「+」ボタンのLight->Reflection Probeから作成します。作成したら、だいたい部屋の中心、目線の高さあたり(壁がある場合は、めり込まない位置)に移動させます。
![](https://assets.st-note.com/img/1709568627758-sTW04jF7dj.png?width=800)
また、InspectorのBox Sizeを編集して表示される枠線が部屋を囲うようにします。(反射する情報をどの範囲まで有効にするかの設定です)
![](https://assets.st-note.com/img/1709568722354-jPofY9HVH2.png?width=800)
ライトベイク(高クオリティ)の実行
プローブを配置したら、ライトベイクの設定を上げていきます。とりあえずはProgressive GPUのままで、数値だけ上げるのがいいでしょう。
上げれば上げるほど綺麗にはなりますが処理時間がかかる為、ある程度トレードオフとなります。とりあえずは以下のような初期値が目安になるでしょう。
Direct Samples / Indirect Samples / Environment Samples・・・それぞれ32 / 512 / 256
Lightmap Resolution・・・40
Max Lightmap Size・・・初期値の1024のままでもいいですが、2048に上げることでもノイズが減ります。
数値を上げてベイクすると、見た目が思っていたのと違う場合も出てきます。その場合は再度ライトの強さなどを調整してください。
![](https://assets.st-note.com/img/1709645828010-o53IxRi3Xu.png?width=800)
↑のように、イラストと壁の間に影が出すぎる場合もあります。この場合は、イラストのPlaneを、壁にくっつかない程度まで近づけると影が少なくなるようです。
![](https://assets.st-note.com/img/1709646340708-7G8Q3szVVt.png?width=800)
![](https://assets.st-note.com/img/1709648056951-2HY1nFrXfD.png?width=800)
ある程度満足する見た目になったら、Lightmapperを「Progressive CPU」に変えてベイクすると、もう少し綺麗な見た目になります。
ただし、かなり時間がかかる(スペックによりますが、1時間以上かかることもあります)わりに結果の違いがわかりにくい(コスパが悪い)こともあるので、Progressive GPUでのベイク結果で止めておく、という判断もアリだと思います。
テスト実行と仕上げ
コリジョンの設定
現在の状態でUnityを再生すると、プレイヤーが延々に地面に落ち続ける変な挙動になります。これは、床の当たり判定(コリジョンと呼びます)が消えてしまっているのが原因です。
元々、メッシュ結合前の床や壁は、PlaneやCubeにコリジョンが設定されていたため、そのまま床に落ちたり壁をすり抜けたりしないようになっていましたが、Mesh Bakerで結合した後はコリジョンが消えてしまっています。
コリジョンの付け方はいくつかありますが、ここではシンプルな方法を紹介します。Mesh Bakerで結合したオブジェクト(MeshBaker-mesh-mesh)を選択し、Inspectorにある「Add Component」を押し、「Mesh Collider」を選んでください。(ボタン押した後、上部の検索ウィンドウに「mesh」と入れるとすぐに見つかります)
![](https://assets.st-note.com/img/1709649028788-8z61SxO4q6.png)
これで、メッシュの形状と同じコリジョン(当たり判定)が設定されました。シーンを再生すると、プレイヤーが落下しなくなっていると思います。
AnisoLevelの設定
プレイヤー視点で確認したとき、以下のような問題も出てきます。
「大きいイラストに近づいて見上げると、遠い部分のイラストがボケてしまう」
これは、テクスチャを斜めに見た際の圧縮処理(異方性フィルタリング)が入ってるのが原因です。
![](https://assets.st-note.com/img/1709649153773-MavFink59N.png?width=800)
これを直すには、Projectウィンドウで画像ファイルを選び、Inspectorの「Aniso Level」を2(デフォルトは1)にあげて「Apply」を押せばOKです。
![](https://assets.st-note.com/img/1709649285992-pVr6hgaD7I.png)
![](https://assets.st-note.com/img/1709649378706-termOc7ogN.png?width=800)
ただし、表示負荷に影響がある可能性があるので、もしclusterでみたときに表示がカクつくようなら、1に戻した方がいい場合もあります。
照明オブジェクト(飾り)の配置
これでほぼ完成ですが、オマケとして照明風のオブジェクトを配置してみます。現在は、部屋にライトは設定されているものの、どこから照らされてるか?謎な見た目です。そこで、天井に照明風のオブジェクトを置くと、現実感が増します。
作り方は何でもいいですが、今回は円柱(「+」から3D Object->Cylinder)を使ってみます。Cylinderを作ったらCeilingLightObjectと名付け、ProjectウィンドウでMaterialを新規作成し、mat_ceilinglightとし、オブジェクトに割当てます。
![](https://assets.st-note.com/img/1709649840213-hya8hY4Mad.png?width=800)
![](https://assets.st-note.com/img/1709649730804-cLqBrE7lDo.png)
照明風オブジェクトを光ってるように見せるため、マテリアル「mat_ceilinglight」のEmissionにチェックをいれ、その下のColorに白色を設定します。これで、このオブジェクトが発光して見えるようになります。
![](https://assets.st-note.com/img/1709649966821-BTYVgRDhFE.png)
あとは、天井のちょうどいい位置に配置してみましょう。1つ配置したら、複製(Ctrl+D)していくつか配置すれば、完成です。
![](https://assets.st-note.com/img/1709650265091-s9HoY27kMh.png?width=800)
![](https://assets.st-note.com/img/1709650316376-4hu0L3kXwl.png?width=800)
配置したCelingLightObjectのstaticにチェックをいれ、ライトベイクを実行すると、オブジェクトの周りにもうっすらライト効果が入るようになります。
(数が多くなる場合は、MeshBakerで壁と結合してもいいでしょう)
![](https://assets.st-note.com/img/1709650419690-CtWJf11wO7.png?width=800)
サムネイル画像の撮影
展示会場のビジュアルが出来たので、ワールドのサムネイル用にスクリーンショットを撮影する方法を紹介します。
Mesh Bakerをインストールしたときと同様に、Window->PackageManagerを開きます。そして、上部のリストから「Packages: Unity Registry」を選びます。(これは、Unityに最初から登録されているパッケージのリストです)
![](https://assets.st-note.com/img/1709650561147-Xq4BDBzXMW.png)
右上の検索ウィンドウに「rec」などと入れて、「Recorder」といパッケージを探してください。見つけたら、右下の「Install」ボタンでインストールします。
![](https://assets.st-note.com/img/1709650622068-JvUigDMfAx.png?width=800)
RecorderをインストールしたらPackage Managerは閉じ、Window->General->Recorder->Recorder Windowを開きます。
Unityを再生し、Recorderウィンドウにて以下のように設定します。(Recorderは動画もとれますが、今回は静止画を撮影する想定の設定です)
Exit Play Mode・・・オフ
Recording Mode・・・Single Frame
![](https://assets.st-note.com/img/1709650848889-YbSSx7IQih.png)
また、左の「+Add recorder」を押し、「Image Sequence」を選びます。
するとさらに設定項目が出てくるので、以下のように設定します。
![](https://assets.st-note.com/img/1709650875032-6OHvIBJDnB.png)
Source・・・Game View(Gameビューの見た目を撮影します)
Output Resolution・・・FHD-1080p(撮影解像度なので用途によって選択ください)
Media File Format・・・JPGでもいいですが、出力後の加工を考慮するとPNGがいいでしょう。
Output File・・・デフォルト設定のままで問題ありません。Pathの下に出力先が書かれていますので、把握しておきましょう。
![](https://assets.st-note.com/img/1709650943291-gmymfMgf17.png?width=800)
設定ができたら、Gameビューを操作し、撮影したいアングルを映します。Gameビュー上部左から3番目のリストが「Free Aspect」になっている場合は「16:9 Aspect」にすると比率が分かりやすくなります。
![](https://assets.st-note.com/img/1709651029472-OFf6AlVLYl.png?width=800)
良いアングルを見つけたら、Recorderウィンドウ左上の「START RECORDING」を押すと撮影されます。Projectウィンドウの適当な場所で右クリック→Show in Explorer(Macでは Show in Finder)を押すとエクスプローラが開くので、プロジェクト名のフォルダにある「Recordings」フォルダを開くと、そこに撮影された画像が保存されています。
![](https://assets.st-note.com/img/1709651140273-u1gKZwE4ZK.png?width=800)
「ワールドアップロード」ウィンドウの「画像の選択」から、撮影した画像を選びましょう。(Photoshopなどで加工したり文字をいれても良いと思います)
![](https://assets.st-note.com/img/1709651176994-BcG7mEIaGO.png?width=800)
clusterアプリでの確認
最初の方で試した手順と同様に、「〇〇としてアップロードする」を押してアップロードしましょう。
アップロードが終わったら、ブラウザでワールド管理画面が開くので、そこからclusterアプリでワールドを開き、見た目を確認しましょう。調整したい点があればUnityで調整→アップロード→確認というプロセスを繰り返します。
![](https://assets.st-note.com/img/1709651577449-pby1oWAP3I.png?width=800)
公開設定
調整が終わったら、ブラウザのマイコンテンツ画面(ワールド管理画面)でワールド名や説明文、カテゴリを編集します。
![](https://assets.st-note.com/img/1709651665511-8FNwl2L2fY.png)
すべてを満足いくまで完了したら、「公開する」を押すと全世界に公開されます!(公開後も編集したり、非公開に戻したりすることもできます)
![](https://assets.st-note.com/img/1709651740453-wsHmDWdJzR.png?width=800)
終わりに
これにてシンプルなcluster個展ワールドの作成手順は完結となります。
ぜひ皆さんも、オリジナルのワールド作りにチャレンジしてみてほしいと思います。
質問や記事の間違いなどがありましたら、X(Twitter)やコメントなどでお気軽にご連絡ください。
おいおい、さらにカスタマイズを加える「③応用編」の記事も書こうかと思います。しばらくお待ち下さい!
この記事が気に入ったらサポートをしてみませんか?