![見出し画像](https://assets.st-note.com/production/uploads/images/117473247/rectangle_large_type_2_aa95868fb06c0f9ba21aada849968018.png?width=1200)
UnityでVRゲーム製作!XR Interaction Toolkit ソケットにはめる編
どうも皆様 Hello world!
Unityでゲームを作っております、天野スズランと申します。
Unityの「XR Interaction Toolkit」でVR開発をする方法を書いていきたいなぁと思ってますので、皆様どうかお付き合いください。
今回やること
今回は、ソケットに対し、手に持っているアイテムをはめられるようにしていきたいなと思います。
ただ、そう言われてもイメージつきにくいですよね。
なのでもうちょっと具体的に、バッテリーをソケットにはめることを目的にしてみます。
![](https://assets.st-note.com/img/1699706564086-EXvT83JWVB.png)
なお、この記事は物を持つ編を見ていることが前提となります。
まだ見ていない方は、そちらもご覧ください。
アセットをインポート
今回は無料アセットを一つ使わせてもらっています。
「SCI-FI Barrels 40 Sample」というもので、カジュアルな SF っぽい感じの筒のアセットです。
それをはめる用のソケットもついてくるので、今回はそれを使わせてもらいます。インポートしておいてください。
バッテリーを作る
では、さっそく作っていきましょう。
まずは、バッテリーから。
バッテリーの配置
今回はインポートしたアセットの「Barrel_StandardS」をバッテリーに見立てようかと思います。
![](https://assets.st-note.com/img/1697373889639-wREBh3pFeW.png)
え?乾電池の方が形が近いって?まあ誤差です誤差。
Assets -> SCI-FI_Barrels_40 -> Sample にありますので、Hierarchy 上にドラッグアンドドロップします。
名前を「Battery」に変えておくと分かり易いと思います。
![](https://assets.st-note.com/img/1698853277732-4VBH2ja2Du.png?width=1200)
倍率の変更
しかしこのバッテリー、かなりデカいです。1mくらいあります。
なので、持ちやすいよう、Scale を 0.2 くらいにしておきましょう。
Inspector -> Transform で設定可能です。
![](https://assets.st-note.com/img/1697377409099-zHQTJ9N2qv.png)
持てるようにする
配置できたら、次は手で持てるようにしておきましょう。
上記の記事を参考に、XRGrabInteractable などを設定してみてください。
なお、当たり判定に関しては Sphere Collider より Capsule Collider を使った方が形を合わせやすいかと思います。
![](https://assets.st-note.com/img/1697672272704-qlbSyajsVE.png)
持つ位置の変更
また、初期状態だとバッテリーの底の方を持ってしまって操作しにくいので、持つ位置を変えておきましょう。
新しくBattery の子供に空のオブジェクトを作ります。
名前は「GrabPos」と付けておきました。
![](https://assets.st-note.com/img/1698849144390-crJSbLJYJy.png)
そして、その GrabPos をバッテリーの中央に移動しておきます。
Position の Y を 0.5 にしておくと丁度良い感じです。
![](https://assets.st-note.com/img/1697676400047-PWmGwthPoI.png?width=1200)
Position 0.5 にも 0.2 が掛かって、 0.1 になります。
そして、その GrabPos を XR Grab Interactable の Attach Transform に設定すると、持った時の位置を変えられます。
![](https://assets.st-note.com/img/1698766558546-5sgvP36Nl3.png)
ソケットを置く
次に、バッテリーをセットするソケットを作っていきます。
配置
インポートしたアセット内に丁度良いオブジェクトがあるので、それを使いましょう。
![](https://assets.st-note.com/img/1698941468440-Lug6D0BbrY.png)
_SCI-FI_Barrels_40_Sample -> Prefabs にある、「Barrel_HolderS」を、Hierarchy 上にドラッグアンドドロップします。
分かり易いよう、名前を「Socket」に変えてあります。
![](https://assets.st-note.com/img/1698855396888-exHTQr659k.png?width=1200)
倍率指定と位置
それから、バッテリーと同様こちらも大きすぎるので、Scale を 0.2 にしておきます。
場所は、まあとりあえずバッテリーの隣にでも置いておきましょう。
私は、 Box を作ってその上に配置してみました。
![](https://assets.st-note.com/img/1698942898762-MBbk4fwF3s.png)
バッテリーをはめられるようにする
次は、ソケットをソケットとして機能するようにしていきます。
なお、以下でやり方を解説してますが、手の時と大体同じです。
ソケットが手のようになっていて、何かを持つことができる、と考えると、イメージがつきやすいかもしれないです。
まず、Socket オブジェクトに、「XR Socket Interactor」をアタッチします。
Add Component から Socket とでも検索すれば出てきます。
![](https://assets.st-note.com/img/1699103910726-WqLlt0dppp.png)
次に、当たり判定を追加します。
この当たり判定の範囲が、Socket が物を持つ範囲となります。
まず Add Component から、Box Collider をアタッチしましょう。
そして、Is Trigger のチェックを付けます。
次に、サイズを調整します。
多分最初から Socket の大きさになってると思いますが、なっていない場合は調整しましょう。
Inspector の Edit Collider と書いてある横の ボタンを押すと、コライダーが調整できます。
![](https://assets.st-note.com/img/1699113269156-oIFacgHcOS.png)
Socket 全体を覆うようにしてみました。
持つ位置を変更する
これで、ソケットにバッテリーが付くようにはなりました。
が、バッテリーは、持つ位置を変更してますよね。
なので、持つ位置と持たれる位置が合わなくなっています。
![](https://assets.st-note.com/production/uploads/images/120819015/picture_pc_96237590e0cc418cf65f3dc07dbcdcef.gif)
ソケットの当たり判定に接触させてます。
ずいぶん下の方にはまってます。
Battery でやったように、Socket でも持つ位置を調整しましょう。
Socket の子供に空のオブジェクトを作りました。名前は「GrabPos」と付けてみました。
![](https://assets.st-note.com/img/1699114924406-iI8tpBOiLr.png)
位置は、やはり真ん中あたり。
具体的には、Y = 0.5 にしてみました。
![](https://assets.st-note.com/img/1699115126196-HHgNTT5BW2.png)
そして、その GrabPos を、Inspector の Attachi Transform に設定します。
![](https://assets.st-note.com/img/1699115443793-XmhSVHa11x.png)
そうすることで、以下のように丁度良い位置にはまってくれるはずです。
![](https://assets.st-note.com/img/1699115798335-6NHHs213KT.png)
ランプを光らせる
これで、ソケットにはめることはできたのですが、はめられるだけです。
ゲームに出しても、だから何だと言われてしまいますから、ちゃんと動作するようにしてみましょう。
その目標として、ランプを光らせてみます。
応用すれば、ドアを開くとか、ドアを開けるとか…あと思いつかないですけど、ドアを開放するとかできると思います。
ランプオブジェクトの準備
まず、ランプオブジェクトを用意します。
といっても、Light コンポーネントで光らせてもめんどくさいわかりにくいので、黒い球体が赤くなる程度のものを目指します。
![](https://assets.st-note.com/img/1699558770850-P4cj8uoPgq.png?width=1200)
まず、明るい状態のランプを用意していきます。
Hierarchy 上で右クリックし、3D Object -> Sphere を選択することで、球体を作ります。
名前を RedSphere としておきました。
![](https://assets.st-note.com/img/1699558420555-IYYPUtffnT.png)
その球体の Transform の Scale を操作し、程よい大きさにしておきます。
私は、X,Y,Z それぞれに 0.1 を入れてみました。
それから、Project タブ上で右クリックし、Create -> Material でマテリアルを作ります。
そして、マテリアルの Inspector の Albedo から、色を赤に変えておきます。
また、名前も分かり易いように Red に変えておきます。
マテリアルは、Project タブから Inspector 上のオブジェクトへドラッグアンドドロップをすると、適応できます。
![](https://assets.st-note.com/img/1699559007717-WcNkQeQpFS.png)
上記手順を繰り返すか、複製をするかして、今度は黒の球体を作ります。
今度は BrackSphere と名付けました。
同様に、黒いマテリアルも作ります。名前を Brack と付けたうえで、BrackSphere に適応します。
赤と黒の球体がそろったところで、初期状態では暗くなった状態にしておきます。赤い球体を非表示にしておきましょう。
赤い球体を選択し、Inspector から、名前の横にある有効化のチェックを外します。
それから、これは必須ではないのですが、台座となる Base を Cylinder で作ったのと、それらを子供にしてひとまとめにしておくための Lamp を空のオブジェクトで作成してあります。
![](https://assets.st-note.com/img/1699655717371-Go88ZdIlql.png)
Socket の関数に設定
ランプのオブジェクトが用意できたら、次は Socket の関数に設定します。
対象の関数は、Socket の Inspector の XR Socket Interactor -> Interactor Event -> Select の中にある Select Entered と Select Exited です。
Entered が電池をはめた時、Exited が電池を外した時です。
![](https://assets.st-note.com/img/1699657573116-GforSwQbsw.png)
はめた時は赤い球体を表示し、外したときは黒い球体を表示したいので、以下のように動くようにすれば、それらしく見えるはずです。
はめたとき
・黒い球体を非表示にする
・赤い球体を表示する
外した時
・黒い球体を表示する
・赤い球体を非表示にする
まず、はめたときの設定をしていきます。
Select Entered の + ボタンを2回押します。2つ出てきた設定項目に、それぞれ RedSphere と BrackSphere を設定します。
関数を指定するところ(No Function という表示になっているかと思います)に、GameObject -> SetActive (bool) を指定します。
チェックが付いていれば表示する、外れていれば非表示にするので、BrackSphere はチェックを外し、RedSphere はチェックを付けておきます。
同じように、外した時の設定もしていきます。
Select Exited に、BrackSphere の表示と、RedSphere の非表示の設定をします。
![](https://assets.st-note.com/img/1699660424411-uSe7p7afR7.png)
確認
では、満を持してテストしてみます。
バッテリをつかんでソケットに近づけると、はめられることを示す青い表示が出てきますので、バッテリから手を放します。
そうすると、バッテリがソケットにはまり、赤いランプが付きます。
![](https://assets.st-note.com/production/uploads/images/121380252/picture_pc_2b6cad4e8b819324434fef501e8a3605.gif)
バッテリー以外がはまらないようにする
ランプはつきましたか?それはおめでとうございます。
けど残念、これで終わりではないのです。
今のままだと、持てる物なら何でもソケットにはめられてしまいます。
同じバッテリーなら良いですが、銃や剣や回復アイテムをはめてもランプがつくのでは困ります。
いかづちの剣やいかづちの銃、いかづちの回復アイテムにしたくないのであれば、バッテリー以外をはめられないようにしておきましょう。
剣オブジェクト用意
はめられないようにするオブジェクトとして、今回は剣を用意してみます。
適当に Cylinder と Box で形を作り、持てるようにしておきます。
![](https://assets.st-note.com/img/1699663848432-X78UjNcGAk.png)
とてもかっこいい剣が作れましたね。デュランダルと命名しましょう。
え?仰々しい?では、オブジェクトの名前は Sword でいきます。
この Sword をソケットにはめてみると、ソケットを貫通しながらはまってしまうほか、ランプが赤くなっているのでバッテリーとして機能してしまっています。
![](https://assets.st-note.com/img/1699664083957-0e5sUHtQ01.png)
何をはめても謎解きがクリアできるのなら、バッテリーを手に入れに行く必要がありません。
これでは困りますから、バッテリーしかはまらないようにしていきます。
Interaction Layer Mask の設定
理屈をすごくざっくり説明すると、オブジェクトに「バッテリー」属性を付け、その属性のオブジェクトじゃないとはまらないようにする感じです。
Battery オブジェクトの Inspector -> XR Grab Interactable -> Interaction Layer Mask を選択し、Add Layer をクリックします。
![](https://assets.st-note.com/img/1699665015061-Hgf0vTFCCy.png)
そうして出てきた Interaction Layers の User Layer 1 に「Battery」と入力しましょう。
![](https://assets.st-note.com/img/1699665120135-OGnGyfRb7U.png)
そうすると、Interaction Layer Mask に Battery が表示されますから、それを選びます。
この時、チェックが入っているものすべての属性が付いてしまうので、一度 Nothing ですべてのチェックを外してから、あらためて Battery を選択すると確かだと思います。
![](https://assets.st-note.com/img/1699665385138-eHRmKKkKHP.png)
同じように、Socket オブジェクトの XR Socket Interactor にも Interaction Layer Mask があるので、同様の方法で Battery だけにチェックが入った状態にしておきます。
![](https://assets.st-note.com/img/1699665917087-xWpat2owLM.png)
この状態で実験してみます。
![](https://assets.st-note.com/production/uploads/images/121439066/picture_pc_ce4fb5fb29c1e46c325ebf652b04385b.gif)
バッテリーはソケットにはめられますが、剣ははまらずに倒れていきます。
これで、一応はゲームに使える程度の知識にはなったんじゃないかと思います。
最後に
続きもそのうち上げていきたいです。次回は、VRゲームにおける銃の操作の考察を挟んで、「マガジンの残弾を取得する」の予定。
前回の投稿から、だいぶ長い期間が開いてしまいましたね。
私事として、就職して XR 部門の技術者になれたのはよいのですが、忙しくて記事を書けてませんでした。すみません。
note もそうですが、Youtube もぼちぼち復活させていきたいです。
それから、一応Vtuberやってますので、気が向いたらフォローしてやってください。
たまーにつぶやいて、ごく稀に配信してます。
Twitter:@Suzuran_Amano
Youtubeちゃんねる:スズランちゃんねる - YouTube
この記事が、あなたの開発の助けになることを祈っています。
この記事が気に入ったらサポートをしてみませんか?