Unity Slide Show? Because!
Howdy! This is just a quick pre-GDC post because I wrote some slide show code in Unity and thought it might be useful to someone!
Backstory: There’s going to be a spare monitor at my GDC Play booth, so I thought it would be handy to run a slide show on the spare screen with game play info, tips, and whatever else I can wrangle before Wednesday. First I took a look at the photo slideshow app built into my Amazon FireTV, but found it had to be connected to the internet to get images from my cloud drive. I figured I could find another app, but in the amount of running around and testing I was doing any way I decided just to write one in Unity!
It’s pretty simple. The project contains a Sprites folder and I add the images I want to put in the slide show there and mark them as sprites. I leave skipping this step as an exercise for the reader for now, as this suits my needs 🙂 Another issue you may want to tackle is that depending on the size of the images, the camera position may need to be adjusted. For me, all my slides are the same size so it’s not a problem.
The scene is a camera, a background color cube (black) and a script on the camera. The script does all the work:
using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
public class Fader : MonoBehaviour {
private static Dictionary<string, Sprite> sprites = new Dictionary<string, Sprite>();
private static Dictionary<string, Sprite> spritesUnused = new Dictionary<string, Sprite>();
GameObject fader1, fader2;
SpriteRenderer rendy1, rendy2;
public float timer = 0;
The first thing to do is get the sprites in the sprites folder and build them into two dictionaries keyed by name. The second dictionary is where we will be removing the sprites so we are ensured to see each one once in a random order.
// Use this for initialization
void Start () {
sprites.Clear();
Sprite[] spriteList = Resources.LoadAll<Sprite>("sprites");
Debug.Log("Sprite list : " + spriteList.Count());
for (int i = 0; i < spriteList.Length; i++)
{
if (!sprites.ContainsKey(spriteList[i].name))
{
sprites.Add(spriteList[i].name, spriteList[i]);
spritesUnused.Add(spriteList[i].name, spriteList[i]);
}
}
Next, I create two sprites to start the slide show out, and remove them from the spritesUnused dictionary.
fader1 = new GameObject(); fader1.transform.position = new Vector3(0, 0, 2f); rendy1 = fader1.AddComponent<SpriteRenderer>(); string spriteKey = Enumerable.ToList(spritesUnused.Keys)[Random.Range(0, spritesUnused.Keys.Count)]; rendy1.sprite = sprites[spriteKey]; spritesUnused.Remove(spriteKey); fader2 = new GameObject(); fader2.transform.position = new Vector3(0, 0, 2f); rendy2 = fader2.AddComponent<SpriteRenderer>(); spriteKey = Enumerable.ToList(spritesUnused.Keys)[Random.Range(0, spritesUnused.Keys.Count)]; rendy2.sprite = sprites[spriteKey]; spritesUnused.Remove(spriteKey); }
Then in update, I use a timer to determine how long each image will show before fading out.
// Update is called once per frame
const int FADE_TIME = 2;
void Update () {
timer += Time.deltaTime;
if (timer > FADE_TIME)
{
float alpha = 1 + FADE_TIME - timer;
rendy1.color = new Color(1, 1, 1, Mathf.Clamp01(alpha));
rendy2.color = new Color(1, 1, 1, 1);
if (alpha < 0)
{
rendy1.sprite = rendy2.sprite;
rendy1.color = new Color(1, 1, 1, 1);
if (spritesUnused.Count == 0)
{
foreach (string key in sprites.Keys)
{
spritesUnused.Add(key, sprites[key]);
}
}
string spriteKey = Enumerable.ToList(spritesUnused.Keys)[Random.Range(0, spritesUnused.Keys.Count)];
rendy2.sprite = sprites[spriteKey];
spritesUnused.Remove(spriteKey);
timer = 0;
}
}
}
}
The bit at the end there repopulates the unused list if needed. Then the code swaps the back image to the front and resets the alpha, then picks a new image from the unused list. Here’s the project!
