「Unity/shapes2d/角丸ボタン」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→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;
