質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Unity3D

Unity3Dは、ゲームや対話式の3Dアプリケーション、トレーニングシュミレーション、そして医学的・建築学的な技術を可視化する、商業用の開発プラットフォームです。

Unity

Unityは、Unity Technologiesが開発・販売している、IDEを内蔵するゲームエンジンです。主にC#を用いたプログラミングでコンテンツの開発が可能です。

Q&A

解決済

2回答

1994閲覧

Unity:角度・アングルでのシーンチェンジ方法

ll7

総合スコア8

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Unity3D

Unity3Dは、ゲームや対話式の3Dアプリケーション、トレーニングシュミレーション、そして医学的・建築学的な技術を可視化する、商業用の開発プラットフォームです。

Unity

Unityは、Unity Technologiesが開発・販売している、IDEを内蔵するゲームエンジンです。主にC#を用いたプログラミングでコンテンツの開発が可能です。

0グッド

2クリップ

投稿2017/12/19 07:22

###前提・実現したいこと
Unityにて、以下の画像ように、角度やアングルを変えることで別のシーンが見えるというものを作りたいです。
イメージ説明
しかし、どのようにすればこのような二画面を実装できるのか分からず…。
マスクなど色々考えましたが思い付かないため質問させて頂きます。
なにかアイデアでも構いませんので、アドバイス頂きたいです。
宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

ll7さんご進捗いかがでしょうか。ビューポートの左右分割位置はカメラとキャラクターの視線の角度から得られるかと思います(すみません、実際に実装したわけではないのでうまくいくかは未確認です)。

左右分割比

左右合成方法の件ですが、IShikawanさんが言及されたレンダーテクスチャもいいアイディアだと思い、ちょっとテストしてみました。
考えうるプロセスとしては、

  • 世界1をレンダーテクスチャに描画する。
  • 世界2を通常描画する。
  • 世界2の描画後のイメージエフェクトとして世界1のレンダーテクスチャを合成する。

というパターンもあるかと思いますが、今回は

  • キャラクターと一緒に移動・回転するシリンダーを用意し、合成用マテリアルをセットしておく。
  • 両方の世界を各々レンダーテクスチャに描画する。
  • シリンダーだけを描画対象とする第3のカメラでシリンダーを描画する。

ヒエラルキー
ヒエラルキー

といった方法にしました。ご質問者さんの画像を見ると画面が円筒で切り抜かれたような演出がされていますが、これを再現するには実際に円筒モデルを用意してしまうのが手っ取り早いかと思いました。
ついでに、せっかくのレンダーテクスチャということで、左右の世界の境界をなめらかにブレンドするような蛇足を加えてみました。レンダーテクスチャ方式だと描画する総面積が増えますが(なんだか負荷を増やす方向の話ばかりになってしまいますね...)、代わりに合成方法の自由度が大きいのも利点と言えそうです。

シリンダーのマテリアルは下記のようにしました。

HLSL

