Playing GIF inside VisualElement or Another way ?

Unity Engine
,
1

Question is as title of the thread, is there a way to play gif using UI Toolkit?

I want to show a simple tutorial gif inside a UI Toolkit based popup.

Thanks in advance

2

Not a gif but you could use the video player to render to a texture and display that.

3

But I want to do this with UI Toolkit elements, maybe IMGUI Container does it? possible?

4

You render to a texture and display the texture in a VisualElement using the background style.

5

Solved! Thanks for your answer karl. Step by step for anybody need this:
1- Create a Plane object on the scene
2- Attach VideoPlayer component to it.
3- Import the mp4 file (just drag and drop it anywhere in Assets folder)
4- Assign the mp4 file as the resorce of the VideoPlayer of the Plane object(the object you created at step 1)
5- Select Render Mode attribute as “Render Texture” on VideoPlayer component of the Plane.
6- Assign the render texture to the Target Texture of the VideoPlayer.
7- Go into uss file and set background like this:
background-image: url(‘project://database/Assets/Resources/tutorial.renderTexture’);

It worked for me!

6

Updated version of sayacienes answer.

How to play a video in UIToolKit.

  • In Assets, right click > Create > Render Texture. Place it in a Resources folder.
  • Create an empty scene object, call it VideoPlayer.
  • Add Component > Video Player to the empty scene object VideoPlayer.
  • In the Video Player component Render Mode > Render Texture.
  • In Target Texture add the RenderTexture.
  • Add a sample video to Video Player > Video Clip.
  • UI Toolkit > Visual Element > Add Style Class “.video-player”.
  • Open the USS document, copy the following class to the USS document (replace the path to your RenderTexture):.video-player{ background-image: url('project://database/Assets/UI Toolkit/Resources/RenderTextureVideo.renderTexture'); }
  • You’re ready to go! Make sure the video plays on awake in VideoPlayer and that the video can is able to run on your system.