0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Unity】無駄にCRTを使って LuraSwitch2 の独自アイコンを作る

0
Posted at

Lura's Switch がアップデートされましたね.最高ですね.
LuraSwitch2 はスイッチのアイコンがテクスチャでできているので,簡単にカスタムアイコンが作れます.
普通にお絵かきソフトで編集すればいいのですが,筆者は横着の方向性が若干ずれてきたので無駄に Custom Render Texture を使ってアイコンを作ってみようと思います.

今回は,シェーダーを知らない人向けの記事です.

CustomRenderTexture を作る

今回,カスタムアイコンを作るうえで,キャンバスの役割を担うものです.

「Project」タブの適当な場所で「右クリック > Create > CustomRenderTexture」で Custom Render Texture を作ります.名前は何でもいいですが「SwitchIconMaker」としておきましょう.

image.png

テクスチャの「Size」は,LuraSwitch2 のテクスチャに合わせて 1024x1024 にしておきます.
あと,「Update Mode」を Realtime に,「Period」を 0.2 くらいにしておきます.(テクスチャの更新頻度の設定です.)
他はとりあえずデフォルトで大丈夫です.

image.png

シェーダーを作る

アイコンを作るプログラムの部分です.

「Project」タブの適当な場所で「右クリック > Create > Shader > Unlit Shader」でシェーダーを作ります.名前は何でもいいですが「SwitchIconMaker」としておきましょう.

image.png

作ったシェーダーをダブルクリックして,メモ帳か何かで開きます.
開くとなんか書いてありますが,今回は気にせず下のコードをコピペして保存します.

処理内容が気になる方は,コメントで説明を入れているので読んでみてください.
シェーダーを作るうえで基礎となる,座標変換の基本的な処理をしています.

SwitchIconMaker.shader
Shader "Test/SwitchIconMaker/SwitchIconMaker"
{
    Properties
    {
        [NoScaleOffset] _MainTex ("Icon Texture", 2D) = "black" {}
        [NoScaleOffset] _FrameTex ("Frame Texture", 2D) = "black" {}

        [Space(10)]
        _Size ("Size", Range(0.1,1)) = 0.5

        [Space(10)]
        _Rotation ("Rotation", Range(-180,180)) = 0

        [Space(10)]
        _PositionX ("Position X", Range(-0.5,0.5)) = 0
        _PositionY ("Position Y", Range(-0.5,0.5)) = 0

        [Space(10)]
        [ToggleUI] _FlipX ("Flip X", Float) = 0
        [ToggleUI] _FlipY ("Flip Y", Float) = 0
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }

        Pass
        {
            CGPROGRAM

            #pragma target 3.5

            #pragma vertex CustomRenderTextureVertexShader
            #pragma fragment frag

            #include "UnityCustomRenderTexture.cginc"
            
            sampler2D _MainTex;
            sampler2D _FrameTex;
            
            float _Size;
            float _Rotation;
            float _PositionX;
            float _PositionY;
            float _FlipX;
            float _FlipY;

            float4 frag( v2f_customrendertexture IN ) : SV_Target
            {
                // CustomRenderTexture の uv は globalTexcoord という名前です.
                float2 uv = IN.globalTexcoord.xy;
                
                // フレーム部分の画像を読み取ります.
                float4 frameColor = tex2Dlod( _FrameTex, float4( uv, 0, 0 ) );

                // フレームの画像のうち,真ん中あたりを黒く塗りつぶしておきます.
                if ( uv.y > 0.2 && uv.y < 0.8 )
                {
                    frameColor = float4(0,0,0,1);
                }

                // アイコンの画像の読み取る位置を調整していきます.

                // uv を,テクスチャの中心からの相対座標に変換します.
                float2 pos = uv - 0.5;

                // 位置をずらします.
                pos = pos - float2( _PositionX, _PositionY );

                // 行列で回転します.
                float c, s;
                sincos( radians( _Rotation ), s, c );
                float2x2 rot = float2x2( c, -s, s, c );
                pos = mul( rot, pos );

                // サイズを調整します.
                pos = pos / max( _Size, 1e-6 );

                // pos を,テクスチャの左下からの座標に戻します.
                pos = pos + 0.5;

                // 上下左右を反転させます.
                if ( _FlipX > 0.5 ) pos.x = 1.0 - pos.x;
                if ( _FlipY > 0.5 ) pos.y = 1.0 - pos.y;

                // アイコンの画像を読み取ります.
                pos = saturate( pos );
                float4 iconColor = tex2Dlod( _MainTex, float4( pos, 0, 0 ) );

                // アイコンの透明部分を黒く塗りつぶしておきます.
                iconColor.rgb *= iconColor.a;

                // フレームとアイコンの色を合成します.
                float4 color = max( frameColor, iconColor );
                color.a = 1;

                return color;
            }

            ENDCG
        }
    }
}

