「Unity/角丸ボタン」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→shapes2dをインストール) |
(→スクリプトで角丸設定) |
||
| 行58: | 行58: | ||
"Shapes2D/Materials/Shape", typeof(Material)); | "Shapes2D/Materials/Shape", typeof(Material)); | ||
img.material = baseMaterial; | img.material = baseMaterial; | ||
| + | </pre> | ||
| + | |||
| + | ===ボタンの中のテキストの色を変更=== | ||
| + | <pre> | ||
| + | for (int i = 0; i <= btnObj.transform.childCount - 1; i++) | ||
| + | { | ||
| + | Text text = btnObj.transform.GetChild(i).gameObject.GetComponent<Text>(); | ||
| + | if (text != null) | ||
| + | { | ||
| + | text.color = Color.white; | ||
| + | } | ||
| + | } | ||
</pre> | </pre> | ||
==参考== | ==参考== | ||
https://note.com/hikohiro/n/n9100eae28208 | https://note.com/hikohiro/n/n9100eae28208 | ||
2021年7月30日 (金) 01:31時点における版
目次
角丸ボタンを作る
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;
ボタンの中のテキストの色を変更
for (int i = 0; i <= btnObj.transform.childCount - 1; i++)
{
Text text = btnObj.transform.GetChild(i).gameObject.GetComponent<Text>();
if (text != null)
{
text.color = Color.white;
}
}
