【Unity】スライダーで実現するマテリアルの高度な設定方法を解説

Unity

Unityのマテリアル設定は、ゲームやアプリケーションのビジュアル品質を大きく左右する要素です。本記事では、メタリック、スムースネス、エミッション、アルファといったマテリアルの詳細設定について深掘りし、これらの各設定がオブジェクトの見た目にどのように影響を与えるのかを解説します。これらの知識を活用することで、よりリアルで魅力的なビジュアル表現が可能になります。

今回の記事の手順を踏んで作成したいものは下記↓

メタリックスライダーの作成(金属感の調整用)

まずはオブジェクトのマテリアルの金属感を調整するためのスライダーを作成していきます。

スクリプトの作成(MetallicController.cs)

今回は「MetallicController.cs」という名前のスクリプトを作成します。具体的なスクリプトの中身は下記です。

using UnityEngine;
using UnityEngine.UI;

public class MetallicController : MonoBehaviour
{
    public Slider metallicSlider; // メタリック感を調整するためのスライダー
    public CubeColorManager cubeColorManager; // CubeColorManagerへの参照
    public Image sliderBackground; // スライダーの背景Image
    private const int GradientTextureWidth = 256; // グラデーションテクスチャの幅

    void Start()
    {
        // スライダーの背景にグラデーションテクスチャを設定
        sliderBackground.sprite = CreateGradientSprite();

        // スライダーの値が変更されたときのイベントリスナーを追加
        metallicSlider.onValueChanged.AddListener(HandleMetallicChange);
    }

    void HandleMetallicChange(float value)
    {
        // 選択されたRendererのメタリック値を更新
        Renderer selectedRenderer = cubeColorManager.SelectedCubeRenderer;
        if (selectedRenderer != null)
        {
            Material mat = selectedRenderer.material;
            // メタリック値を設定
            mat.SetFloat("_Metallic", value);
        }
    }

    Sprite CreateGradientSprite()
    {
        Texture2D texture = new Texture2D(GradientTextureWidth, 1, TextureFormat.RGBA32, false);
        // グラデーションは左が非メタリック、右がフルメタリック
        for (int i = 0; i < GradientTextureWidth; i++)
        {
            float alpha = i / (float)GradientTextureWidth;
            Color color = new Color(alpha, alpha, alpha, 1.0f);
            texture.SetPixel(i, 0, color);
        }
        texture.Apply();
        
        // Texture2DからSpriteを作成
        return Sprite.Create(texture, new Rect(0, 0, texture.width, texture.height), new Vector2(0.5f, 0.5f));
    }
}

このスクリプトも、以前の記事で作成した「UIManager」オブジェクトにドラッグ&ドロップでアタッチします。

UIManagerにアタッチすると、UIManagerのインスペクタウィンドウに項目が表示されるので、それぞれの項目に対応するスライダーを作成していきましょう。(※具体的な操作方法は後述します。)

スライダーの作成(※他のスライダーでも同様の作業を実施ください)

次に、ユーザーがシーンを再生しているときに、「Metallic(金属感)」を調整できるようにスライダーを作成します。

下記の動画のようにヒエラルキーウィンドウにスライダーを1つ追加しましょう。

スライダーを作成できたら、下記の動画のように、先ほどのスクリプトをアタッチしたUIManagerのインスペクタウィンドウを設定すれば、メタリックスライダー(金属感を調整するためのスライダー)の作成は完了です。

スムースネススライダーの作成(鏡面感の調整用)

次にオブジェクトのマテリアルの鏡面感を調整するためのスライダーを作成していきます。

スクリプトの作成(SmoothnessController.cs)

今回は「SmoothnessController.cs」という名前のスクリプトを作成します。具体的なスクリプトの中身は下記です。

using UnityEngine;
using UnityEngine.UI;

public class SmoothnessController : MonoBehaviour
{
    public Slider smoothnessSlider; // スムーズネスを調整するためのスライダー
    public CubeColorManager cubeColorManager; // CubeColorManagerへの参照
    public Image sliderBackground; // スライダーの背景Image
    private const int GradientTextureWidth = 256; // グラデーションテクスチャの幅

