Unity StreamingAssetsフォルダ内のpng画像をすべて取得し、ランダムに選んでRaw画像のテクスチャに貼り付けたい

Question

実現したいこと

・StreamingAssetsフォルダ内のpng画像をすべて取得しリストに加えたい
・上記リストからランダムで選び出し、画面上のRawイメージの見た目を変えたい

前提

Unity、C#ともに初心者です。
検索して使えそうな要素を切り貼りでなんとか作っています。
用語についてもわからないことばかりなので、失礼ながら
「この位置にこれを置け！」くらいの具体性で回答頂けますと幸いです。

もちろんそれに限らず、解決の糸口になるものならなんでも歓迎します。
助けてください…。

StreamingAssetsを使っているのは、
ビルド後に差し替えできるようにしたいと考えているからです。

発生している問題・エラーメッセージ

・png画像をすべて取得できるはずのコードでエラーが出る。
ArgumentNullException: Value cannot be null.
Parameter name: oldValue
System.String.Replace (System.String oldValue, System.String newValue) (at <ecf276dcb8654fa5bed2c5ea1a4ad870>:0)
Test.Start () (at Assets/:::/:::/Test.cs:30)

・すべて取得できたとしても、string型のパスをtextureにする方法がわからない。

該当のソースコード

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using Random = UnityEngine.Random;
using System.IO;

public class Test : MonoBehaviour
{
    public RawImage img;
    string basePath;

    //表示させる画像リスト
    public List<Texture> cuts = new List<Texture>();

    void Start()
    {
        Random.InitState(System.DateTime.Now.Millisecond);
        // ゲームオブジェクトのRaw画像を指定
        img = GameObject.Find("Raw").GetComponent<RawImage>();

        // ファイルリストの取得
        string[] files = GetStreamingAssetFiles("images", "*.png");

        // リスト一覧
        for (int i = 0; i < files.Length; i++)
        {
　　　//　頂き物のコードで意味がわかっていない
　　　//　basePathの隣、""の中には何も入れなくていいのか？
            files[i] = files[i].Replace(basePath, "");　
            cuts.Add(files); //　現状ではここは不可能
        }
    }

    public void ChangeImage()　//他のスクリプトからこれを呼び出している
    {
        //　表示する画像の数をランダムで算出
        int random = Random.Range(0, cuts.Count);
        img.texture = cuts[random];
    }

    //　すべて頂き物。下記のメソッドで、
　//StreamingAssets内のpng画像をstringですべて取得できると考えている
    static public string[] GetStreamingAssetFiles(string dir, string ext, bool isFullPath = true)
    {
        if (dir.IndexOf("/") != 0)
        {
            dir = "/" + dir;
        }
        if (dir.LastIndexOf("/") != dir.Length - 1)
        {
            dir = dir + "/";
        }

        string basePath = Application.streamingAssetsPath + dir;
        string[] files = System.IO.Directory.GetFiles(basePath, ext, System.IO.SearchOption.TopDirectoryOnly);

        if (isFullPath && -1 == files[0].IndexOf(basePath))
        {
            for (int i = 0; i < files.Length; i++)
            {
                files[i] = basePath + files[i];
            }
        }
        else if (!isFullPath && -1 < files[0].IndexOf(basePath))
        {
            for (int i = 0; i < files.Length; i++)
            {
                files[i] = files[i].Replace(basePath, "");
            }
        }

        return files;
    }
}

試したこと

わざわざstringで取得せず、はじめからtextureで取得できないか。
byteで取得すればtextureにできるという文章も見た気がする。

そんな考えはしたけれども、実現の方法が一切わからず。

補足情報（FW/ツールのバージョンなど）

Unity 2023 2.20f1

Answer 1

StreamingAssetsを利用し画像を読み込むのは、このサイトが参考になります
https://bluebirdofoz.hatenablog.com/entry/2022/07/24/001715

フォルダ内のPngをすべて読み取る場合、次のようになります。
（コード内のコメントを確認する際はコードを右にスクロールしてください。）

