How to merge two textures

So in the game, when there is a cool moment, a screenshot is taken automatically. Then at the end of the game, the player can choose to post it on social media.
The problem is that I want the image to be shared on social media to be the screenshot merged with an overlay.
For now I only can do this :

And I want to have something much more complex like this:

And here is my code:

//Create path to get the screenshot
        string filePath = Path.Combine(/*Application.temporaryCachePath*/ Application.persistentDataPath, "shared_img.t2d");
        //Create path for the futur png
        string newPath = Path.Combine(/*Application.temporaryCachePath*/ Application.persistentDataPath, "shared_img.png");

        //Get the phone mockup
        //TextAsset mockupAsset = Resources.Load<TextAsset>("/phoneMockup.png");
        Texture2D mockupT2d = mockupAsset;
        //Texture2D mockupT2d = new Texture2D(Screen.width, Screen.height);
        //mockupT2d.LoadImage(mockupAsset.bytes);
        mockupT2d.Apply();

        //Get the screenshot and rescale it to match the phone mockup
        Texture2D ss = new Texture2D(Screen.width, Screen.height);
        byte[] rawData = File.ReadAllBytes(filePath);
        ss.LoadRawTextureData(rawData);
        ss.Apply();
        ss = ScaleTexture(ss, 1024, 2048);
        ss.Apply();

        //Create an array with the picture needed to be merged
        Texture2D[] toMerge = { ss, mockupT2d };

        //Create the finale picture
        Texture2D finalMerge = new Texture2D(1024, 2048);

        //Set the final picture to all transparent
        for (int x = 0; x < finalMerge.width; x++)
        {
            for (int y = 0; y < finalMerge.height; y++)
            {
                finalMerge.SetPixel(x, y, new Color(1, 1, 1, 0));
            }
        }

        //Merge the mockup and screen into the finale picture
        for (int i = 0; i < toMerge.Length; i++)
        {
            for (int x = 0; x < toMerge[i].width; x++)
            {
                for (int y = 0; y < toMerge[i].height; y++)
                {
                    var color = toMerge[i].GetPixel(x, y).a == 0 ?
                        finalMerge.GetPixel(x, y) :
                        toMerge[i].GetPixel(x, y);

                    finalMerge.SetPixel(x, y, color);
                }
            }
        }
        finalMerge.Apply();

        //Create the save file of the final picture
        byte[] ssPngByte = finalMerge.EncodeToPNG();

        //Save the final picture
        File.WriteAllBytes(newPath, ssPngByte);

Thanks in advance for your help.

Why the heck are you trying to merge textures manually with direct pixel access?

Make a render target.
Draw your screenshot on a polygon in it.
Draw the overlay.
Extract pixel data and save.

1 Like

Well i’m a bit of a newbie in code and I didn’t thought of that.
Can you please explain a bit more, I have to say I don’t understand really well what you want me to do.
Thanks

https://docs.unity3d.com/Manual/class-RenderTexture.html
https://docs.unity3d.com/ScriptReference/RenderTexture.html
https://docs.unity3d.com/ScriptReference/Graphics.Blit.html
https://gist.github.com/danielbierwirth/10965844fecc38243007f0cd21843d90

Basically,
You can create an offscreen image and render things into it.
THen you can grab its pixels and save them to the disk.
The rendering can be done using Graphics.Blit, using direct graphic functions like GL, or using scene camera.

So you could literally create a template of your screenshot in the scene (somewhere far away), configure it so everything is positioned right, then render it onto render texture and save.

And that will be easier to do than manually processing pixels by hand, plus you’ll be able to use shaders along the way.

1 Like

Oh thanks, I think I see how it can be done.
I’m gonna try that, it will for sure be lot easier.
Thank you again.

1 Like

It worked, thank you again, you’re my savior