「Unity/角丸ボタン」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→shapes2dをインストール) |
|||
行5: | 行5: | ||
https://assetstore.unity.com/packages/tools/sprite-management/shapes2d-procedural-sprites-and-ui-62586 | https://assetstore.unity.com/packages/tools/sprite-management/shapes2d-procedural-sprites-and-ui-62586 | ||
+ | |||
+ | ==公式shapes2dドキュメント== | ||
+ | https://sub-c.org/Shapes2D/documentation/ | ||
==作れるサンプル確認== | ==作れるサンプル確認== |
2021年7月30日 (金) 01:27時点における版
目次
角丸ボタンを作る
shapes2dをインストール
assetstoreからinstallする
公式shapes2dドキュメント
https://sub-c.org/Shapes2D/documentation/
作れるサンプル確認
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;