Featured How To Render 3D Models In The User Interface (UI)

Featured_Image.jpg


Have you ever wondered how a player’s character is animated with all of the statistics available in the user interface (UI)? This week, I was working on the UI for my upcoming game, Crumbling World, when I realized that I could share how I have used the Render Texture feature to display a player’s character within the user interface. Hopefully, sharing my experience on this topic will help to assist you on your own game development journey. Without further delay, let’s get started!


How to Render 3D Models in the User Interface (UI)

Overall, my approach is very similar to the process used by many developers to create mini-maps. First of all, we need to create two cameras. The first camera is used to display the game itself, and the user interface happens to be included here. Additionally, the second camera, which we will call the “Profile Cam,” will be used to display the player.


Once we have our Profile Cam set up, we need to configure some settings:

  • Go to Clear Flags > Solid Color and set the alpha channel to zero in order to create a totally transparent background.
  • Go to Culling Mask > Player and make sure that our player is set up within the Player Layer.

After these steps are completed, there are still a few settings to choose for our camera. However, this is a minor process, so we will come back to it later.


step_01.jpg


Creating the Profile Camera.


Next up, we want the create our Render Texture. If you’re following along, click your right mouse button in your Project Window and select the Render Texture.


step_02.jpg


Creating the Render Texture.



In this case, we can go ahead and proceed with most of the default settings (if you want, you can check out the different options available within the documentation too). However, I will change the dimensions of the texture to 1024-pixels by 1024-pixels in order to allow for a better resolution image.


step_03.jpg


Settings for the Render Texture, play with the size for a better quality.


Now, we are ready to go back into our Profile Cam settings and plug the Render Texture we just configured into the Target Texture. In doing so, we are going to be rendering what the Profile Cam sees in a 2D texture that can be added to the user interface.


Our last step is to create our canvas, which will allow us to create a raw image as a child. Once this step has been completed, we only need to select our Render Texture as the source for our raw image, and that’s it!. We will now have our player displayed within our user interface.


Misc_Update_49-twitter.gif


In general, I have found that this method works well with both perspective and orthographic cameras. I hope that this tutorial has been useful for you, and I wish you the best of luck as you continue to work towards creating beautiful, interactive gaming experiences for your players.

Comments 4

  • Glad you're using the culling mask. Seems obvious but you wouldn't beleive some people have no concept of optimization. Nice clean tutorial. Good job.

    • Thanks so much! I think it's very helpful to share our processes, like that people can take the best and make their own :-)

  • That is awesome! I had made something similar for a loading screen (think sonic running loading screen) but not like this. Mine never stretched with the screen... and now that I think of it... I may have found a way to do it, lol. Too late.. But this is even better. Thanks for the tips! Your art skills are awesome! Can't wait to see your finished product.