ニンテンドースイッチ カスタムホームメニューuLaunch用カスタムテーマ作成方法

記事の方法を試す前や質問をするまえに必ず下記リンクを見てからにしてください！
このブログについて
http://yyoossk.blogspot.jp/1970/11/blog-post_24.html


こちらではニンテンドースイッチのカスタムホームメニューuLaunch用カスタムテーマ作成方法を紹介します

https://github.com/XorTroll/uLaunch/wiki/Themeing
https://github.com/IcosaSwitch/uLaunch-Previewer/wiki/UI

・カスタムホームメニューuLaunch紹介

作成した自作カスタムテーマは、本体に導入しなくても下記リンクのツールを使用すればpcで確認できます
・カスタムテーマを導入する前にテストできるuLaunch-Previewer紹介

カスタムテーマを作成するにあたり、すべてのファイルを作成しなくても、不足しているものは自動でデフォルトのものが読み込まれるようです
例えばUIのみ、またはサウンドの変更のみも可能

カスタムテーマの作成は実際に誰かが作ったものをベースに作った方が効率がよいと思います
・カスタムテーマリンク集
又は下記リンクよりuLaunchのソースをダウンロード＆解凍
https://github.com/XorTroll/uLaunch/archive/master.zip
uLaunch-master/LibraryAppletQMenu/RomFs
フォルダの中にデフォルトのテーマが入っているのでそれをベースに作成する

テーマの配置
sdカードの中の
ulaunch/themes/カスタムテーマ名(半角英数字)


最低限必要なファイル
Manifest.json
sdカードの中の
ulaunch/themes/カスタムテーマ名(半角英数字)/theme/Manifest.json
に配置


Manifest.json作成方法
sdカードの中の
ulaunch/themes/カスタムテーマ名(半角英数字)/theme
フォルダの中で右クリックより新規作成でテキストファイルを作成し、拡張子ごとManifest.jsonにリネーム
下のものをコピペし、日本語表記の部分を変更して保存

{
    "name": "カスタムテーマの名前",
    "format_version": 0,
    "release": "0.1",
    "description": "カスタムテーマの説明",
    "author": "作成者名"
}

name: カスタムテーマの名前(半角英数字)
format_version: カスタムホームメニュー自体がバージョンアップした場合に新しい形式で作成しなおさないといけない場合が出てくる可能性があるため、対応するカスタムホームメニューのバージョンを表記する必要がある
release: カスタムテーマ自体のバージョン
description: カスタムテーマの説明(半角英数字)
author: カスタムテーマの作者名


カスタムテーマのアイコン
Icon.png
100x100のPNG形式
ulaunch/themes/カスタムテーマ名(半角英数字)/theme/Icon.png
に配置


BGM
・BGM.mp3
mp3形式
ulaunch/themes/カスタムテーマ名(半角英数字)/sound/BGM.mp3
に配置

・BGM.json
sdカードの
ulaunch/themes/カスタムテーマ名(半角英数字)/sound
フォルダの中で右クリックより新規作成でテキストファイルを作成し、拡張子ごとBGM.jsonにリネーム
下のものをコピペし、日本語表記の部分を変更して保存
デフォルトの設定

{
    "loop": true,
    "fade_in_ms": 1500,
    "fade_out_ms": 500
}

loop: ループ再生するかどうか
有効ならtrue
無効ならfals
fade_in_ms: BGMが再生されてから何秒後に音量が大きくなるか
0なら無効
fade_out_ms: BGMが再生されてから何秒後に再生をやめるか
0なら無効


効果音
wav形式
・TitleLaunch.wav
ゲーム又は自作ソフト起動時に再生される効果音
ulaunch/themes/カスタムテーマ名(半角英数字)/sound/TitleLaunch.wav
に配置

・MenuToggle.wav
メニューを切り替える際に再生される効果音
ulaunch/themes/カスタムテーマ名(半角英数字)/sound/MenuToggle.wav
に配置


UI
sdカードの中の
ulaunch/themes/カスタムテーマ名(半角英数字)/ui
フォルダの中に配置

・ui.json
アイコンの位置などを変更
sdカードの
ulaunch/themes/カスタムテーマ名(半角英数字)/ui
フォルダの中で右クリックより新規作成でテキストファイルを作成し、拡張子ごとui.jsonにリネーム
下のものをコピペし、変更を加えたら保存
デフォルトの設定

{
    "suspended_final_alpha": 80,
    "text_color": "#e1e1e1ff",
    "menu_focus_color": "#5ebcffff",
    "menu_bg_color": "#0094ffff",

    "main_menu": {
        "connection_icon": {
            "x": 10,
            "y": 10
        },
        "settings_icon": {
            "visible": false
        }
    }
}

色は「#RRGGBBAA」hex-RGBA形式
https://codepen.io/malyw/pen/wGNOrd
https://cssgenerator.org/rgba-and-hex-color-generator.html
https://jsfiddle.net/teddyrised/g02s07n4/embedded/result/
https://www.rapidtables.com/web/color/index.html

suspended_final_alpha：中断されたタイトルのキャプチャに含まれる最終アルファ（0は完全に非表示にするため、デフォルトは80）
text_color：UIのすべてのテキストが使用する色。
menu_focus_color：フォーカスが合ったときに表示される
menu_bg_color：すべてのメニューの背景色。

アイコンやテキストの表示位置のカスタマイズ
visibleがfalseの場合、無効化されてしまう
main_menu：
top_menu_bg
logo_icon
connection_icon
user_icon
web_icon
time_text
battery_text
battery_icon
settings_icon
themes_icon
firmware_text
menu_toggle_button
banner_image
banner_name_text
banner_author_text
banner_version_text

startup_menu：
info_text
のみ


フォント
Font.ttf
ulaunch/themes/カスタムテーマ名(半角英数字)/ui
フォルダの中に配置


アイコン画像
sdカードの中の
ulaunch/themes/カスタムテーマ名(半角英数字)/ui
フォルダの中に配置

・AllTitles.png
256x256 PNG形式
all titlesのアイコン画像

・Folder.png
256x256 PNG形式
フォルダのアイコン画像

・Cursor.png
296x296 PNG形式
自作ソフトやゲーム、何かの項目を選択した時に見える枠

・Background.png
1280x720 PNG形式
背景画像

・Hbmenu.png
256x256 PNG形式
hbmのアイコン画像

・バナー画像
1280x135 PNG形式
BannerFolder.png　フォルダのバナー
BannerHomebrew.png　自作ソフトのバナー
BannerInstalled.png　インストール済みのバナー


トップメニュー
メインメニューの上部に表示される小さなバーで、背景とアイコンはカスタマイズ可能
sdカードの中の
ulaunch/themes/カスタムテーマ名(半角英数字)/ui
フォルダの中に配置

メニューアイコン
バッテリーアイコンを除くすべて50x50のアイコン画像（BatteryNormalIconおよびBatteryChargeIconは30x30）

・TopMenu.png
メニューの背景
1220x85 PNG形式

・トップメニューのアイコン
50x50 PNG形式
ConnectionIcon.png　接続中
NoConnectionIcon.png　未接続
SettingsIcon.png　Settingsのアイコン画像
ThemesIcon.png　カスタムテーマのアイコン画像
WebIcon.png　ウェブブラウザのアイコン画像