facebook twitter hatena line email

「Unity/UIImage」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(枠を追加)
(内容を「Unity/UIImage/基本 Unity/UIImage/Mask」で置換)
行1: 行1:
==幅修正==
+
[[Unity/UIImage/基本]]
GameObject graph = GameObject.Find("/Canvas/Graph");
+
RectTransform textRect = graph.GetComponent<RectTransform>();
+
textRect.sizeDelta = new Vector2(1000.0f, 1000.0f);
+
  
==幅と高さ==
+
[[Unity/UIImage/Mask]]
float width = gameObject.GetComponent<RectTransform>().sizeDelta.x; // 幅
+
float height = gameObject.GetComponent<RectTransform>().sizeDelta.y; // 高さ
+
 
+
==UiImage複製して配置==
+
*Canvas/CopySourceImageにコピー元Image設置
+
*NewImageが新しくできるImage
+
<pre>
+
GameObject canvas = GameObject.Find("Canvas");
+
GameObject copySourceImage = GameObject.Find("Canvas/CopySourceImage");
+
GameObject newImage = new GameObject("NewImage");
+
newImage.transform.SetParent(canvas.transform, false);
+
newImage.transform.SetSiblingIndex(copySourceImage.transform.GetSiblingIndex());
+
RectTransform baseTransform = copySourceImage.transform as RectTransform;
+
RectTransform rectTransform = newImage.AddComponent<RectTransform>();
+
rectTransform.anchorMax = baseTransform.anchorMax;
+
rectTransform.anchorMin = baseTransform.anchorMin;
+
rectTransform.anchoredPosition = baseTransform.anchoredPosition;
+
rectTransform.sizeDelta = baseTransform.sizeDelta;
+
rectTransform.localScale = baseTransform.localScale;
+
rectTransform.localPosition = baseTransform.localPosition;
+
rectTransform.localRotation = baseTransform.localRotation;
+
Image img = newImage.AddComponent<Image>();
+
img.sprite = copySourceImage.GetComponent<Image>().sprite;
+
</pre>
+
 
+
参考:https://teratail.com/questions/42899
+
 
+
==枠を追加==
+
以下で外枠を追加できるが、Imageを透明にするとOutlineも消えてしまう・・。
+
<pre>
+
Outline outline =imageObj.AddComponent<Outline>();
+
outline.effectColor = new Color(1, 0f, 0f, 1f);
+
</pre>
+
他いくつかやり方がある。
+
 
+
1.
+
どこか一辺だけの場合は、以下参照すればできるかも。http://aktaat.hatenablog.com/entry/2016/10/30/085534
+
 
+
2.
+
あとは、Shapes2dで、outlineSizeを0.02ぐらいにしてoutlineColorを黒にすれば良い。
+
 
+
3.
+
または、Shapes2Dで、サンプルのNoFillってやつを参照するとよい。1x1の画像を使って、Scaleで調整したりする。
+
 
+
4.
+
imagetypeをslicedにして、中身を透明にすればできる。参考:https://hiyotama.hatenablog.com/entry/2015/06/25/090000
+
 
+
==画像ロード==
+
Resourcesの中にhoge/image.pngを入れる
+
GameObject imageObj = GameObject.Find("HogeImage");
+
Image img = imageObj.GetComponent<Image>();
+
Sprite iconImage = Resources.Load<Sprite>("hoge/image");
+
img.sprite = iconImage;
+
==画像ロード(slice対応)==
+
GameObject imageObj = GameObject.Find("HogeImage");
+
Image img = imageObj.GetComponent<Image>();
+
Sprite[] sprites = Resources.LoadAll<Sprite>("hogefile");
+
Sprite iconImage = System.Array.Find<Sprite>( sprites, (sprite) => sprite.name.Equals("hogefile_1"));
+
img.sprite = iconImage;
+
 
+
==円のゲージ描画==
+
#Imageに丸画像を追加
+
#ImageTypeをFilledへ
+
#FillOriginをTopへ
+
#FillAmountを0~1へ
+
 
+
<pre>
+
GameObject circleObj = GameObject.Find("CircleOnImage");
+
Image circleImage = circleObj.GetComponent<Image>();
+
circleImage.fillAmount = 0.5f; // 0~1
+
</pre>
+
 
+
参考:https://clrmemory.com/programming/unity/circle-gauge-meter-p1/
+
 
+
==画像付きボタンの角を引き伸ばさないように==
+
正方形の画像を、縦長、横長にしても、角が伸びないようにする
+
 
+
# 画像ファイルを選択し、StripeModeをSimpleからMultipleにし、SpriteEditorボタンを押す。
+
# Sliceタブを選択肢、Sliceボタンを押し、Applyボタンを押し、緑の線を中央に寄せる。
+
# 画像オブジェクトを選択し、ImageのImageTypeをSampleからSlicedに変更する
+
 
+
参考:https://qiita.com/lycoris102/items/98bc5a5659e4889dd43f
+
 
+
コードだとこんな感じ(Resourcesからロードして、SourceImageにはめる。
+
<pre>
+
Image img = btnObj.GetComponent<Image>();
+
if (img != null)
+
{
+
    img.type = Image.Type.Sliced;
+
    img.pixelsPerUnitMultiplier = 3f; // 等倍であれば1、例ではサイズを3倍に
+
    Sprite[] sprites = Resources.LoadAll<Sprite>("status_bg");
+
    if (sprites != null)
+
    {
+
        Sprite sprite = System.Array.Find<Sprite>(sprites, (sprite) => sprite.name.Equals("status_bg_0"));
+
        img.sprite = sprite;
+
    }
+
}
+
</pre>
+
 
+
==画像をタイル上に繰り返す==
+
ImageのImageTypeをTiledへ
+

2021年10月29日 (金) 22:08時点における版

Unity/UIImage/基本

Unity/UIImage/Mask