Unity】一枚のイメージ画像を縦横のタイル状に分割する方法

投稿日2023-03-23

更新日2024-05-03

タグ一覧

Unity

Csharp

Programing

目次（タップして移動）

【ちょっと豆知識】QuadとPlaneの違いについて

UnityのUGUIを使用して、一枚のイメージ画像を縦横に分割して表示する方法を紹介します。 timeimage

分割したいイメージをUnityにインポートします。
分割したいイメージをUGUIのImageコンポーネントに設定します。
画像を縦横に分割するためのスクリプトを作成します。
スクリプトをUGUIのImageコンポーネントに追加します。
rows変数とcolumns変数を設定し、画像を分割します。

using UnityEngine;
using UnityEngine.UI;

public class ImageSplitter : MonoBehaviour
{
    public Image imageToSplit; //分割するイメージ
    public int rows = 3; //縦の分割数
    public int columns = 3; //横の分割数
    private Texture2D textureToSplit; //イメージのテクスチャ

    void Start()
    {
        SplitImage();
    }

    void SplitImage()
    {
        textureToSplit = imageToSplit.sprite.texture; //イメージからテクスチャを取得
        int width = textureToSplit.width / columns; //一つの分割画像の幅
        int height = textureToSplit.height / rows; //一つの分割画像の高さ
        for (int y = 0; y < rows; y++)
        {
            for (int x = 0; x < columns; x++)
            {
                GameObject quad = new GameObject("Quad"); //Quadを生成
                quad.transform.SetParent(transform); //QuadをこのスクリプトがアタッチされているGameObjectの子にする
                RectTransform rectTransform = quad.AddComponent<RectTransform>(); //RectTransformを追加
                rectTransform.sizeDelta = new Vector2(width, height); //Quadのサイズを指定
                rectTransform.pivot = new Vector2(0, 1); //Quadのピボットを左上にする
                rectTransform.localPosition = new Vector3(x * width, -y * height, 0); //Quadの位置を指定
                Image image = quad.AddComponent<Image>(); //Imageを追加
                Sprite sprite = Sprite.Create(textureToSplit, new Rect(x * width, y * height, width, height), new Vector2(0.5f, 0.5f)); //分割したテクスチャからSpriteを作成
                image.sprite = sprite; //ImageにSpriteを設定
                image.SetNativeSize(); //Imageのサイズを変更せずに、Native Sizeにする
            }
        }
    }
}