Lura's Switch がアップデートされましたね.最高ですね.
LuraSwitch2 はスイッチのアイコンがテクスチャでできているので,簡単にカスタムアイコンが作れます.
普通にお絵かきソフトで編集すればいいのですが,筆者は横着の方向性が若干ずれてきたので無駄に Custom Render Texture を使ってアイコンを作ってみようと思います.
今回は,シェーダーを知らない人向けの記事です.
CustomRenderTexture を作る
今回,カスタムアイコンを作るうえで,キャンバスの役割を担うものです.
「Project」タブの適当な場所で「右クリック > Create > CustomRenderTexture」で Custom Render Texture を作ります.名前は何でもいいですが「SwitchIconMaker」としておきましょう.
テクスチャの「Size」は,LuraSwitch2 のテクスチャに合わせて 1024x1024 にしておきます.
あと,「Update Mode」を Realtime に,「Period」を 0.2 くらいにしておきます.(テクスチャの更新頻度の設定です.)
他はとりあえずデフォルトで大丈夫です.
シェーダーを作る
アイコンを作るプログラムの部分です.
「Project」タブの適当な場所で「右クリック > Create > Shader > Unlit Shader」でシェーダーを作ります.名前は何でもいいですが「SwitchIconMaker」としておきましょう.
作ったシェーダーをダブルクリックして,メモ帳か何かで開きます.
開くとなんか書いてありますが,今回は気にせず下のコードをコピペして保存します.
処理内容が気になる方は,コメントで説明を入れているので読んでみてください.
シェーダーを作るうえで基礎となる,座標変換の基本的な処理をしています.
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」の右上の鍵マークをクリックして施錠しておきます.
Lura's Switch のアセットからスイッチのテクスチャを探してきて,作ったシェーダーの「Frame Texture」の左側の四角にドラッグアンドドロップします.とりあえず「Switch_Num_0」のテクスチャとかがいいと思います.
セットできたら「Apply」します.右上の鍵は開錠しておいてください.
使いたいアイコンを用意する
アイコンは好きなものを使えばいいですが,筆者は Google Fonts のアイコンを愛用しています.
好きなアイコンを選択して PNG でダウンロードします.
「Size」は最大の 1000px,「Color」は #FFFFFF にしてください.
他は好みですが,「Weight」は 300 くらい,「Style」は Rounded にすると,LuraSwitch2 の既存のテクスチャとの相性がよさそうでした.
ダウンロードできたら,ドラッグアンドドロップで Unity にインポートします.インポート設定はデフォルトのままで大丈夫です.
マテリアルを設定する
アイコンを作るためのマテリアルを作ります.
「Project」タブの適当な場所で「右クリック > Create > Material」で新しいマテリアルを作ります.
作ったばかりのマテリアルは「Standard」シェーダーが設定されているので,さっき作ったシェーダーに差し替えます.
一番上の「Shader Standard」と書いてあるところをクリックして,検索窓に「switch」と打つと,さっき作ったシェーダーが出てくるので選択します.
新しいシェーダー用の表示に変わります.
「Icon Texture」が空っぽになっているので,ダウンロードしてきたアイコンをドラッグアンドドロップします.
今度は,最初に作った CustomRenderTexture を選択して,「Material」のところにさっき作ったマテリアルをセットします.そうするとプレビューのところにプレビューが表示されるので,マテリアルの「Size」とかを好みに調整します.
これで準備 OK です.
CRT を PNG にする
そのまま,CustomRenderTexture の右上の3点リーダーをクリックし,「Export」をクリックします.3点リーダーは,パネルのものと Inspector のものとが2つ並んでいるので間違えないように気を付けてください.
Saveのウィンドウが出てくるのでわかりやすいところに保存してください.
作った PNG を UI テクスチャに設定する
作ったテクスチャは UI で使うので,「Texture Type」を Sprite にしておきます.ほかの設定は任意ですが,LuraSwitch2 の既存のテクスチャに合わせておくのが無難でしょう.
設定できたら「Apply」します.
テクスチャをスイッチにセットする
2Dスイッチ
2Dスイッチの場合は「Switch_Image」オブジェクトの「Image」に作ったアイコンをセットするだけでできます.
3Dスイッチ
3Dスイッチの場合はマテリアルを新しく用意する必要があります.(既存のマテリアルに直接テクスチャをセットすると,ほかのスイッチにも影響が出たりします.)
「Switch_Image」オブジェクトの「Materials」にセットされているマテリアルをダブルクリックすると,「Project」タブでそのマテリアルが選択されるので,Ctrl+D で複製して,わかりやすい名前に変えて,わかりやすい場所に移動させておきます.

↓ ダブルクリック

↓ 選択して Ctrl+D

↓ 移動 & 改名

複製したマテリアルの「MainTex」に作ったテクスチャをセットします.
マテリアルを「Switch_Image」にセットしたら完成です.
完成
既存のテクスチャとなじんでいい感じになりました.
雑記
まあお絵かきソフトで作る方が普通に早いですね.

















