LÖVE

Hello,

I am preparing to launch my LÖVE game on Steam, and I wanted to talk about something that I think is overlooked when people are considering LÖVE, which is the subject of shaders. Amongst other things, they apply shading to pixels, so by definition they're cool, but what's also cool is being able to work with them and implement them in the framework/engine you are using, and I believe that LÖVE does help a lot with this process, and it makes working with them easier than you might expect. For me, shaders are hard to understand and to program, but a lot of heavy lifting is done by the framework when you implement them, which I really appreciated when I got to using them.

I will create a post about my game at a later date. First, shaders!

Because a lot of shaders are written in a specific language, and are also written in a certain way, there are lots of conventions surrounding them, so theoretically you can easily port them across frameworks/engines. The process of porting over the shaders I attached to this post to LÖVE was quite simple. And after you adapt code to this framework, you only need one line of code to send a uniform to your shader! For someone like me, who is not a particularly good programmer, being able to get some MIT-licensed shader code and convert it to LÖVE was vital, as I currently don't have the knowledge to create them from scratch. And it's strange to explain, but the game I am working on needed these two shaders. They are not always necessary for all games, however, in this case, I believe that they did elevate the gameplay experience.

Two resources for studying shader code that can also be considered that I don't really see mentioned are also from the Phaser 3 and PixiJS JavaScript libraries (and definitely other libraries and game engines):
https://github.com/pixijs/filters
https://github.com/rexrainbow/phaser3-r ... ns/shaders

The shockwave shader comes from a PixiJS filter (they are called filters there), and the swirl shader is from Phaser 3. The background image is from ansimuz, https://ansimuz.itch.io/sunnyland-tall-forest

Both of the shaders are placed on a canvas, and I believe this really adds a lot to the swirl shader, as everything that is drawn on that canvas gets its pixels swirled/mixed. And by placing it on a canvas, you can also apply the effect to primitives, such as rectangles, circles, etc. Their center position is the current x and y position of the mouse, but you can change that to whatever you wish in the code (please look at the example code in the main.lua to check all the uniforms that can be changed).

Of course, like the code I ported from the above resources, this code also carries over the MIT license.

For the shockwave shader, I didn't include the clamped version, as I didn't 100% understand how to convert that over here, in a way as to not destroy the performance or do some silly stuff. But I think this version looks great.

I just wanted to let others know how nicely LÖVE plays with shaders, and hopefully others see this and they also get encouraged to try and port over shaders for their games as well.

I am a bit nervous that I did something wrong, like not properly removing the shaders or that I didn't create the canvas in the correct way, but there seem to be no issues. Let me know if you have any questions! Thanks

EDIT: Here are some GIFs to view the shaders in action,
Shockwave shader,
Swirl shader,

I agree. One of Love2D's strong points is how well and cleanly it uses GLSL shaders, with minimal impact.

If you're looking for more interesting GLSL shaders, try shadertoy.com too. It's great for live-coding shaders. There are some variable renames you'll need to do, and some uniforms to send in update() (like time, or dt if your shader uses them).

I'm very much looking forward to Love2D v12, which I hear will have support for compute shaders.

Also, the GameMaker community is pretty big into shaders too. They hold competitions, and there are people on twitter posting their work along with basic shader tutorials.

tourgen wrote: ↑Mon Jun 12, 2023 10:02 pm I agree. One of Love2D's strong points is how well and cleanly it uses GLSL shaders, with minimal impact.

If you're looking for more interesting GLSL shaders, try shadertoy.com too. It's great for live-coding shaders. There are some variable renames you'll need to do, and some uniforms to send in update() (like time, or dt if your shader uses them).

I'm very much looking forward to Love2D v12, which I hear will have support for compute shaders.

Also, the GameMaker community is pretty big into shaders too. They hold competitions, and there are people on twitter posting their work along with basic shader tutorials.

