I spent 30 days learning shaders to avoid drawing pixel art

15,227
15
Publicado 2024-07-03
I spent the entire month of June learning how to use and implement shaders in GLSL to give my game a much needed facelift. Elixir Punk still has a long way to go aesthetically before it's ready for release, but this is a nice step in the right direction towards finalizing a cohesive visual style.

Let me know what you think.

Thanks for watching.

Todos los comentarios (21)
  • @ManaCoder-h4y
    To be honest I couldn't tell the difference between the first screen shot and second, besides the tree leaves moving and more trees and water, I had to do a few double takes.
  • @KuroNK
    I don't know what's your game about tbh, but also, from the distance you have the camera most of the time, you cant really tell any of the effects you added. And I wouldn't say your art is bad, but i feel it lacks something, like nothing it's connected. it doesn't feel like a game world, it feels like a sprite collage.
  • @man-o-valor
    I recommend using a color palette to make your colors look more cohesive. Hue shifting really levels up flat-looking light colored art. You’d be surprised how much it can be improved by just paintbucketing all the colors to similar ones!
  • @danielkruyt9475
    You didn't even try to get Zig compiling into SPIR-V shaders, and just went straight to GLSL? Tisk tisk, the Zig community needs your work on this compilation pathway! :P Another way of getting consistent reflections is to upgrade your game to 3D and use screen-space raymarching (a very simple shader that requires you to render your whole screen to a RenderTexture, and then render that texture to screen with the raymarching shader active on the reflective parts; look up "G buffer" and "deferred shading" if this all sounds unfamiliar and wild), but this truly requires the depth buffer to exist (3D land) so it doesn't fit into your current state super trivially. But you may find it less difficult than it sounds at first. The depth buffer will also alleviate the need for weird hacks to get your player to stop "climbing trees" (i.e. not going behind them). You can then use e.g. the stencil buffer to cut a little hole around the player if you wanna be able to see through trees but only with a limit when he's obscured. That stencil will however interact non-trivially with the screen-space raymarching algo... Shader/gfx programming goes deep my friend, I hope you enjoy learning about the topic as much as I have in the past. With respect to your question about aesthetics, I have to admit I think you're landing solidly in "amateur pixel art" land. Not incredibly attractive, and it's going to be difficult to break out of. I think if you're not planning on trying to study up on the theory of traditional visual art (I haven't either hehe so maybe I'm not the right one to be judging), the only way I can imagine of making yourself stand out is in the integrative aspect, the creation of juicy muchness of interaction in all components of the game, two examples: 1. A gust of wind plays (audio), the trees all get pushed aside in a great wave (shader), your player character falls over (animation state machine), and all the enemies start arriving from the side of the map the wind came from and they're running faster with the wind behind them (game logic)! 2. The big monster arrives with its enormous club. The club swings, it hits the ground, and a shader makes the earth literally shake around the point it hit. Some monsters/minions get knocked over temporarily and have to get up. These things make good Steam page videos that stand out . Anything shy of these kinds of things, I don't see how to stand out without just... being a better artist. :P No offense intended, I wouldn't be any better than you at pixel art to be fair, and I don't think your art looks bad, just very normal. Also I think pixel art is harder to enjoy when it's being rendered at 1:1 scale to screen pixels on modern displays. Using nearest neighbour scaling with careful discretization of positions to match perfectly with the screen's pixels, to render game textures larger but retaining maximum smoothness of camera- and game object- movements is a popular and pleasing thing in modern pixel art games that keeps the art on display without weird aliasing artefacts. Terraria is an example of this, as is Magicite. I assume you've also seen this kind of thing in other 2D games.
  • @btwfh97
    Uniformity and theme is something I look for when I buy a game (does the art have a consistent style) and one example that really popped out at me was the edges between land and water. The edges that separate the land from water horizontally are thicker than the vertical edges. Another thing I noticed (that might just be because of the first topic) was that those edge tiles are in different perspectives, to clarify, it's as if the camera is looking at the horizontal edges on a slant but somehow also looking at the vertical edges at a right angle, which bugs the eye because it doesn't abide by the laws of our euclidean world.
  • Solid results! Shaders for pixel art tend to be pretty limited, but you can get a lot from downsampling higher resolution shader effects and styling them to suit pixel art rules. I think you'll probably benefit from a bit more tree and terrain variety. Particles are a great touch, and you can make some bee or butterfly particles. A bit of vignette or edge fogglow can help the visuals pop a little bit. Some emissive textures, especially in any caves would look great.
  • The shader looks nice on the water, and I like your overall colors they go together nicely but I think they're lacking a little bit of contrast. I recommend adding either a more green/turquoise color of a different shade to the water and possibly to the green areas as well to not only add some contrast with the color pop, but also maintain unity. Maybe that's not quite the right color choice, probably experimenting is a good idea, but as is everything is roughly the same value so it blends together a little too well and lacks definition. A good rule of thumb is to push shadow colors towards the cooler side (if green shift the hue towards cyan or blue, if an orangey warm red, shift the hue towards a cooler red that's closer to magenta), and for highlights color shift towards warm because the sun gives off a warm sort of yellow look. That makes the art stand out more/feel more dynamic and like it has depth and three dimensionality with very little changes. Your color palette right now is very much on the warm side, with warm greens and pinks, and the range of values on the trees is very nice, so just a small adjustment in the shadow colors (by color shifting towards blue) I think will make a huge difference, while the water just needs a little bit more contrast through adding another value to help it stand out and feel like it has depth (currently the shader you added is difficult to see because of lack of shade variety). I hope this advice makes sense and is helpful to you :)
  • @ColdBlueLight
    can you adjust the brightness and contrast to help the colors pop more its a little too pastel and things look to blended together to me. otherwise the shader idea is neat but wont it eventually hit a wall where too many draw calls are being made?
  • @fritzytg
    You could also render the whole world last in a single shader with the reflections. You could render the ground to a render-texture, then the tall objects to a texture to be blown around, then the upside down tall objects to another render texture, and combine them all in a single shader that first applies the world texture, then the wind-blown objects, then for every alpha = 0.0 fills in water effects and the reflection render texture.
  • @baranjan6969
    On a sidenote what's your desktop window manager called? It looks awesome.
  • I tried shaders. I just don't get them yet. Good luck! Good old parralax shadowns and other tricks are fine for me now lol.
  • @chillpauly
    There is something you can fix in your process which may fix how the art is going at an overall level. This is the disparity between the level of zoom you are working at when creating assets or effects, compared to the level of zoom the game camera at. You're spending time painting in each pixel in these sprites so they look good to you when you are zoomed all the way in looking at those individual pixels, but when you see the same sprite in game, it's tiny and you can't see any of that. The result is way too small level of detail, way too dense looking sprites, invisible effects, and things looking empty/plain/bland while simultaneously looking over-detailed. When creating visuals for games you always need to keep what it looks like from the game camera as the first thing in your mind, because that's how everyone besides you is going to see them. Generally you can try to think in terms of large shapes, medium shapes, and small shapes. For your game camera's level of zoom, all our brains can really see is the large shapes. However, currently when you're making assets/effects, you're making them almost entirely out of small shapes. So all we see in game is a big blob of indeterminate detail that our brains filter out in favour of the big blocks of colour. I would recommend zooming your game's camera in a bit, and then adjusting the placement of objects to reflect the new zoom (closer together). Then review your sprites from your game view - spread those small details out in favour of large shapes > medium > small. Also review the scale of objects in the game. Compare the scale of everything to your character. The trees are kind of big but not too bad. The flowers are massive. The water/waves are tiny weeny.
  • @Shadowthevampire
    Everytime you said you changed stuff with the water I couldn't really tell a difference either you change it to slightly or its because the camera is super zoomed out I have to squint when I watch your game. I would advice you to have the viewport a bit more zoomed in so the players can enjoy all the effects you have made 😊
  • @ckpioo
    FINALLY someone who is using zig, im familiar with rust and i have been trying to find some videos which use zig for more complex projects rather than the simple api, cli, etc. Thank you for making this video and just a small favour but if you have any creators in mind who also heavily use zig or even rust for their projects please please tell me!
  • @Big_Theft_Auto
    The only bad mistake is the shadows of different elements are of different intensity but they should all be close to the same intensity for all the elements because they are all light by the sun. The green trees and the pink trees look like different things. The pink trees are difficult to see because they look the same intensity as the grass. If i was drawing this, i would copy paste the pink and the green trees next to each other and try to somehow change the shading to match one another. And is good to do it with everything or else it looks "like a collage" as KuroNK said.
  • @foxtrot596
    Looks very nice! Never seen a yt gamedev use Linux or Zig. What distro u using btw?
  • @magni319
    I don't want to shock you, but the difference between the first one and the second is the amount of trees. No player would notice or care about some twinkling leaves