タグ: UI

  • Unity UIをカスタマイズ Shapes2D

    Unity UIをカスタマイズ Shapes2D

    Unity UI 作るのめんどくさい問題。

    Web や モバイルAppの場合はMUIなどのUIライブラリを使えます。
    Unity で簡単で無料で使えるライブラリはないかと探していました。

    今回は使っていていい感じな Shapes 2D の使い方のメモです。

    ↓ Shapes 2D のアセットストアのリンク
    https://discussions.unity.com/t/free-shapes2d-procedural-2d-shapes-for-sprites-and-ui/627914

    手順

    Shapes 2Dの公式ドキュメントはこちらから確認できます。

    https://sub-c.org/Shapes2D/documentation

    標準のボタン

    まず最初の状態です。

    Shapes2D

    Body と書いてあるボタンをカスタマイズしていこうと思います。
    (それ以外のボタンは既にShapes 2D を適応しています)

    Shapes 2D Component の追加

    Asset Store からダウンロードしてインポートします。

    次にスタイルをつけたいオブジェクト(ボタン)をヒエラルキーから選択します。
    続いて、インスペクターパネルから[Add Component]ボタンをクリックして[Shapes 2D]を選択します。

    ヒエラルキーから選択
    スタイルを効かせたいものをヒエラルキーから選択
    Add Component からShapeを選択
    Add Component から shapes を選択

    形を変える

    以下のような感じで、shape Type を Rectangle に設定して、Roundness Per Corner にチェックを入れると上の左右だけに角丸をつけられます。

    このようにこのコンポーネントを使うと他にも、5角形など様々な形を選択でき、角丸の設定も容易にできるため、ゲームのようなリッチなUIではなく、Web埋め込みなどで使う場合や、業務用のプロジェクトにちょうどいいなと思います。

    角丸にする
    私の設定例
    Bodyのボタンがタブ選択ボタンの見た目としていい感じになった!
    Bodyのボタンがタブ選択ボタンの見た目としていい感じになった!

    まとめ

    コードを書いてUIを作っていける UI Toolkit 等もあるので、そちらも試してみたいと思います。

Home
About
Blog
Works
Contact