- Home /
Save png with text overlay
I am looking for a way to build a png which contains some sort of picture from a file and then overlay it with some text.
I need it to enable me to post an image to FB with the person's score since FB doesn't allow you to prefill the text.
SO, I would like to have the app's icon (large version of course) and overlay it with text like: "I score 1,000 points. Can you do better?"
I have no idea where to even start.
Answer by toddisarockstar · Aug 21, 2018 at 04:44 AM
most would simply pay for an assett for something like this. but if you wanted to actually start coding something simple like this yourself you could put images of all the letters in the alphabet into an array and paste them onto your image.
here is a super simple working example to get you started:
//drag and drop images of letters a through z into this first array in the inspector!!!
//import setting of your images must have read/write eneabled for this to work
//set texture type to advanced to show this setting
public Texture2D[] AlphabetImages = new Texture2D[26];
public string AZ = "abcdefghijklmnopqrstuvwxyz";
//here is an example function that returns a texture with a string stamped on the bottom
public Texture2D AddLetters(string say,Texture2D orig){
say = say.ToLower ();
Color clear = AlphabetImages [0].GetPixel (0, 0);
int cur = 0;
int push = 0;
int i = 0;
while (cur<say.Length) {
i = AZ.IndexOf(say.Substring(cur,1));
if(i>-1){
int x = 0;
while(x<AlphabetImages[i].width){
int y = 0;
while(y<AlphabetImages[i].height){
Color c = AlphabetImages[i].GetPixel(x,y);
if(c!=clear){orig.SetPixel(x+push,y,c);}
y++;}x++;}
push+=AlphabetImages[i].width;}
cur++;}
orig.Apply (); return orig;}
if you have questions let me know!
Can you point me to an asset that does it? If the price is reasonable then I might be willing to pay for it.
As an alternative, is there a way to create and object that I can write upon with a canvas and have the user not see it. Then take the texture from that object?
Answer by SunnyChow · Aug 21, 2018 at 10:55 AM
I used a much easier way to do that, but it need to wait for one frame, and hold one layer.
create a RenderTexture
put it to a camera with its own layer
put all share content in front of this camera and set them to correct layer
if you have 2d elements, put it to a Canvas, set the render mode as "Screen space camera" or "world space"
i remember you can't call functions to force rendering ui. so your script need to use IEnumerator to wait one frame
create a Texture2D in your script, call ReadPixels to convert the RenderTexture's content to this Texture2D
share this Texture2D
EDIT for the sharing feature, you need to buy third part plugin. It saves you lots of time. There are lots of programming, testing, bug fixing if you want to make a share feature from sketch. I am using this one:
Does it give me more than the Unity FB plugin already does?
In step 2 do I use a different camera than the main one? I don't want it to show to the user otherwise I could simple put the text on the screen and do a screen shot.
yes, different camera. if you set its render target to your RenderTexture, it will render to that RenderTexture ins$$anonymous$$d of the screen
Answer by TomColdtree · Aug 22, 2018 at 02:52 AM
A simple way might be to create a canvas or sprite with the image from file and a UI text or TextMeshPro text over it. Then save a screenshot using ScreenCapture.CaptureScreenshot() and crop/scale the png captured as appropriate.
Sure the image appears on the screen for a moment but this might not be a bad thing? It could be an framed image with a post to FB button under it.
That's the direction I decided to go in the end. At least for now it is good enough and I can always change in the future.
@theblitz would you care to share (some of) the code of your solution here?
Your answer
Follow this Question
Related Questions
Correctly position GUILayout controls 3 Answers
Identifying Rotated Glyphs in Font Texture 2 Answers
All of my textures now appear blurry (2D) 0 Answers
Render a text on the sprite 1 Answer