It’s been a while once again, hasn’t it? I’ve decided to switch to a less frequent posting schedule for now, so don’t expect much more than a devblog a month or so. The good thing though is that this means that I have more to talk about each devblog. Let’s get started then!
A couple of months ago, I talked about the Fountain of Life, a central element in Life’s Impetus. It’s so important that I’ve even spent almost a month working on it… but it was worth it (I think). In this devblog, I’ll be focusing on the process behind creating the art asset now, so if you wanna know a bit more about the lore behind the Fountain of Life I recommend you to check out this devblog.
Creating the Fountain
A 3D model
First things first, I needed to create the fountain itself. I’d talk more about the actual design process, but all I have to say is that it consisted of a lot of staring at fountain pictures, a lot of staring at blank paper, and a lot of grumbling. Thankfully, I eventually settled on a design I liked, and it was time to draw it. Only one problem though… I suck at perspective. Life’s Impetus has a 3/4ths perspective (think Link to the Past but with realistic proportions) which isn’t particularly easy to draw, and I needed to get it right if I wanted to Fountain to look well. For drawing people, I deal with this problem by recording myself and using it for rotoscoping, but there wasn’t such a clear solution for a fountain… or was there?
Making a fountain to take a picture of it wouldn’t have been very practical, but it would be simple to make a quick fountain 3D model and to take a screenshot of that from the right angle. I wanted to try my hand at a 3D modeling program, so I downloaded Blender, and god… trying to learn how to use it ended in utter failure. My respect goes to whoever has the skill to use one of those things. In the end I came up with the idea of putting random 3D models together to form a ragtag fountain. It took sometime and imagination to find the right models (did you know that pears don’t make good fountains?), but it was easy to put them together in the Unity and the final result came out quite well:
With the model done, I took a screenshot and printed it. I could tell you how the drawing process of LI works… but yeah, I’m guessing you’d prefer to see it in pictures, so here you go:
Once the base was done, it was time to work on an equally important part: the water inside it.
The Flow of Water
How do you animate water? I have no idea, and what I found on the internet didn’t really help me much, so I was winging it during the whole process. It was a lot of experimentation, but it was a lot of fun too.
First thing I did was to study other cases of water animation. Searching for “water animation” didn’t work out that well actually, but I did find a lot of useful examples when I searched for “fountain animations”. While I can’t say I learnt anything specific, it was pretty useful to at least understand how water animations worked. With that done, it was time to move on to drawing.
Experimentation and Watercolor Creation
Before I did any final frame, I messed around and tested different ideas quickly. One of the complications I had to face was the fact LI uses watercolors. While I’m pretty far from being a master, I have enough experience to be able to say that I know what I’m doing (at least, most of time). Nevertheless, one of the things about watercolors is that, no matter how experienced you are, it’s almost imposible to always color exactly in the same way. For example, here’s three frames where I did my best to make them as similar as possible:
I’ve known and accepted this problem for quite a while now since it looks fine in cases where there’s more movement involved, but it really didn’t work out with water. In the end though, there wasn’t much I could do at the coloring level. I keep on working on the frames, focusing on getting the right movement more than anything. It’s when I reached the digital part when things got interesting… or well, a bit after that.
Digitalizing and Animating
First things first, I had to scan what I had done, but that’s the easy part. What really was a pain was adding transparency… It’s a very simple task, but a very time consuming one too, which really frustrates me (simple things should be quick, right…?)
After that long and dull phase, I was free to get to the interesting stuff. First things first, I worked on adding the still water in the fountain.Yet, water is never really still, is it? Putting a static frame of water didn’t look very good, so I experimented with subtle ways of animating it… and it was a failure. Making an animation out of various frames was too jarring since they were so different. I experimented with an idea where I’d layer the frames on top of each other and change the transparency smoothly, and the result was something like this:
Yes, I know that’s just a PNG and it’s impossible to see any kind of animation, but it really was like that. The effect was so subtle that it looked liked a still picture.
I gave up temporarily with still water after that, and started working on the more interesting falling water. There was still the problem of each frame looking too different from each other, but I expected it to be ok since it was water that was supposed to be in movement… however, I was wrong. There was still too much jittering, and it looked annoying. I cleaned them up digitally to make sure the shapes were basically the same, and while it helped, it still wasn’t enough… Thankfully, that’s when I got the idea.
I couldn’t really make frames that were similar enough to each other, but what I could do was to make the transition between them smoother. What I did was a kind of crossfading; one frame would fade out while the other faded in. It worked great:
Basically everything the looked off was fixed with this technique, so the rest was just a matter of time and tweaking. Some other important details I added were particles and little falling lines to the falling water. I also added in the water appearance/stop sequence (which will be something you see a lot during the game…), which required some new frames and some programming. And thus, I reached the final result, which you can see in the following video! It took forever, but I’m pretty proud of it.
3 thoughts on “Life’s Impetus Devblog #12 – Inception of the Fountain”
Reblogged this on The Road To Indie: How To Make A Video Game and commented:
This is really cool, a lot of work has gone into this animation. Nice.
Thanks, glad you liked it!