How to blend 2D veiw and 3D view
2014年4月、ゲーム開発エンジンUnityのマスコットキャラクター「ユニティちゃん」が公開されました。
早速使ってみました。
ユニティちゃんを表示するまで
・公式サイト
http://unity-chan.com/
から UnityChan.unitypackage をダウンロードする
・Unityを起動してNew Projectを作成する
・ダウンロードした UnityChan.unitypackage をUnityの Assets フォルダーにドロップする
・UnityChanフォルダーのPrefabsPrefabフルダーのunitychanをHierarchyにドロップする
以上のUnityの基本的な操作でユニティちゃんを表示することができました。
さらにDirectional Lightを配置して背景を適当に作ってみた結果が下のスクリーンショットです。
3Dならではの問題
正面のユニティちゃんは自然に表示されます。
カメラ付近の右や左にユニティちゃんをに配置すると不自然な見え方になります。
これは遠近感を表現するため近くのものは大きく、遠くのものは小さく表示されるためです。
カメラのInspectorで、ProjectionをPerspectiveからOrthographicに変更すると遠近感がなくなりアニメのような表示になります。
Perspectiveは遠近法や透視投影などと呼ばれる投影方法です。OpenGLのglFrustum()に相当します。
Orthographicは正射影や平行投影(並行投影)などと呼ばれる投影方法です。OpenGLのglOrtho()に相当します。
ユニティちゃんはOrthographicで表示してみます。
視野の広さは size で調整します。
個人的にはユニティちゃんはOrthographicで表示した方が好みです。
ところが背景の奥行き感がなくなってしまいました。
キャラクターは2D、背景は3Dにしたい
ユニティちゃんはOrthographic(平行投影)でアニメのように、背景はOrthographic(透視投影)で立体的に表示する方法を試してみました。
開発環境
・64bit Windows8
・Unity3D 4.3.4
ユニティちゃんのLayerを設定
UnityChanのHierarchyでUnityChanを選択し、InspectorのLayerからAdd Layerを選択します。
User Layoer 8 に「Ortho Layer」と設定しておきます。
透視投影用のMain Cameraの設定
初期状態で「Main Camera」というカメラが設定済みだと思います。
このカメラを背景用とします。
Main CameraのInspectorを開き、ProjectionをParspectiveにしておきます。
そして、Culling Maskから先ほど追加した「Ortho Layer」をオフにします。
これでユニティちゃんが表示されなくなりました。
平行投影用のカメラのを追加
メニューから
GameObject - Create Other - Camera
で新しいカメラを追加します。
追加したカメラが区別できるように、名前はCamera 2としておきます。
Camera 2は
Clear Flags を Depth Only、
Culling Mask を 「Otho Layer」に設定します。
ProjectionはOrthographicにしてください。
「Ortho Layer」に設定したユニティちゃんがCamera 2の視界に入るように位置やSizeを調整して下さい。
各カメラのDepthの設定
Sceneに複数のカメラを持たせると、Depthが小さいカメラから順に描画されます。
背景用カメラのDepth を 平行投影用のカメラのDepthより小さい設定にします。
今回はMain CameraのDepthを0、Camera 2のDepthを1にしました。
これでユニティちゃんの後ろの背景は立体的に、ユニティちゃんはアニメのように表示することが出来ました。
ParspectiveとOrthographicの比較
左側がParspective、Orthographicで表示してます。
左右対称にしただけで位置もポーズもほとんど同じです。
見え方が全然違いがはっきり分かります。
Orthographicの問題
Orthographicで表示されるオブジェクト(ユニティちゃん)はカメラから離れた場所にいても小さく表示できません。
2D表示に特化したゲームならそれでいいかもしれません。
奥行きを表現したい場合はカメラとの距離に応じてScaleを小さくするプログラムが必要です。
実用的な使い方
3Dと2Dの表現を混在させるのに便利です。
下の画像はプロ生ちゃんのドット絵をOrthographicのレイヤーに、背景をParspectiveのレイヤーに表示させた例です。
プロ生ちゃんの素材はこちらからダウンロードできます。
http://3d.nicovideo.jp/works/td8608
参考にしたのはストリートファイターIV
「(スーパー)ストリートファイターIV」グラフィックス講座(後編)
http://game.watch.impress.co.jp/docs/series/3dcg/20111201_494567.html
によると、ストリートファイターIVは「X軸方向のみ正射影でレンダリング」という処理をしています。
この方法なら画面の左右にいても大きさが変わらないし、遠ざければ小さく表示されます。
今回は同じ事をしているわけではありませんが、近いこと(?)がプログラムなしでできたので良しとします。
関連ブログ
[Unity3D] Unityでプロ生ちゃんMMDモデルを扱う
[Unity3D] MonoDevelopのテキストエディターを使いやすくする
[Unity 3D] Blender could not be found.を解決するには
[Unity] オーディオの音量が小さい
以上、参考になれば幸いです。