Finished Fire VFX
Finished Unreal Foliage Atlas
Context
I got really into learning how 2D effects worked in games worked after watching this talk by a VFX Artist on the game Rime. Link to Talk:
I got really into learning how 2D effects worked in games worked after watching this talk by a VFX Artist on the game Rime. Link to Talk:
https://www.youtube.com/watch?v=fwKQyDZ4ark&list=PLzsK5OyMQ96sXNU0YpVyLqrK7D4QlEaeW&index=15&t=1940s
Whilst this talk focused more on texture distortion and I also learned about another technquie using Flipbook/atlas textures to create effects and 2D animations.
Later I once I had created this fire effect, the atlas style approach, made me want to try and create a more optimised way of creating grass and foliage cards. Not by using several image textures, but by creating a compolation of foliage cards using an altlas and then using instancing which would all use the same material/texture and each instance would pick a different image from the atlas. Making a material which was very optimised. I attempted the atlas foliage material in both Unreal and Unity, however with the technique relying on the ability to instance materials I found this a struggle as I found Unity's package and package varient system unreilable when trying to overright values to do with changing texture coordinates.
Creating VFX Fire Using Unity Flipbook Node
Creating the fire Atlas with Rough Animator & FDFX Slate Editor
I used a 2D animation program (Rough Animator) and created the animation of the fire I wanted to use in Unity. I made sure the frames had a transparent background exporting the images with an alpha channel. I then Imported the image squence into a program called FDFX Slate editor to combine and arrange the frames into a texture atlas, which unity's flipbook node would read.
Creating Shader Graph in Unity
The shader graph for the animated texture was one of simplist graphs I created from a quick tutorial online. I added the texture to the graph using Sample Texture 2D Node, connected it to the flipbook node from the UV input. On the Flipbook node I simply had to input the dimentions on the texture (4 collums x 4 rows). Finally I Multiplied the speed on the animation by the realtime node, adding a property to edit the frame rate. (Gif showcasing animation at 12fps).
I later went further with this and combined a colour node with the colour node of the 2D Texture and turned the colour node into a custom property to be manipulated outside of the shader graph. I also worked on a similar branch to control the colour and entensity of emission of the colour for the animation. Again these nodes were turned into properties to be edited outide the shader graph.
Property Inspector
Full Node Tree
Creating Foliage Atlas
I had previouslu used texture atlas before for my scifi amphibious craft, and I knew that enviromental assets like grass cards were created using simple alpha textures or coloured textures. So I decided to try and combine these two methods together and an easy way to do this would be to reuse the flipbook node, but not have the frames be controlled by time, but by a custom property instead so the user could choose which card to use per asset instance.
I had previouslu used texture atlas before for my scifi amphibious craft, and I knew that enviromental assets like grass cards were created using simple alpha textures or coloured textures. So I decided to try and combine these two methods together and an easy way to do this would be to reuse the flipbook node, but not have the frames be controlled by time, but by a custom property instead so the user could choose which card to use per asset instance.
I first tried this flipbook node method, however I could not get the value to overright/change from the master prefab and I was unsure how to get this to work, I tried the same method in Unreal, however Its flipbook node in the shader blueprint automatically runs on its own and cannot be manually changed. However I watched a simple tutorial on how to make a custom coorindate picker setup.
This involved setting the U and V coordinates in custom properties and also adjusting the tile size so that the entire atlas would not show. Whilst being slightly more complicated this effect did the same job as the Unity flipbook node. Due to Unreal's natural overide system in instances creating the desired effect was easy.
I created an instance per grass card, which were changed to the individual images. This technquie can easily be scaled up to include larger foliage atlas for more veriaty.
I recreated the exact same node tree system in a new shader graph in Unity, however the issue unable to overright values per instance on the material level, still meant this technquie could not work.