using System.Collections.Generic;
using UnityEngine;
using System.IO;


//StreamingAssets/TestImageGroupフォルダ内のpngを取得。
public class RawImgLoader : MonoBehaviour
{
    private const string FOLDER_PATH = "TestImageGroup";            // StreamingAssetsフォルダ内のサブフォルダのパス   
    public List<Texture2D> LoadedTexturesList { get; private set; } // 読み込んだテクスチャを格納するリスト

    private void Start()
    {
        InigializeLoadPNGs();
    }

    // フォルダ内のPNGファイルを読み込み、テクスチャとしてリストに格納
    private void InigializeLoadPNGs()
    {
        LoadedTexturesList = new List<Texture2D>();             //リスト初期化
        string path = Path.Combine(Application.streamingAssetsPath, FOLDER_PATH);//フォルダ指定

        if (Directory.Exists(path))                             // ディレクトリが存在するか確認
        {           
            string[] files = Directory.GetFiles(path, "*.png"); // 指定したディレクトリ内でPNGファイルのみを取得。メモ：検索パターンに一致するファイルを取得します。例: "*.png"でPNGファイルのみを取得。
            foreach (string file in files)                      // 各ファイルを読み込み、テクスチャに変換してリストに追加
            {
                byte[] fileData = File.ReadAllBytes(file);      // 取得したpngのバイナリデータを読み込む
                Texture2D texture = new Texture2D(2, 2);        // 新しいTexture2Dオブジェクトを作成。
                texture.LoadImage(fileData);                    // 新しいTexture2Dオブジェクトに画像データを適用。
                LoadedTexturesList.Add(texture);                // 読み込んだテクスチャをリストに追加
            }
            Debug.Log($"<color=#88ff00>{files.Length} 枚のPNGファイルを {path} から読み込みました。</color>");
        }
        else
        {
            Debug.LogError($"フォルダが存在しません: {path}");
        }
    }

}

---

シーン上のボタンから呼び出してRawImgに反映。

using UnityEngine;
using UnityEngine.UI;


//StreamingAssetsから画像を読み込んでImageに反映
public class RandomRawImageDisplay : MonoBehaviour
{
    public Button       ChangeTexBtn;
    public RawImage     RawImage;
    public RawImgLoader PngLoader;

    private void Start()
    {
        ChangeTexBtn.onClick.AddListener(SetTexture);//ボタンがクリックされたときに発生するイベントをセット
    }
    //RawImageにテクスチャをセット
    private void SetTexture()
    {
        RawImage.texture = PngLoader.LoadedTexturesList[Random.Range(0, PngLoader.LoadedTexturesList.Count)];
    }

}

---

完成形イメージです。
https://drive.google.com/file/d/1MGZS2bj96Qpi5xjbIl-bTDEHl5gNQIq7/view?usp=drive_link

ご参考までにUnityパッケージもおいておきます。
https://drive.google.com/file/d/1yKRLimC3TrqOKv9dKDXZ7-VbTFPjos0W/view?usp=drive_link

蛇足になりますが、取得したテクスチャをPngとしてImageコンポーネントに反映させる場合です。
https://drive.google.com/file/d/1QC2WxJHwR8Db34mOIje7N9iRGe7A9QKr/view?usp=drive_link

これほんとややこしいですよね😅

Comments

[vwhite]

理想の実装ができました！本当にありがとうございます！！
参考サンプルを増やすため、以下に私が実装したコードを記載します。
私がわずかにでも迷ったことの説明も添えつつ…。

```C#
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using Random = UnityEngine.Random;

public class RandomRawImageDisplay : MonoBehaviour
{
public RawImage RawImage;
public RawImgLoader PngLoader;

Animator animator;　//　Raw画像を変える際にアニメーションをつけた

private void Start()
{
Random.InitState(System.DateTime.Now.Millisecond);　//　ランダムをよりランダムにするための一文。必要ないかもしれない
this.animator = GetComponent<Animator>();
}
public void SetTexture()
{
RawImage.texture = PngLoader.LoadedTexturesList[Random.Range(0, PngLoader.LoadedTexturesList.Count)];
this.animator.SetTrigger("***Trigger");　//　アニメーションのトリガーを起動。***の名前は任意
}
}
```

