以下の内容はhttps://www.karvan1230.com/entry/2021/08/24/200144より取得しました。


【Unity】立体スライドパズルできるかな(構想編)

f:id:Karvan:20210824193431p:plain

Oculus Quest 2

ネットの記事に煽られてOculus Quest 2を購入したものの使い道が思い浮かばない皆さんこんにちは。去年購入したPSVRが左側の音声が聞えなくなり、PS-StoreにBeatSaberの追加コンテンツがちっとも追加されない事もあって乗り換えを決めたのですが今のところBeatSaber以外のVRゲームを購入する予定はないし、VRゲームを制作する予定もないのでムフフなビデオを観る以外はただのインテリアになりそうで怖いです。

 

立体スライドパズル

従来、スライドパズルと言えば連番の数字だったり、分割された二次元のイラストや図形を正しい位置へ戻すパズルでした。


私も夏休み期間、RenderTextureで表示された映像を使ったスライドパズルを作ってみたのですが 

f:id:Karvan:20210824193556g:plain

その時ふと思ったのです、「立体的(に見える)スライドパズルが作れないか」と。
見えるだけなので、実際の3Dモデルを分割するわけでありません。

例えば下のようなジオラマの3Dモデルがあったとして

f:id:Karvan:20210824193836p:plain

それを写した映像をRenderTextureで平面(Quad)に描画

f:id:Karvan:20210824194124p:plain

その平面の前後に同じようなジオラマの3Dモデルを置いてみると、

f:id:Karvan:20210824194222p:plain

 平面と3Dモデルの境が見えなくなり、ジオラマがそのまま並んでいるように見えます。

 f:id:Karvan:20210824194440p:plain

なのでこの平面を直方体の枠線にそって分割すれば、見た目的に3D空間が分割された直方体が出来そう。

f:id:Karvan:20210824194540p:plain

そしてこれをスライドパズルのルールにそって動かせば「立体スライドパズル」を作る事ができるのではないか。そう考えたわけです。

 

平面の分割とマスキング

RenderTextureで描画された平面を複数の面に分割する手法は以前の記事で紹介しているように、分割面毎にMaterialを用意してそれぞれでTillingとOffsetの設定を行う事で実現する事ができます。詳細は下の記事を参照してください。

【Unity】RenderTextureを使って動くパズルを作る - 原カバンは鞄のお店ではありません。

 

この分割面をステンシルバッファを使用して直方体の枠線内の部分のみを表示させます。ステンシルバッファを使用したマスキングについては以前にもこのブログで取り上げています。

【Unity】ステンシルバッファを使って窓を作る - 原カバンは鞄のお店ではありません。

 

実際に中央下の部分のみを表示する平面を作り、直方体の表面(左右のみ)に形にマスキングするとこんな感じになります。

f:id:Karvan:20210824195043p:plain

後は同じように他の部分も作り、一枚の平面になるように並べます。

 並べる過程をアニメーションにしてみましたが、どうでしょう?空間が分割されているように見えますかね?

f:id:Karvan:20210824195318g:plain

 

一応この状態でジオラマ内と映像内とで列車のモデルを同期して動かしてみると、空間が続いている(ジオラマと平面の境目が分からない)ように見えるので構想通り上手くいっていると思います。

 f:id:Karvan:20210824195412g:plain

 

スライドパズル化は次回

 ここまで作成した段階でタイムオーバーとなったので、これをスライドパズルにするのは次回となります。
実際のところ分割面の設定と配置はちょっと面倒で時間が掛かるので手軽に「やって見てください」とは言えません。
設定がちょっとでもずれると一枚絵に見えないし、ジオラマとの境目も目立ってしまい成り立たなくなるので。

 

この為、今のところ上手くいっている個所もパズルとして配置の場所を動かすと立体的に見えなくなるのではないか、という不安もあります。
成功しても失敗しても記事として纏めるとは思いますが・・・

 




以上の内容はhttps://www.karvan1230.com/entry/2021/08/24/200144より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14