本日はUnityの小ネタ枠です。
Unityのスクリプトでユーザ名からYouTubeみたいな自動生成アイコンを作ってみたので記事にします。
ユーザ名からアイコンを自動生成する
ランダムな背景色にユーザ名の文字が書き込まれたユーザアイコンを生成するため、以下のImageとTextを組み合わせた下地となるUIオブジェクトを作成しました。
下地のImage画像はカラーが変更できるように以下のMaterial Design Iconsから白抜きの透過画像を取得しました。
pictogrammers.com
アイコンをカスタムしてダウンロードする方法の詳細は以下の記事を参照ください。
bluebirdofoz.hatenablog.com
サンプルスクリプト
ユーザ名の先頭1文字をTextとして抜き出し、ユーザ名を基に背景色を決定する以下のサンプルスクリプトを作成しました。
背景色が完全にランダムだとテキスト文字が見えづらくなることがあったので、サンプルの10色から選択する形にしています。
・UserIconMakerTest.cs
using TMPro; using UnityEngine; using UnityEngine.UI; namespace SisTuber.View.BroadcastScene.CommentPanel.CommentList { public class UserIconMakerTest : MonoBehaviour { /// <summary> /// 自動生成ユーザアイコンの背景 /// </summary> [SerializeField] Image _autoIconBackground; /// <summary> /// 自動生成ユーザアイコンのテキスト /// </summary> [SerializeField] TMP_Text _autoIconText; /// <summary> /// ユーザ名 /// </summary> [SerializeField] private string _userName = "ユーザ"; void OnValidate() { MakeUserIcon(_userName); } private void MakeUserIcon(string userName) { if (string.IsNullOrEmpty(userName)) userName = "Nothing"; // 名前の1文字目をテキストに設定 _autoIconText.text = userName.Substring(0, 1); // ユーザ名からハッシュ値を取得する uint userNameHash = (uint)userName.GetHashCode(); // ハッシュ値を基に色を決定する Color iconColor = (userNameHash % 10) switch { 0 => new Color(1f, 0.5f, 0.5f), // 赤 1 => new Color(0.5f, 1f, 0.5f), // 緑 2 => new Color(0.5f, 0.5f, 1f), // 青 3 => new Color(1f, 1f, 0.5f), // 黄色 4 => new Color(0.5f, 1f, 1f), // 空色 5 => new Color(1f, 0.5f, 1f), // ピンク 6 => new Color(1f, 0.75f, 0.5f), // オレンジ 7 => new Color(0.75f, 0.5f, 1f), // 紫 8 => new Color(0.5f, 1f, 0.75f), // 黄緑 9 => new Color(0.75f, 0.75f, 0.75f), // グレー // 上記以外は例外 _ => throw new System.Exception("Invalid color") }; _autoIconBackground.color = iconColor; } } }
スクリプトをシーンに配置し、ImageとTextの参照を設定して準備完了です。
入力したユーザ名に応じてアイコンが自動生成されます。