    void Start()
    {
        // スライダーの背景にグラデーションテクスチャを設定
        sliderBackground.sprite = CreateGradientSprite();

        // スライダーの値が変更されたときのイベントリスナーを追加
        smoothnessSlider.onValueChanged.AddListener(HandleSmoothnessChange);
    }

    void HandleSmoothnessChange(float value)
    {
        // 選択されたRendererのスムーズネスを更新
        Renderer selectedRenderer = cubeColorManager.SelectedCubeRenderer;
        if (selectedRenderer != null)
        {
            Material mat = selectedRenderer.material;
            // スムーズネス(光沢度)を設定
            mat.SetFloat("_Glossiness", value);
        }
    }

    Sprite CreateGradientSprite()
    {
        Texture2D texture = new Texture2D(GradientTextureWidth, 1, TextureFormat.RGBA32, false);
        // グラデーションは左がマット、右が光沢あり
        for (int i = 0; i < GradientTextureWidth; i++)
        {
            float value = i / (float)GradientTextureWidth;
            Color color = new Color(value, value, value, 1.0f); // 光沢の増減をグレースケールで表現
            texture.SetPixel(i, 0, color);
        }
        texture.Apply();
        
        // Texture2DからSpriteを作成
        return Sprite.Create(texture, new Rect(0, 0, texture.width, texture.height), new Vector2(0.5f, 0.5f));
    }
}

このスクリプトも、以前の記事で作成した「UIManager」オブジェクトにドラッグ&ドロップでアタッチすると、UIManagerのインスペクタウィンドウに項目が表示されるので、項目に対応するスライダーを作成していきましょう。

スライダーは「メタリックスライダー」の作成時と同様に行い、作成できたらUIManagerのインスペクタウィンドウから今回作成した「スムースネススライダー」を設定しましょう。

エミッションスライダーの作成(発光感の調整用)

次にオブジェクトのマテリアルの発光度合いを調整するためのスライダーを作成していきます。

スクリプトの作成(ObjectEmissionController.cs)

今回は「ObjectEmissionController.cs」という名前のスクリプトを作成します。具体的なスクリプトの中身は下記です。

using UnityEngine;
using UnityEngine.UI;

public class ObjectEmissionController : MonoBehaviour
{
    public Slider emissionSlider; // エミッションを調整するためのスライダー
    public CubeColorManager cubeColorManager; // CubeColorManagerへの参照
    public Image sliderBackground; // スライダーの背景Image
    private const int GradientTextureWidth = 256; // グラデーションテクスチャの幅

    void Start()
    {
        // スライダーの背景にグラデーションテクスチャを設定
        sliderBackground.sprite = CreateGradientSprite();

        // スライダーの値が変更されたときのイベントリスナーを追加
        emissionSlider.onValueChanged.AddListener(HandleEmissionChange);
    }

    void HandleEmissionChange(float value)
    {
        // 選択されたRendererのエミッション値を更新
        Renderer selectedRenderer = cubeColorManager.SelectedCubeRenderer;
        if (selectedRenderer != null)
        {
            Material mat = selectedRenderer.material;
            // エミッションを有効にする
            mat.EnableKeyword("_EMISSION");
            // エミッションカラーを設定
            Color baseColor = mat.color;
            Color emissionColor = baseColor * Mathf.LinearToGammaSpace(value);
            mat.SetColor("_EmissionColor", emissionColor);
        }
    }

    Sprite CreateGradientSprite()
    {
        Texture2D texture = new Texture2D(GradientTextureWidth, 1, TextureFormat.RGBA32, false);
        // グラデーションは左が暗い(非発光)、右が明るい(発光)
        for (int i = 0; i < GradientTextureWidth; i++)
        {
            float value = i / (float)GradientTextureWidth;
            Color color = new Color(value, value, value, 1.0f);
            texture.SetPixel(i, 0, color);
        }
        texture.Apply();
        
        // Texture2DからSpriteを作成
        return Sprite.Create(texture, new Rect(0, 0, texture.width, texture.height), new Vector2(0.5f, 0.5f));
    }
}

このスクリプトも、以前の記事で作成した「UIManager」オブジェクトにドラッグ&ドロップでアタッチすると、UIManagerのインスペクタウィンドウに項目が表示されるので、項目に対応するスライダーを作成していきましょう。

