BEGINNER
INTERMEDIATE
ADVANCED
Part 1: Materials in Unreal engine I
PROJECT FILES - 7 ASSIGMENTS - 12 LESSONS
In order to begin understanding what the material system can offer us in order to achieve our responsive interfaces, we will begin by learning the basic elements.
Overview
In order to begin understanding what the UMG designer and the Material system can offer us in order to achieve our responsive interfaces, we must start \ familiarizing with the basic elements of the materials or shaders. Once you start understanding the basics I promise everything else will come along. The learning curve is steep but is worth as this knowledge is very useful from 3d meshes UV to special effects. Many game engines share the same HLSL shading language.
This documentation mean to be a comprehensive overview of different workflows and pipelines that use materials to build our screens, layouts and widgets and NOT a material formation.
Welcome to the shader or material environment. How are you schools math? Well here you may find some use for that knowledge you thought you will no needed any more.
Packed inside a material, we can have as many GUI visual elements we required to render-and visualize a complex widget as complex as a game mode banner, all of a header avatar states, any number of buttons input feedback motions or a shiny and full of details store tile.
By grouping all the visual requirements like shapes or colors into a material, we can then instantiate it and obtain child-instances to cover all our visual needs.
Each instance has properties: shapes, images, masks, borders, outlines, gradients and colors that we can set for each use case. These are the visual equivalent of a widget, packed in a single material instance.
Here some examples that are instantiated from the same parent material in the above example, we are able to change the background colors, the image textures, we can add borders, modify the offsets and their angles. We can add a shadow or an outline to the image textures. All is done in the parent and in the instances we set the property values as we required for each use case. Instances can be as flexible as we require, being our imagination and performance requirements the limit.
BEGINNER
INTERMEDIATE
ADVANCED
Part 2 Materials in Unreal engine II
PROJECT FILES - 6 ASSIGMENTS - 11 LESSONS
At this point you got what this is about. In this follow up part, we can go with the fun stuff. Something less based on maths and more in mask white-black mask.
Overview
At this point you got what this is about. Now in this follow up part, we can go with the fun stuff. Something less based on maths and more in mask white-black mask. Texture images, masks, shadows and animation. More of a practical approach. Goal is to see how this is hell of relevant.
To begin this part we are going to go for the images, the image textures. How we can add multiple images to a material, controls their position, sizes, opacity and other parameters. Let’s begin.
BEGINNER
INTERMEDIATE
ADVANCED
Part 3: Responsive Layouts in UE
PROJECT FILES - 13 LESSONS
In this part we are going to try to establish the basics to be able to build a responsive layout in UE5 with the help of the responsiveness of the materials.
Overview
For our GUI to accommodate or respond to the available screen horizontal and vertical spaces, its layout structure and materials must be flexible and every single element must work together and in sync. Screen ratios can make our work difficult and is a matter of finding the right system.
We are going to see how with simple setups we can dig into it and by setting the right elements in the right way everything come along and deliver the result we seek.
Starting from the layout structure we can organize the widgets inside horizontal, vertical of grid boxes. These are flexible system that will give us many options to respond to screen ratios and available space. Alignments will keep everything in place and there are different techniques to make elements grow as required to fill space. Often we will need to add blueprint logic to be able to stop these responses at certain widths, heights or screen ratio. Layout responsiveness starts in the very same way we structure the layout. Is better to spend a good time thinking and planning it.
BEGINNER
INTERMEDIATE
ADVANCED
Part 4: Responsive Loading screen
PROJECT FILES -15 LESSONS- 3h VIDEOS
We are going to build a responsive loading screen in two ways: a canvas layout with image brush textures and a material with textures and a reveal transition mask.
Overview
We are going to build a loading responsive loading screen in two different ways:
1. A canvas layout with image brush textures
2. A Material with textures and a reveal transition mask
The full screen background image need to respond and adapt to the screen width from tablet to mobile ultrawide screen without losing most of its details like the represented scene and character. In order to do that we need to separate its elements and make them respond differently without compromising the assembly of some characters of Porcco Rosso the movie.
Our goal is to familiarize with both approaches and compare both methods in order to understand the advantages that the material responsiveness can provide.
We are going to relay in a material function we can reuse later as a great way to speed up our material workflow. It is important to understand this key aspect of working with materials.
BEGINNER
INTERMEDIATE
ADVANCED
Part 5: Responsive Layouts in UE
PROJECT FILES -13 LESSONS- 3h VIDEOS
Responsive layout that recreates the Android Auto interface in UE5. Taking this layout as example we are going to see how the navigation can be made responsive.
Overview
Android auto is used in a variety of aspect ratios and the navigation is displayed on the left, top or bottom of the screen. The size of the screen the widget take is also different.
Independently where you want your app buttons, the layout and the widgets need to respond correctly to any configuration and this is what we want to achieve here. Also make sure you answer Porcco's call, he is probably in trouble again and you do not want him to die in a random dog fight.
Previously we have learn how to set a fluid layout to respond to different platform ergonomics, inputs and aspect ratios. We have also create responsive materials to help us with that.
In this formation we are going to start following an **implementation workflow** to first study the results we want from our design, then create the elements we require with what we have learn in the previous formations.
Two different implementations, two set of widgets, based on usability platforms needs.
We are also going to introduce the data tables in order to setup the entries we want to work with.
It is a great way to get used to work with a single host widget that will be able to accommodate the data stored in the data table. Is similar work that we should be doing when the data is stored in a server in a live operations environment.
BEGINNER
INTERMEDIATE
ADVANCED
Part 6: Material UI workflow
PROJECT FILES -17 LESSONS- 5h VIDEOS
In this course, we are going to establish a responsive material-centric implementation methodology through some practical examples.
Overview
Shaders or materials in unreal engine can be as useful for a GUI visual element, as much as they are for a 3D object or actor in a 3D world environment. The visual advantages of materials can be also applied to UI art. By creating a robust system constructed around shaders, updates, takeovers and live operations will be faster to deliver, way easier and any visual future need could be added quickly. Combined with a system of server based backend or CMS dynamic data, the complexity and speed cycle of updates or live operations will improve significantly, compare to traditional workflows.
In this formation we are going to establish an implementation methodology or material workflow centered in integration-implementation. It will help us see how we can leverage this workflow proposal into your own ways. Hope it helps in long run.
Flexible and optimized Instantiation: All the GUI elements of a widget or even a screen could be drawn from one or two materials. Often, the parent material does not even need to be entirely compiled to draw-render all these materials instances, as they are branched or switched by the required properties.
Scalability: a material parent can be updated and changes will cascade to each instance. If done correctly we can add visual parameters than can be added to new materials instances but will leave old ones unaffected. This is a great workflow for updates, takeovers or IP customization
Parallel development: The same way, a dev can work in the parent while other devs are using the instances or even creating new ones from the parent.
Preview and set states before animation: along with the linear interpolation parameters in the material, the instances allow us to preview and set the required visual states in the instance itself. We do not need to do the animation before.
Interpolated animation: any baking material instance animation workflow. A well designed material will result in the possibility of being use on any widget that has the parameter names included on any animation. Therefore we could use any material instance.
Responsiveness: The UV coordinates inside the material can respond to the screen available space, similar to web design. In fact we can make the material parameters respond to size and scale in many different ways. We do not need to use scale boxes or blueprint overrides. It is like a canvas position inside the UV space of the material itself.
Data tables and material parameters: We can change the material properties to create a workflow based on data tables that can help us to work faster.
TAILORED WORKSHOPS
In-Engine training sessions and custom courses for UI designers and engineers.
Designed as an extension of the 6-part course, these sessions embed into your production reality. From UI architecture to implementation constraints, every workshop is customized to align with your team’s tools, standards, and delivery goals.
These custom workshops focus on integrating the methodology into your live UI—optimizing workflows, improving scalability, and accelerating production readiness.
INQUERIES
LEARNING PATH
BEGINNER
INTERMEDIATE
ADVANCED
