chriswearly







prince slugcat





Level 3prince slugcat Re: ♜ Kingdom ♜ « Reply #20 on: December 17, 2014, 10:59:55 AM »

Well, the FIRST time I played, on Night 1 I went right and got killed by a zombie. But me actually trying got pretty far



So, can't wait for this sequel!



Also, looooove the art! So cinematic, actually :D Well I just played the original. Day X.Well, the FIRST time I played, on Night 1 I went right and got killed by a zombie. But me actually trying got pretty farSo, can't wait for this sequel!Also, looooove the art! So cinematic, actually :D Logged

Mable & The Wood Devlog Twitter: ChrisWEarly

Alike Studio







Game Developers of Love You to Bits





Level 0Game Developers of Love You to Bits Re: ♜ Kingdom ♜ « Reply #22 on: December 23, 2014, 05:12:16 AM » I've been playing the original game and it's really fun! The new graphics look awesome, I love the waterfall animation and the water reflection Logged

dhontecillas







Level 0 Re: ♜ Kingdom ♜ « Reply #24 on: January 23, 2015, 02:40:57 PM » I don't actually know anything about Unity3D, but looking at your shader code, it looks like it doesn't have a fragment shader. You are using a vertex shader, and a surface shader (that it looks to me that is something like a post processing pass).

If it is so, you should write a fragment shader where you can discard the fragment, or depending on the alfa valua set the depth to the maximum value.



Found something like this:





struct C2E2f_Output {

float4 col:COLOR;

float dep:DEPTH;

};



C2E2f_Output frag( v2f i ) {



C2E2f_Output o;

half4 c = frac( i.uv );

o.col=c; // this is not iteresting

o.dep=0; // this is what I want to output into Z-buffer (0 value is just an example)

return o;

} Logged

noio









Level 1 Re: ♜ Kingdom ♜ « Reply #25 on: January 23, 2015, 02:48:21 PM »



Quote from: dhontecillas on January 23, 2015, 02:40:57 PM A surface shader (that it looks to me that is something like a post processing pass).



The surface shader is Unity's magical mysterious equivalent of (everything including) a fragment shader. It is evaluated per pixel and it is (I think) compiled to a frag shader plus some other junk.



I didn't know it was possible to set depth values explicitly! However, that still wouldn't solve my problem: I don't want to "overwrite" the existing depth value (even with 0), I want to leave the depth value alone for certain pixels (the ones that are transparent on sprite).



Actually, everywhere I read it says that AlphaTest should prevent anything from being written to either frame or depth buffer. That's exactly what I want. I am thinking now that perhaps my code works, but one of Unity's magical mysterious lighting passes is still writing to the depth buffer. Thank you!The surface shader is Unity's magical mysterious equivalent of (everything including) a fragment shader. It is evaluated per pixel and it is (I think) compiled to a frag shader plus some other junk.I didn't know it was possible to set depth values explicitly! However, that still wouldn't solve my problem: I don't want to "overwrite" the existing depth value (even with 0), I want tofor certain pixels (the ones that are transparent on sprite).Actually, everywhere I read it says thatshould. That's exactly what I want. I am thinking now that perhapsworks, but one of Unity's magical mysterious lighting passes is still writing to the depth buffer. Logged

Check out Check out twitter @noionl for regular updates

noio









Level 1 Re: ♜ Kingdom ♜ « Reply #26 on: January 30, 2015, 08:40:52 AM »



WATER



So, spent a few days fixing up the shader that we use for water, and I get asked regularly how it works, so I'll try to explain in some detail.



Applying Displacement Maps

The fundamental step of the water rendering consists of fetching part of the screen[1], flipping it upside down, then running it through a Displacement Map/Filter. I took that path because it was a



When rendering a pixel at (x,y), instead of grabbing from the texture at texture(x,y), we grab from the texture at an offset: texture(x + o x , y + o y ) . These offsets are looked up from a special displacement texture, o = displacement(x,y). The displacements are stored in the red and green channel of this displacement texture. In my shader, that looks as follows:



half2 displacement1 = tex2D( _Displacement1Tex, i.uv.xy );

float2 adjusted = i.uv.xy + (displacement1.rg - .5);

half4 output = tex2D(_MainTex, adjusted);





So far so good, Also, have a look at



[1]: Note: in Unity, "fetching a part of the screen" requires rendering the entire game to a texture first (a Pro feature). We were doing that anyway in order to get pixel-perfect upscaling.



Generating the Displacement Map

You might wonder: how to generate the texture used for displacement? The Flash game generated a Perlin noise bitmap on the fly. But to improve performance, I am now generating a normal map using Fluid Noise Generator. A normal map stores normal vectors based on a heightmap, it's not quite the same as displacement, but close enough. This is the normal map that I use:







