[性DEC2024下半期]次回作に同じUI素材を使いまわして且つ色もさくっと調整したーい！

次回作に同じ UI素材を使い まわして且つ色もさくっと調 整したーい！ 2024.12.15 性DEC2024 下半期 @ながらえんぺる+くまにゃん

登壇者 名前： ながらえんぺる サークル名：ながらえん X： @nagara_studio 主な活動：技術同人誌執筆・ゲーム開発の支援・ゲーム開発 直近の実績 ● ● [ももいろたんざく] ちっちゃい先生と恋してる～教師と元教え子の甘々同棲生活 ～+Game もしも、会社の情シス担当がゼロ人になったら。 ○ 未経験から1人情シスになった 1年の話をつらつらと書いた本

サポート登壇者 名前：くまにゃん サークル名：ももいろたんざく X： @momoiro_frame 主な活動：純愛いちゃらぶな18禁作品を主に作ってます。

本日は「ももいろたんざく」さんから 12月に出る こちらの 2作品の事例です

この2作品は前作の仕組みを再利用して開発しました Unity+Naninovelで開発

本開発での課題

UIのデザイン は同じでOK 色は作品に合わせた色 にしたい

手作業で直すのはめんどいなぁ

手作業でやる場合 1. 色を決める 2. Unityのプロジェクト内にあるUIのパーツそれぞ れの色の値を手作業で直す (フレームとかアイコンとか文字とかとか…

毎回手作業は嫌なので効率化したい

前作のUI数はものすごく多いわけではないが … ● 今後も色を変えたいはよくありそう ● 前作はデザイナーさんがカラーパレットを定義し てくれているから活用したい ● 今後UIや色の種類も増えるかもしれない

なにかなかったかなぁ・・・

これでは？！

調査開始 ※専門用語が増えます

uPaletteとは @harumak_11氏が2021年に公開した色を管理するオープンソースのライ ブラリ（ツクールで言うプラグイン） 日本人製なので日本語マニュアルがある 管理できるもの ● ● ● ● 色 グラデーション 文字スタイル テーマ 反映できるもの ● UnityのUIであればだいたいに対応してそう

色

色の管理をする手順 ● Palette Storeを作成する ● エントリを作成する ● エントリの色を設定する ● 色同期用のコンポーネントをUIに付ける ● 同期用のコンポーネントがどのエントリと同期す るか設定する

実際にちょっとやってみましょう

グラデーション・文字スタイルも同様 ● Palette Storeを作成する ● エントリを作成する ● エントリを設定する ● 同期用のコンポーネントをUIに付ける ● 同期用のコンポーネントがどのエントリと同期す るか設定する

テーマ

テーマとは ● uPaletteで定義されているもの ● エントリで設定されている値をテーマ単位でまと められる ● UIスキンみたいなイメージ ● ゲーム実行中に動的に切り替える事が可能

こっちもやってみましょう

uPaletteの基本は以上！ 今日みせたものがわかれば今すぐ活用できると思います！ 気になる方は「 uPalette」で検索するか下記 URLから是非 https://github.com/Haruma-K/uPalette/blob/master/README_JA.md

• https://github.com/Haruma-K/uPalette/blob/master/README_JA.md

つづいて uPaletteを導入したこちらの話

毎回手作業は嫌なので効率化したい

これは効率化できたのか？

結論：できました

どう良かったか？ ● UIの色を変える敷居が大きく下がった ● オープンソースなので自分で機能改善もできる

UIの色を変える敷居が大きく下がった ● 導入しない場合と比べて覚える手順が圧倒的 に少ない ● 色の変更と反映までのサイクルが短いし反映さ れる範囲も段違い ● 敷居が下がることでエンジニア以外が対応でき るようになった。

自分で機能拡張できる ● どう作られているかは全部公開されている ● 独自のコンポーネントを適用する例などもマニュ アルにある

例:既存のUIの色をエントリに追加できる拡張 ● AddEntryを押すと設定された色がエントリに追加される

どんな課題がある？

どんな課題がある？ ● アニメーションは対象外 ○ ちっちゃい先生では一部のボタンにアニメーションで色を つけているところがあったのでこういうところは現状カ バーできない ● 初回のセットアップは大変 ○ UIを一つ一つ見つける作業は必要…これが終わればあ とは楽 ○ 今回は拡張を作ることで少し効率化を行った。

まとめ ● ☀uPaletteはUIの色管理をしたいなら簡単で強力 ● ☀Unityに精通しなくてもUIの色調整が可能になる ● ☀今回の2作品では効率化できた ● ☁uPaletteを使っても初回は手間が多い ● ☔アニメーションには対応していない

ご静聴ありがとうございました。