What is the best way to 'instance' a movie clip for use in our UI, such that different UI elements can run the same movie clip but at different start times?

Development Programming & Scripting UI
, , , , , ,
1

To achieve the level of polish we want in our UI, we are creating short movie clips in AfterEffects that we’d like to have run in UMG.

Here’s an example of the type of moving UI we are targeting: http://s.lolstatic.com/site/2016-season-update/b32864379ff65f2257ab4757b68fbf07674d9d10/video/new-champ-select/pick-intent.mp4

Currently, we are integrating movie clips into UMG in the following way:
We create a media player asset and load the movie clip (in the Content/Movies directory so it properly cooks), then we create a Media Texture from that asset, and create a Material from that Media Texture. We can export the movie clips with alpha, so that we can use the alpha channel as an opacity mask with a translucent material.Once we have the material, we can apply it to an image in UMG. Then, in Blueprint, we store a reference to the original Media Player Asset and start the movie clip running.

This generally works well; however, the situation where it does not work is when we have multiple elements that all run the same movie clip, but need to start the movie clip running at different times. Since every element that is running the movie clip is ultimately pointing to the same Media Player, they are all perfectly in sync. There’s no easy way that I’ve found to effectively instance the media player so that many different elements on the screen at the same time can run the movie clip independently with different start/end times.

Here are my questions:

  1. What is the best way, if there is one, to do the above “instancing” behavior we are looking for?

  2. Is using media player assets to do this type of UI performant? We would have a large number of these running on the screen at once (potentially 30+) if not, what is the best way in UE4 (preferably with UMG as opposed to integrating Scaleform) to do the types of animating UI as seen in the example at the top of the post?

  3. With animated UI like this, we ideally want to have an “intro” clip, and then a “looping” clip. What is the best way to seamlessly transition between an intro into a loop with movie clips using the media player system?