パープルハット

※当サイトではGoogleアドセンス広告を利用しています

Unity Shader2D SpriteEditorで分割したpngファイルに対する処理





リンク

この記事は前回の記事の続きになっているので、こちらも参考にしてみてください。
kiironomidori.hatenablog.com

Shaderについてのまとめ記事はこちら
kiironomidori.hatenablog.com




v2f.uvを用いた処理の際に生じたトラブル

前回のShaderについて画像の右側80%を紫色にする処理を行うためにfrag関数を以下の様に書き換えました。

fixed4 frag(v2f i) : SV_Target
{
    fixed4 col = tex2D(_MainTex, i.uv);

    //透過されていない+x座標が0.2以上の部分は紫にする
    if (col.a > 0.8 && i.uv.x > 0.2) {
        return fixed4(1, 0, 1, 1);
    }
    else {
        col.rgb = 1 - col.rgb;
        return col;
    }
}


しかし、実行結果は次のようになり、紫になっている部分が80%どころか半分以下です。





不具合の原因

いろいろと調べてみるとどうやらuv座標はspriteEditorで分割する前の画像に対応しているということが分かりました。


なので先ほどの実行結果において画像を「majo_0」から「majo_1」に変更すると画像全体が紫になる様子が確認できます。





改善策

画像をSprite Editorで分割するのではなくはじめから分割した画像を用意しておけばこの問題は解決できそうです。
一応その方法は以前に記事にしたので参考にしてみてください。
kiironomidori.hatenablog.com

画像の分割のために「majo.png」のRead/Write Enable」にチェックを入れて、「Apply」を押して設定を適用します
続いて、先ほどの記事を参考に「TexSpliter.cs」を作成します。更にエディタ上で「エディタ拡張」⇒「画像分割」と選び、編集用のウィンドウを表示して設定をします(Assetsフォルダ直下に「SpImage」フォルダを作るのを忘れずに)。





分割ボタンを押したら「SpImage」フォルダ内に以下のファイルが生成されています。


シーン上のゲームオブジェクトの画像を画像を元の「majo_1」から分割後の「majo_1」に差し替えると、次の画像の様に正しく処理がされていることが確認できます。