facebook twitter hatena line email

Unity/角丸ボタン

提供: 初心者エンジニアの簡易メモ
2021年7月30日 (金) 01:27時点におけるAdmin (トーク | 投稿記録)による版 (shapes2dをインストール)

移動: 案内検索

角丸ボタンを作る

shapes2dをインストール

assetstoreからinstallする

https://assetstore.unity.com/packages/tools/sprite-management/shapes2d-procedural-sprites-and-ui-62586

公式shapes2dドキュメント

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

作れるサンプル確認

Shapes2D/Demos/Showcase/Showcase.unityを選択して確認。

作り方

  1. 適当なUI/Buttonを設置する
  2. ボタンのinspectorのAddComponentからShapeを追加する
  3. Roundnessに0.5を入力すれば角丸にできる。少しの丸さであれば、0.1とかを入れる

ボタンの色を変更

  1. ShapeのFillTypeをSolidColorへ変更
  2. ShapeのFill Colorを選択する

背景画像入ボタンへ変更

  1. ShapeのFillTypeをTextureへ変更
  2. FillTextureに画像を入れる

外枠線を追加

  1. AddComponentでOutlineを追加

スクリプトで角丸設定

参考:https://teratail.com/questions/214380

角丸の色ボタン

using Shapes2D;
Shape shape = btnObj.AddComponent<Shape>();
shape.settings.roundness = 0.5f;
shape.settings.shapeType = ShapeType.Rectangle;
shape.settings.fillType = FillType.SolidColor;
shape.settings.fillColor = Color.white;
Image img = btnObj.GetComponent<Image>();
Material baseMaterial = (Material)Resources.Load(
            "Shapes2D/Materials/Shape", typeof(Material));
img.material = baseMaterial;

角丸の画像ボタン

using Shapes2D;
Texture2D texture = Resources.Load("woodbutton") as Texture2D;
Shape shape = btnObj.AddComponent<Shape>();
shape.settings.roundness = 0.5f;
shape.settings.shapeType = ShapeType.Rectangle;
shape.settings.fillType = FillType.Texture;
shape.settings.fillTexture = texture;
Image img = btnObj.GetComponent<Image>();
Material baseMaterial = (Material)Resources.Load(
            "Shapes2D/Materials/Shape", typeof(Material));
img.material = baseMaterial;

参考

https://note.com/hikohiro/n/n9100eae28208