スライダーは「メタリックスライダー」の作成時と同様に行い、作成できたらUIManagerのインスペクタウィンドウから今回作成した「エミッションスライダー」を設定しましょう。

アルファスライダーの作成(透明感の調整用)

最後にオブジェクトのマテリアルの透明感を調整するためのスライダーを作成していきます。

スクリプトの作成(TransparencyController.cs)

今回は「TransparencyController.cs」という名前のスクリプトを作成します。具体的なスクリプトの中身は下記です。

using UnityEngine;
using UnityEngine.UI;

public class TransparencyController : MonoBehaviour
{
    public Slider transparencySlider; // 透明度を調整するためのスライダー
    public CubeColorManager cubeColorManager; // CubeColorManagerへの参照
    public Image sliderBackground; // スライダーの背景Image
    private const int GradientTextureWidth = 256; // グラデーションテクスチャの幅

    void Start()
    {
        // スライダーの背景にグラデーションテクスチャを設定
        sliderBackground.sprite = CreateGradientSprite();

        // スライダーの値が変更されたときのイベントリスナーを追加
        transparencySlider.onValueChanged.AddListener(HandleTransparencyChange);
    }

    void HandleTransparencyChange(float value)
    {
        // 選択されたRendererの透明度を更新
        Renderer selectedRenderer = cubeColorManager.SelectedCubeRenderer;
        if (selectedRenderer != null)
        {
            Material mat = selectedRenderer.material;
            // 透明度の設定を確実にするために、レンダリングモードをTransparentに設定
            mat.SetInt("_SrcBlend", (int)UnityEngine.Rendering.BlendMode.SrcAlpha);
            mat.SetInt("_DstBlend", (int)UnityEngine.Rendering.BlendMode.OneMinusSrcAlpha);
            mat.SetInt("_ZWrite", 0);
            mat.DisableKeyword("_ALPHATEST_ON");
            mat.DisableKeyword("_ALPHABLEND_ON");
            mat.EnableKeyword("_ALPHAPREMULTIPLY_ON");
            mat.renderQueue = 3000;

            // 透明度(アルファ値)の更新
            Color color = mat.color;
            color.a = value;
            mat.color = color;
        }
    }

    Sprite CreateGradientSprite()
    {
        Texture2D texture = new Texture2D(GradientTextureWidth, 1, TextureFormat.RGBA32, false);
        // グラデーションは左が完全透明、右が完全不透明
        for (int i = 0; i < GradientTextureWidth; i++)
        {
            float alpha = i / (float)GradientTextureWidth;
            Color color = new Color(1.0f, 1.0f, 1.0f, alpha); // 白色のグラデーション
            texture.SetPixel(i, 0, color);
        }
        texture.Apply();
        
        // Texture2DからSpriteを作成
        return Sprite.Create(texture, new Rect(0, 0, texture.width, texture.height), new Vector2(0.5f, 0.5f));
    }
}

このスクリプトも、以前の記事で作成した「UIManager」オブジェクトにドラッグ&ドロップでアタッチすると、UIManagerのインスペクタウィンドウに項目が表示されるので、項目に対応するスライダーを作成していきましょう。

スライダーは「メタリックスライダー」の作成時と同様に行い、作成できたらUIManagerのインスペクタウィンドウから今回作成した「アルファスライダー」を設定しましょう。

作成結果の確認

今回は「メタリック(金属感)」「スムースネス(鏡面感)」「エミッション(発光感)」「アルファ(透明感)」を調整するスライダーを作成しました。実際にシーンを再生してみると、ドロップダウンで指定されたオブジェクト色の詳細なプロパティが変更できていることがわかります。

※今回作成した4つのスライダーは、カラー選択ボタンの下から始まり、上から「メタリック(金属感)」「スムースネス(鏡面感)」「エミッション(発光感)」「アルファ(透明感)」の順に並んでいます。

まとめ

この記事で解説したUnityにおけるマテリアルの詳細設定は、開発者がよりリアルなビジュアル効果を作成するための重要な要素です。メタリック、スムースネス、エミッション、アルファの各設定を適切に調整することで、オブジェクトはよりリアルで目を引く見た目になり、ユーザーの没入感を高めることができます。これらの設定を活用することで、あなたのUnityプロジェクトは次のレベルへと進化します。

コメント