LoginSignup
6

More than 5 years have passed since last update.

VRコンテンツのスプラッシュシーンを作る

Last updated at Posted at 2016-06-09

ゲームとかだと最初にスプラッシュシーンが入って本編が始まる。VRコンテンツの場合平面の状態がないので空間にCanvasを浮かべる感じにした。

空間を球体で囲む

まずは 3D Object -> Sphere とかで雑に囲んでしまう。サイズがやや小さい感じになるのでscaleはxyz各100とかに。

Screen Shot 2016-06-09 at 18.23.48.png

マテリアルの設定

配置した球体に適用するマテリアルを用意。今回は一面真っ白な環境を作ることにしとく。

Screen Shot 2016-06-09 at 18.30.06.png

Screen Shot 2016-06-09 at 18.33.50.png

特に凝ったものにする必要もないのでShaderは一旦Unlit/Colorの255,255,255。SphereのMesh自体が外向きなので、Cameraを球体内に配置すると裏側から見る感じになってだめなやつになる。なので描画する面を変えてしまう。
http://forum.unity3d.com/threads/unlit-single-color-shader.180833/ のレスからそのまま拝借&改良。

Shader "Custom/UnlitCullingFront" {
    Properties {
        _Color ("Color", COLOR) = (1,1,1,1)
    }
    SubShader {
        Color [_Color]
        Pass {
            Cull Front
        }
    }
}

Screen Shot 2016-06-09 at 18.41.56.png

モデルをいじれるならメッシュの向きを変えてしまえばカリングとか不要。

イメージ配置

スプラッシュで表示したいイメージを置く。シーンにImage置いてCanvasのRenderModeをWorldSpaceにした上で位置調整。必要なスプラッシュイメージの取り込み。画像は拾ってきたので適当。

Screen Shot 2016-06-09 at 19.00.20.png

Screen Shot 2016-06-09 at 19.00.36.png

いい感じに動作するようにスクリプトこしらえてそのへんのオブジェクトにアタッチ。

SplashImage.cs
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;
using System.Collections;

public class SplashImage : MonoBehaviour
{
    [SerializeField]
    Image Image;

    [SerializeField]
    Sprite[] Images;

    [SerializeField]
    float FadeSpeed = 0.01f;

    [SerializeField]
    float DisplayTime = 1f;

    [SerializeField]
    string NextSceneName;

    AsyncOperation ao;

    // Use this for initialization
    void Start ()
    {
        this.ao = SceneManager.LoadSceneAsync(NextSceneName);
        this.ao.allowSceneActivation = false;

        StartCoroutine(Fade());
    }

    IEnumerator Fade()
    {
        foreach (var img in this.Images)
        {
            this.Image.sprite = img;

            Color currentColor = new Color(1, 1, 1, 0);

            while (currentColor.a < 1)
            {
                currentColor.a += FadeSpeed;
                this.Image.color = currentColor;

                yield return new WaitForEndOfFrame();
            }

            yield return new WaitForSeconds(DisplayTime);

            while (currentColor.a > 0)
            {
                currentColor.a -= FadeSpeed;
                this.Image.color = currentColor;

                yield return new WaitForEndOfFrame();
            }
        }

        this.ao.allowSceneActivation = true;
    }
}

Screen Shot 2016-06-09 at 19.08.34.png

動作

splashsample.gif

Oculusのガイドラインとかだと背景は黒の方がいいとか書いてた気もする。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6