facebook twitter hatena line email

「Unity/UIImage」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(円のゲージ描画)
(画像付きボタンの角を引き伸ばさないように)
行73: 行73:
 
正方形の画像を、縦長、横長にしても、角が伸びないようにするには、
 
正方形の画像を、縦長、横長にしても、角が伸びないようにするには、
 
ImageのImageTypeをSampleからSlicedに変更する
 
ImageのImageTypeをSampleからSlicedに変更する
 +
 +
==画像をタイル上に繰り返す==
 +
ImageのImageTypeをTiledへ

2021年8月26日 (木) 02:24時点における版

幅修正

GameObject graph = GameObject.Find("/Canvas/Graph");
RectTransform textRect = graph.GetComponent<RectTransform>();
textRect.sizeDelta = new Vector2(1000.0f, 1000.0f);

幅と高さ

float width = gameObject.GetComponent<RectTransform>().sizeDelta.x; // 幅
float height = gameObject.GetComponent<RectTransform>().sizeDelta.y; // 高さ

UiImage複製して配置

  • Canvas/CopySourceImageにコピー元Image設置
  • NewImageが新しくできるImage
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;

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

枠を追加

以下で外枠を追加できるが、Imageを透明にするとOutlineも消えてしまう・・。

Outline outline =imageObj.AddComponent<Outline>();
outline.effectColor = new Color(1, 0f, 0f, 1f);

どこか一辺だけの場合は、以下参照すればできるかも。http://aktaat.hatenablog.com/entry/2016/10/30/085534

あとは、Shapes2Dでできそう。サンプルのNoFillってやつを参照するとよい。1x1の画像を使って、Scaleで調整したりする。

画像ロード

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;

円のゲージ描画

  1. Imageに丸画像を追加
  2. ImageTypeをFilledへ
  3. FillOriginをTopへ
  4. FillAmountを0~1へ
GameObject circleObj = GameObject.Find("CircleOnImage");
Image circleImage = circleObj.GetComponent<Image>();
circleImage.fillAmount = 0.5f; // 0~1

参考:https://clrmemory.com/programming/unity/circle-gauge-meter-p1/

画像付きボタンの角を引き伸ばさないように

正方形の画像を、縦長、横長にしても、角が伸びないようにするには、 ImageのImageTypeをSampleからSlicedに変更する

画像をタイル上に繰り返す

ImageのImageTypeをTiledへ