[UE4]VRでWidgetから物を出してみる

[WordPress版](https://suihanki548930533.wordpress.com/2020/01/30/ue4vr-spawnactorfromwidget/)

<!-- wp:paragraph -->
<p>（UE4:4.24.1　Oculus RiftとTouch使ってます。）</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><a href="http://historia.co.jp/archives/5895/" target="_blank" rel="noreferrer noopener" aria-label="[UE4]Widget Interactionコンポーネントを使ってVRで触れるUIを制作してみる！ (新しいタブで開く)">[UE4]Widget Interactionコンポーネントを使ってVRで触れるUIを制作してみる！</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>こちらのブログを読んでみて、ふとWidget Interactionから物を出してみることはできないか、と思って作ってみました。</p>
<!-- /wp:paragraph -->

![VRWidgetTest ゲームプレビュー Standalone (64-ビット_PCD3D_SM5) 2020-01-24 22-52-14_Moment.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539108/eb0ed7a8-b7b2-514a-47a5-958f12061eae.jpeg)


[動画はこちらから](https://youtu.be/OFhqkP4TIl8)

<!-- wp:heading -->
<h2>作り方</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>WidgetからのSpawnに関してこちらのブログを参考にしました。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a rel="noreferrer noopener" aria-label=" (新しいタブで開く)" href="http://unrealbussan.hatenablog.com/entry/2017/03/04/220911" target="_blank">UE4:Widgetからドラッグアンドドロップでアクターをスポーンさせる</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>まずWidgetとそれを追加したActorを作ります。上のブログとほぼ同じ作りなので細かい説明は割愛。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":259,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-unreal-editor-2020_01_27-21_07_32.png?w=640" alt="" class="wp-image-259"/><figcaption></figcaption></figure></div>
<!-- /wp:image -->
名前：WidgetInteraction

<!-- wp:image {"align":"center","id":260,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-unreal-editor-2020_01_27-21_10_20.png?w=640" alt="" class="wp-image-260"/><figcaption></figcaption></figure></div>
<!-- /wp:image -->
名前：BP_WidgetInteraction

<!-- wp:paragraph -->
<p>これとWidget Interactionを「BP_MotionController」に追加します。両方とも「Hidden In Game」をTrueにしておいてください。Widget Interactionは「Enable Hit Testing」をfalseにしておいてください。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":262,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-unreal-editor-2020_01_27-21_19_07.png?w=1024" alt="" class="wp-image-262"/><figcaption></figcaption></figure>
<!-- /wp:image -->
Widget Interactionは「Show Debug」をTrueにしておくと良いかも

<!-- wp:paragraph -->
<p>これらを表示させるための関数を作ります。</p>
<!-- /wp:paragraph -->

<!-- wp:gallery {"ids":[266,272,268,269]} -->
<figure class="wp-block-gallery columns-3 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-unreal-editor-2020_01_27-21_28_30-2.png?w=640" alt="" data-id="266" class="wp-image-266"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-unreal-editor-2020_01_27-21_38_25-2.png?w=640" alt="" data-id="272" class="wp-image-272"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-unreal-editor-2020_01_27-21_28_39-2.png?w=640" alt="" data-id="268" class="wp-image-268"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-unreal-editor-2020_01_27-21_28_43-2.png?w=640" alt="" data-id="269" class="wp-image-269"/></figure></li></ul></figure>
<!-- /wp:gallery -->

<!-- wp:paragraph -->
<p>その後に「プロジェクト設定」→「インプット」からアクションインプットに「VisiblePauseMenu」を追加し、適当なボタンを割り当てます。ここではTouchのY,Bボタンを割り当てました。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":270,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-unreal-editor-2020_01_27-21_35_13-2.png?w=753" alt="" class="wp-image-270"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>「MotionControllerPawn」に移り、以下の様にBPを組みます。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":273,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-unreal-editor-2020_01_27-21_40_46-2.png?w=1024" alt="" class="wp-image-273"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>こんな感じにWidgetを出すことができます。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":275,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-u30b2u30fcu30e0u30d7u30ecu30d3u30e5u30fc-standalone-64-u30d3u30c3u30c8_pcd3d_sm5-2020-01-27-21-50-40_moment.jpg?w=1024" alt="" class="wp-image-275"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>次にSpawnする用のActorを作っていきます。名前は「BP_SM」としました。ここも上記のブログとほぼ同じ作りなので細かいことは割愛。</p>
<!-- /wp:paragraph -->

<!-- wp:gallery {"ids":[306,278]} -->
<figure class="wp-block-gallery columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-unreal-editor-2020_01_30-19_52_12.png?w=640" alt="" data-id="306" class="wp-image-306"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgettest-unreal-editor-2020_01_30-18_22_26-2.png?w=640" alt="" data-id="278" class="wp-image-278"/></figure></li></ul></figure>
<!-- /wp:gallery -->

<!-- wp:paragraph -->
<p>「BP_MotionController」に戻り、「BP_SM」をAttachするためのSphereCollisionを追加します。大きさは小さめで、コリジョンプリセットを「NoCollision」にするのを忘れずに。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":291,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-unreal-editor-2020_01_30-19_00_12.png?w=1024" alt="" class="wp-image-291"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>イベントグラフを開き、以下のようにBPを組みます。ここも上記のブログとほぼ同じなので割愛。</p>
<!-- /wp:paragraph -->

<!-- wp:gallery {"ids":[281,282,284,285]} -->
<figure class="wp-block-gallery columns-3 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgettest-unreal-editor-2020_01_30-18_31_15-2.png?w=640" alt="" data-id="281" class="wp-image-281"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgettest-unreal-editor-2020_01_30-18_31_30-2.png?w=640" alt="" data-id="282" class="wp-image-282"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgettest-unreal-editor-2020_01_30-18_33_46-2.png?w=640" alt="" data-id="284" class="wp-image-284"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgettest-unreal-editor-2020_01_30-18_33_50-2.png?w=640" alt="" data-id="285" class="wp-image-285"/></figure></li></ul></figure>
<!-- /wp:gallery -->

<!-- wp:paragraph -->
<p>WidgetをPressするための関数も作っていきます。列挙型「PressReleaseEnum」を作り、以下の様にします。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":295,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-unreal-editor-2020_01_30-19_10_52-2.png?w=470" alt="" class="wp-image-295"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>「BP_MotionController」に戻り、以下の様に関数を組みます。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":297,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-unreal-editor-2020_01_30-19_13_56-2.png?w=1024" alt="" class="wp-image-297"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>次にWidgetをPressした時に「BP_SM」をSpawnさせるようにします。「プロジェクト設定」→「インプット」からActionInputに「PauseMenuPress」を追加します。ここでは「Oculus Touch (R) Trigger」を割り当ててます。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":292,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-unreal-editor-2020_01_30-19_06_26-2.png?w=806" alt="" class="wp-image-292"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>「MotionControllerPawn」を開き、以下のようにBPを組みます。ここで関数も作っていますが、これはWidgetで処理を組む時に使います。</p>
<!-- /wp:paragraph -->

<!-- wp:gallery {"ids":[299,300]} -->
<figure class="wp-block-gallery columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-unreal-editor-2020_01_30-19_16_48-2.png?w=1024" data-id="299" class="wp-image-299"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-unreal-editor-2020_01_30-19_17_58-2.png?w=607" data-id="300" class="wp-image-300"/></figure></li></ul></figure>
<!-- /wp:gallery -->

<!-- wp:paragraph -->
<p>Widgetを開き、変数「AttachLocation」(Vector、インスタント編集可能をTrueにする)を作った後、ButtonがPressされた時のBPを組みます。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":301,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-unreal-editor-2020_01_30-19_21_16-2.png?w=1024" alt="" class="wp-image-301"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Widgetを追加したActorを開き、以下のようにBPを組みます。</p>
<!-- /wp:paragraph -->

<!-- wp:gallery {"ids":[303,304]} -->
<figure class="wp-block-gallery columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-unreal-editor-2020_01_30-19_43_45-2.png?w=1024" data-id="303" class="wp-image-303"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://suihanki548930533.files.wordpress.com/2020/01/vrwidgetrecreate-unreal-editor-2020_01_30-19_43_49-2.png?w=749" data-id="304" class="wp-image-304"/></figure></li></ul></figure>
<!-- /wp:gallery -->

<!-- wp:paragraph -->
<p>これで完成です。</p>
<!-- /wp:paragraph -->