In the originals I was attempting something that was quite colorful but somehow a little muted too. The colors are just a little pulled back from pure, so they keep the energy from having a lot of fairly saturated hues but are just a little less loud than fully saturated, right where it hits relaxing. It's contradictory so I never managed to explain it properly, but I think the slightly greener blue hits the mark.
I think that might also be because the greenish water is almost as dark as the deep blue for the water. I actually had to go back and set the 'color' blended layer to 75%, resulting in the final screenshot's colors. As you can see from the other ones, the 50% blending of the color ended up with too similar colors, but 100% blending or no blending at all leads to too bright colors. So I think this is the best compromise. This does mean that with different color rocks the shallow water needs to be tweaked, but alas.
For the deeper water, I attempted to animate single pixel high waves. This was a collosal waste of time, because while one half was done carefully to provide consistency between the frames, the other half of the tiles were animated randomly, and it looks about the same terribly noisy result :|
I also tried a variation where the deep water was aligned with the rocks, but eventually just mixing up the water from Sharm's mv adaptation of the LPC water had the best results. Similarly, I thought the rocks underneath might give a good effect, but leaving them away was a much beter idea.
I've included the shallow and shallow to deep water I am most pleased with here (50% multiply, 75% color blending, 50% overlay, faded centers for the flickers, and flat color centers in the rock below).
I am going to leave these alone for a while, but I do want to return to get some animation going on the shallow-deep border itself(as well as handling the last remaining duplicate tile in the shallow water). I am just a little burned out on those small waves right now, so I am gonna play with the flow stuff bluecarrot's demo suggest should look good.
Ok, tried doing a dirt-set shallow water for realsies. The wang tiles here also include the alternative tiles. There's one spot where there's still a duplicate center tile, I guess a semi-submerged rock could fit there :)
There's 5 variations here.
The first two are one with fully opaque water, with the second having faded centers. I tried making to the colors lighter so that it'd be a little bit more like the minish cap tiles where the shallow water is clearly lighter.
Then, blended 1 is multiply+overlay, this one ended up pretty dark for these tiles because orange-brown*sky blue = emphasized green.
So then I tried adding in another blending layer inbetween, this time a 'color' blending layer, which changes the pixel color to match the hue and saturation but not the lightness. For blended 2 this is 50%, and for blended 3 this is 100%
There's a slight enphasized border for the dirt itself, so I am attaching that one too :)
Next stop is to figure out how to elegantly transition between shallow water and the regular lpc water :)
Ok, figured out the flowmaps stuff, but because I am not good enough with godot to understand if it is possible to use a different tile layer to drive a given texture, I don't think using a flowmap is the easiest solution. I guess we'll have to go with the center-tile flow. (Though, shader stuff does have other things that seem successfull, like the clouds shadow) Will write a post with the shader stuff later this week :)
Hm... I had some RL to deal with, but now I really want to figure out the flowmaps, they ought to have a similar effect!
I think for a newbie friendly water set the first one without the edges masked is best, because that requires the least tiles and engine capabilities. Either way we'll need to investigate how to do those 8 directions in a easy to reproduce and polished manner :)
The offset will be a good start, and there is also a continued animation going on there alongside the offset. I am wondering if we could have the actual room the animation takes up be very small so it wouldn't have to necessarily have to go outside the tile boundaries. My gut says this will probably feel pretty tiled, so we might need to create alts for the 8 directions too.
I was unfortunately not able to convert everything to ora yet(bug in krita python api stopped that), but the kra and png files should be sufficient to poke at what I've done.
I've also put in a readme with basic licensing info, the template animations being cc-0 and the rest cc-by-sa. Not sure if I should upload all of this onto oga itself, given that it is very much wip, but the licensing info should avoid confusion.
Thanks for all the feedback. I've been busy with poking at shaders, but because this is the first time I am poking at shaders in godot it's a bit of a learning process. The large gifs attached shows what I've got up till now. (Tried making a webm, but it doesn't want to render properly, it seems). But I did want to do a little update because I didn't want to give the impression that someone being critical is gonna stop all efforts (the opposite is often true, tbh) ;)
Are these animations made of semi-transparent water layers added to an independent terrain tile? Or is the water & terrain a single animated tile? I can see the water borders are much more coherent when the texture of the terrain is animated into the shape of the water itself, but I would certainly use a separated-layers Build-It-Yourself Water Animation Kit™ :)
The water is seperated. For the blog post I am doing one of two things:
Water on a seperate layer, set to 75%
Water on a seperate layer, duplicated, lower layer set to multiply, upper layer set to overlay, both layers at 50%.
And for the faded center ones I have a layer of a single color that just removes the texture there.
I think in the end there will be several versions. Ideally we'd get at the least one which through some shader magic can adapt itself to the underlying tiles, but I already forsee having to create some manually baked-in ones too, on top of having a simple fully opaque version.
A few other comments about the presentation: it might be helpful to draw some simple scenes; especially for the flow. It's hard for me to visualize flowing around the abstract wang pattern, especially when there's no real source of the water and it's just flowing in and out of a shore. Also, I'm personally not the biggest fan of the river pebble texture you have in most of the examples; it might be helpful to try the pattern/overlay on some other textures, like the sand or the dirt.
I have to admit that the main reason I've been avoiding this is because making the wang pattern is something I can do with a script, but setting up tiled or even godot with the different animation types, and then recording that so you see the animation is a little hard. :D
You can see in the attached gif that one of the other reasons is that cutting out the rocks is kinda necessary to make the water texture feel coherent in it's environment(and that really, having special riverbed style for a given texture, even with these initial super shallow water tiles, might not be a bad idea). So I'd just been animating the pebbles because then I can do more rapid experimentation, and give better idea how two different experiments differ from one another.
I realize this message sounds kind of negative, but I am really excited about the work you are doing! Keep it up; I'm just trying to be constructive!
No, it's fine, you're being critical more than anything else :) Do keep in mind I am also trying to experiment a bunch because I too have no idea what I'm doing!
I kind of wanna work further on poking at the shader, but given I am learning there as well, I think it might be better to convert my current experiments to ora so people here can play with them. And then try to figure out if I can get the flow map thingy working in the shader...
Alright, big update, with 3ish new variations and a ton of sub variations. I however think I ended up with too many attachments in this thread, as oga doesn't want to add more attachments :D
Stream v6 is basically one where there's little dots that kinda flicker around, and the dots are aligned with the pebbles underneath. At low transparencies this one makes it seem as if there's some kind of refraction going on.
Stream v7 is waves inwards and waves outwards. By itself quite simple.
Stream v8 is what Evert has been trying to express to me, with a single 4px per tile being erased and animated so it waves around. I also removed some extra bits for the pebbles, but that got nosiy real quick, so v2 is without this extra removal. There's a bunch of variations here combining it with the flickering.
I had also wanted to do a test with the brighter/darker, but honestly I couldn't come up with anything MedicineStorm and BenCreating hadn't shown. And I had wanted to try an ocean tile one, but that's like a single animation and might be best left for when we're gonna do ocean tiles.
Please take a good look at them, I will now contemplate how to deal with the archiving...
Maybe write a blogpost with what I have learned now and then remove the attachments here? And I kinda wanna upload all the kra files I've got up till now...
I'm sorry that the original LPC water is something that needs improvement. Looking back at it, I should have done things a little differently, and been more purposeful in choosing what kind of water to represent with it. The default water was meant to represent flowing water, something fast and deep, which is why the edges are so . . . spikey and the center is much more calm. The only reason it wasn't animated was because I didn't have enough time. I should really go back to it at some point and give it the intended animation, I think that would help it look a little more wet.
I wouldn't worry too hard. The point of LPC was that people would make their own additions, and you couldn't have known that water would be so difficult for others. I mean, sure, update the water, but don't feel like you owe the world this :)
LPC is pretty stylized, so I'm not sure how well going more realistic will work out here.
Yeah, I have been thinking about this too. It's not so much that a cartoony look is paramount to the LPC, but rather that it is easier to use, which of which I think is pretty important for a free culture graphics set. (As well, pixel art is best off evoking the object than trying to represent it mimetically) It's also why I haven't gone so much for realistic colors as trying to have more contrast.
I'll try to see if I can find examples of the Tales of Phantasia water in play, I think the Minish Cap water has flickers that go side-to-side. There's also a lot in the blog post that shows dfferent kind of effects and layering of animation.
I think I want to do some tests in Godot for flow and other such special effects next. Then go back and try to get simple but polished water going for the dirt, and several elevations, and then try to tackle ocean waves. And after that I will maybe be wise enough to understand how to handle rapidly flowing water :3
And I should upload the test files I've made... But they're all kra files. I guess I'll first try to convert them to ora so you don't have to install Krita to mess with them.
I think it'll still look good if the water along the shore were to move in such a way that the surface area of the tile is constant. In animation terms, it'd be like a wave passing through the tile from left to right (say). That makes the shoreline less static. Probably only needs a few pixels.
So, I briefly though I understood what you meant, but then when I tried to plan out how to animate that, I realized I didn't really? Can you make an example for a single tile? It doesn't matter how shitty it is.
BenCreating:
I'd like to see your water with the LPC grass. It's hard to judge how LPC it feels when it's not on one of the base terrain types. :)
I think my own experiment could be improved by combining it with Curt's water, but I haven't tried that yet.
Sure, attaching some terrible tiled maps. It should be obvious why I am messing with the blending modes despite the current tiles fitting according to the LPC style guide.
Also attaching a test with the V4 version where I made it so the flow circles around (though I messed up with the corners). I still have about 5/6 edge types I want to try just for experimentation's sake (to document the different types of water animation there is for future reference). But I had a bunch of RL things to do today.
Once I'm done experimenting it should be quite easy to create similar water for the dirt types.
I think that might also be because the greenish water is almost as dark as the deep blue for the water. I actually had to go back and set the 'color' blended layer to 75%, resulting in the final screenshot's colors. As you can see from the other ones, the 50% blending of the color ended up with too similar colors, but 100% blending or no blending at all leads to too bright colors. So I think this is the best compromise. This does mean that with different color rocks the shallow water needs to be tweaked, but alas.
For the deeper water, I attempted to animate single pixel high waves. This was a collosal waste of time, because while one half was done carefully to provide consistency between the frames, the other half of the tiles were animated randomly, and it looks about the same terribly noisy result :|
I also tried a variation where the deep water was aligned with the rocks, but eventually just mixing up the water from Sharm's mv adaptation of the LPC water had the best results. Similarly, I thought the rocks underneath might give a good effect, but leaving them away was a much beter idea.
I've included the shallow and shallow to deep water I am most pleased with here (50% multiply, 75% color blending, 50% overlay, faded centers for the flickers, and flat color centers in the rock below).
I am going to leave these alone for a while, but I do want to return to get some animation going on the shallow-deep border itself(as well as handling the last remaining duplicate tile in the shallow water). I am just a little burned out on those small waves right now, so I am gonna play with the flow stuff bluecarrot's demo suggest should look good.
And made a blog about the shader stuff.
Ok, tried doing a dirt-set shallow water for realsies. The wang tiles here also include the alternative tiles. There's one spot where there's still a duplicate center tile, I guess a semi-submerged rock could fit there :)
There's 5 variations here.
The first two are one with fully opaque water, with the second having faded centers. I tried making to the colors lighter so that it'd be a little bit more like the minish cap tiles where the shallow water is clearly lighter.
Then, blended 1 is multiply+overlay, this one ended up pretty dark for these tiles because orange-brown*sky blue = emphasized green.
So then I tried adding in another blending layer inbetween, this time a 'color' blending layer, which changes the pixel color to match the hue and saturation but not the lightness. For blended 2 this is 50%, and for blended 3 this is 100%
There's a slight enphasized border for the dirt itself, so I am attaching that one too :)
Next stop is to figure out how to elegantly transition between shallow water and the regular lpc water :)
Ok, figured out the flowmaps stuff, but because I am not good enough with godot to understand if it is possible to use a different tile layer to drive a given texture, I don't think using a flowmap is the easiest solution. I guess we'll have to go with the center-tile flow. (Though, shader stuff does have other things that seem successfull, like the clouds shadow) Will write a post with the shader stuff later this week :)
Whoa! Not bad at all!
Hm... I had some RL to deal with, but now I really want to figure out the flowmaps, they ought to have a similar effect!
I think for a newbie friendly water set the first one without the edges masked is best, because that requires the least tiles and engine capabilities. Either way we'll need to investigate how to do those 8 directions in a easy to reproduce and polished manner :)
The offset will be a good start, and there is also a continued animation going on there alongside the offset. I am wondering if we could have the actual room the animation takes up be very small so it wouldn't have to necessarily have to go outside the tile boundaries. My gut says this will probably feel pretty tiled, so we might need to create alts for the 8 directions too.
Anyhow, exciting stuff!
Okay, I've gone and cleaned up the files a little. Here's a zip file.
I was unfortunately not able to convert everything to ora yet(bug in krita python api stopped that), but the kra and png files should be sufficient to poke at what I've done.
I've also put in a readme with basic licensing info, the template animations being cc-0 and the rest cc-by-sa. Not sure if I should upload all of this onto oga itself, given that it is very much wip, but the licensing info should avoid confusion.
Thanks for all the feedback. I've been busy with poking at shaders, but because this is the first time I am poking at shaders in godot it's a bit of a learning process. The large gifs attached shows what I've got up till now. (Tried making a webm, but it doesn't want to render properly, it seems). But I did want to do a little update because I didn't want to give the impression that someone being critical is gonna stop all efforts (the opposite is often true, tbh) ;)
The water is seperated. For the blog post I am doing one of two things:
I think in the end there will be several versions. Ideally we'd get at the least one which through some shader magic can adapt itself to the underlying tiles, but I already forsee having to create some manually baked-in ones too, on top of having a simple fully opaque version.
I have to admit that the main reason I've been avoiding this is because making the wang pattern is something I can do with a script, but setting up tiled or even godot with the different animation types, and then recording that so you see the animation is a little hard. :D
You can see in the attached gif that one of the other reasons is that cutting out the rocks is kinda necessary to make the water texture feel coherent in it's environment(and that really, having special riverbed style for a given texture, even with these initial super shallow water tiles, might not be a bad idea). So I'd just been animating the pebbles because then I can do more rapid experimentation, and give better idea how two different experiments differ from one another.
No, it's fine, you're being critical more than anything else :) Do keep in mind I am also trying to experiment a bunch because I too have no idea what I'm doing!
I kind of wanna work further on poking at the shader, but given I am learning there as well, I think it might be better to convert my current experiments to ora so people here can play with them. And then try to figure out if I can get the flow map thingy working in the shader...
Alright, big update, with 3ish new variations and a ton of sub variations. I however think I ended up with too many attachments in this thread, as oga doesn't want to add more attachments :D
Stream v6 is basically one where there's little dots that kinda flicker around, and the dots are aligned with the pebbles underneath. At low transparencies this one makes it seem as if there's some kind of refraction going on.
Stream v7 is waves inwards and waves outwards. By itself quite simple.
Stream v8 is what Evert has been trying to express to me, with a single 4px per tile being erased and animated so it waves around. I also removed some extra bits for the pebbles, but that got nosiy real quick, so v2 is without this extra removal. There's a bunch of variations here combining it with the flickering.
I had also wanted to do a test with the brighter/darker, but honestly I couldn't come up with anything MedicineStorm and BenCreating hadn't shown. And I had wanted to try an ocean tile one, but that's like a single animation and might be best left for when we're gonna do ocean tiles.
Please take a good look at them, I will now contemplate how to deal with the archiving...
Maybe write a blogpost with what I have learned now and then remove the attachments here? And I kinda wanna upload all the kra files I've got up till now...
EDIT: So it seems that OGA was hiccuping. Best to check the blogpost now.
Alrighty, made the first blog post with the different techniques I've discovered: Animating Water Tiles part 1: Edges
Sharm:
I wouldn't worry too hard. The point of LPC was that people would make their own additions, and you couldn't have known that water would be so difficult for others. I mean, sure, update the water, but don't feel like you owe the world this :)
Yeah, I have been thinking about this too. It's not so much that a cartoony look is paramount to the LPC, but rather that it is easier to use, which of which I think is pretty important for a free culture graphics set. (As well, pixel art is best off evoking the object than trying to represent it mimetically) It's also why I haven't gone so much for realistic colors as trying to have more contrast.
I'll try to see if I can find examples of the Tales of Phantasia water in play, I think the Minish Cap water has flickers that go side-to-side. There's also a lot in the blog post that shows dfferent kind of effects and layering of animation.
I think I want to do some tests in Godot for flow and other such special effects next. Then go back and try to get simple but polished water going for the dirt, and several elevations, and then try to tackle ocean waves. And after that I will maybe be wise enough to understand how to handle rapidly flowing water :3
And I should upload the test files I've made... But they're all kra files. I guess I'll first try to convert them to ora so you don't have to install Krita to mess with them.
Evert:
So, I briefly though I understood what you meant, but then when I tried to plan out how to animate that, I realized I didn't really? Can you make an example for a single tile? It doesn't matter how shitty it is.
BenCreating:
Sure, attaching some terrible tiled maps. It should be obvious why I am messing with the blending modes despite the current tiles fitting according to the LPC style guide.
Also attaching a test with the V4 version where I made it so the flow circles around (though I messed up with the corners). I still have about 5/6 edge types I want to try just for experimentation's sake (to document the different types of water animation there is for future reference). But I had a bunch of RL things to do today.
Once I'm done experimenting it should be quite easy to create similar water for the dirt types.
Pages