Simple Image Slideshow

Good day gentlemen,

I'm trying to implement a simple image slideshow on a GUI window using labels. I can get a single image to display using a label but having some difficulties creating a button that switches to the next image. What I want is a button named 'next' that when clicked on displays another image. And again, clicking on next displays the next image.

I think I need to use an image array but my coding is mediocre to implement it. Can I get some assistance or an example, preferably in JavaScript?

Thank you

 

Hello there!

Right then, lets see if we can sort your problem out.
An array of textures would indeed be a way to solve it.
Now I'm a C# coder so I can't be certain the following script will compile, but it should give you the general idea at the very least.

Code (csharp):

1.  
2. var imageArray : Texture[];
3. var currentImage : int;
4. var imageRect : Rect;
5. var buttonRect : Rect;
6.  
7. function Start()
8. {
9.     currentImage = 0;
10.     imageRect = Rect(0, 0, Screen.width, Screen.height);
11.     buttonRect = Rect(0, Screen.height - Screen.height / 10, Screen.width, Screen.height / 10);
12. }
13.  
14. function OnGUI()
15. {
16.     GUI.Label(guiRect, imageArray[currentImage]);
17.     if(GUI.Button(buttonRect, "Next"))
18.         currentImage++;
19. }
20.  

And that should do the trick.

 

Fantastic, just what I wanted.

A little typo on your code; guiRect should be imageRect. And I had a problem with the next button closing the window once it came to the last image. A little if statement fixed that.

Code (csharp):

1. if(currentImage > 1)
2. currentImage = 0;

Thank you, sir!

 

In case someone sees this, what you want to do is change that if statement to check the actual length of the array of images as such:

Code (csharp):

1. if(currentImage >= imageArray.Length)
2. currentImage = 0;

 

Making a simple slideshow
updated to work in unity 2019 LTS
Thx to all the above for saving me a lot of time.
next step is to add a timer instead of a button.
(might try and make the button invisible or something to fill screen so its just mouse click to change slide)

Code (CSharp):

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4. using UnityEditor;
5.  
6. public class slideshow1 : MonoBehaviour
7. {
8.    
9. //    var imageArray : Texture[];
10. //    var currentImage : int;
11. //    var imageRect : Rect;
12. //    var buttonRect : Rect;
13.  
14.     public Texture[] imageArray;
15.     private int currentImage;
16.     //private Rect imageRect;
17.     //private Rect buttonRect;
18.    
19.  
20.    
21.     void OnGUI()
22.     {
23.        
24.         int w = Screen.width, h = Screen.height;
25.        
26.         //Rect imageRect = new Rect (0, 0, w, h * 2 / 100);
27.         Rect imageRect = new Rect(0, 0, Screen.width, Screen.height);
28.         Rect buttonRect = new Rect(0, Screen.height - Screen.height / 10, Screen.width, Screen.height / 10);
29.  
30.        
31.    // GUI.Label(guiRect, imageArray[currentImage]);
32.         GUI.Label(imageRect, imageArray[currentImage]);
33.    
34.         if(GUI.Button(buttonRect, "Next"))
35.         currentImage++;
36.        
37.         if(currentImage >= imageArray.Length)
38.             currentImage = 0;
39.     }
40.     // Start is called before the first frame update
41.     void Start()
42.     {
43.         currentImage = 0;
44.     //    imageRect = Rect(0, 0, Screen.width, Screen.height);
45. //        buttonRect = Rect(0, Screen.height - Screen.height / 10, Screen.width, Screen.height / 10);
46.     }
47.  
48.     // Update is called once per frame
49.     void Update()
50.     {
51.        
52.     }
53. }
54.  

 

Here is a more advanced version with a timer, keyboard control, mouse control
added some ergonomic functionality,
escape key to exit,
p key or right mouse to pause the timer1
left mouse or spacebar to skip to next slide

video tutorial:

used GUI.DrawTexture(imageRect, imageArray[currentImage]);

