Показать несколько изображений, загруженных с сервера

Question

Я хочу загрузить несколько изображений, которые я загрузил на сервер, и показать в моей сцене в галерее или в слайд-шоу. Я сделал код ниже, чтобы загрузить изображения, но я могу показать только одно изображение. Как я могу сделать, чтобы показать несколько изображений, загруженных с сервера?

public void DownloadtheFiles()
    {

    List <string> photolist = ES2.LoadList<string>("myPhotos.txt");

    for (int i = 0; i < photolist.Count; i++) {

        new GetUploadedRequest()

            .SetUploadId(photolist[i])
            .Send((response) =>
                {
                    StartCoroutine(DownloadImages(response.Url));
                } );
    }
    }

    public IEnumerator DownloadImages(string downloadUrl)
    {
        var www = new WWW(downloadUrl);
        yield return www;
        downloadedImages = new Texture2D(200, 200);
        www.LoadImageIntoTexture(downloadedImages);
        imageLoaded.texture = downloadedImages as Texture;
    }

ОБНОВЛЕНИЕ 1: с помощью приведенного ниже кода я показываю, как я хотел бы показать их, но он получает изображения из пути к папке, и мне нужно показать изображения, которые я загружаю с сервера. Как я могу интегрировать этот код, чтобы сделать слайд-шоу с загруженными изображениями?

public class ImageLoader : MonoBehaviour
{
[SerializeField]
[Tooltip("The folder where images will be loaded from")]
private string imagePath;

[SerializeField]
[Tooltip("The panel where new images will be added as children")]
private RectTransform content;

private List<Texture2D> textures;

private void Start()
{
    Application.runInBackground = true;
    StartCoroutine(LoadImages());
}

public IEnumerator LoadImages()
{
    textures = new List<Texture2D>();

    DirectoryInfo di = new DirectoryInfo(imagePath);
    var files = di.GetFiles("*.png");

    foreach (var file in files)
    {
        Debug.Log(file.FullName);
        yield return LoadTextureAsync(file.FullName, AddLoadedTextureToCollection);
    }

    CreateImages();
}

private void AddLoadedTextureToCollection(Texture2D texture)
{
    textures.Add(texture);
}

private void CreateImages()
{
    foreach(var texture in textures)
    {
        GameObject imageObject = new GameObject("Image");
        imageObject.transform.SetParent(content);
        imageObject.AddComponent<Image>().sprite = Sprite.Create(texture, new Rect(0, 0, texture.width, texture.height), Vector2.zero);
    }
}

public IEnumerator LoadTextureAsync(string originalFileName, Action<Texture2D> result)
{
    string fileToLoad = GetCleanFileName(originalFileName);

    Debug.Log("Loading Image from path: " + fileToLoad);

    WWW www = new WWW(fileToLoad);
    yield return www;

    Texture2D loadedTexture = new Texture2D(1, 1);

    www.LoadImageIntoTexture(loadedTexture);

    result(loadedTexture);
}

private static string GetCleanFileName(string originalFileName)
{
    string fileToLoad = originalFileName.Replace('\\', '/');

    if (fileToLoad.StartsWith("http") == false)
    {
        fileToLoad = string.Format("file://{0}", fileToLoad);
    }

    return fileToLoad;
}
}

ОБНОВЛЕНИЕ 2: Я создал ScrollView и HorizonatalLayoutGroup и применил ImageLoader.cs ОБНОВЛЕНИЯ 1. Я добавил 4 изображения в папку, и это скриншоты иерархии и результат:

Он отлично работает в качестве теста, но источником изображений является папка на моем компьютере, и я хочу загрузить изображения с сервера. Как я могу это сделать?

Answer 1

Вы наделили все необходимые детали, используя ScrollView и HorizonatalLayoutGroup.Обратите внимание, что я просил вас использовать компонент RawImage, но кажется, что вы используете компонент Image.Я рекомендовал RawImage, потому что позволяет избежать использования Sprite.Create, что дорого.Вы все еще можете использовать Image, если хотите.

Единственное, что вам нужно сделать сейчас, это изменить размер RawImage, пока вы не будете удовлетворены его размером.Создайте один сборный из этого RawImage.Удалите Image / RawImage в разделе Содержимое GameObject.Они вам больше не нужны.

Теперь загрузите ваши изображения с сервера, создайте экземпляр префаба из этого префаба RawImage. Наконец, сделайте это RawImage дочерним объектом Content GameObject. Вот и все.HorizonatalLayoutGroup должен автоматически его позиционировать.

С вашим исходным кодом, ниже, как это сделать.Переменная contentRef является ссылкой на Content GameObject, который находится в ScrollView.Переменная imgPrefab является ссылкой на префаб RawImage.Обязательно назначьте оба из редактора.Также обратите внимание, как я добавил и использовал новую переменную int index = i;, чтобы не захватывал переменную i и заставлял ее загружать только последнее изображение.

public GameObject contentRef;
public RawImage imgPrefab;

void Start()
{
    DownloadtheFiles();
}

public void DownloadtheFiles()
{

    List<string> photolist = ES2.LoadList<string>("myPhotos.txt");

    for (int i = 0; i < photolist.Count; i++)
    {
        //Don't capture i variable
        int index = i;

        new GetUploadedRequest()

            .SetUploadId(photolist[index])
            .Send((response) =>
            {
                StartCoroutine(DownloadImages(response.Url, index));
            });
    }
}


public IEnumerator DownloadImages(string downloadUrl, int index)
{
    var www = new WWW(downloadUrl);
    yield return www;

    //Instantiate the image prefab GameObject and make it a child of the contentRef
    RawImage newImg = Instantiate(imgPrefab, contentRef.transform);
    //Change the name
    newImg.name = "Image-" + index;

    //Get the downloaded image
    Texture2D tex = new Texture2D(4, 4);
    www.LoadImageIntoTexture(tex);

    //Apply the downloaded image
    newImg.texture = tex;
}