In order to make the water look dynamic, I simply scroll the heightmap (by modifying the texture offset in Unity). Without any extra refinements, the result would look a little like the following: (tweaking the scroll speed and displacement values will actually make it look acceptable).







You might notice some "unrealistic" factors:

The water doesn't really look like a horizontal surface because there is no perspective correction of the waves.

surface because there is no perspective correction of the waves. It is easy to spot that a texture is being linearly scrolled.

The reflection is as bright as the scene So, let's fix some of these!



Perspective Correction

I want the waves "closer to the camera" to look bigger. So I simply stretched the uv lookup based on the x-coordinate:



half2 perspectiveCorrection = half2(2.0f * (0.5 - i.uv.x) * i.uv.y, 0.0f);

half2 displacement1 = tex2D( _Displacement1Tex, i.uv.xy + perspectiveCorrection ).rg;



Unfortunately this operation has to go in the fragment shader instead of the vertex shader, because the uv interpolation is affine. (







The result is as follows, when rendering the displacement map itself. (I see now that it is wrong since the lines aren't straight! Have to look into that..)







Texture Scrolling

On to point two! Let's make the water look a little more chaotic. Generating Perlin noise on the fly would still be an option, but I found another workaround. You might have guessed it from the fact that all my code mentions "displacement1": I simply use multiple displacement maps overlaid. I generated another normal map that has a higher level of detail, and for each pixel I add the offsets together. Additionally, I scroll the displacement maps at different speeds.







Current Status

Then I added some ambient multiplier based on the waves and I did some math magic to get nicely "rolling" sparkles. Now I'm afraid it looks too "hi-fi" for a pixelart game.







Happy to answer any questions! Long explainy type post time!So, spent a few days fixing up the shader that we use for water, and I get asked regularly how it works, so I'll try to explain in some detail.The fundamental step of the water rendering consists of fetching part of the screen, flipping it upside down, then running it through a Displacement Map/Filter. I took that path because it was a built-in operation in Flash . A displacement map works as follows:When rendering a pixel at, instead of grabbing from the texture at, we grab from the texture at an offset:. These offsets are looked up from a special displacement texture,. The displacements are stored in thechannel of this displacement texture. In my shader, that looks as follows:So far so good, Also, have a look at this great explanation by Emanuele Feronato [1]: Note: in Unity, "" requires rendering the entire game to a texture first (a Pro feature). We were doing that anyway in order to get pixel-perfect upscaling.You might wonder: how to generate the texture used for displacement? The Flash game generated abitmap on the fly. But to improve performance, I am now generating ausing Fluid Noise Generator. A normal map stores normal vectors based on a heightmap, it's not quite the same as displacement, but close enough. This is the normal map that I use:In order to make the water look dynamic, I simplythe heightmap (by modifying the texture offset in Unity). Without any extra refinements, the result would look a little like the following: (tweaking the scroll speed and displacement values will actually make it look acceptable).You might notice some "unrealistic" factors:So, let's fix some of these!I want the waves "closer to the camera" to look bigger. So I simply stretched the uv lookup based on the x-coordinate:Unfortunately this operation has to go in theshader instead of theshader, because the uv interpolation is affine. ( Yes, graphics cards actually do perspective correct texturing, but only if your shape is actually in perspective, and not a camera-facing quad . This is a typical situation where faking 3D in 2D gets messy).The result is as follows, when rendering the displacement map itself.On to point two! Let's make the water look a little more chaotic. Generating Perlin noise on the fly would still be an option, but I found another workaround. You might have guessed it from the fact that all my code mentions "displacement": I simply usedisplacement maps overlaid. I generated another normal map that has a higher level of detail, and for each pixel I. Additionally, IThen I added some ambient multiplier based on the waves and I did some math magic to get nicely "rolling" sparkles. Now I'm afraid it looks too "hi-fi" for a pixelart game.Happy to answer any questions! Logged

Check out Check out twitter @noionl for regular updates

dhontecillas







Level 0 Re: ♜ Kingdom ♜ « Reply #34 on: January 31, 2015, 11:53:50 AM » Great post!



Have you timed how big is the win for having the normal map pre-rendered in a texture? I thought that texture fetches in a shaders were more expensive that the actual math operations.









Logged

alvarop







ignorant





Level 9ignorant Re: ♜ Kingdom ♜ « Reply #36 on: March 01, 2015, 10:50:32 AM » Wow, I'm late to the game but the water looks amazing. Gives it a very unique touch too. Logged i make games that can only ever be played once on http://throwaway.fun

lagdog









Level 0 Re: ♜ Kingdom ♜ « Reply #38 on: March 02, 2015, 04:21:06 AM » found the original pretty fun, tho a bit frustrating dealing with the ai at times

looking forward to seeing where this goes : 0 Logged http://forums.tigsource.com/index.php?topic=46360.0