保存した後 Unity にフォーカスを戻すと自動でシェーダーがコンパイルされて,使える状態になります.もしエラーが出たら,エラーのスクショを ChatGPT とかに渡せば直し方を教えてくれると思います.

問題なければ,作ったシェーダーにデフォルトのテクスチャを設定します.
シェーダーを選択し,「Inspector」の右上の鍵マークをクリックして施錠しておきます.

image.png

Lura's Switch のアセットからスイッチのテクスチャを探してきて,作ったシェーダーの「Frame Texture」の左側の四角にドラッグアンドドロップします.とりあえず「Switch_Num_0」のテクスチャとかがいいと思います.

image.png

セットできたら「Apply」します.右上の鍵は開錠しておいてください.

使いたいアイコンを用意する

アイコンは好きなものを使えばいいですが,筆者は Google Fonts のアイコンを愛用しています.

好きなアイコンを選択して PNG でダウンロードします.
「Size」は最大の 1000px,「Color」は #FFFFFF にしてください.
他は好みですが,「Weight」は 300 くらい,「Style」は Rounded にすると,LuraSwitch2 の既存のテクスチャとの相性がよさそうでした.

image.png

ダウンロードできたら,ドラッグアンドドロップで Unity にインポートします.インポート設定はデフォルトのままで大丈夫です.

image.png

マテリアルを設定する

アイコンを作るためのマテリアルを作ります.
「Project」タブの適当な場所で「右クリック > Create > Material」で新しいマテリアルを作ります.

image.png

作ったばかりのマテリアルは「Standard」シェーダーが設定されているので,さっき作ったシェーダーに差し替えます.
一番上の「Shader Standard」と書いてあるところをクリックして,検索窓に「switch」と打つと,さっき作ったシェーダーが出てくるので選択します.

image.png

新しいシェーダー用の表示に変わります.

image.png

「Icon Texture」が空っぽになっているので,ダウンロードしてきたアイコンをドラッグアンドドロップします.

image.png

今度は,最初に作った CustomRenderTexture を選択して,「Material」のところにさっき作ったマテリアルをセットします.そうするとプレビューのところにプレビューが表示されるので,マテリアルの「Size」とかを好みに調整します.

image.png

これで準備 OK です.

CRT を PNG にする

そのまま,CustomRenderTexture の右上の3点リーダーをクリックし,「Export」をクリックします.3点リーダーは,パネルのものと Inspector のものとが2つ並んでいるので間違えないように気を付けてください.

image.png

Saveのウィンドウが出てくるのでわかりやすいところに保存してください.

作った PNG を UI テクスチャに設定する

作ったテクスチャは UI で使うので,「Texture Type」を Sprite にしておきます.ほかの設定は任意ですが,LuraSwitch2 の既存のテクスチャに合わせておくのが無難でしょう.
設定できたら「Apply」します.

image.png

テクスチャをスイッチにセットする

2Dスイッチ

2Dスイッチの場合は「Switch_Image」オブジェクトの「Image」に作ったアイコンをセットするだけでできます.

image.png

3Dスイッチ

3Dスイッチの場合はマテリアルを新しく用意する必要があります.(既存のマテリアルに直接テクスチャをセットすると,ほかのスイッチにも影響が出たりします.)
「Switch_Image」オブジェクトの「Materials」にセットされているマテリアルをダブルクリックすると,「Project」タブでそのマテリアルが選択されるので,Ctrl+D で複製して,わかりやすい名前に変えて,わかりやすい場所に移動させておきます.

image.png
↓ ダブルクリック
image.png
↓ 選択して Ctrl+D
image.png
↓ 移動 & 改名
image.png

複製したマテリアルの「MainTex」に作ったテクスチャをセットします.

image.png

マテリアルを「Switch_Image」にセットしたら完成です.

image.png

完成

既存のテクスチャとなじんでいい感じになりました.

image.png

雑記

まあお絵かきソフトで作る方が普通に早いですね.

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?