Liberent-Dev’s blog

株式会社リベル・エンタテインメントのテックブログです。

SpineテクスチャがUnityでうまく表示されない原因と対処法

こんにちは!
システム開発部のK.Mです。

今月も別メンバーが執筆した記事となります。


こんにちは。
デザイン部の坂田です。

UnityでSpineデータを扱っていたところ、テクスチャがうまく表示されない問題に遭遇しました。
調査したところUnityの設定に原因があったため、今回はその原因と対処方法についてまとめます。

  • はじまり

    • Spine側のTex書き出し設定に「乗算済みアルファ」「ブリード」という選択肢があり。
    • まずは「乗算済みアルファ」で書き出し。

  • 不具合の内容

    • パーツのアウトラインが黒ずんでしまったり、白くなってしまった。
    • モデル全体が白っぽく表示されてしまった。
       
    • パーツの周囲に変な線が出てしまった。

  • 原因
    • PNG画像の処理方法が、Unity側とPNG画像側で異なっていたのが原因

上記の対応方法を記載していきます。

ざっくりとした発生原因の説明

実は、世の中のPNG画像(以降、テクスチャ)には
「プリマルチプライドアルファ(乗算済みアルファ)」形式
「ストレートアルファ(ブリード)」形式
の2種類が存在しています。

テクスチャを別の画像の上に重ねたとき、
重なった部分の色をどのように決定するか」の仕組みがそれぞれ違っていた!

この画像の重ね合わせ処理を「アルファ合成」と言います。

テクスチャがどちらの形式で作られているかによって、Unityで設定すべき内容が変わり、今回の不具合は、テクスチャとUnityの設定がチグハグになっていたため発生していました。

それぞれを正しく表示するための設定方法は以下の通りとなります。

「乗算済みアルファ」で書き出した際のUnity設定

  • Spineエクスポート時、「乗算済みアルファ」を選択した場合

    1. Preferencesの設定
      Unity上部メニューから Edit > Preferences を開く。

      左の一覧から「Spine」を選び、以下のように設定する。
      Atlas Texture SettingsPMATexturePreset
      Additive MaterialSkeletonPMAAdditive
      Multiply MaterialSkeletonPMAMultiply
      Screen MaterialSkeletonPMAScreen

    2. テクスチャ設定
      sRGBAlpha Is Transparencyのチェックを外す。

    3. マテリアル設定
      Straight Alpha Textureのチェックを外す。

「ブリード」で書き出した際のUnity設定

  • Spineエクスポート時、「ブリード」を選択した場合

    1. Preferencesの設定
      Unity上部メニューから Edit > Preferences を開く。

      左の一覧から「Spine」を選び、以下のように設定する。
      Atlas Texture SettingsStraightAlphaPreset
      Additive MaterialSkeletonStraightAdditive
      Multiply MaterialSkeletonStraightMultiply
      Screen MaterialSkeletonStraightScreen


    2. テクスチャ設定
      sRGBAlpha Is Transparencyにチェックを入れる。

    3. マテリアル設定
      Straight Alpha Textureにチェックを入れる。

Unity:よくある不具合と原因一覧

白フチが出る


Spineのテクスチャが「乗算済みアルファ」で書き出されているのに、Unity内のテクスチャのInspectorで「sRGB」にチェックが入っているのが原因。
チェックを外すと正常表示となる。

黒フチが出る


Spineのテクスチャが「乗算済みアルファ」で書き出されているのにUnityのPreferencesの設定が乗算済みアルファ用になっていないのが原因。
上記を参考に設定を見直すと正常表示となる。

パーツの周りに変な線が出る


Spineのテクスチャが「ブリード」で書き出されているのに、UnityのPreferencesの設定がブリード用になっていないのが原因。
上記を参考に設定を見直すと正常表示となる。

全体が白む


Spineのテクスチャが「ブリード」で書き出されているのに、Unity内のテクスチャのInspectorで「sRGB」にチェックが入っていないのが原因。
チェックを入れると正常表示となる。

参考サイト


リベル・エンタテインメントでは、このような最新技術などの取り組みに興味のある方を募集しています。
もしご興味を持たれましたら下記サイトにアクセスしてみてください。
https://liberent.co.jp/recruit/