I spent 30 days learning shaders to avoid drawing pixel art

30 days ago my game looked like this and after 30 days of learning shaders the game now looks like this [Music] my game Elixir Punk has been in production for around 9 months now mostly as a hobby project but just before launching this YouTube channel I decided to actually follow through on my game idea and make it see the light of day the thing is Gamers and people in general put a lot of stock into the visuals of a game a game that looks bad is often a sign of the overall quality and a red flag to steam Shoppers visuals of course are not everything but if want anyone to pay attention to my game at all it needs to look nice and the best way to do that is to spend the entire month of June learning pixel art practicing it and drawing intricate pieces of nicely shaded art that will make the game stand out just kidding it [Music] shaders if you're new here I'm writing this game from scratch with Zig using a graphics Library called Rip which means that I can't use any fancy Shader graphs and any shaders that I want to implement I have to implement in a high Lev shading language since rip uses openg GL on the back end this means that I had to learn GLS l l which I've only had limited experience with following the learn open.com tutorial series about a year or two ago the first thing I decided to tackle was the water because it stuck out to me the most now the old water was both temporary and part of a tile set so if you watch my last video you would have seen the sample of the Shader I put in at the end of the video while that Shader looks pretty decent what you can't tell just from looking at it is that the Shader was applied to each tile independently to give you a bit of context all of the tiles that are used for the game are stored in a struct and an array list that keeps track of some basic information for each of them things like their position and what of tile they are are stored and used to draw them to the screen the important thing to note is that all the tiles are stored together regardless of their IDs pretty sure on the back end ra batches draw calls together when you Loop through a list to draw them to the screen so for just drawing tiles they can all be done in the same draw call but now that I was mixing shaders into the equation we switch between drawing tiles with a Shader applied and not making it so that they can no longer be batched together as efficiently to remedy this and to give more control over how the Shader looks as a whole I remove the water from the tile itself and the Shader from the step where we Loop the our tiles the tile map now looks like this and the water is drawn on a single quad that is the whole size of the map this is done before the tiles are drawn over the quad given the effect of the water still being underneath the tiles now this does introduce a new problem that being overdraw especially since the Shader is applied to the whole quad this is something that I'm going to tackle in later videos when I dive into performance optimizations the end result is almost identical but lets me control how often I want the noise textures to repeat across the quad using this scale variable where I want the noise textures to be drawn and other things to make the water look less repetitive the water effect itself is made up of three different textures each scrolling differently and Blended together to give us the final result the first is this plin noise texture that Scrolls underneath and gives us some slight variation in color and waves the next is the water cic texture and finally we have the wave foam or highlights I'd like to eventually have these offset instead of in a straight line but at the same time I also kind of like it so we'll see let me know what you think in the comments if you're interested in water shaders like this at all I would recommend heading over to Shader toy.com and checking out some of the shaders that people have made the best way to learn is to search for an effect and then just read the code that they've written often the effects are pretty isolated so they're easy to follow making learning even faster after the water effect was done the next thing to implement was the reflections I knew that I wanted to have these in World space so that everything above the water could be reflected the effect that I wanted was similar to the one found in old Pokémon games like Sapphire and Ruby there are certain Lakes across the game that have Reflections built in and as a kid I always thought these were really cool the only problem was I had no idea where to even start with these initially I tried to do this in the Shader passing the player texture into the water sh itself but this didn't work out like i' hoped figuring out how to get this right took a big chunk of time as I really had no idea how to go about implementing something like this my searches eventually led me to a few different tutorials from implementations in unity and gdau and I was able to piece together the idea that I could use a render texture at first this was confusing to me as I had no idea what a render texture was but after doing some research it made a lot of sense if you're like me 30 days ago and you're not familiar with a render texture it's basically just a texture that you can draw to the RB example that uses this is a simple paint app you you draw to a render texture so that it can later be saved as an image on your computer which I think illustrates the use case perfectly in most cases but it's rather limited if you only think about using it like that in the r example they don't clear the frame after it's done so each Mouse movement gets drawn to the texture however if you clear the frame you're basically left with the blank texture that you can draw to like you'd expect except now it's a texture and we can pass it to the GPU and from there we can apply shaders to it as a whole so that's exactly what I did I first just draw a huge quad over the entire scene flipping the y-coordinate then call my draw functions for the Fage flipping their positions as well and then in the regular render pass we just draw the trees again but not flip the render texture is eventually passed into this Shader as well where it's given a blue tint and some slight waving the same thing is done for the player but on a different texture this time the texture follows the camera because the camera tracks the player so that way the texture moves with the player and the positions are updated accordingly now one thing I haven't figured out yet is how to get this to work with the camera zooming in or zooming out or the camera position clamping to the edges of the map so when the player reaches the top or bottom of the map the reflection just decides to go his own way in like once the reflections were in place I moved on to the wind Shader this one is relatively straightforward this was about my 20th or so day experimenting with glsl and learning about shaders so I kind of understood what was going on at this point we offset the UVS and the fragment Shader by some amount using a sine wave each tree has this hash function attached that offsets the sine wave slightly based on the s's position that way each tree sways slightly differently now this effect can definitely be improved and it's not perfect but the sign wave is super satisfying and once I finalize a tree Sprite I think it's going to look even better the next thing I did was add this particle effect effect the particle system is super Bare Bones right now we just have a struct for an emitter that we can attach to a position in the world and a slice of particles that it reuses over and over once their lifetimes are done the final piece to the puzzle was the tall grass and this one is actually pretty interesting a while ago I made a reimplementation for the lazy floodfill algorithm that I use for generating the terrain that I'm calling a lazy deck this data structure is an amalgamation of a deck plus some extra Fields specific to the lazy floodfill algorithm so that I can reuse it across my code base for example it is used for both the trees and the tall grass and I can adjust the parameters like how many patches to spawn where to spawn them and how fast they Decay this will most likely get adapted as the game changes and it should be easy to add new Fields as I need them as an example we have the big flower patches of what I'm calling rainbow weed here tightly grouped together and on the edges of water tiles with more spacing in between them we have these things I'm calling fan weeds the same algorithm is used in both spots with only some slight adjustments the Shader applied to the rainbow weed is very similar to the wind Shader used for the trees but with some variation on how high the effect is applied to the biggest change is that I rewrote a lot of my code for my Sprite render to be able to work with texture atlases to help alleviate having to constantly switch between textures this however means that the wind Shader sometimes bleeds over into other tiles which I believe can be clamped to their position in the texture Atlas but I haven't figured out how to do yet for now I'm pretty happy with how the game is beginning to look that about wraps up the last 30 days of working on Elixir if you're not subscribed already subscribe like the video and let me know how you think the game is looking I'm especially interested in feedback around the art style and visuals since this will be a commercial product I want the art style to be appealing at first glance so that when you see it it stands out to you so please give me your thoughts in the comments next I want to get to work on the building system which I've been looking forward to for quite some time after that's implemented I feel like the game is really going to start to come together included in the building system will also be a basic Gathering Loop since you can't really build things without Gathering resources so I'm expecting the next video to take a large trunk of July thanks for watching and I'll see you in the next one

Channel: mel0ndev

Views: 11,432

Keywords:

Id: ltlEIQerHAM

Length: 7min 49sec (469 seconds)

Published: Wed Jul 03 2024