1. Hey! Guest! The 33rd GMC Jam will take place between May 23rd, 12:00 UTC (Friday noon) and May 27th, 12:00 UTC (Monday noon). Why not join in! Click here to find out more!
    Dismiss Notice

Asset - Graphics Circular Gradients (free)

Discussion in 'Marketplace' started by Dragon47, Jan 7, 2017.

  1. Dragon47

    Dragon47 Member

    Joined:
    Jul 6, 2016
    Posts:
    179
    [​IMG]

    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:

    [​IMG]

    [​IMG]

    [​IMG]

    [​IMG]

    [​IMG]

    [​IMG]

     
    Last edited: Jan 24, 2019
  2. RichHopefulComposer

    RichHopefulComposer Member

    Joined:
    Jun 20, 2016
    Posts:
    1,359
    Cool. How did you create these sprites? Drawing program? Or fancy math?
     
  3. Dragon47

    Dragon47 Member

    Joined:
    Jul 6, 2016
    Posts:
    179
    Thank you, I wrote a set of shaders that takes the coordinate of each pixel (with origo being the center of the image) and use some mathematical function on it. The code is included in the asset.
     
  4. Gamer-15

    Gamer-15 Member

    Joined:
    Nov 11, 2016
    Posts:
    58
    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?
     
  5. Dragon47

    Dragon47 Member

    Joined:
    Jul 6, 2016
    Posts:
    179
    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.
     
  6. Gamer-15

    Gamer-15 Member

    Joined:
    Nov 11, 2016
    Posts:
    58
    Thanks! This is very helpful.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice