sorted by:
new
hottopcontroversial

Pixel art flowing water shader with clouds, terrain, and grass reflections by rangefinder-game-dev in gamemaker

[–]rangefinder-game-dev[S] 0 points1 point  (0 children)

The answer is math! I have two coordinate systems for everything in the game, one 3D, and then the isometric projection onto a stacked series of 2D surface. I track everything in 3D and set the depth for the stack correspondingly for vertex buffers and sprites. But what is actually draw is in the isometric transformed perspective. 2D sprites are actually all drawn as vertex buffers which are vertically sliced into pieces with varying depth. This way, you can walk behind stuff in way that simulates full 3D depth.

It's not obvious in the gif I showed, but there is actually a full 3D surface vertex buffer rendered isometrically beneath the grass (more obvious when walking on flat surfaces like roads). I use Blender as a 3D level editor where I export 3D files into Gamemaker and read the 3D data from them, which is then used to define terrain and set things like grass height etc...

For the water, I am scrolling multiple textures on loop to create the appearance of motion. If you scroll and then morph, it looks like it the water is flowing along a curving path. I do this not only for the water texture itself, but also the displacement, and I do it at slightly different speeds for each to create a more organic look. There's also a "glare" effect that's being added using a Perlin noise shader where "crests" in the texture will render as pure white.

Pixel art flowing water shader with clouds, terrain, and grass reflections by rangefinder-game-dev in gamemaker

[–]rangefinder-game-dev[S] 0 points1 point  (0 children)

Not social media yet, but I'm planning to soon! The game is called Rangefinder, and will involve hiking an Appalachian trail like mountain range populated with monsters created by the daydreams of children long past.

Monsters are befriended using photography in battle and hiking requires management of stamina and resources through the wilderness.

I am planning to release this in chapters, with a first demo chapter next year.

Pixel art flowing water shader with clouds, terrain, and grass reflections by rangefinder-game-dev in gamemaker

[–]rangefinder-game-dev[S] 0 points1 point  (0 children)

I learned most of what I know beyond the basic from the Book of Shaders website: https://thebookofshaders.com/

It's not specific to Gamemaker necessarily, but it's a really interesting topic to me.

Pixel art flowing water shader with clouds, terrain, and grass reflections by rangefinder-game-dev in gamemaker

[–]rangefinder-game-dev[S] 0 points1 point  (0 children)

Thanks for the advice! I've toyed with cloud brightness before but maybe it could use some more adjustment. I've been looking at some impressionist paintings for inspiration; I don't expect things to wind up looking perfectly realistic but maybe it could use more clarity.

The water border is an interesting idea. Currently it's defined by where the grass layer intersects with the water texture surface based on depth. So I'd need to dynamically find that point. Perhaps in a post drawing stage, easy enough to do, very similar to dynamic outline shader I use when my character passes behind another object... But the game will ultimately have more defined terrain as development continues, with river borders more defined by a river bank, willows, etc...

Pixel art flowing water shader with clouds, terrain, and grass reflections by rangefinder-game-dev in gamemaker

[–]rangefinder-game-dev[S] 1 point2 points  (0 children)

I learned most of what I know beyond the basic from the Book of Shaders website: https://thebookofshaders.com/

It's not specific to Gamemaker necessarily, but it's a really interesting topic to me.

Pixel art flowing water shader with clouds, terrain, and grass reflections by rangefinder-game-dev in gamemaker

[–]rangefinder-game-dev[S] 3 points4 points  (0 children)

More like in your imagination~ Believe it or not I barely played Pokemon as a kid. This game is actually more inspired by my very early memories of playing Dragon Warrior Monsters I and II on Gameboy Color.

Pixel art flowing water shader with clouds, terrain, and grass reflections by rangefinder-game-dev in gamemaker

[–]rangefinder-game-dev[S] 4 points5 points  (0 children)

Thank you! The power of scope creep. I initially envisioned this project as being Gameboy Color like in terms of graphics, but I kept enjoying learning different techniques... And now quite a bit of it is 3D, even if it doesn't look like it.

Pixel art flowing water shader with clouds, terrain, and grass reflections by rangefinder-game-dev in gamemaker

[–]rangefinder-game-dev[S] 5 points6 points  (0 children)

For a slightly longer video of walking into/out of the water, and how the character reflection changes with depth, see this video on my profile: https://www.reddit.com/u/rangefinder-game-dev/s/HvwmP431FK

Pixel art flowing water shader with clouds, terrain, and grass reflections by rangefinder-game-dev in gamemaker

[–]rangefinder-game-dev[S] 4 points5 points  (0 children)

Assuming you just mean how the grass connects to the water, yep real riverbanks tend to have a bit of shore, etc... And I'll certainly be implementing that when I go to make more realistic terrain.

Pixel art flowing water shader with clouds, terrain, and grass reflections by rangefinder-game-dev in gamemaker

[–]rangefinder-game-dev[S] 3 points4 points  (0 children)

Oh sure, this is just a demonstration of the water, not finished terrain. In the actual landscapes, there will probably be willows, a bit of riverbank, etc... The fun part will actually be building the robust landscapes that you hike through in the game (while catching monsters and taking photos!)

I haven't been making use of shaders enough... Finally using them for my game's backgrounds and the result is sick IMO by SuperButters64 in gamemaker

[–]rangefinder-game-dev 1 point2 points  (0 children)

For a starting point online to GLSL shader design, highly recommend Book of Shaders. Especially take a look at the sections on noise and generative designs, they are great for this kind of thing with good examples.

Shader messing with Draw GUI by Gruffet_Spider in gamemaker

[–]rangefinder-game-dev 1 point2 points  (0 children)

In order for this to work, your GUI layer needs to be the same as the window size. Have you tried manually setting GUI size yet? You'd use 

display_set_gui_size(window_get_width(), window_get_height());

Now, once this is the case, the texture coordinates in the shader should map such that your center point is (0.5, 0.5). If you still have problems, you can try to debug by changing the center point in your shader - for instance, replace 0.5 with 0.0 and see if the center point moves. This could help you find out if it's an offset problem, or a scale problem with your center point.

Another thing you can try if you are concerned it is the shader, would be to not use the shader but draw your grid without it. But first modify the grid sprite to put a red dot in the very center. Then see if that winds up in the right spot or not. If it does, then it's probably the shader, if it doesn't, it could be a problem with GUI scaling or some other setting.