Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice

Question Display model as image on UI layer?

Discussion in 'UGUI & TextMesh Pro' started by MidniteOil, Sep 5, 2020.

  1. MidniteOil

    MidniteOil

    Joined:
    Sep 25, 2019
    Posts:
    345
    Greetings,

    I'm trying to compose a series of "tutorial" screens to teach players how to play my 3D space shooter.
    I have really nice 3D models I am using in my game that I'd like to include on these "documentation" pages.

    I'm arranging a 2D UI screen like so:
    upload_2020-9-4_19-14-49.png

    I would like to superimpose these models above the labels:
    upload_2020-9-4_19-15-16.png
    I'd also like them to be animated (e.g. rotate) if possible.

    If I just add them to the scene I cannot get them to render correctly along with the UI elements.

    What's the best way to accomplish this?

    Thanks!
     
  2. MidniteOil

    MidniteOil

    Joined:
    Sep 25, 2019
    Posts:
    345
    I've tried capturing images of these models and creating 2D sprites from them but I can't get them to be transparent.
    I tried following these steps to use MS Word to make a transparent version of the image and in Word it goes from this:
    upload_2020-9-4_22-28-32.png
    to this:
    upload_2020-9-4_22-28-43.png

    But when I pull into Unity it's still not transparent:
    upload_2020-9-4_22-28-59.png

    I'm sure I'm not the first person to try to do this so I'm really hoping somebody chimes in soon.
     
  3. JoNax97

    JoNax97

    Joined:
    Feb 4, 2016
    Posts:
    611
    What you should do is render the models to a render texture ( just point a camera at it and set the camera Target to a render texture). Them you can render with transparent background.

    You can just rotate the model as normal and have it updated in real time. If you want to take a still image and save it as a regular texture (to avoid rendering it in real time which is costly) here's some code that can get you started.

    Oh, and by the way, if you want to remove the background from an image in an external tool, word is not a good choice. Photoshop, GIMP or paint.NET are much better. The latter 2 are free.

    Good luck!
     
  4. MidniteOil

    MidniteOil

    Joined:
    Sep 25, 2019
    Posts:
    345
    Thanks for the reply. I was actually able to get 3D models to show up in the UI with a separate camera. Here's a short video showing what I've got so far.

     
    JoNax97 likes this.
  5. MidniteOil

    MidniteOil

    Joined:
    Sep 25, 2019
    Posts:
    345
    Ok, so I've got my 3D models displaying correctly but now I want to just drop some transparent sprites for Mouse and Keyboard visuals. I found some supposedly transparent png files which I've dragged into Unity but when I add them to a scene they are anything but transparent and I don't see any settings that would control the transparent background:
    upload_2020-9-6_17-6-7.png
     
  6. whogas

    whogas

    Joined:
    Oct 18, 2013
    Posts:
    46
    I am guessing you found those by googling. Most sites that offer things like that don't give you the real transparent version until you register and do a bunch of other onerous steps. A good site to pull icons for prototypes (and beyond) is game-icons.net. It is free and they allow you to download a transparent png, no problem.

    Here is a mouse icon: https://game-icons.net/1x1/delapouite/mouse.html

    If that doesn't work, check the import settings on your texture. You may have to check the box that reads "alpha is transparency" for your situation.