Hornete

[Tutorial] How To Create A Custom Shader

Recommended Posts

Cunning fox    706

Will it work for UI? I'd want to make something similar to summer shader that distorts the image, will it work for images too?

  • Like 1

Share this post


Link to post
Share on other sites
Hornete    7933
2 hours ago, IronHunter said:

How does one extract shader code from existing shader files?
As that would be really helpful as reference material.

Aah! I can't believe I forgot to mention how to find the existing shader code haha.

You can find all of the game's shader files in this directory.

C:\Program Files (x86)\Steam\steamapps\common\Don't Starve Together\data\databundles\shaders.zip\shaders

1089925077_Screenshot(215).thumb.png.b76463f57a79c305b1094d7cbec7bc19.png

You should see something like this. 
image.thumb.png.90aaedecd0d0d6c3f6478f85debf2359.png

The first half-ish of the file is the vertex shader.
 


image.thumb.png.9f65cd8b33a51c276c7a7cc28f5e7dd9.png
And the 2nd half-ish of the file is the pixel shader!(As indicated by "anim.ps" at the top there

Hope that helps

 

3 hours ago, Cunning fox said:

Will it work for UI? I'd want to make something similar to summer shader that distorts the image, will it work for images too?

Yup! It should work for ui. You can check out the overheat shader to see how they did the vertex and pixel shaders for that.
image.png.b128c5a9b99c283f992832729689394d.png

Looking at the heatover widget the shader is applied to the image with SetEffect.

And something cool that widgets over entities when using shaders, you can actually pass parameters for the shader from the lua side.
image.thumb.png.6cfa1870114bfd0b25b626a570b6af31.png
You can see SetEffectParams being used and being passed effectTime, effectSize, and effectFrequency variables.


image.png

And I believe those become these AMPLITUDE, FREQUENCY and VELOCITY variables. It's too bad AnimState doesn't have a SetEffectParams function too, but thats a cool thing you can do for UI.
  

Edit:
image.thumb.png.30fb122a3c080c1989718d7ecd5265e4.png
You can also use this SetAlphaRange function to set alpha values and that becomes these variables in the overheat shader
image.png.9e94f4cdacd9ed9d7710b5824892d671.png 
  

 

 

Edited by Hornete
  • Thanks 3

Share this post


Link to post
Share on other sites
ADM    8674

Super dapper, I haven't used basic shaders much before but that just makes it more interesting to me then ! :encouragement:

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now