湯呑み茶碗の開発日記

WEBシステム屋の私がUnityの趣味開発で得た技術等をブログに載せていきます。

UnityのUIにテキスト、画像をある程度自動表示 〜値自動設定編〜

前回の記事の続きになります。

UnityのUIにテキスト、画像をある程度自動表示 〜紹介編〜 - 湯呑み茶碗の開発日記

 

ダウンロードしたライブラリ内の「AutoGUISample.unity」を開いてみてください。

 

まずは実際に動かしてみて値がUIに設定される様子を確認してみてください。

f:id:yunomichawan:20161024000612g:plain

UIに表示する処理について

では実際に表示する処理をまとめている「AutiGuiSampleManager.cs」を見ていきます。


#region button event

    /// <summary>
    /// UI(入力コントロール群)にキャラクターデータを表示する。
    /// 「→」ボタンのイベントです。
    /// </summary>
    public void ShowCharacterInput()
    {
        InputCharacterData.Show(SampleCharacterData);
    }

    /// <summary>
    /// UIにキャラクターデータを表示する。
    /// 「Show Output」ボタンのイベントです。
    /// </summary>
    public void ShowCharacterDataOutput()
    {
        SetComponent.SetGuiComponent(this.OutputCharacterTransform, SampleCharacterData);
    }

    /// <summary>
    /// UIに選択データを表示する。
    /// 「Show Toggle Status」ボタンのイベントです。
    /// </summary>
    public void ShowToggleStatus()
    {
        InputToggleStatus.Show(SampleToggleStatus);
    }

    /// <summary>
    /// 入力されたデータを取得
    /// 「Get Input Data」ボタンのイベントです。
    /// </summary>
    public void GetCharacterInput()
    {
        CharacterData characterData = new CharacterData();
        SetComponent.SetGuiComponentToObject<CharacterData>(this.InputCharacterTransform, characterData);
        this.SampleCharacterData = characterData;

        ToggleStatus toggleStatus = new ToggleStatus();
        SetComponent.SetGuiComponentToObject<ToggleStatus>(this.ToggleTransform, toggleStatus);
        this.SampleToggleStatus = toggleStatus;
    }

    /// <summary>
    /// 入力値を反映させる
    /// 「←」ボタンのイベントです
    /// </summary>
    public void ReflectionInputData()
    {
        CharacterData characterData = new CharacterData();
        SetComponent.SetGuiComponentToObject<CharacterData>(this.InputCharacterTransform, characterData);
        SetComponent.SetGuiComponent(this.OutputCharacterTransform, characterData);
    }

    #endregion

このソース部分で行っていることは「Inspector」上で設定したオブジェクトの子オブジェクトに対して値を設定しています。

言葉だけだとものすごくわかりにくいと思うので画像を交えて説明していきます。

 オブジェクトとプロパティのマッピング

「AutiGuiSampleManager.cs」では3つのTransformをインスペクター上で設定しています。


#region inspector property

    /// <summary>
    /// 出力コントロールの親オブジェクト
    /// </summary>
    public Transform OutputCharacterTransform;

    /// <summary>
    /// ステータス入力コントロールの親オブジェクト
    /// </summary>
    public Transform InputCharacterTransform;
    public InputControlsParent InputCharacterData { get { return this.InputCharacterTransform.GetComponent<InputControlsParent>(); } }

    /// <summary>
    /// 選択コントロールの親オブジェクト
    /// </summary>
    public Transform ToggleTransform;
    public InputControlsParent InputToggleStatus { get { return this.ToggleTransform.GetComponent<InputControlsParent>(); } }

    #endregion

インスペクター上での設定はこんな感じです。

f:id:yunomichawan:20161017005759g:plain

その中で「CharacterData」オブジェクトをピックアップします。

f:id:yunomichawan:20161016153627p:plain

赤枠に囲まれたプロパティ名とオブジェクト名を照らし合わせてみてください。

オブジェクトとプロパティがマッピングされています。これがこのライブラリで一番重要なことになります!

この状態で「SetComponent.SetGuiComponent(this.OutputCharacterTransform, SampleCharacterData);」を呼び出すと「SampleCharacterData」のデータがUIに反映されます。

マッピングがされていなければUIにテキスト、画像が表示されることはありません。


GuiDataAttribute属性について
  • DispFormat ・・・ テキスト(Text)に表示する際のフォーマット。Text以外のコンポーネント(InputField等)には対応しておりません。

表示するテキストにフォーマットを設定したい場合は「GuiDataAttribute」を各プロパティに設定してください。「属性クラス」が設定されていなくても問題はありません。

GuiDataAttribute属性が設定されて表示されるテキストはこんな感じになります。

フォーマットを変えるとこんな感じですということで差分も。

「設定された属性を変更して表示を行う。(差分表示)」

 

あともう一回続きます。次回はGUIから値を取得する方法を紹介します。