Hey guys,
I’m fairly new to game development in general so this may not necessarily be a specific ue4 question. I’m really looking for best practice and ideas from you guys for the problem I’m facing.
Let’s say I have created a sprite of a beaker on a hot plate. Now imagine I want to animate the beaker so that it is getting hot. What I mean by that is I want a slow red gradient that starts at the bottom of the beaker and gradually climbs up the glass.
Approach 1:
The simple solution I have is that I just draw the beaker getting more and more red in my drawing program and then create a flipbook of all the sprites. However, that will of course take a lot of memory as I’m having to create a bunch of textures. I was wondering if there was a way I could sort of “decouple” the gradient and the beaker into two separate entities.
Approach 2:
What I also could do in my drawing program is draw the gradient in a separate layer of my beaker, export only those frames of the gradient, create a flipbook of those sprites, attach it as a socket on the beaker, and have the gradient flipbook play. However, again I’m not sure if that necessarily fixes anything because from what I understand, a 512x512 texture is still at the end of the day a 512x512 texture. The compression doesn’t care if it’s a beaker with the gradient drawn on it or just the gradient itself. It will still compress down to the same size. Please correct me if I’m wrong on that.
Approach 3:
I also tried to explore the possibility of somehow adjusting a sprite’s material to produce a gradient over it. See: Gradient | Unreal Engine Documentation
The thought is that instead of creating 13 frames of a gradient in my drawing program and importing them all to ue4, it would be awesome if I could somehow create 13 materials and apply each respective material to a set of duplicated sprites. Then I could create a flipbook of those sprites. That way, all I would have is a bunch of duplicated sprites that all have different materials. Those materials would reflect how much gradient to put on the respective sprite. From what I’ve seen, materials take up significantly less space. The problem with this is that I don’t really know how to do this :(. I have struggled with trying to apply a gradient in a material. If this is possible and the best solution I would love if someone could help me figure out how to apply a colored gradient in HLSL on a sprite.
So, all in all those are the only three approaches I can think of. I would love to hear the community’s input on this! Mind that the only reason I’m whining about memory is because I’m trying to make this game for mobile, and this gradient is a large part of the game that will be seen in a ton of assets. I just used a beaker as an example, my game has nothing to do with beakers. But for my game there would be more than just one sprite utilizing this gradient animation and the sprites all would look different.
I really hope my question makes sense. I would love to have this answered before I began drawing all the assets for my game. Any help is appreciated.
Thanks!