facebook twitter hatena line email

「Unity/角丸ボタン」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(背景画像入ボタンへ変更)
(AddComponentでShapeを使う場合)
 
(同じ利用者による、間の7版が非表示)
行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/
  
 
==作れるサンプル確認==
 
==作れるサンプル確認==
行12: 行15:
 
#適当なUI/Buttonを設置する
 
#適当なUI/Buttonを設置する
 
#ボタンのinspectorのAddComponentからShapeを追加する
 
#ボタンのinspectorのAddComponentからShapeを追加する
#Roundnessにボタンの高さの半分を入力すればできる
+
#Roundnessに0.5を入力すれば角丸にできる。少しの丸さであれば、0.1とかを入れる
  
 
==ボタンの色を変更==
 
==ボタンの色を変更==
行22: 行25:
 
#FillTextureに画像を入れる
 
#FillTextureに画像を入れる
  
==外枠を追加==
+
==外枠線を追加==
 
#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>
 +
 +
===ボタンの中のテキストの色を変更===
 +
<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>
 +
 +
===ボタンがちらつく場合===
 +
shape.ComputeAndApply();
 +
を追加すると良い。
 +
 +
===AddComponentでShapeを使う場合===
 +
AddComponentで適用すると、inspectorを選択すると角丸となるが、
 +
選択しない状態だと適用されないので、以下のように対応する。
 +
 +
<pre>
 +
Shape shape = btnObj.AddComponent<Shape>();
 +
shape.settings.roundnessPerCorner = false;
 +
shape.settings.roundness = 0.05f;   
 +
// この4つを追加するとできる。
 +
shape.settings.roundnessTopLeft = shape.settings.roundness;
 +
shape.settings.roundnessTopRight = shape.settings.roundness;
 +
shape.settings.roundnessBottomLeft = shape.settings.roundness;
 +
shape.settings.roundnessBottomRight = shape.settings.roundness;
 +
</pre>
 +
 +
参考:https://teratail.com/questions/351920
  
 
==参考==
 
==参考==
 
https://note.com/hikohiro/n/n9100eae28208
 
https://note.com/hikohiro/n/n9100eae28208

2021年7月31日 (土) 07:39時点における最新版

角丸ボタンを作る

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;

ボタンの中のテキストの色を変更

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;
    }
}

ボタンがちらつく場合

shape.ComputeAndApply();

を追加すると良い。

AddComponentでShapeを使う場合

AddComponentで適用すると、inspectorを選択すると角丸となるが、 選択しない状態だと適用されないので、以下のように対応する。

Shape shape = btnObj.AddComponent<Shape>();
shape.settings.roundnessPerCorner = false;
shape.settings.roundness = 0.05f;     
// この4つを追加するとできる。
shape.settings.roundnessTopLeft = shape.settings.roundness;
shape.settings.roundnessTopRight = shape.settings.roundness;
shape.settings.roundnessBottomLeft = shape.settings.roundness;
shape.settings.roundnessBottomRight = shape.settings.roundness;

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

参考

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