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

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

ただいまの
回答率

91.02%

  • C#

    5759questions

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

  • Unity

    3011questions

    Unityは、ユニティテクノロジーが開発したゲームエンジンです。 主にモバイルやブラウザ向けのゲーム製作に利用されていましたが、3Dの重力付きゲームが簡単に作成できることから需要が増え、現在はマルチプラットフォームに対応しています。 言語はC言語/C++で書かれていますが、C#、JavaScript、Booで書かれたコードにも対応しています。

  • Unity3D

    999questions

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

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

解決済

回答 2

投稿

  • 評価
  • クリップ 2
  • VIEW 261

ll7

score 2

前提・実現したいこと

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+3

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

左右分割比

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

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

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

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

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

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

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

Shader "Unlit/Cylinder"
{
    Properties
    {
        _LeftTex ("Left Texture", 2D) = "white" {} // 左世界テクスチャ
        _RightTex("Right Texture", 2D) = "white" {} // 右世界テクスチャ
        _BoundaryWidth("Boundary Width", Range(0.0, 1.0)) = 0.03125 // 左右世界境界の幅
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
            };

            struct v2f
            {
                float3 stw : TEXCOORD1;
                float x : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _LeftTex;
            sampler2D _RightTex;
            float _BoundaryWidth;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.stw = o.vertex.xyw; //クリッピング座標のx、y、wを別途フラグメントシェーダーに送る
                o.x = v.vertex.x; // モデル座標のx(シリンダーの右側なら正、左側なら負)をフラグメントシェーダーに送る
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                float2 uv = (i.stw.xy / i.stw.z) * 0.5 + 0.5;

                #if UNITY_UV_STARTS_AT_TOP
                uv.y = 1.0 - uv.y; // 環境によってはテクスチャ上下が反転するらしい?
                #endif

                fixed4 leftCol = tex2D(_LeftTex, uv);
                fixed4 rightCol = tex2D(_RightTex, uv); 

                return lerp(leftCol, rightCol, smoothstep(-_BoundaryWidth, _BoundaryWidth, i.x)); // -境界幅~+境界幅で左右をなめらかにブレンド
            }
            ENDCG
        }
    }
}

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

プレビュー

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/22 16:38

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

    キャンセル

  • 2017/12/23 13:14

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

    キャンセル

  • 2017/12/24 13:51

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

    キャンセル

+3

可能かと思いますが、すごく重そうです。
思いつくのは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 22:30

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

    キャンセル

  • 2017/12/21 12:35

    キャラクターの陰影付け問題についてですが、キャラクターも右世界用と左世界用に2体用意して、同じ動きをさせるという手もありそうですね(キャラクターが増えた分、描画負荷もさらに少し増えそうですが...)。これならそれぞれのキャラクターは左右の世界に独立して存在できるので、左右で服装を変えたりすることもできそうです。

    衝突判定をどうするかも確かに考えどころですね。左右どちらの視点でキャラクターを見ているかによって、どちらのキャラクターの衝突判定を採用するか切り替えるというのも面白そうです。片方の世界で襲いかかってきたモンスターの攻撃を視点を変えて回避したり、片方の世界で行き止まりの道を視点を変えて通り抜けたり...なんてこともできるかもしれません。

    キャンセル

  • 2017/12/21 16:41 編集

    >ll7さん
    応援してます!!頑張ってください。

    >Bongoさん
    アドバイスありがとうございます。
    最初2体用意する方向で考えていたのですが、Unityのカメラの横幅は中心に対しての描画になるのでViewport RectのWを半分にすると中心点も変わってしまいました。

    図に表すとこんな感じです。
    | は撮影範囲、□ はキャラクター

    W1
    |  □  |
    W0.5
    | □ |

    なので今回は別のカメラでキャラクターだけを写すようにしました。その方がスクリプトも簡単で、カメラのスタート位置をズラすだけでお互いの世界の中心点におけるのと、お互いの世界が干渉することはないと仮定してこの方法を選びました。ただ、当たり判定は結構難しいんじゃないかなと思います。カメラに入れ子だけではできない気がしてます。

    どうやるかは分かりませんがカメラの描画範囲を重ねていずれかのカメラの半分をマスクすることで2体表示もいけると思います。その方が当たり判定も解決するのでもっと楽だと思うのですが良い方法が思いつきませんでした。ちなみにレンダーテクスチャも考えたのですが厳しいですね。

    >片方の世界で襲いかかってきたモンスターの攻撃を視点を変えて回避したり、片方の世界で行き止まりの道を視点を変えて通り抜けたり

    それめっちゃいいですね!すごく面白そうです!ワクワクしますね!

    キャンセル

  • 2017/12/21 16:51

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

    キャンセル

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

  • ただいまの回答率 91.02%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • C#

    5759questions

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

  • Unity

    3011questions

    Unityは、ユニティテクノロジーが開発したゲームエンジンです。 主にモバイルやブラウザ向けのゲーム製作に利用されていましたが、3Dの重力付きゲームが簡単に作成できることから需要が増え、現在はマルチプラットフォームに対応しています。 言語はC言語/C++で書かれていますが、C#、JavaScript、Booで書かれたコードにも対応しています。

  • Unity3D

    999questions

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