【Unity】ページめくり/本閉じシェーダーの使い方

タテヨコ冒険譚で使ったページめくりシェーダーと本閉じシェーダーの使い方です

シェーダーはタテヨコ冒険譚のサイトの一番下のとこで配布しています

両方とも癖の強いシェーダーなので手順がちょっと複雑です

ビルトインRPとURP(ver12.1)に対応しています

ページめくりシェーダー

こちらには、カメラ2つ用(今のカメラと次のカメラを指定して、画面停止をせずに切り替え)と、ビルトイン版のみカメラ1つ用(一度画面停止をしてからカメラ移動をし、その後にフリップ)があります。

ビルトインRPの場合はPostProcessingを導入しておきます。

URPの場合は最初にRender Dataに、「Add Render Feature」からPage Effect Post Process Render Featureをつけておきます

ページめくりシェーダー用にPostProsessing Volume(URPの場合はVolume)を作成して、custome>pageEffectをつけます。(既にあるVolumeとは別で作成しましょう)

このPaperTexに指定したテクスチャが、ページめくりした裏面のテクスチャになります(こだわりがない場合は指定しなくてok、紙っぽいテクスチャを指定すると良いです)

カメラを二つ使う場合は、VolumeのIs Grobalのチェックを外して(URPの場合はLocalにして)、BoxColliderをつけます

切り替え後のカメラにだけシェーダーを適用するためです。当たり判定を小さめにしましょう

とりあえず、以下のようにコードを書くと使えます

ビルトイン版の場合

C#
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Rendering.PostProcessing;
using PageEffectShader;

public class PageTest : MonoBehaviour
{
    [SerializeField] PostProcessVolume _volume;
    [SerializeField] Camera _camera1;
    [SerializeField] Camera _camera2;
    [SerializeField] float _flipTime = 1.0f;
    [SerializeField] bool _reverse = false;
    PageEffect _pageEffect;

    void Start()
    {
        //VolumeのプロファイルからPageEffectを取得
        if (!_volume.profile.TryGetSettings<PageEffect>(out _pageEffect))
        {
            _pageEffect = _volume.profile.AddSettings<PageEffect>();
        }
    }

    //カメラ1つの場合
    IEnumerator FlipPage1()
    {
        //映像を止める 引数:前のページに戻るか
        yield return StartCoroutine(_pageEffect.Set(_reverse));//スクショを撮るまで待つ
        //ページをめくる前にカメラを移動
        Canera.main.transform.position = new Vector3(0,1,20);
        //切り替え 引数:ページめくりの秒数
        _pageEffect.FlipPage(_flipTime);
    }

    //カメラ2つの場合 カメラ1からカメラ2の映像に切り替え
    void FlipPage2()
    {
        //Localのボリュームをカメラ2の位置に移動
        _volume.transform.position = _camera2.transform.position;
        //画面切り替え 引数:前のカメラ、切り替え後のカメラ、前のページに戻るか、ページめくりの秒数
        _pageEffect.FlipPage(_camera1, _camera2, _reverse, _flipTime);
    }
}

URPの場合

C#
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Rendering;
using PageEffectShader;

public class PageTest : MonoBehaviour
{
    [SerializeField] PostProcessVolume _volume;
    [SerializeField] Camera _camera1;
    [SerializeField] Camera _camera2;
    [SerializeField] float _flipTime = 1.0f;
    [SerializeField] bool _reverse = false;
    PageEffect _pageEffect;

    void Start()
    {
        //VolumeのプロファイルからPageEffectを取得
        if (!_volume.profile.TryGet<PageEffect>(out _pageEffect))
        {
            _pageEffect = _volume.profile.Add<PageEffect>();
        }
    }

     //カメラ1つの場合
    void FlipPage1()
    {
        //映像を止める 引数:前のページに戻るか
        yield return StartCoroutine(_pageEffect.Set(_reverse));//スクショを撮るまで待つ
        //ページをめくる前にカメラを移動
        Canera.main.transform.position = new Vector3(0,1,20);
        //切り替え 引数:ページめくりの秒数
        _pageEffect.FlipPage(_flipTime);
    }

    //カメラ2つの場合 カメラ1からカメラ2の映像に切り替え
    void FlipPage2()
    {
        //Localのボリュームをカメラ2の位置に移動
        _volume.transform.position = _camera2.transform.position;
        //画面切り替え 引数:前のカメラ、切り替え後のカメラ、前のページに戻るか、ページめくりの秒数
        _pageEffect.FlipPage(_camera1, _camera2, _reverse, _flipTime);
    }
}

カメラ2つの場合はUIも一緒にページめくりしたい場合はCanvasのscreen spaceをカメラにする必要があります(タテヨコ冒険譚ではページめくり前にUIを非表示にしていました)

本閉じシェーダー

こちらはPostProcessingは使いません

BookCloseShader内にあるBookCloseEffectPrefabをシーン内に配置します

これについてるBookEffectコンポーネントの「OpenBook」「CloseBook」メソッドを呼び出すと、本が閉じたり開いたりします

C#
using UnityEngine;
using UnityEngine.UI;
using BookCloseShader;

public class CloseTestButton : MonoBehaviour
{
    [SerializeField] Button closeButton;
    [SerializeField] Button openButton;
    [SerializeField] BookCloseEffect effecter;
    [SerializeField] Camera mainCamera;
    
    void Start()
    {
        closeButton.onClick.AddListener(Close);
        openButton.onClick.AddListener(Open);
    }

    void Close()
    {
        //本を閉じる 引数:今の画面を写しているカメラ、閉じる秒数
        effecter.CloseBook(mainCamera, 2.0f);
    }

    void Open()
    {
        //本を開く 引数:今の画面を写しているカメラ、閉じる秒数
        effecter.OpenBook(mainCamera, 2.0f);
    }
}

本の中の映像は引数に渡したカメラの映像になります

以下本閉じシェーダーの注意事項など

・UIを一緒に本閉じしたい場合はcanvasのscreen spaceをカメラにする必要があります

・本閉じの際のカメラと本の位置関係を調整したい場合は、カメラではなくBookCloseEffectPrefab下にあるBookRootオブジェクトのAnimatorにあるRootAnimステートのアニメーションを調整してください(サンプルシーンだとRootAnimation1を使ってます。)

・本のオブジェクトが元のカメラに映らないようにBookCloseEffectPrefabをめちゃくちゃ遠くに配置するか、レイヤーで非表示になるように設定してあげる必要があります

・本のテクスチャは、BookCloseShader>modelにあるテクスチャを書き換えることで変更できます

Unity

関連記事
guest
0 コメント
古い順
新しい順 投票数順
Inline Feedbacks
全てのコメントを見る