Spine 2D VFX Tutorial: Animating Realistic Fire Loop

Welcome to Spine Educational Channel. In this video we will animate fire in Spine Using real footage with chroma key. We will download the footage, cleanup it's background and polish it in Photoshop. And finally animate in Spine. I made a video explaining When and how to animate VFX in Spine. Check it out if you have missed. We also have a playlist that covers a lot about VFX in spine. I am Arman I animate characters for games using Spine 2D Software. Sharing with you my recent works that include tons of VFX animations. Enjoy. If you like what you see make sure to follow me on twitter where I post my works every week And to support this channel like the video or share it with your colleagues. Now let's assume we are doing casino slots scene where realistic fire should appear on the bottom. You can do it in After Effects but that will generate long sequences which will result in a huge sprite sheet. While in Spine we can avoid that by taking small piece of the footage and looping it inside the spine. We can then duplicate it to create a rich variety and break that repetitiveness. You might ask why not to do the same duplication and looping in After Effect, what is the difference. Well Spine reuses that initial sequence no matter how many time you duplicate or modify it. While After effect eventually will render for you the whole scene frame by frame, we don't need it. Right? Now let me find some footage that suits for us. Look for isolated portion of fire so we can clean it easily. After surfing for 15 minutes I found this one. clean it up wherever you wish as long as you remove the green screen and maybe do some color correction. I use Photoshop. Lest do that now. Open Photoshop go "File/Import/Video Frames to Layers", Select the footage. here you can either import it fully or just a portion of it. depends what you found. I will go with a range. the moment you touch these sliders the second option will be picked automatically. let's pick a nice loopable section. Would be great if the range also contains something interesting. But not too noticeable to avoid repetition. Note that you can also skip frames when importing with this option. Lets go without that for now. Nice we have our layers. Add background at the bottom level to see how fire will look in the game. Next create an action for the cleanup and polishing so you can apply it onto rest of the layers. I wont be explaining how I do the cleanup since there might be much better ways to do that. However I won't speedup so you can at least see me doing it Action is ready, next just run it for the remaining layers. Our sequence is ready enable all layers and trim the document. Use Spine Script to export layers. Open Spine Create a new project and save it where you exported the sequence. Drag the first image and convert it to mesh rest of the frames we will import as linked meshes. So they can inherit structure from the source mesh, this one.less meshes, better. We can leave mesh as is and jump right to the bringing the other frames. for that make sure source mesh is selected Open New option and click on linked mesh, after that just duplicate it until you reach the maximum count of the sequence which is in my case 44, maybe I will reduce it later for now lets leave it. Select all the frames and clear the path so they load their images using their name as paths. Change to animation mode and key the frames so we can finally see initial animation. Before composing fire by duplicating it and modifying we need to make sure that we have a nice loop. Right now it is not looping since we've just cut it from the long footage. we can do it by overlapping two fire effects one on the other by fading out the first one and fading in the second one. Lets try it, but first import background so we can see how it may look in the game. resize it. Create a simple fadein and fadeout on the slot. duplicate the slot. now we need to fully show the second slot when the first one starts to fadeout. Similarly second slot should be hidden only after first one is fully shown. Nothing changed you may say. indeed we miss one last step which is very important. since it can be confusing. We need to make sure that transitional part when second slot appears, frames are continuous so we just offset the timeline to where second slot starts to appear copy 8 frames after the 44th frame, and past it at the beginning so we can go back and remove whatever comes after 44 frame. we are done with loopable fire piece, now we can duplicate this set, resize them and position however we wish. Maybe you want to change blending mode and offset few pieces? Very good. And since we have used Linked mesh we can add more details to the mesh and modify any of the frames and the whole sequence will inherit that change. that way we can deform it to achieve more natural chaotic look of the scene. here are some variations that I have done, leaving them in the project so I can share it with you in the description. Remember all this still will use same initial image sequence Want to see more VFX examples from my portfolio go checkout this video. Thank you for watching, And lets welcome our new Channel Supporter @Olga Wilson, Thanks to our supporters that I still believe in this channel. Yes and subscribe to participate in the next poll where we will pick new idea for VFX.

Channel: Armanimation

Views: 26,838

Keywords: spine, spine2d, 2d, game character, animation, 2d animation, rig, rigging, spine 2d, spine 2d animation, spine 2d tutorials, spine 2d tutorial, 2d rigging, animation 2d, game art, game animations, VFX, fx, photoshop, spine animation, spine tutorial, spine pro, 2d spine, spine 教學, face rig, fire, flame, inferno

Id: ts76KjuAjos

Length: 9min 49sec (589 seconds)

Published: Tue Nov 16 2021