hi @tourgen. (sorry for the late reply, I had to finish my game these past few weeks and I didn't log in to the forums in that time.)

But yes, I totally agree, the implementation of shaders is great in LÖVE. And yes, totally agree on this point as well, GameMaker has awesome shaders too and shadertoy.com is a great resource for study!

And it's quite the coincidence you mention this, because for my current game there was a very cool shader that I saw available for GameMaker, but I wasn't able to recreate it (https://despair3042.itch.io/shockwave-advanced).

I implemented it in another way (I created small shockwave shaders behind the bullets), but I really would have liked to be able to implement the shockwave effect from above. Maybe some other time

Also, I just realized that I might need to update the shaders I uploaded, as currently there isn't any way to stop them from rendering, and so they are always on. From my understanding, this can be very bad for performance. So maybe add an "if not active, just run LÖVE standard shader" or turn them off in some other way. The upload was mainly for demonstration purposes, and I wanted to keep them running in a loop.

cip wrote: ↑Sat Jul 01, 2023 6:59 pm And it's quite the coincidence you mention this, because for my current game there was a very cool shader that I saw available for GameMaker, but I wasn't able to recreate it (https://despair3042.itch.io/shockwave-advanced).

Oh wow, I had no idea people were selling shaders for gamemaker on itch.io. I need to get into that! I have a few shader effects that could be re-written for people making platformers and twin-stick shooters.

cip wrote: ↑Sat Jul 01, 2023 6:59 pm I implemented it in another way (I created small shockwave shaders behind the bullets), but I really would have liked to be able to implement the shockwave effect from above. Maybe some other time

Also, I just realized that I might need to update the shaders I uploaded, as currently there isn't any way to stop them from rendering, and so they are always on. From my understanding, this can be very bad for performance. So maybe add an "if not active, just run LÖVE standard shader" or turn them off in some other way. The upload was mainly for demonstration purposes, and I wanted to keep them running in a loop.

are you creating a polygon behind your bullets and rendering it into the framebuffer with a shader? If that's the case you could simply not render it, or call setShader() to render with default shader. anyway, neat demos, thanks for posting them.

I usually write full screen shader effects, but of course Love2D gives us full access to vertex shaders as well as pixel shaders, and you can use them to render any Love2D geometry primitive, creating some very nice effects. bullet trails, rippling ground waves, a particle beam, all kinds of fun things that do not operate on the full canvas.

Good luck with the game! looking forward to seeing it.

tourgen wrote: ↑Sun Jul 02, 2023 2:36 pm Oh wow, I had no idea people were selling shaders for gamemaker on itch.io. I need to get into that! I have a few shader effects that could be re-written for people making platformers and twin-stick shooters.

Haha, please do sell them! More shaders in the world is always a good thing Here, when you have time, take a look at the YoYo Games Marketplace, at the shaders category: https://marketplace.yoyogames.com/category/5/shaders

tourgen wrote: ↑Sun Jul 02, 2023 2:36 pm are you creating a polygon behind your bullets and rendering it into the framebuffer with a shader? If that's the case you could simply not render it, or call setShader() to render with default shader. anyway, neat demos, thanks for posting them.

I usually write full screen shader effects, but of course Love2D gives us full access to vertex shaders as well as pixel shaders, and you can use them to render any Love2D geometry primitive, creating some very nice effects. bullet trails, rippling ground waves, a particle beam, all kinds of fun things that do not operate on the full canvas.

Good luck with the game! looking forward to seeing it.

Yes, I believe that what I ended up doing is what you said (I am not too familiar with the technical terms): I created a shockwave object behind the bullet. I used the shader and the method from here (https://github.com/a327ex/BYTEPATH/blob ... cement.lua). This shockwave sprite (which is the displacement map for the shader), is then drawn on the shockwave_canvas. When I create the slow mo bullet trail I just create these small shockwave instances behind the bullet (like a particle trail, like you mentioned). Sorry, I am not sure what you mean when you say that I could just not render it. I'll have to study more about how they work, to create the effects you talked about.

And of course, you're welcome, hope they prove useful!

Thank you for your interest, I released my game, if you want to check it out it's here, https://store.steampowered.com/app/2429 ... g_Bullets/

How about you, are you working on any games at the moment?

cip wrote: ↑Sun Jul 02, 2023 7:40 pm And of course, you're welcome, hope they prove useful!

Thank you for your interest, I released my game, if you want to check it out it's here, https://store.steampowered.com/app/2429 ... g_Bullets/

How about you, are you working on any games at the moment?

Useful links, thank you. I will check your game out soon - released on Stem with a demo! Congratulations!

I've been working on a few projects. I wouldn't really call myself a game developer, I've never released anything. I learned Lua while making a text adventure game and writing a parsing system. I've written quite a bit of raw C/C++ and OpenGL 3+ though. Switched to Lua + Love2D because it's just easier and faster to prototype minigames and toys.

made a simple twin-stick shooter that I may go back to at some point. experimenting with collision detection and Love2D sprites.

working on a space trading game similar to Elite, but your ship is a collection of semi-broken, glitchy systems. attached a screenshot of the 'nav computer' display I'm working on. it looks better animated. I'm using shaders to dynamically control how glitchy the display is. right now: working on the animated text routines based on the scanner hardware your ship has installed.

So far I've only been able to slightly modify shaders that others have scripted...but don't have a very solid understanding of how they actually work. Aside from "the book of shaders", I'm not aware of many other comprehensive guides for absolute beginners that don't assume a fair bit of prior knowledge of C++ and the openGl api. That said, Love2d does seem to get along very well with GLSL, albiet with a few tweaks here and there.

If any of you can recommend a good, complete guide for learning GLSL from the bottom up, (specifically for writing shaders for use in Love2d), that'd be awesome! Or, even better yet, possibly starting a thread here that would include various tutorials from novice/intermediary/advanced (if such threads don't exist already).

I mean, GLSL is based on C, so yeah, without knowledge of C might be hard. Just pick "The C programming language" book, 2 weeks would be enough to learn basics and syntax.
For inspiration you can go to https://www.shadertoy.com/, porting to love shouldn't be hard (well, it's not like you can't ask here on forums for help) make sure to read about love shaders on wiki

zingo wrote: ↑Sat Jul 29, 2023 3:16 am So far I've only been able to slightly modify shaders that others have scripted...but don't have a very solid understanding of how they actually work. Aside from "the book of shaders", I'm not aware of many other comprehensive guides for absolute beginners that don't assume a fair bit of prior knowledge of C++ and the openGl api. That said, Love2d does seem to get along very well with GLSL, albiet with a few tweaks here and there.

If any of you can recommend a good, complete guide for learning GLSL from the bottom up, (specifically for writing shaders for use in Love2d), that'd be awesome! Or, even better yet, possibly starting a thread here that would include various tutorials from novice/intermediary/advanced (if such threads don't exist already).

for reference, you will want this: https://www.khronos.org/opengl/wiki/Cor ... age_(GLSL)

I mostly used these tutorials to get into OpenGL and GLSL early on: https://learnopengl.com/Getting-started/Shaders
I think this will be confusing to someone using Love2D though, as you will not really be worrying about attributes and attribute layouts or binding VBO buffers or buffer states or any of that. Love2D takes care of the psychotic world of OpenGL for you. Just concentrate on GLSL.

My best advice would be to check out https://www.youtube.com/watch?v=u5HAYVHsasc , use shadertoy.com, and then realize Love2D canvases are framebuffers. you can read from and write to them from the shaders. you can even write to multiple framebuffers from a single shader. Read the Love2D shader wiki pages. bind canvases as unifroms to read from them (Image uniform type). ArtOfCode channel is quite good for learning the combination of GLSL and essential mathematics principles to create shaders. you must be familiar with basic vector math first: vector and matrix operations such as addition and multiplication, the inner and outer products (dot and cross products), and of course trigonometry and algebra.

I found this entry from the Löve blog quite useful to start learning the basics: http://blogs.love2d.org/content/beginners-guide-shaders