PogoGirl Devlog #8: Shader Journey

Posted November 2, 2020

Last time I put water into the game. Now I made the water better!

While I liked how the water and swimming worked, I wasn’t satisfied with how it all looked. That’s not much of a surprise since I didn’t spend all that much time on the visual aspects, as just getting everything to work was hard enough. But now I put in some extra time to tackle the things I felt were lacking.

First of all I changed the background. Previously I just had an inverted version of the main tile set, which just didn’t do much for me. I’ve now replaced it with a classic checker pattern that you might have seen in another game somewhere… I’ve also extended the top of the pools and added a visible lip. Before the water was flush with the back wall, making it seem a bit strange. Now I feel like it looks as if there really is a pool that is filled with water.

betterwater.png

But the bigger change is the rippling effect. That’s something I had always wanted to be in the game, but I was never sure how to pull it off. I was sure shaders would be the answer, but those things are still some form of obscure lunar magic to me. Nevertheless I dove in to see if I could make it work somehow.

This was my first try.

brokenshader.gif

Since I had to refamiliarize myself with the basics first (I hadn’t touched shaders in a while) I took baby steps and just played around with very basic shaders. It didn’t go that well at first. One of the issues I had turned out to not be my fault though. For some reason it seemed as if the game was drawing everything twice, which resulted in double vision:

doublevision.png
I’m beginning to doubt this is water…

Turns out that was simply an issue with the Hashlink target (a compilation target for Haxe that is close to compiling straight for Windows, but not always close enough). Once that was sorted out I could concentrate on getting the actual effect done. Since I’ve never been the best at math and trigonometry it took a while, but using samples I found online I finally ended up with this:

watershader1.png

That was almost what I wanted, but a) the effect was too strong and b) it wasn’t pixel-perfect. My game is designed for a resolution of 320 x 180 and that gets upscaled as the window gets bigger. Shaders only care about the pixels that are drawn on the screen, so the effect would tear my nice, chunky pixels apart. Luckily I found some sort of workaround and eventually I ended up with this:

It was a long road, but I’m really happy with how the effect turned out. Shaders are really cool and you can do incredible stuff with them, but they’re so damn unwieldy and just plain weird. Still, it can be worth it to at least try and get some basic stuff done.

I’ve already been asked to write a tutorial on how I managed to achieve the effect, and I’ll get to work on that soon. Until then, thanks for reading and be excellent to each other!

Take It to the Next Level!

Want sneak peeks and early access to stuff? Join my Patreon!

Become a Patron!
Just Want to Buy Me a Coffee?
Get Words in Your Inbox!

Be oldschool and sign up for my newsletter to get updates! Just enter your email address, prove you're not part of Skynet and you're good to go!



Powered by CleverReach. I will not send you spam or sell/give your email address to someone else.  You can of course unsubscribe at any time. By clicking the subscribe button above, you confirm that you have read and agreed to our privacy policy.

Related Posts

PogoGirl Devlog #14: How I Build Levels

Last time I mentioned that I was doing levels for Go! Go! PogoGirl and that I changed my Tiled setup to make the process easier. Well, I’m happy to say that I’ve now made all levels in the game! While I do enjoy making levels quite a lot, it’s a very tricky thing to get right. Good level design is an art. And while I don’t consider myself an artist in that regard (or any other regard, actually), I thought I’d share my process of building the levels for Go!
Read More

PogoGirl Devlog #13: The Tools of Pogo

A game has many facets, and developing a game is like climbing a range of different mountains simultaneously. I’ve worked on several different things in the past few weeks—water effects, powerups, HUD elements—but there is one major aspect of the game that I haven’t touched in quite a while. Levels. Yeah, sometimes you get caught up in all the coding and designing and pixel arting that you forget about other major parts of the game.
Read More

PogoGirl Devlog #12: Power Up!

Powerups are a staple of video gaming, and platformers had some of the best around. Sonic’s elemental shields, Mario’s mushroom, Kid Chameleon’s transforming helmets…there’s a lot of good stuff in there. It seemed obvious to put powerups into Go! Go! PogoGirl as well, but for a long time, I wasn’t quite sure what to put in. Powerups need to enhance and support the gameplay; you can’t just throw in anything you want.
Read More

By using the Disqus service you confirm that you have read and agreed to the privacy policy.

comments powered by Disqus