GameMaker Devlog: Water Shader & Physics

hello everybody and welcome to you well it's probably another experimental new type of video I might start doing so if there's there's going to be a brief explanation of what this kind of video is but if you just want to skip to what the video is actually about what's and probably in the video title just will be a Tyner in the top left you can just click well not you can click we don't have annotations anymore but you can skip to on the video right you know what I mean ok ok so this video um so this is my game pokey poke some of you will be familiar with it I'm not sure how many of you are aware of it as such but this is a game about girl with spinach and kind of climb do cool fun things and it's kind of a bit like a net Troy key kind of collective on you run around and collects diamonds and just have a fun time interacting with the sphere and doing cool difficult little puzzles and jumps and movements and stuff like that a little precision platformer a collectathon type thing and I've been working out for a while and I've used a lot of the things I've learned in this game as the basis for various tutorials on the ghost recording video that I just put out at the time I'm recording this was based on tech I made for this as I think or tutorials to show the player how to do like certain stuff because it's kind of hard to grasp some of the mechanics and stuff in this game and there's a lot there's a lot of stuff like that that I based tutorials on but there's also been a lot of stuff I've been showing off and cool effects and things that I've not turned into tutorials and people have said oh is a tutorial on on that thing that's in poker pro coming soon and I unfortunately had to say no because I've done things in ways that work that work for the sake of the project and and do work or but aren't necessarily the best way of doing things are not sure or particularly optimal so I've not shared those as tutorial videos but I would like to start doing is start sharing some of those things with you in another way that's kind of disclaim does not like a you know a properly sanctioned tutorial video if you well you know I'm not claiming that there's method it's necessarily strong whereas I feel is kind of a presumption of that with with my other videos so what I'm gonna do in this video is I'm going to talk a bit about this water effects okay I've got this cool water effect that when you jump in its got like a cool boom spring and I'm not gonna do like a full thing where I go through all the code and explain what it does but I'm gonna just talk briefly about how it works just to have a quick video and those and I suppose it seems more intermediates really on a more advanced developers as a thing where I just sort of talk about how and why I've done a thing in a particular way and you can think oh cool like I I could probably I probably emulate that myself that probably wouldn't be wouldn't be too difficult to do so water in the game is only going to be a very simple thing for a lot of different reasons it's just gonna be something you kind of flow in although there are some interesting interactions if you float close enough to the surface you can grab with the sphere you can kind of hang yourself under the water but for the most part the physics of it are just like you float in and I had never done on like water in a platformer before I thought it was gonna be way out of like my and all of my debts but what I so I was originally kind of planning on and kind of expecting to have was just like a box like this it would just be like a line or maybe like a fixed height variable that would determine where I drew a line and then a rectangle down and that would just be water and I would just change the place physics then though we're in it and maybe do like some particle effects or something like that and that was the best I thought I was gonna be able to do I figured you know I know some stuff about shaders and they can do sine waves and things at shaders and so I may as well try and do something interesting so what I've ended up creating is this a water body object and I have a layer specifically five kuwaiti many layers I need to slow this out I thought how once and reduce the number of layers massively and now there's loads again so that needs an early refactor anyway we've got h2o object but I can just sort of drag and mark any any real size or shape if I just do that around the game screen will go blank probably because that's what obvious does whenever I price up five and run the game I did that before I even went full screen then I was interested in being as he had come in here and I get this plain generic water object which is really good I had yeah if I jump into it like it's coming like pulls me up like that some of the game does ours and it's not mine characters or something like that we even gonna you know if I pulled up or what are you automatically I don't know similar there's something but either way when you like you splashing from the top you it kind of crease it's cool ripple so how I did this uh first of all I thought I started with this object and I started just with creating this box and it's all kind of do it was all done through the the drawer event of this so what I did was I created a surface then should create two surfaces but the reason for that it's a little more complex I created a surface where I drew an area of the screen from the application surface the application surface being the general surface onto which everything in a game is being rendered I capture that area of screen so whatever area of screen is there and I put it onto a surface oops the reason I do that is so that we can then you know we've got that's that's the background that we're working with okay and then I draw I set my colors if it's light blue color and I draw a rectangle over the top of our transparent like blue rectangle with a alpha writing off on the surface of lots of complex reasons involving surfaces and alpha blending but the main reason is I don't want to overwrite the Alpha of the surface all to not point five because that's what it would do I want to blend the color with it so I want to sort of draw it blended which is how you would normally kind of draw on top of the application service right so they said that uh so I'm not writing to that channel then I draw this a blue rectangle at the top I draw a sort of light blue rectangle I blue line sorry one pixel down from the top and a white line right across the top okay and that's what creates that sort of little tiny gradient you can see across the top of the wall okay and then that's just created like the basic water effect okay then I reset the target of the surface and I set up some stuff here because a surface formerly enough basically acts as its own texture page texture page being a thing a memory where you grab all your graphics and all your graphics will be on like one big texture page when your game is compiled or multiple text pages depending how many you've got ins on and your game how the graphics card roars your stuff to the screen as it grabs certain areas that texture page and draws them to the screen at right times right a surface kind of counts as its own texture page and this here is me working out kind of the width and height of a pixel on if you ll like the texture page equivalent of a pixel just call that axial I'm not going to get into the specifics of all that but it's important for our shader later on and then I create another surface and the reason I'm doing this over two surfaces is to do with if you're doing this in your own game you probably can get away with any using one surface but I use a second one because my game is actually the application surface my game is bigger than the resolution that's a game okay and they're just to allow me to have a certain sub pixels okay so the actual gain space that you're seeing is a 640 by 360 right that's the area of the room that you know you're looking at now this is six boy by 360 but you can see and you can see it in the sphere and how like smooth the spear is when it's rotated the application surface is way bigger than that like if I stick it in the water coincidentally that actually removes the sub pixels because of the way I'm doing the water like this but because of them because I'm using a surface I have to like scale that surface up and draw things to the surface build up or scale down in some cases to to make sure that my end ending water is the correct sort of pixel pixel dimensions because I don't why I don't want the water to have sort pixels in it even though the sphere does I kind of want to keep it constrained to the sphere because it's a little bit of a pixel arts tend to even have it in the first place like but I only do it because I think it looks way better on the rotated Spears right for the water I think the water looks better and more consistent with the ground around me if it doesn't have those sub pixels and is done matches the resolution of the pixel art right so in order to get that to work what I've had to do is capture so when I'm capturing like like this like if I captured this area of the screen one pixel here is not actually like one pixel right it's like like say like if you look at if you focus on say the cursor the crosshair right that pixel right in the center of it is not one pixel it's like a 3x3 square of pixels okay on the actual application surface so when I'm grabbing an area of the screen I have to grab the air of the screen and then I scale it down by like a factor of three when I put it on the original surface and then there's new surface I'm making the second so this is to like scale it back up and because I scale everything down and scale it back up that's what causes these sub pixels to go away under the water by actually quite like the effect that has on the sphere where it like makes it kind of like blurred and lower detail underwater I think that's kind of cool doesn't really affect anything else cuz nothing else has sub pixels but it does the spirit I actually think it's quite good in that regard so I'm kind of keeping it that way so that's why I've kind of got the second surface but but the whole point of the second service is to kind of draw this at the proper size and everything so I've like even when I've been getting at here this app scale stuff that I'm taking into account that specifically to get the correct size of the the application surface and so on so I draw everything to this new service but before I do I actually set a bunch of shading uniforms and I set a shader and this is where the magic hat that makes water all wobbly so I forgot a sure wave um the vertex shader is just a simple of the default pass-through shader I do everything in the fragment shader so you forget about this mm long array for now that's had something else which we'll get to in a minute this these two lines are the main crux of what I'm doing with this wave shader so I'm taking the y-coordinate of every pixel like I've made a vector P v-tex coordinates s just whatever pixel were currently rendering right there's the easiest way to think about it and taking the y-coordinate of it and adjusting it and by a sine wave which takes in a factor of the number of pixels where it and pixels in is relevant to px so based on how far across this are how far across the x-axis this pixel is we are just the Y of it by a sine wave so you can imagine that looking like a literal sine wave right so it would just go up and down and up and down because there's the value of x increases a sine will do its thing and will go up and then come down and then go up and come down right and then by adding a time factor in there which is something we get from a uniform flow that we pass through and oh what a body in the drawer again we pass through get timer x very small values so like that's gained microseconds or whatever rights that we need a very small value to make it work properly that means the wave will move a lot because it's gonna add X to the Y so it's gonna keep increasing the value so then you're gonna get a sine wave that moves moves along over time then why do because a regular sine wave no matter what values we put into it like I've you know these little 1.5 some 1.2 used a little hard numbers that I put in here just to make make it look but the kind of height and width of wave I actually want a regular sine wave by itself though would look kind of very regular right whereas our waves in the game you see they look kind of odd and like more more natural because they're a bit more random and the way I did that was just make a second sine wave do the exact same thing again with some different values and this time subtract time so that the wave is kind of like moving the opposite direction and and that's it by combining those two waves together that's how you get the way the facts that we're seeing in that that's really all there is to that and that's at one point that's where I was gonna stop but then I decided screw it we're gonna try and make it so you can jump in the water and make it wolf I'm so on well I did for that as I created a array of Springs so it just created a really big array based on based on the width of the sprite so that determines how many Springs there are um shader arrays have to be declared a runtime or declare at compile time rather so that's why I've just got like an arbitrary mm in here I don't think let me know if you know but I don't think there is a way in which I can kind of pass through like a limit to the array size of this because as I said I think it's declared when the game is compiled I suppose like a compile time I could work out the largest one I have in the game and past night through is kind of a mini way of working it out as like a macro something I don't know but yeah I couldn't work out a way of making that any better than just putting a really big value here for him or all the value of like the biggest water body I think I'm gonna have but yeah you're out of I'd like a value of like anything it came to light I think water divisions like six out of eight okay not season that's small and I thought so every eight pixels I'm gonna measure a height and what I did is I created a bunch of Springs now the step event here just you a thing called Hookes law I used a tutorial for this myself um I might for a link in the description of how all this works but basically each spring is going to like a approached a certain height based on a formula that is physical laws it's Hookes law um water essentially comes down to is that value based on kind of it's based on get like a given constant which is like the tension of the spring and based on sort of its distance from its resting point which is kind of at zero height it will move towards it will like accelerate towards zero okay so it'll accelerate toward zero and then it's gone past it's obviously still got some momentum but it's accelerating the other way and it sort of accelerates back and forth and then by adding a bit dampening on that they like eventually like it wobbles up and down but then eventually comes to a halt and then this big long fourth thing essentially just makes every spring kind of pull on the springs left and right of it so it like takes a bit of that so then that's what causes the the spring tip sort of like spread out okay so should the Winter Springs a huge array of numbers all just sort of like wobbling between a value above and below zero and then how that actually comes into the water is I just throw that straight back into the shader and do another adjustment to P dot Y at the end based on that spring and then I use the mixed function which is kind of like the shader equivalent of lerp to take a height at a given position of the spring the height of the next position of the spring sorry those yeah the height of warm spring and then eight pixels along as the height of another spring but how to deal with pixels in between there we use the next function which returns sort of the value interpolate from one spring to another spring by a given amount and so we work out like we do some of this stuff here which works out how many like what percentage we are between from one spring to the next and then that's what makes it like smoothly interpolate and then that's really all there was that's like a catchphrase of mine isn't it that's really all there is to it he says I have to late say a lot of stuff but yeah that is all there is to it so the long and short of this water effect is that I take an area of the application surface put that on a new surface I draw a blue rectangle over that surface a light blue line over the top and then a white line over the very top to create this off top of the water I then put that service on another surface for the sake of my specific game and resolution scaling stuff and when I put it on that other surface I do so with a sine wave shader that creates a sine wave across that like moves along over time I then apply another sine wave that goes in the other direction with slightly different values to create score of natural kind of rippling effect and also that natural effect light occurs to all the pixels so it's affecting the stuff underneath the water as well so that's how you can see it affecting the stuff in the background and then for the splash effect I have a big array that stores the splashing height of the wall which is or when it when I when is rippling like this it's all zeros so just every eight pixels one is zero when I jump in the water I just set one of those heights with the one closest to the player to be like down like 16 or something like that right and then using Hookes law I make that value sort of accelerate towards zero with some damping so it does eventually arrive at zero and then I have a for loop make that spread out across the other ones by making each array kind of pull on one another and then I bake that bake the results of that array back into the shader using a mixed statement I can blend each point from one to the next in terms of its wine position there's obviously a lot of key detail in this now this isn't like a full fledge tutorial for a lot of reasons as I say it's not necessarily even best we're doing it using lots of different surfaces like that it's kind of slow but it's an effective method and it works me I like being on there just so plunk one of these warr things anywhere in the game and have the best sort of work I think it's quite cool there are some issues I have with it when the war gets really big sometimes values of the far-right get really weird when I jump in the water and look kind of glitchy but with the right sizes it all kind of works so I'm not really gonna see those buggers actually being a problem because I just won't have areas like that in the game so yeah there's a really cool little water effect um I've had a lot of code on the screen so it's bridging popping out and look into it in more detail if you want to UM to tour us just it's just how I did a cool thing in Pokemon hope you enjoyed that guys I'll catch you next time a huge child in particular and in no particular order to Andrew Gilbert Arthur Kyle Wanderlei boughs of the dog Bertie T de kodanda go Dan Erik Matthew Hibbs James grimly Jason Macmillan Kim Mustafa Lampe Malcolm mark Lintz matte coat Michael Ward Mike KB Owen Morgan Patrick Duffy penguin muffins Robert churches Rove and darlin run Steven Hagen to buy a Schulten turtle time Sofia flame and Zen on may thank you all so much I hope you enjoyed this one I'll catch you guys next time

Channel: Shaun Spalding

Views: 109,341

Keywords: Game Maker (Video Game Engine), Tutorial, GameMaker Tutorial, GameMaker, Game Development, Indie Games, Tutorial Series, Game Maker Studio, Making Games, How to make games, GameMaker Studio 2, GMS, GMS2, Water, PokeyPoke, Platformer, Shaders, Shader, Sine wave, Springs, Hookes Law

Id: gMR3fypXHiY

Length: 21min 29sec (1289 seconds)

Published: Fri Dec 07 2018