Search Results for

    Show / Hide Table of Contents

    HOWTO: Create Custom GUI Material

    In this tutorial, you will learn how to create a GUI material that can be used to perform custom rendering for UI components in your game. Follow these steps to prepare a simple material that uses a texture with a tint overlay and saturation control.

    1. Creating an Image

    The first step is to add a Image control (with a UI Control and UI Canvas).

    2. Create a new material asset

    Right click in the content window and select option New -> Material -> Material. Then specify its name and confirm by pressing enter. Double-click on the created asset and start editing the material.

    New Material

    3. Set the domain to GUI

    Set domain to GUI

    Use the material properties panel and set the material domain to GUI. The generated material shader will then be compatible with the GUI rendering pipeline.

    4. Setup the material graph

    In this step you need to create a complete material. You can use the nodes network based on the following screenshot. To learn more about creating materials and using material parameters see the related documentation here.

    Setup GUI Material

    5. Assign the material

    The last step is to assign the created material asset to the Image brush property. To do so, you can drag and drop it or click on the arrow symbol and search for it.

    Assign Custom GUI Material

    6. See the results!

    Finally, you can see the results of your work. You can also change the constant values and texture to material parameters to use them from C# code or to override in a Material Instances.

    Result

    • Improve this Doc
    In This Article
    Back to top Copyright © 2012-2024 Wojciech Figat