「Unity/UIImage/基本」の版間の差分

2024年8月23日 (金) 07:08時点における最新版

幅修正

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

他いくつかやり方がある。

その1

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

その2

あとは、Shapes2dで、outlineSizeを0.02ぐらいにしてoutlineColorを黒にすれば良い。ただし、中身を透明にはできない。

その3

または、Shapes2Dで、Demos/ShowcaseのアイコンDemo Shapes/NoFillってやつを参照するとよい。1x1の画像を使って、Scaleで調整したりする。 プレイ時だけ、中身が埋まってしまうときは、OutlineSizeを小さくするとうまくいく。

その4

imagetypeをslicedにして、中身を透明にすればできる。

参考：https://hiyotama.hatenablog.com/entry/2015/06/25/090000

画像については、白色でもなんでも良い。あとでImage側のcolorで色は変更できる。

画像ロード

Resourcesの中にhoge/image.pngを入れる

GameObject imageObj = GameObject.Find("HogeImage");
Image img = imageObj.GetComponent<Image>();
Sprite iconImage = Resources.Load<Sprite>("hoge/image");
img.sprite = iconImage;

Texture2DをSpriteへ

Texture2D tex = new Texture2D(256, 256);
Sprite sprite = Sprite.Create(tex, new Rect(0, 0, tex.width, tex.height), Vector2.zero);

画像ロード(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/

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

正方形の画像を、縦長、横長にしても、角が伸びないようにする

1. 画像ファイルを選択し、StripeModeをSimpleからMultipleにし、SpriteEditorボタンを押す。
2. Sliceタブを選択肢、Sliceボタンを押し、Applyボタンを押し、緑の線を中央に寄せる。
3. 画像オブジェクトを選択し、ImageのImageTypeをSampleからSlicedに変更する

参考：https://qiita.com/lycoris102/items/98bc5a5659e4889dd43f

コードだとこんな感じ(Resourcesからロードして、SourceImageにはめる。

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

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

ImageのImageTypeをTiledへ

Image内のテキストの幅に合わせる

1. Imageの下にTextを設置
2. ImageにContentSizeFitterをAddComponentで追加
3. HorizontalFitをPreferredSizeへ
4. HorizontalLayoutGrouをAddComponentで追加

Imageの中心をずらす

Unity右上のCenterをPivotへ変更して、画像の中央の青丸を移動

参考：https://ritsuka.dev/pivot