[SOLVED] GIF Motion Texture Support?

Can you use a GIF as a texture and the texture will move like a GIF does? If not, how do I do that?

Unfortunately no. You can use a gif as a texture, but it won’t animate.

There is a tutorial on how to animate textures here: http://developer.playcanvas.com/en/tutorials/intermediate/animated-textures/

Basically, you need to make a spritesheet of the animation frames then cycle through the frames using the texture offset.

Is this still true in 2019. Playcanvas don’t support animated GIF?

Correct.

But you could convert the animated GIF to an MP4 to do a video texture.

Or place the frames side by side in a JPG/PNG and create an animated sprite.

1 Like

Thank you for your solution with MP4 and video texture.

I have found another solution that I have documented here: How can I create an animated sprite on 2D screen UI in a 3D application?

Unfortunately no. You can use a gif as a texture, but it won’t animate.
Fortunately,you can make a GIF as a texture and make it move by three-plain-animator. Steps are here: https://docsbay.net/three-plain-animator

How is this going from the gif to 2021? The truth is that I would like it to be used in Interface, use html for the gif I don’t like :frowning:

Hi @ignacio_padilla,

You can use an animated sprite, though they aren’t supported in pc.Element components to be used in a UI screen.

You can still add it as a child to your active camera to be locked on screen.

1 Like

You can also sort of animate your sprite in pc.Element components if you have a steady frame rate and Tween through the spriteFrames.

3 Likes

Using ffmpeg.wasm (https://github.com/ffmpegwasm/ffmpeg.wasm) I convert the Gif in browser to a video and run it using a video texture.

https://playcanvas.com/project/798640/overview/animated-gif

1 Like

Does this work if the video has a transparent background?

If you export the video with an included alpha channel it should work. I haven’t tried it in playcanvas, but I have used transparent videos in other projects. I use After Effects to make transparent mp4’s :

This tutorial uses the Quicktime video export, but you can use mp4 as well.

can you just add gif support to playcanvas because that would make it much easier and would make it less time consuming and boring to have animated textures

or at least apng support

It’s currently not on our roadmap yet. For the moment, you can use something like this tool to convert GIFs to a sprite sheet: Online GIF to sprite sheet converter

What is your use case for GIFs and APNGs?

i wanted animated gunskins for my game called last life
-also can you help me with attachments loadouts and actually changing the gunskin ingame

also how do you use a sprite sheet?

Check this manual page on how the sprite editor works:

https://developer.playcanvas.com/en/user-manual/2D/sprite-editor/

this is very confusing do you have an example?

here’s the link to my game so you can see if it will work on my game
https://launch.playcanvas.com/1303797?debug=true