[Phaser] Isometric animated water I've been working on

[ForgeableSum]

https://youtu.be/1LDKRRnbAwo

 

This is for my upcoming browser-based RTS game "Feudal Wars." Website: feudalwars.net. Subscribe for dev updates here. 

 

The actual water animation was a sinch with masks and Phaser tilesprites. Writing the code for placing the beaches was a real bitch though. I'll write a detailed tutorial on my dev blog if anyone is interested. 

[Tuan]

Wow, your Dev blog is great.

[ForgeableSum]

Thanks!

[ForgeableSum]

I've written an explanation of how the water animation effect was done. Read it here if you're interested. 

[druphoria]

Brilliant write-up. I love it. Very clever solution - I had no idea that such an effect could be achieved just by having overlapping tilesprites scrolling in opposite directions. Just to clarify... the entire map is a single giant tilesprite and the ground tiles are simply covering it up?

[ForgeableSum]

Yup, a single giant tilesprite (or rather, two overlapping). The water is actually on top of the ground layer, invisible until portions become visible by adding masks. 

 

I actually had a very complicated system which would add tilesprites to small sections of the map that needed them. But I discovered 5-10 small tilesprites is worse on performance than 1 that covers the whole map. Plus with multiple tilesprites, you have to time the scrolling right so there isn't a seem between the tilesprites. So yeah, one big one was the way to go even for maps that are as big as 10K x 10K.