Java-Gaming.org    
Featured games (81)
games approved by the League of Dukes
Games in Showcase (499)
Games in Android Showcase (118)
games submitted by our members
Games in WIP (568)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  [GLSL] How to make a gradient shader for background?  (Read 1195 times)
0 Members and 1 Guest are viewing this topic.
Offline Spacebeans
« Posted 2014-07-11 05:29:07 »

I'm trying to make a basic shader to create a gradient between two colors on a game background. I plan to get this kind of effect:



Its pretty simple. I just need some basics to get started, I'm still new to this mathematics in colors thing.
Online LiquidNitrogen
« Reply #1 - Posted 2014-07-11 05:37:22 »

something like (color1 * y / screenHeight) + (color2 * (1 - y / screenHeight)) perhaps

Offline Spacebeans
« Reply #2 - Posted 2014-07-11 06:25:15 »

Thanks for the info!

Here's what I've got:


And the shader toy code:
1  
2  
3  
4  
5  
6  
void main(void)
{
   vec3 h_color_top = vec3(0.3, 1, 1);
   vec3 h_color_bottom = vec3(0.8, 1, 1);
   gl_FragColor = vec4(h_color_top * (gl_FragCoord.y / iResolution.y), 1) + vec4(h_color_bottom * (1.4 - (gl_FragCoord.y / iResolution.y)), 1);
}


Is there any way I could make the colors blend less... smoothly? Its for a pixel-oriented game. And I wan't it to look kinda low-res.
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline trollwarrior1
« Reply #3 - Posted 2014-07-11 06:28:35 »

You would be surprised how positively smooth textures and colours affect pixel art games. (At least from my experience, smooth simple 2d lighting is perfect for very simple pixel art games. It makes the game look very smooth or something. )
Online LiquidNitrogen
« Reply #4 - Posted 2014-07-11 06:29:30 »

take away some precision to make them blend less smoothly ie:  floor(color/10) * 10

Offline Riven
« League of Dukes »

JGO Overlord


Medals: 802
Projects: 4
Exp: 16 years


Hand over your head.


« Reply #5 - Posted 2014-07-11 06:31:18 »

floor(color*10)/10

Hi, appreciate more people! Σ ♥ = ¾
Learn how to award medals... and work your way up the social rankings
Offline Spacebeans
« Reply #6 - Posted 2014-07-11 06:36:04 »

Wow, thanks guys!

I've got this finished now, its looking pretty good. Its just a bit dark. Is there any way I could fix this?