ボタン周りのコードを省いたのは、ボタンによってメソッドを呼び出したいわけではなかったからです。
SetTexture()のprivateの部分をpublicに変えて、外のスクリプトから呼び出して起動しています。

_aki__さんは2つのスクリプトを示してくれました。
１つめのスクリプトは、９行目の""内だけ、指定したいフォルダの名前に変更します。

私は２つのスクリプトを、どちらもヒエラルキーウィンドウに作成したRawイメージにアタッチしました。
（１つのRawイメージに２つのスクリプトをアタッチします。）
そして、インスペクターのRandomRawImageDisplayの項目を開き、
「Raw Image」「Png Loader」の２つの項目に、
このスクリプトをアタッチしてあるRawイメージをヒエラルキーウィンドウからドラッグ＆ドロップします。
実装は以上です。

これでも説明の不足があるとは思いますが…これから実装する方の一助になれば。

本当に助かりました。
重ね重ね、ありがとうございました。

Answer 2

わざわざstringで取得せず、はじめからtextureで取得できないか。

このstringはファイルパスであり、Texture本体ではありません。

---

そもそも、cutsにインスペクター上で直接Textureを設定すればいいので、以下で十分です。
この方法ならStreamingAssetsも使わないです。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using Random = UnityEngine.Random;
using System.IO;

public class Test : MonoBehaviour
{
    public RawImage img;
    
    //表示させる画像リスト
    //※インスペクター上で設定
    public List<Texture> cuts = new List<Texture>();
    
    public void ChangeImage() //他のスクリプトからこれを呼び出している
    {
        //　表示する画像の数をランダムで算出
        int random = Random.Range(0, cuts.Count);
        img.texture = cuts[random];
    }
}

ただ、これだとフォルダの中身を全て設定するのが面倒です。
なので、「StreamingAssetsの中にあるフォルダの中身のファイルパスを全て受け取り、それから読み込む」ということを行うためにそのようなことをしているのでしょう。
（とはいえ、この程度であればエディタ拡張を使えばいいのではないか、とは思います）

---

以下、stringでファイルパスを受け取る場合の話です。

            files[i] = files[i].Replace(basePath, "");

上記のReplace()はbasePathを""に置き換える、すなわちfiles[i]からbasePathを削除するという意味です。
したがって、""となっているのは正しいです。

ここでエラーになる原因は""ではbasePathのほうです。
11行目でstring basePath;と定義されていますが、初期値は何もない（この場合nullになる）ですし、GetStreamingAssetFiles()は内部（55行目）で独自に定義しているため、エラーの行に至るまでnullのままになっています。

そもそもGetStreamingAssetFiles()の中に以下の記述があります。

        if (isFullPath && -1 == files[0].IndexOf(basePath))
        {
            // （中略）
        }
        else if (!isFullPath && -1 < files[0].IndexOf(basePath))
        {
            for (int i = 0; i < files.Length; i++)
            {
                files[i] = files[i].Replace(basePath, "");
            }
        }

これは、isFullPath = falseの場合にエラー発生行と同じ処理を行うことになっており、以下のコードで済ませばいい話です。

        // 23行目を変更
        string[] files = GetStreamingAssetFiles("images", "*.png", false);

さらに、cuts.Add(files);も、stringのファイルパスとTextureは別物なので、正しく動作しないでしょう。
ファイルパスからTextureとして読み込む方法が必要です。
この変更方法としては、以下が考えられます。

• 画像ファイルをFile.ReadAllBytes()などでbyte[]で取得し、ImageConversion.LoadImage()を使う
• UnityWebRequestでTextureとして取得する（ローカルファイルもfile://～とすれば取得可）

Comments

[vwhite]

ご回答頂きありがとうございます！

・stringで取得しているのが「ファイルへの道筋」であって「ファイルそのもの」でないこと
・basePath,""で行われていること
について理解できました。

