And in each image to display image from the hard disk.
using System.Collections;
using System.Collections.Generic;
using System.IO;
using UnityEngine;
using UnityEngine.Networking;
using UnityEngine.UI;
public class ImagesTest : MonoBehaviour
{
private Image img;
// Start is called before the first frame update
void Start()
{
var imagesToLoad = Directory.GetFiles(Application.dataPath + "/screenshots", "*.png");
}
// Update is called once per frame
void Update()
{
}
}
This script is attached to the canvas in my editor in the second screenshot.
In this case I have 2 png files in the imagesToLoad array.
But I’m not sure how and what to do next in the script.
So instead in the editor to create now two images manual and assign the images from the hard disk to the images I want to it automatic.
If I have 2 png file on the hard disk or 30 automatic create the images ui in the editor and add the images from the hard disk to them. And if there are too many images make a scrollbar effect.
The main goal is to create save game slots and the first step is to read the images from the hard disk and create ui images automatic in the editor in this formation in this positions between the character and the black thing and add the images to the images ui.
Depending on how many png files there are on the hard disk create the same amount of ui images in the editor and add the images the png files to the ui images.
The last screen show show the images on my hard disk :
I want to show them in the editor also with the name and date and time under each image.
If you’ve already got the raw image data from the file, you can use Texture2D.LoadImage to convert PNG data into a Texture2D and then use Sprite.Create to make a Sprite from that Texture2D.
using System.Collections;
using System.Collections.Generic;
using System.IO;
using UnityEngine;
using UnityEngine.Networking;
using UnityEngine.UI;
public class SavedGamesSlots : MonoBehaviour
{
Texture2D thisTexture;
byte[] bytes;
string fileName;
public GameObject[] ImageHolder = new GameObject[1];
// Start is called before the first frame update
void Start()
{
var imagesToLoad = Directory.GetFiles(Application.dataPath + "/screenshots", "*.png");
for (int i = 0; i < imagesToLoad.Length; i++)
{
thisTexture = new Texture2D(100, 100); //NOW INSIDE THE FOR LOOP
fileName = imagesToLoad[i];
bytes = File.ReadAllBytes(fileName);
thisTexture.LoadImage(bytes);
thisTexture.name = fileName;
ImageHolder[i].GetComponent<RawImage>().texture = thisTexture;
}
}
}
but the images now are not looking good in the main menu. I need some other design or something I think.
Any ideas how to make the images more to look like a saved games slot and not images on main menu like this ?
I mean to make something that will exclude the images from the main menu background it looks like the images are part of the main menu background. maybe to add somehow a frame to each image ?
A frame is easy, just add an image behind the RawImage, make it whatever color you want for the frame, and make it a few pixels bigger in each dimension. No image file needed, just set the color. So you’d have an array of them that matches the ImageHolder array. Have them inactive until the other images are shown.
Pre-make a prefab that you Instantiate into the scene (appropriately childed into your UI hierarchy… ALWAYS use the Instantiate that takes a second parent transform argument!!!) and populate that with your PNG file.
Give that Prefab a special little script with an anchor to the GameObject within the prefab that has your RawImage, so that way “injecting” it is easy.
From then on as long as your code just instantiates one of those and “injects” the picture into it, you never again have to write any code if you want to spiff up or improve the looks of your little frame prefab. Or use different prefabs for different game slots, for instance.
For the record this is 100% the way I do it and the way just about everybody I know in Unity does it. You can even hire an artist in the future and have them spiff up the frame, and you don’t have to change any code. That’s the magic of Unity3D!
While you’re making that prefab, you may also want to leave some space for text to display other useful information, such as the date+time when the game was saved, play time, % completion, etc.
Looks like your pictures are also being stretched because the aspect ratio of the PNG doesn’t match the aspect ratio of the RawImage component.
Image components have an option to preserve aspect ratio (by letterboxing). RawImage components do not–although you can always change the size of the object to match the desired ratio.
If two objects are siblings, the last sibling is drawn on top
If one object is the child of another, the child is drawn on top
If your Canvas is in Screen Space - Overlay mode (which is the default), the Z coordinate of objects is ignored. But if you switch to Screen Space - Camera mode (and specify a camera), then Z coordinates are honored, and so then you can also control order that way (which trumps the above rules).
