「Unity/角丸ボタン」の版間の差分
提供: 初心者エンジニアの簡易メモ
行24: | 行24: | ||
==外枠線を追加== | ==外枠線を追加== | ||
#AddComponentでOutlineを追加 | #AddComponentでOutlineを追加 | ||
+ | |||
+ | ==スクリプトで角丸設定== | ||
+ | |||
+ | 参考:https://teratail.com/questions/214380 | ||
+ | ===角丸の色ボタン=== | ||
+ | <pre> | ||
+ | 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; | ||
+ | </pre> | ||
+ | |||
+ | ===角丸の画像ボタン=== | ||
+ | <pre> | ||
+ | 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; | ||
+ | </pre> | ||
==参考== | ==参考== | ||
https://note.com/hikohiro/n/n9100eae28208 | https://note.com/hikohiro/n/n9100eae28208 |
2021年7月30日 (金) 01:00時点における版
目次
角丸ボタンを作る
shapes2dをインストール
assetstoreからinstallする
作れるサンプル確認
Shapes2D/Demos/Showcase/Showcase.unityを選択して確認。
作り方
- 適当なUI/Buttonを設置する
- ボタンのinspectorのAddComponentからShapeを追加する
- Roundnessに0.5を入力すれば角丸にできる。少しの丸さであれば、0.1とかを入れる
ボタンの色を変更
- ShapeのFillTypeをSolidColorへ変更
- ShapeのFill Colorを選択する
背景画像入ボタンへ変更
- ShapeのFillTypeをTextureへ変更
- FillTextureに画像を入れる
外枠線を追加
- 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;