(http://www.shadertoy.com/new)
1  
2  
3  
4  
5  
6  
void main(void)
{
   vec3 h_color_top = vec3(0.4, 1, 1);
   vec3 h_color_bottom = vec3(0.9, 1, 1);
   gl_FragColor = floor(vec4(h_color_top * (gl_FragCoord.y / iResolution.y), 1) + vec4(h_color_bottom * (1.4 - (gl_FragCoord.y / iResolution.y)), 1) * 10.0) / 10.0;
}


You would be surprised how positively smooth textures and colours affect pixel art games. (At least from my experience, smooth simple 2d lighting is perfect for very simple pixel art games. It makes the game look very smooth or something. )

I know, I'm planning on adding normal mapping and directional lights soon. Its going to be a very pretty game. Smiley But I wanted something pixel-y for the backdrop.
Online LiquidNitrogen
« Reply #7 - Posted 2014-07-11 06:37:28 »

floor(color*10)/10

oh right, my way only works with colors in the 0-255 range.

Online LiquidNitrogen
« Reply #8 - Posted 2014-07-11 06:39:59 »

Its just a bit dark. Is there any way I could fix this?

You could umm... use lighter colors.

Offline Spacebeans
« Reply #9 - Posted 2014-07-11 06:46:58 »

Its just a bit dark. Is there any way I could fix this?

You could umm... use lighter colors.

I should have added more information. I'm using kinda-bright colors, but the top color seems a bit darker than I declared it as.



(Do note that I changed the floor divisor and multiplicand)
1  
2  
3  
4  
5  
6  
void main(void)
{
   vec3 h_color_top = vec3(0.8, 1, 1);
   vec3 h_color_bottom = vec3(0.9, 1, 1);
   gl_FragColor = floor(vec4(h_color_top * (gl_FragCoord.y / iResolution.y), 1) + vec4(h_color_bottom * (1.4 - (gl_FragCoord.y / iResolution.y)), 1) * 20.0) / 20.0;
}
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Online LiquidNitrogen
« Reply #10 - Posted 2014-07-11 06:52:14 »

looks like the /20 at the end is reducing the top color heaps, where as the bottom color has a *20 to negate it. (or maybe not? i need to get more sleep)

Offline Spacebeans
« Reply #11 - Posted 2014-07-11 07:02:42 »

looks like the /20 at the end is reducing the top color heaps, where as the bottom color has a *20 to negate it. (or maybe not? i need to get more sleep)

Thanks, I'm trying to wrap my head around this. How do I fix this issue?
Online LiquidNitrogen
« Reply #12 - Posted 2014-07-11 07:05:37 »

i suggest you break it down into several steps to make it easier to visualize. calculate each component into a temporary variable on a separate line before adding them together on the final line. that will make it easier to mess around with and you can optimize it again later.

Offline trollwarrior1
« Reply #13 - Posted 2014-07-11 07:09:59 »

How is this?

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
void main(void)
{
   float shade = 1.0 - (gl_FragCoord.y / iResolution.y);
   
   
   float blueShade = shade;
   blueShade *= 0.4;
   blueShade += 0.5;
   
   float otherShade = shade;
   otherShade *= 0.5;
   
   int pixelness = 1;
   float power = 50.0;
   
   float r = float(int(1.0 * otherShade * power) / pixelness) / power;
   float g = float(int(1.0 * otherShade * power) / pixelness) / power;
   float b = float(int(1.0 * blueShade * power) / pixelness) / power;
   
   vec4 col = vec4(r, g, b, 1);
   
   gl_FragColor = col;
}
Offline Spacebeans
« Reply #14 - Posted 2014-07-11 07:25:04 »

Second thought, I think trollwarrior1 was right. Smooth backgrounds could help with the art style. I've got to go, Its 3:31 am here. Thank you so much for the information on the 'floor' method though!
Offline pitbuller
« Reply #15 - Posted 2014-07-11 09:37:23 »

Just use vertex colors and discrete interpolated color at pixel shader.
Offline Spacebeans
« Reply #16 - Posted 2014-07-11 17:18:11 »

I don't want to start a new thread on this, because I've made too many in the last 2-3 days. But is there any way to use the #include in GLSL? It keeps telling me it doesn't support it.
Offline Longarmx
« Reply #17 - Posted 2014-07-11 17:20:50 »

You can do it with your shader loading code. If it encounters a #include directive then it can search for the file stated by the include.

Offline Spacebeans
« Reply #18 - Posted 2014-07-11 17:22:42 »

You can do it with your shader loading code. If it encounters a #include then it can search for the file stated by the include.

Ah, I see. I've been following 'TheBennyBox's' github and I've seen that #include, and I was wondering how it worked. Thanks!
Offline Longarmx
« Reply #19 - Posted 2014-07-11 17:24:42 »

This is where I got the idea from Wink You can see how he implements it in this video if you're interested.

Pages: [1]
  ignore  |  Print  
 
 

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

Pippogeek (39 views)
2014-09-24 16:13:29

Pippogeek (30 views)
2014-09-24 16:12:22

Pippogeek (20 views)
2014-09-24 16:12:06

Grunnt (46 views)
2014-09-23 14:38:19

radar3301 (28 views)
2014-09-21 23:33:17

BurntPizza (64 views)
2014-09-21 02:42:18

BurntPizza (36 views)
2014-09-21 01:30:30

moogie (42 views)
2014-09-21 00:26:15

UprightPath (51 views)
2014-09-20 20:14:06

BurntPizza (54 views)
2014-09-19 03:14:18
List of Learning Resources
by Longor1996
2014-08-16 10:40:00

List of Learning Resources
by SilverTiger
2014-08-05 19:33:27

Resources for WIP games
by CogWheelz
2014-08-01 16:20:17

Resources for WIP games
by CogWheelz
2014-08-01 16:19:50

List of Learning Resources
by SilverTiger
2014-07-31 16:29:50

List of Learning Resources
by SilverTiger
2014-07-31 16:26:06

List of Learning Resources
by SilverTiger
2014-07-31 11:54:12

HotSpot Options
by dleskov
2014-07-08 01:59:08
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!