Unityでストップウォッチを作る その10 シェーダーを変更する

Pocket

今回は、見た目でちょっと気になる所を修正したいと思います。

背景を黒くしているとあまり分からないのですが、試しに背景を白くしてみると目盛りのフチがやや黒ずんでいるのが分かります。特に針は輪郭がはっきり出ています。

unitysw_10_1.png

このようにテクスチャ内の不透明な部分と透明な部分を補間した境目が黒ずんでしまうのですが、なぜ起きるのかについては以下のページで補間アルファの問題として丁寧に解説されていたので、気になる方は参考にしてみると良いと思います。


乗算済みアルファとは? その1:補間アルファの問題点

ちなみに、テクスチャの設定を「Billinear」から「Point」に変えて補間を効かなくすればなくなるのですが、それだときれいに描画されなくなってしまうので、補間の設定は切らずに、上記のページでも解説されている「乗算済みアルファ」という状態にしつつシェーダーのブレンドモードも変えて、解決しようと思います。

まず、テクスチャの方を乗算済みにして描画するようにします。BSWUtility.csのDrawRect()を以下の様に変更してください。

//
// BSWUtility.csの一部
//
static public void DrawRect(Texture2D tex, Rect rect, Color col) {

   // 追加ここから
   col.r *= col.a;
   col.g *= col.a;
   col.b *= col.a;
   //

上記のコードではアルファの値をRGBにかけています。コードを見るからに、アルファを効かせていなければ結果は変わりませんが、半透明の状態がテクスチャに含まれる場合は必要な処理です。

次に、シェーダーを作成します。ProjectウィンドウのCreateメニューから「Shader」を選択し、「Unlit-Alpha Premultiplied」と名前をつけて作成してください。また、一応「Shader」フォルダを作ってその中に移動しておいてください。

unitysw_10_2.png

作成出来たら以下のコードで上書きしてください。

//
// Unlit-Alpha Premultiplied.shader
//
Shader "Unlit/Transparent Premultiplied Alpha" { //

「Material」のシェーダーの項目の中に「Unlit/Transparent Premultiplied Alpha」が追加されていると思いますので、そちらに変更してください。

unitysw_10_3.png

このシェーダーコードは、Unity標準で入っている「Unlit/Transparent」のコードを2行ほど変更しているだけです。Unity標準搭載のシェーダーはUnity上ではコードが見れませんが、Web上に公開されていて、以下のページからダウンロードする事が出来ます。

http://download-cdn.unity3d.com/unity/download/archive

今回ベースにしているシェーダーはダウンロードしたフォルダ内の「DefaultResourcesExtra/Unlit/Unlit-Alpha.shader」にあります。

シェーダーの変更箇所は、シェーダーの名前と「Blend One OneMinusSrcAlpha」の部分です。左の値の「One」が元は「SrcAlpha」でした。「SrcAlpha」というのはこれから描画する色にアルファの値をかけるモードなのですが、それはテクスチャ側でやる事にしたので「One」に変更してアルファをかけずそのまま描画する事にしています。右の値は描画される背景側のモードなのでそのままにしておきます。

今回のWebPlayerビルド

今回は以上です。次回は最後の予定ですが、計測中のデータを保存してアプリを落としても計測が中断しないようにしたいと思います。

 

前へ | 次へ

Unityでストップウォッチを作る その10 シェーダーを変更する」への1件のフィードバック

  1. giih

    非常にためになるチュートリアルを有り難うございます。
    チュートリアルを参考にして私もストップウォッチをUnityで制作しており、最後の計測中のデータを保存してアプリを落としても計測が中断しないようにする方法に興味があるのですが、今後更新されるご予定などはありますでしょうか??

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です