ARアプリ カラーコード入力機能を追加

AR

前回前半と後半に分けてオブジェクトの色変更機能の実装を紹介しました

今回はその機能にカラーコード入力機能を追加してみようと思います



カラーコードとは

カラーコード(color code)とは、WEBページ上の色を表現するために使用する制御コードのことです

一般的には、主にHTMLやCSSなどで使用される、「#」から始まる6桁の16進数で表記されるコードを指します

こちらの記事から引用させていただきました

コードの見方や原理なども分かりやすく記載されているので興味がある方は覗いてみて下さい

UIの追加

まずはカラーコード入力用にUIパネルを作成しました

色変更モードから呼び出せるようにボタンを配置

合わせるとこのようになります

こうすることでカラーコード入力受付状態でも対象マテリアルを変更できるようにするのが狙いです

スクリプト更新

 public InputField colorcodeInput; // カラーコードを入力するInputField  
 public Text colorcodewarningText; // エラーメッセージ用のText  

ヒエラルキー上で対応するUIをアタッチできるようColorPickerスクリプトに宣言を追加

    public void ApplyColorCodeToSelectedObject(GameObject targetObject)//色決定ボタン(ColorCode)
    {

        string colorCode = colorcodeInput.text;
        Color colorCodeColor;
        // 警告メッセージをリセット  
        colorcodewarningText.text = "";
       

    if (targetObject != null && materialDropdown.value < materials.Count && ValidateInput())
        {
            if (ColorUtility.TryParseHtmlString(colorCode, out colorCodeColor))
            {
                int selectedIndex = materialDropdown.value;
                //強調表示マテリアルから元のマテリアルに戻す
                RevertHighlight(selectedIndex);    

                Material selectedMaterial = materials[materialDropdown.value];

                //選択されたマテリアルにカラーコードを適用
                selectedMaterial.color = colorCodeColor;
                //変換成功
                colorcodewarningText.text = $"カラーコード:{colorCode}はColorに変換すると{colorCodeColor.ToString()}";
            }
            else
            {
                //変換失敗
                colorcodewarningText.text = $"{colorCode}はColorに変換出来ません";
             
            }
        }

        colorcodeInput.text = "";
   
    }
public void ColorCodeBackButton()
{
    string colorCode = colorcodeInput.text;
   
    // 警告メッセージをリセット  
    colorcodewarningText.text = "";
}


private bool ValidateInput()
{
    // InputFieldのテキストが空でないことを確認  
    if (string.IsNullOrWhiteSpace(colorcodeInput.text))
    {
        colorcodewarningText.text = "カラーコードが入力されていません";
       
        return false;
    }
   
    return true;
}

そして新たに3つのメソッドを追加しました

if (ColorUtility.TryParseHtmlString(colorCode, out colorCodeColor))

の部分で入力されたものがカラーコードとして成り立つか判断して成立であればコードに該当する色がout で返されるのでcolorCodeColorに格納し、直下を実行する形になります

colorcodewarningText.text = $”カラーコード:{colorCode}はColorに変換すると{colorCodeColor.ToString()}”;

カラーコードによる色変更が成功した場合、そのカラーコードのRGBAパラメータを表示するようにしてあります

色決定ボタンを押した際にprivate bool ValidateInput()メソッドでインプットフィールドのヌルチェックをし、空であればエラーメッセージを表示するようにしました

実行

こちらの記事から3つのカラーコードを抜粋させていただきました

これを実際に入力して正しく反映させるか見てみましょう

もふもふ
もふもふ

ドキドキ(/ω\)

lightskybleのカラーコードを入力

成功です!

文字が見えにくいので拡大すると

RGBA値が表示されているのでこちらも成功です

残りの2色も試してみましょう

aquamarineのコード

crimsonのコード

どちらも色が正確に反映されているので成功です

何も入力せずに決定を押した場合

適当に文字を入力した場合

どちらもエラーメッセージが正しく出力されているので成功です



まとめ

カラーコードを色に変換する際は

ColorUtility.TryParseHtmlString(カラーコード, out 色)

で可能

タイトルとURLをコピーしました