Game Development Updates

Unity UI Menu Background Blur

I got to a few final stages of polish on my android game and wanted to clean up some of my graphic design in my menus. I have a couple of player customisation menus and a settings menu and I wanted to darken and blur out the screen. I thought it’d be a great idea to just temporarily capture the screen into a Raw Image in the UI. Blur it and that would allow me to disable the camera too, which is great for the device’s battery life.

I couldn’t find anyone doing this and spent a while trying to work out a way to do it. It was simple enough once I got started and for the blur shader I used one I found on https://catlikecoding.com/unity/tutorials/advanced-rendering/bloom/

I simply setup a RawImage as a background image in the UI, set it to stretch fit (yes if you change orientation it gets stretched!), then set the main camera to render to a render texture and set that as the texture for the raw image. The raw image has a shader and material similar to the one on cat like coding, it modifies the render texture with a couple of passes and then blits back the modifications to the render texture. Then while the user is in the menu I can disable the camera component, which means the menu looks better and the battery life is happy.