Flipbook / playing an animation (texture)

Hi guys

For a scene I’m working on, i want to run a movie (video file or image sequence) on a tv. What is the right way to accomplish this?

I have found some info about a Flipbook node, but there does not seem to be much documentation around on how to use this.

Is there a tutorial or so around?

Cheers,

It should be fairly straightforward to use the Flipbook node. You give it a texture that is broken up into rows and columns. You tell it how many rows and columns, and then you supply a variable that tells it the animation phase in 0-1.

Internally, the flipbook material function basically just adjusts the UVs by dividing the phase by the rows*columns to figure out what total percentage the animation is at. It crops the UV’s around each frame by figuring out which frame is represented by each phase value and where the corners would be.

So if you have only 4 total frames (ie, 2x2 flipbook), the animation phase of 0 - 0.25 would look up the first frame, 0.25-0.5 would be the 2nd, 0.5-0.75 would be the third, 0.75-1.0 would be the fourth.

Hey Ryan

I got the basic idea behind it, but the sequence I need is around 480 frames long, how am I supposed to create this “image grid”? Is there a tool around that would automate that?

Or is there another way of accomplishing that?

There is no tool in unreal to author flipbooks, just to control the animation of them once they are imported. If you need 480 frames, just try and figure out a good size that is close to that.

16x16 is 256 so thats a little low. You could do 16x32 to get 512. Then you just need to figure out how big each frame should be. If each frame is 128x128 resolution, your texture would be 2048x4096. People usually export animations out of 3dsmax or even just hand paint the frames, although not 480 frames :slight_smile:

Look into a program called “Glue it” that can take a series of frame dumps and make a flipbook of the desired size and length.

phew…Okay I’ll give that a shot - thanks

What are the future plans for animations within the Engine - this surely isn’t the peak of creation in this respect…? :wink:

Cheers,

oh by the way: Im talking about a “show” on a virtual tv screen for an architetural visualization project - 128x128 will definitely not do… :wink: This will be the
“mom” (the full word didn’t make it through the filters - lol) of all textures as it seems…

No, certainly not! Many of us techartists have a strong desire to push the envelope in that regard. If you are looking to do this in engine, you could make your ‘show’ all in engine with talking skeletal meshes etc, do frame dumps and use the Glue It program to assemble the shots.

There is a chance we will one day have the ability to save data like textures using blueprints. If that ever comes to pass (no promises, it’s not even scheduled), there is no telling what kind of custom exporter tools we can make.

Well that definitely sounds intriguing! (i’d support development in this respect with shipments of strong coffee and Donuts to any dev involved ;))

For the time being, I’ll just need to figure out on how to get my sequence of images into the engine I’m not convinced yet that the grid stuff will work (resolution wise)…

If you run into texture size limits, you could break up the long sequence into a series of flipbooks and then chain them together. All you would have to do is divide the transitionphase value by the total number of chained sequences, and reinterpret that 0-1 to be 0-1 times the number of flipbooks chained. assuming they all have the same number of rows and columns. It would probably be easier than trying to import all the images individually.

100 frames at 2048 (pixels) should be good enough for what you want, Like Ryan said break them up into multiple and trigger each one with a switch. (for instance time)

Thanks guys, let me give this a shot…

Cheers,

Hi Guys

Okay, I got the basic setup working:

http://www.team-imx.com/images/UE4/animated_sequence.jpg

The only thing I haven’t figured out yet is how to do the switching between the spritesheets. Any ideas?

Cheers,

You could do 2 IF statements.

For the 1st if, you would use AnimationPhase as input A, and a value of 1 for B. Then you would have A<B input be the 1st texture, and the A=B and A>B inputs be the 2nd texture.

Then you do the same thing with the 2nd if function, but input B =2, A<B is second texture and the other 2 inputs are the third texture.

Then you need to rescale your animation phase value to be 0-3 instead of 0-1. I just realized an issue with your shader. You took frac of time (correct) and then multiplied by 0.4. That will limit your animation phase between 0 and 0.4. Multiply by 0.4 before the first frac to slow it down like that.

What you should do for the phase is first get the 0-1 value. Frac of time is correct. Then multiply that be 3 instead of 0.4. Then you need to feed that *3 version of phase to the B of the 2 IF statements. Then you take frac again of the *3 version and feed that into the actual animation phase input of the flipbook node.

Hopefully everything I said made sense. There’s a chance my off-the-cuff material code has some errors but I will try to set up the nodes myself if it doesn’t work.

@Ryan would a switch work?

@RyanB: Yep, I’ve noticed the error with the multiply as it didn’t behave as expected. Let me try out your ideas and come back :wink:

PS: please consider adding an image sequence / bink stream node or something to use with materials / decals to show animated 2d material - the above way is a bit of a pain :wink:

Okay I tried this:

http://www.team-imx.com/images/UE4/flipbook_2.jpg

Have I understood correctly what you meant?

Currently I get an error with this setup (see screenshot)…I’ll re-check if I missed something…

Hmm, how do I hook this to the actual T2d input of the FlipBook node?

Why is it a Texture object?

The flipbook seems to require texture objects, the Texture2d input expects a texture2D not a float3.

Oops it appears the IF node doesn’t like textureobjects, and yes the flipbook node needs them. I was hoping that would work. Don’t worry, you can make it work, but in this case the easiest way is to probably do the same thing, but use 3 flipbook nodes. Then you put the Flipbook node outputs themselves into the IF statement inputs just like you had the textures input. that should work.

Just make sure each flipbook has the right textureobject.