Code (CSharp):

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4. using UnityEditor;
5.  
6. public class slideshow1 : MonoBehaviour
7. {
8.  
9.     public Texture[] imageArray;
10.     private int currentImage;
11.      
12.     float deltaTime = 0.0f;
13.  
14.     public float timer1 = 5.0f;
15.     public float timer1Remaining = 5.0f;
16.     public bool timer1IsRunning = true;
17.       public string timer1Text;
18.  
19. // added ergonomic functionality,
20. // escape key to exit,
21. // p key or right mouse to pause the timer1
22. // left mouse or spacebar to skip to next slide
23.  
24.     void OnGUI()
25.     {
26.      
27.         int w = Screen.width, h = Screen.height;
28.      
29.         Rect imageRect = new Rect(0, 0, Screen.width, Screen.height);
30.      
31.         //dont need to make button transparent but would be cool to know how to.
32.         //Rect buttonRect = new Rect(0, Screen.height - Screen.height / 10, Screen.width, Screen.height / 10);
33.      
34.          //GUI.Label(imageRect, imageArray[currentImage]);
35.         //Draw texture seems more elegant
36.         GUI.DrawTexture(imageRect, imageArray[currentImage]);
37.  
38.         //if(GUI.Button(buttonRect, "Next"))
39.         //currentImage++;
40.      
41.         if(currentImage >= imageArray.Length)
42.             currentImage = 0;
43.     }
44.     // Start is called before the first frame update
45.     void Start()
46.     {
47.         currentImage = 0;
48.         bool timer1IsRunning = true;
49.         timer1Remaining = timer1;
50.      }
51.  
52.     // Update is called once per frame
53.     void Update()
54.     {
55.         Cursor.visible= false;
56.         Screen.lockCursor = true;
57.              
58.         deltaTime += (Time.unscaledDeltaTime - deltaTime) * 0.1f;
59.      
60.             if (Input.GetKey(KeyCode.Escape))
61.             {
62.                 #if UNITY_EDITOR
63.                 if (EditorApplication.isPlaying)
64.                 {
65.                     EditorApplication.isPlaying = false;
66.                 }
67.  
68.                 #else
69.                 Application.Quit();
70.                 #endif
71.             }
72.          
73.             if (Input.GetMouseButtonDown(0))
74.             {
75.                 UnityEngine.Debug.Log("Pressed primary button.");
76.                     currentImage++;
77.      
78.                 if(currentImage >= imageArray.Length)
79.                     currentImage = 0;
80.             }
81.          
82.          
83.             if (Input.GetKey(KeyCode.Space))
84.             {
85.                 UnityEngine.Debug.Log("Pressed space bar.");
86.                     currentImage++;
87.      
88.                 if(currentImage >= imageArray.Length)
89.                     currentImage = 0;
90.             }
91.          
92.              if (Input.GetMouseButtonDown(1))
93.             {
94.                 UnityEngine.Debug.Log("Pressed secondary button.");
95.                 timer1IsRunning = !timer1IsRunning;
96.             }          
97.          
98.             if (Input.GetKey (KeyCode.P))
99.             {
100.                 //ispaused = !ispaused;
101.                 timer1IsRunning = !timer1IsRunning;
102.             }
103.          
104.              if (timer1IsRunning)
105.            
106.             {
107.                 if (timer1Remaining > 0)
108.                 {
109.                     timer1Remaining -= Time.deltaTime;
110.                  
111.                 }
112.          
113.                 else
114.                 {
115.                     UnityEngine.Debug.Log("Time has run out!");
116.              
117.                     currentImage++;
118.      
119.                     if(currentImage >= imageArray.Length)
120.                         currentImage = 0;
121.              
122.                     timer1Remaining = timer1;
123.                 }
124.             }
125.      
126.     }
127. }
128.  

 

New
THIS IS SO COOL. I HAVE BEEN TRY THIS OUT AND ITS PERFECT!! THIS IS SIMILAR LIKE WHAT I NEED. BUT DO YOU KNOW HOW TO MAKE SLIDESHOW LIKE THIS BUT THE IMAGE IS CALLING THROUGH THE FILE FROM HARD DISK? BECAUSE I HAVE THE CODING ( CALLING IMAGE FROM FILE) BUT I DONT KNOW WHERE PART I NEED TO CHANGE YOUR CODING? CAN YOU HELP ME OUT?

HERE I ATTACH THE CODING


Texture2D thisTexture;
byte[] bytes;
string fileName;
public GameObject[] ImageHolder = new GameObject[4];
// 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;
bytes = File.ReadAllBytes(fileName);
thisTexture.LoadImage(bytes);
thisTexture.name = fileName;
ImageHolder[i++].GetComponent<RawImage>().texture = thisTexture;


#IM SO SORRY FOR MY BROKEN ENGLISH. I HOPE YOU UNDERSTAND AND HELP ME OUT. THANKYOU SO MUCH!!

 

You may also need this asset with advanced customization features for slideshow. It helps lot..

https://assetstore.unity.com/packages/tools/animation/ui-slideshow-133545