1Shader "Unlit/Cylinder" 2{ 3 Properties 4 { 5 _LeftTex ("Left Texture", 2D) = "white" {} // 左世界テクスチャ 6 _RightTex("Right Texture", 2D) = "white" {} // 右世界テクスチャ 7 _BoundaryWidth("Boundary Width", Range(0.0, 1.0)) = 0.03125 // 左右世界境界の幅 8 } 9 SubShader 10 { 11 Tags { "RenderType"="Opaque" } 12 LOD 100 13 14 Pass 15 { 16 CGPROGRAM 17 #pragma vertex vert 18 #pragma fragment frag 19 20 #include "UnityCG.cginc" 21 22 struct appdata 23 { 24 float4 vertex : POSITION; 25 }; 26 27 struct v2f 28 { 29 float3 stw : TEXCOORD1; 30 float x : TEXCOORD0; 31 float4 vertex : SV_POSITION; 32 }; 33 34 sampler2D _LeftTex; 35 sampler2D _RightTex; 36 float _BoundaryWidth; 37 38 v2f vert (appdata v) 39 { 40 v2f o; 41 o.vertex = UnityObjectToClipPos(v.vertex); 42 o.stw = o.vertex.xyw; //クリッピング座標のx、y、wを別途フラグメントシェーダーに送る 43 o.x = v.vertex.x; // モデル座標のx(シリンダーの右側なら正、左側なら負)をフラグメントシェーダーに送る 44 return o; 45 } 46 47 fixed4 frag (v2f i) : SV_Target 48 { 49 float2 uv = (i.stw.xy / i.stw.z) * 0.5 + 0.5; 50 51 #if UNITY_UV_STARTS_AT_TOP 52 uv.y = 1.0 - uv.y; // 環境によってはテクスチャ上下が反転するらしい? 53 #endif 54 55 fixed4 leftCol = tex2D(_LeftTex, uv); 56 fixed4 rightCol = tex2D(_RightTex, uv); 57 58 return lerp(leftCol, rightCol, smoothstep(-_BoundaryWidth, _BoundaryWidth, i.x)); // -境界幅~+境界幅で左右をなめらかにブレンド 59 } 60 ENDCG 61 } 62 } 63}

動かしてみると下図のように描画されました。オブジェクトがもっと多かったり、重そうなエフェクトを加えたりするとまた違うでしょうが、少なくとも非モバイル環境においては十分な速度で動作しそうな感じでした。

プレビュー

投稿2017/12/21 22:18

編集2017/12/21 22:40
Bongo

総合スコア10807

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

IShix

2017/12/22 07:38

すごいですね!!めっちゃいい感じですね!! レンダーテクスチャだと画質と重さもそうですがなにより設定するのが大変だと思ってたのですがシェーダーでできるんですね。シェーダー書いたことないのでこれを機に勉強しようと思います。感動しました!!
ll7

2017/12/23 04:14

お返事遅れてすみません。 凄いですね…。ここまで詳しくありがとうございます。 本当に助かりました。お二方とも素晴らしいです。ありがとうございました。
Bongo

2017/12/24 04:51

後発回答なのに評価いただいて恐縮です... いい作品になることを期待しております!
guest

0

可能かと思いますが、すごく重そうです。
思いつくのは3つのカメラを使う方法です。

###完成系はこんな感じです
イメージ説明

###カメラ1 左側の世界を撮影
Viewport RectのWを0.5にする
イメージ説明

###カメラ2 右側の世界を撮影
Viewport RectのXとWを0.5にする
イメージ説明

###カメラ3 キャラクターを撮影
キャラクターに適当なLayerを設定、このカメラのCulling Maskにキャラクターに設定したレイヤーのみを撮影させる
イメージ説明

###Viewport Rectについて
・Xは画面幅を1とした時の横軸の位置です
・Wは画面幅を1とした時の横幅です

###スクリプト
書いていませんが、こんな感じの処理を実装するといいと思います。
・すべてのカメラの移動とキャラの移動をリンクさせる
・キャラクターの向きでカメラ1とカメラ2のViewport Rectの設定を変える
・当たり判定が欲しければ、カメラにコライダをつけてそれをプレイヤーに伝える。(角度など難しいかもしれません)

###今回の内容をプラグインにしました
スクリプトは書いてませんが良かったら見てみてください。
http://firestorage.jp/download/426cc4d2a061d651cae102e055530faa773b756c

###この方法の問題点
・重そう。。。
こういう使い方をしたことないのでどの程度の負荷になるか分かりません。この方法を採用する前に想定している程度の物を適当に置いてプレイヤーを歩かせてみて問題なく動くか試した方がいいと思います。今の段階で分かるのはスマホは無理だと思います。

・キャラクターに影を落とせない
影を落とすうまい方法が思いつきませんでした。参考画像のように、丸い影を作ってキャラクターの足元に置いて連動させる方法が良いかもしれません。

###最後に
いろいろな表現ができそうでワクワクしました。
すごい面白い試みで完成品が楽しみです。
リリースしましたら是非教えてください。

投稿2017/12/20 06:21

編集2017/12/20 11:42
IShix

総合スコア1724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ll7

2017/12/20 13:30

詳しいご説明本当にありがとうございます。プラグインまでありがとうございます。 とりあえず動かしてみようと思います。 本当に感謝です。
Bongo

2017/12/21 03:35

キャラクターの陰影付け問題についてですが、キャラクターも右世界用と左世界用に2体用意して、同じ動きをさせるという手もありそうですね(キャラクターが増えた分、描画負荷もさらに少し増えそうですが...)。これならそれぞれのキャラクターは左右の世界に独立して存在できるので、左右で服装を変えたりすることもできそうです。 衝突判定をどうするかも確かに考えどころですね。左右どちらの視点でキャラクターを見ているかによって、どちらのキャラクターの衝突判定を採用するか切り替えるというのも面白そうです。片方の世界で襲いかかってきたモンスターの攻撃を視点を変えて回避したり、片方の世界で行き止まりの道を視点を変えて通り抜けたり...なんてこともできるかもしれません。
IShix

2017/12/21 07:41 編集

>ll7さん 応援してます!!頑張ってください。 >Bongoさん アドバイスありがとうございます。 最初2体用意する方向で考えていたのですが、Unityのカメラの横幅は中心に対しての描画になるのでViewport RectのWを半分にすると中心点も変わってしまいました。 図に表すとこんな感じです。 | は撮影範囲、□ はキャラクター W1 |  □  | W0.5 | □ | なので今回は別のカメラでキャラクターだけを写すようにしました。その方がスクリプトも簡単で、カメラのスタート位置をズラすだけでお互いの世界の中心点におけるのと、お互いの世界が干渉することはないと仮定してこの方法を選びました。ただ、当たり判定は結構難しいんじゃないかなと思います。カメラに入れ子だけではできない気がしてます。 どうやるかは分かりませんがカメラの描画範囲を重ねていずれかのカメラの半分をマスクすることで2体表示もいけると思います。その方が当たり判定も解決するのでもっと楽だと思うのですが良い方法が思いつきませんでした。ちなみにレンダーテクスチャも考えたのですが厳しいですね。 >片方の世界で襲いかかってきたモンスターの攻撃を視点を変えて回避したり、片方の世界で行き止まりの道を視点を変えて通り抜けたり それめっちゃいいですね!すごく面白そうです!ワクワクしますね!
Bongo

2017/12/21 07:51

なるほど...そういう不都合もありましたか。やっぱり実際に試してみないと見えない問題も多いですね。勉強になります。 カメラ中心をずらしたいとなると、傾斜錘台(https://docs.unity3d.com/ja/540/Manual/ObliqueFrustum.html )とやらを使うんでしょうかね...?リッチな表現をしようとすると、どんどん複雑化してしまいますね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問