Asset - Graphics Circular Gradients (free)

Dragon47

Member


Download demo: https://1drv.ms/u/s!AppH38QcoEBfiKU-QqN8sqtLCe1mrg

Link to marketplace: https://marketplace.yoyogames.com/assets/4971/circular-gradients

This asset includes a collection of 33 sprites with different types of circular gradients. Each type has three color versions. One that transitions from white to black, another that transitions from white to transparent, and a third that transitions from transparent to white. All sprites are 1024x1024 pixels large. In addition to this the asset includes the code that was used for generating the gradients, as well as a detailed guide explaining how to use the code to generate your own circular gradients (with custom color, size and gradient type).

Screenshots:













 
Last edited:

Gamer-15

Member
This is amazing!

I have a question: I am seeing some gradient banding in the gradients that I created (because of the colors/alpha that I used). Is there any way to reduce this?
 

Dragon47

Member
This is amazing!

I have a question: I am seeing some gradient banding in the gradients that I created (because of the colors/alpha that I used). Is there any way to reduce this?
The banding might just be because of the lack of precision in dark colors. Shades of dark colors are easier to differentiate for the human eye. If this is the issue, there's no perfect fix, but there are some that work pretty great.

First off, if the gradient will be overlayed some detail-rich textures, you might not notice the banding when playing the game, in which case you don't have to do anything.

If you notice it ingame, it might work to make the gradient lighter, or to put the dark colors closer to each other in the gradient; as in use a distribution similar to linear or "smoothstep with offset" as opposed to gaussian splat.

If you don't want to change your gradient, you can use dithering, which can be very effective. Dithering adds noise into the bands to make them harder for the eye to notice. Here's an example without dithering: https://i.imgur.com/4om3lqg.png, and with dithering: https://i.imgur.com/ER2JxHa.png. I haven't added it to this asset though, but I use it in my interactive books asset. One way to implement it is to use a dithering pattern, like e.g. this noise: https://i.imgur.com/fh14CH9.png. Then pass this texture to the shader, and then add this code to the end of the fragment shader code:
Code:
gl_FragColor += 0.02 * texture2D(texture_dithering_pattern, dithering_coordinate.xy / dithering_coordinate.w).r;
You might have to tweak 0.02 a bit. dithering_coordinate can be set in the vertex shader like so:
Code:
gl_Position = gm_Matrices[MATRIX_WORLD_VIEW_PROJECTION] * in_Position;
dithering_coordinate = vec4((vec2(gl_Position.x, -gl_Position.y) + (1.0 + 1.0 / 256.0) * gl_Position.w) * 5.0, gl_Position.z, gl_Position.w * 2.0);
Replace 256.0 with the size of your dithering texture. dithering_coordinate is a varying, so be sure to include
Code:
varying vec4 dithering_coordinate;
in both the vertex and the fragment shader.
 
Top