Mediaplate opacity slider simple blueprint

I wish to add an opacity slider to the Mediaplate video player using a simple Blueprint, and I’m wondering what is the best practice and the simplest way to do it?

I am primarily an artist and I’m just learning how to do Blueprints so I would really appreciate a simple step-by-step explanation that will help me understand how it works and at the same time learn something about working with Blueprints.

The idea is that a user can video themselves copying moves they see on an in-game mocap animated ‘teacher’ model, then upload their video and be able to view it superimposed over the ‘teacher’ animated model through the mediaplate placed in front, and so compare their movements to that of the ‘teacher’ model. The opacity needs to be controllable to account for different lighting conditions and so on with different user’s videos.

Once I have the slider working, I would like to try a similar thing by altering the colour and opacity of two animated models that have been superimposed. The ‘user’ model and animation will be generated by processing their video using AI mocap. It’s the same idea, just using animations instead of an animation and a video. To differentiate the two models, it will also be necessary to alter the tint as well as the opacity for each model; for example, the ‘teacher’ model is blue, the user model is ‘red’, and where they overlap is purple. This will provide visual clues for the user as to how well their moves coincide with the teacher model. If they move ahead of the teacher or lag behind, then there will be more red and blue showing; if they are in perfect synch, there will be mostly purple.

The benefit of using models in this second scenario is that the viewpoint can be altered in 3d space to get more accurate feedback, depending on the accuracy of the mocap of course, whereas a video is limited to a single viewpoint perspective.

Hi @chuangzu
Let’s see…

Opacity Slider for Mediaplate Video Player:

Create a Widget Blueprint with a slider to control opacity
Arrange the UI: Place the slider and a label (e.g., “Opacity”).
Bind the Slider Value to control the opacity of the Mediaplate’s material
Get the value of the slider and use it to set the opacity in a Dynamic Material Instance.
Create a Material for the Mediaplate that has an opacity parameter
Assign the Material to the Mediaplate and modify the opacity based on slider input.

Two Animated Models Tint and Opacity:

Create Materials for user and teacher models with color (tint) and opacity parameters.
Assign the teacher model a blue tint and the user model a red tint
Create Dynamic Material Instances for each model within Blueprints.
Modify the Tint and Opacity via sliders to dynamically change both parameters.
Merge Colors (blue and red) to observe overlap (e.g., purple for correlated movements)

This setup makes it possible to adjust opacity for the video and models so users can more easily compare their movement to the teacher model in real-time