FC2ブログ
    03 «1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.» 05

    ハルシオンシステムの気ままBlog

    株式会社ハルシオンシステムのメンバーが送る、UnityやらJavaやらの技術的話題から、自社開発のアプリの宣伝とかとかのブログです。ほんと気ままにいきたいと思います。更新日は毎週 月 木でっす!

     

    【ハルシオンブログ】Layoutグループの中で、ほかのオブジェクトのサイズが変わったときに自動で他のオブジェクトの位置を調整する方法 

    おこんにちは。坂内っす。

    ポケットガール~受け継がれし希望~よろしくお願いします。
    URL(Android):https://play.google.com/store/apps/details?id=com.halcyon.pocketgirl3
    URL(iOS):https://itunes.apple.com/jp/app/id1539553611

    UnityでHorizonLayoutを使って、こういうことをしようと思ったとき



    ※HorizonLayoutの設定はこちら。


    Sceneウインドウ等で幅(サイズ)を変更するとちゃんと両脇のオブジェクトも移動してくれるのですが、下のスライダーを動かすと幅が変わるようにコードでやるとこうなっちゃいます。

    [Blog20240219.cs]

    using UnityEngine;
    using UnityEngine.UI;

    public class Blog20240219 : MonoBehaviour
    {
    [SerializeField] Slider slider;
    [SerializeField] Image img;

    private void Start() {
    slider.onValueChanged.AddListener(ChangeValue);
    }

    void ChangeValue(float value) {
    img.transform.localScale = new Vector3(value * 2, 1, 1);
    }
    }





    こうなっちゃうことありませんか?

    サイズを変更するとこんな感じで両脇のImageが中央の絵のサイズに影響を受けなくなります。

    以下のコードに修正することで対応はできます。

    [Blog20240219.cs]

    using UnityEngine;
    using UnityEngine.UI;

    public class Blog20240219 : MonoBehaviour
    {
    [SerializeField] HorizontalLayoutGroup horiLayout;
    [SerializeField] Slider slider;
    [SerializeField] Image img;

    private void Start() {
    slider.onValueChanged.AddListener(ChangeValue);
    }

    void ChangeValue(float value) {
    horiLayout.CalculateLayoutInputHorizontal();
    img.transform.localScale = new Vector3(value * 2, 1, 1);
    horiLayout.SetLayoutHorizontal();
    }
    }



    HorizontalLayoutGroupのCaluculateLayoutInputHorizontalと、SetLayoutHorizontalをすることで以下のように動くようになります。



    真ん中のImageのテクスチャを9パッチにして、伸びてもいいようにしました。



    localScaleを変えていたので、9パッチにしても奇麗に伸びることができません。
    RectTransformのwidthを変えることで、奇麗に対応してみましょう。

    [Blog20240219.cs]

    using UnityEngine;
    using UnityEngine.UI;

    public class Test0216 : MonoBehaviour
    {
    [SerializeField] Slider slider;
    [SerializeField] Image img;

    private void Start() {
    slider.onValueChanged.AddListener(ChangeValue);
    }

    void ChangeValue(float value) {
    Vector2 size = new Vector2(value * 100 + 60, 60);
    img.rectTransform.sizeDelta = size;
    }
    }






    RectTransformのsizeDeltaを変えることで、localScaleではなく、RectTransformのWidth,Heightを変えることができます。
    この方法ならばCaluculateLayoutInputHorizontal等を書かなくても無事やりたかったことができました。

    Layoutグループの中で、ほかのオブジェクトのサイズが変わったときに自動で他のオブジェクトの位置を調整する方法でした。

    では、あでゅ~ノシ

    Category: 開発日記(Unity)

    tb 0 : cm 0   

    コメント

    コメントの投稿

    Secret

    トラックバック

    トラックバックURL
    →http://halcyonsystemblog.jp/tb.php/1045-7ba99684
    この記事にトラックバックする(FC2ブログユーザー)