Unity - sprites take up more memory than textures? Causes a black screen after launch on device?

Question

I have a series of sprites Im using to animate a UI animation that needs to be on a canvas - theres about 500 because I exported a png sequence from aftereffects and I flip through them with a canvas image with this:

public class VideoPlayerRawImage : MonoBehaviour
{
    public Sprite[] frames;
    public int framesPerSecond = 60;
    public int index;
    public bool paused;
    Image image;

    float t;
    public bool pause;
    public bool done;

    private void Start()
    {
        image = GetComponent<Image>();
    }

    void Update()
    {
        if (!pause)
        {
            t += Time.deltaTime;

            if (frames.Length > 0 && !done)
            {
                index = (int)(t * framesPerSecond) % frames.Length;
                image.sprite = frames[index];
            }
        }

        //repeat
        if(index >= frames.Length-1)
        {
            done = true;
        }
    }
}

Ive compressed sprites like this:

And ive done this before with textures. Problem is, with these sprites added, I get a black screen after I launch the app, before the scene loads and after unity logo. What can I do to fix this? I need to use sprites because I need it on a canvas.

Unity:

Answer 1

I'm assuming you can not simply use a VideoPlayer component instead and rather load a video than a PNG file for each frame for the same reason I once did: The Alpha Channel.

Anyway importing every frame as PNG file and switching the sprite every frame is very unefficient!

So if it isn't about the alpha chanel anyway just use a VideoPlayer with a video clip and jump to step 3.2. down here using the video file instead of single frames/WebM file.

---

If the issue is the alpha chanel:

I have found a solution once for having a GIF-like texture but maintaining transparency

requires Adobe MediaEncoder (can be tested free for 30 days).

1. Somewhere get the single images from as PNG

I rendered mine using Blender3D but you can ofcourse use any PNG frames with (or without) transparency.

You seem to have those already anyway. However, the frame files should have a consequent numbered naming like e.g. frame_001.png, frame_002.png, etc.

---

2. Encode the PNG files to a WebM video format

1. Install the WebM codec for Adobe Premiere and MediaEncoder

2. Open the Adobe MediaEncoder

3. Go to File->AddSource...

   

4. Select the first frame of your animation and make sure PNG file sequence is enabled.

   

5. In the Queue view click on the current target codec

   

6. As format select WebM (only available after installing the plug-in in step 1.)

   

7. in the Image Settings section you can either adjust the settings or simply click on Match Source

   

8. In the Codec Settings switch to VP8 since Unity doesn't support VP9 (yet?)

   

9. You might want to make further adjustments but the most important: Enable Include Alpha Channel

   

10. When you think you are done hit Ok at the bottom of the window

    

11. Back in the Queue view click on the play symbol to start encoding

    

12. after finishing and closing Adobe MediaEncoder you will find the result in the same folder your source frames where in

    

---

3. Finally use the WebM "GIF" with transparency in Unity

1. Import the two result files into your Unity Project.

2. In the Assets do right-click -> Create -> RenderTexture

   

   Name it and change the size maybe (the rest should be fine.)

3. Somewhere in you Scene on a manager GameObject have a VideoPlayer component. You need only one (per gif texture). Here use the imported WebM file as VideoClip and the created RenderTexture from step 2. as Target Texture.

   

   Enable Loop and (if you want) Play On Awake (otherwise you'll have to call Play manually.)

4. Instead of the Image component use the RawImage component and as Texture reference the created RenderTexture from step 2.

   

---

Now you have a transparent GIF animation using your original PNG frames within Unity

---

Just for the file size difference:

• The single PNG files (I used 24) for me have about 4.5 mb in total
• the WebM file has about 0.5 mb. So this makes it more or less a factor 10 smaller.

Imagine now how much space you might save if you use this instead of 500 PNG files!

Answer 2

Black Screen

while launching the app unity will take some time to load the scene, which is based on the weight of the scene.

Change the background color of the camera to the loading screen video first frame color, by selecting the color from the video using the color picker in the CAMERA--> BACKGROUND. If you do this instead of a black color, video first frame color will occur so it will be seamless and the user won't notice.

we have done the same thing in this game you can check it out : Game link