StreamingAssetsを使いたいのは、ビルド後に差し替えできるようにしたいと考えているからです。
前提に書き忘れていましたので、追記いたします。
エディタ拡張も考えましたが、こちらの形が理想だったので、実現を目指しています。

そして23行目の変更について、その部分を変えてもエラーは変わらず、
変更したうえで11行目を削除すると、
error CS0103: The name 'basePath' does not exist in the current contextのエラーが出て
ゲームの再生もできなくなってしまいます。

11行目で定義することは間違いであることはわかりましたが、
その場合、どうすればbasePathを認識させられるのでしょうか？

[fiveHundred]

エラー行（30行目）も削除してください。
また、回答にもありますが、「cuts.Add(files);」も変更する必要があるでしょう。

[vwhite]

30行目も削除したところ、無事にゲームを再生でき、
StreamingAssets内のimagesフォルダにあるpngをすべて取得できたことを確認しました！
ありがとうございます。

肝心な「cuts.Add(files);」の部分ですが、
stringのpathをTextureのリストに加える方法として、
具体的なアイデアをご教示いただけないでしょうか？
この部分についても色々調べたのですが、理解が追い付かずにこちらへ質問した次第です。

質問通りの方法で答えて頂ければ一番理解しやすいですが、
最終的にpngをRaw画像に反映させられれば良いので、
異なるアプローチでもご提案いただけますと幸いです。

[fiveHundred]

Textureにした後でcutsに追加すればよろしいのですが、具体的にどこがわからないのですか？

[vwhite]

その、Textureにする方法が…。
もしかして、簡単で常識的なことなのでしょうか。

質問にある通り、
「この位置にこれを置け！」という感じで使えるように
教えていただけませんでしょうか。

[fiveHundred]

回答のリンク先にサンプルがあるので確認してください。

[vwhite]

サンプルのご提示ありがとうございました。
1時間ほど格闘しましたが、できたことは26行目以降に
for (int i = 0; i < files.Length; i++)
{
byte[i] data = File.ReadAllBytes(files[i]);
}
として、エラーメッセージ
CS0270: Array size cannot be specified in a variable declaration (try initializing with a 'new' expression)
を吐かせることだけでした。

本当に申し訳ないのですが、この機能の実装に関して、
知識も理解も全く追い付いていないのです。

File.ReadAllBytes()の説明ページには
public static byte[] ReadAllBytes (string path);の一行しかなく、
1時間考えても、file[i]にはstringのpathが入っているんだから
()の位置に入れられるんじゃないの？程度の結論にしか至れません。
このスクリプト全体も、丸一日あれこれ書き換え続けた末に
ようやくこれにしかならなかったのです。

ひとつの質問、かつ知識の浅すぎる素人が時間を取らせてしまうのは大変に心苦しいのですが、
「どの位置にどう置けば」File.ReadAllBytes()を正しく使えて、
結果byteで取得できたものを、
ImageConversion.LoadImage()をどう使うことでTextureに変換できるのか、
完成したコードで示していただくことはできないでしょうか。

本当にごめんなさい。
回答をご検討いただけますと幸いです。

[fiveHundred]

> byte[i] data = File.ReadAllBytes(files[i]);

byte[]は型なのですから、iは付けません。

> 「どの位置にどう置けば」
> 完成したコードで示していただくことはできないでしょうか。

厳しいこと言うようですが「理解できないからコードで示して」というスタンスだと成長しないですし、このサイトの非推奨（※）としている丸投げになる可能性もあります。
（※：https://teratail.com/help/avoid-asking ）

とりあえず、_aki__さんが一連のコード全体を示していただいておりますので、そちらを参考にしてみてください。
「texture.LoadImage(fileData);」が「ImageConversion.LoadImage(texture, fileData);」になるぐらいで、私の意図した内容とほぼ同じです。

[vwhite]

_aki__さんの回答を参考に、理想の実装をすることができました。
fiveHundredさんも丁寧なご回答をいただき、ありがとうございました！