Funky Koval's Recent Forum Activity

  • blurymind

    It's a .zip file. It can't compromise your system. chrisbrobs has an alternate one you may try.

  • [quote:33gzisdu]its quite simple - just have the ability to assign a color that is other than black to the vignette.

    <img src="{SMILIES_PATH}/icon_e_biggrin.gif" alt=":D" title="Very Happy">

    Download link below. Enjoy. If this is the effect you're after, I'd suggest changing the thread title so people know there's a solution.

    http://s000.tinyupload.com/?file_id=001 ... 4537071831

  • Gigatron

    Thanks. Yup, now I understand.

  • Gigatron

    [quote:phb8iiij]instead mixing textured palette with texture ; here is mixing glsl gradient with texture..

    will send this glsl to you soon ;

    Yup. This will settle the out-of-screen sampling problem. I'm doing something similar, but the problem I have is a compact UI for more than two colors - ideally one color is 4 floats, R G B and position, so the UI gets cluttered. Unless it's possible to send vectors from C2 to the shaders... I only saw floats and percentages though...

  • C2-DEX Fullscreen Version by Funky Koval and Gigatron, original by Tulamide.

    http://s000.tinyupload.com/?file_id=86337528332899979782 - UPDATED WITH VALPHACLIP EFFECT

    C2-DEX Fullscreen Version is a palette remapper, based on C-DEX (https://www.scirra.com/forum/effect-c-dex_t69823) for Construct Classic by Tulamide. With generous help from Gigatron, I managed to get it it working order and am releasing it to the public. The effect is in the "Fullscreen" category. Here are some captures from the demo included:

    Here are some usage instructions:

    -The most important thing to note is that the sprite containing the palette image must fit the game display area completely, otherwise incorrect colors will be sampled and artifacts will appear. That's why it's called the "Fullscreen Version".

    -Palette sprite rotation is not supported, which should be a moot point, since it has to fit the screen.

    -To remap the whole screen without any masking, all that's needed is the palette sprite stretched across the screen with the effect applied.

    -Masking the effect uses the palette sprite's Alpha channel - the only limitation is that the pixel row from which the remap palette is taken has to be completely opaque. More about this in the parameter description section...

    UPDATE Use VAlphaClip on the mask objects to clip them as they get close to the screen vertical edges. See updated demo .capx

    -A more dynamic way of masking would be applying the effect to a layer and using the Destination Out blend mode on alpha sprites to cut the layer alpha (this method is shown in the .capx file). However, the limitation above applies - the palette row has to stay opaque.

    UPDATE See above for workaround.

    And now for the parameter descriptions:

    Palette Y - the pixel row that will be used as the remap palette. 0 would be the top-most row and 1 the bottom. Inbetweens are handled accordingly. Remember that this particular row has to be completely opaque, otherwise invalid colors will be sampled.

    Invert Mask Alpha - inverts the effect masking.

    Intensity - blends the original colors with the remapped colors. If set to 0, effect has no... effect. If 1, only the remapped image is visible.

    Have fun and enjoy the effect. And now to why it says "help needed" in the subject:

    -For all shader writers: how would one write a shader that works like the "Destination Out" blend mode, but only on Alpha, preserving RGB? Using this shader on the masks would remove the limitation of having the palette pixel row fully opaque.

    Any help is most apprectiated.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Gigatron

    I've managed to get a full-window version of C2-DEX working well. There are still a few minor issues that do not inhibit the basic functionality of the effect which I'd like to resolve, but it is more or less ready for people to test. I'll post it in its own thread to stop spamming this one, since it's a request theread, but I am eagerly awaiting your version.

  • The forum truncated the link. Use something like TinyURL to shorten it.

  • Mattertainment

    First thought, there's something wrong with the .obj - upload it and I'll take a look.

  • I think I understand how you're doing it, but how will it handle cases whre the remap palette is not a simple two-color gradient? Like that sushi cat image I posted?

    Anyway, I'll wait for your shader and try to disect it. Thanks again.

  • Actually, I don't think sampling colors from the background would be a good idea... I was thinking about using the Alpha Channel to store the "height". That way, if the sprite image is saved with straight alpha, the color information would be preserved in the transparent areas.

    Alpha of 0.0 would be a special case, where the "slice" would not be drawn at all - I noticed your demo only has what looks like 1-bit transparency.

    This would make the whole setup more flexible - what do you think?

  • This looks amazing. If it's flexble enough, it could be used to create faux-3d environments...

    Can I make feature requests?

    Here goes:

    What if the .fx worked like this:

    And the following parameters were available to the user:

    Number Of Slices - the number of vertical slices

    Parallax Effect - the strength of the slice parallaxing

    Max Height - The maximum "height" of the effect

    Invert Height - inverts the height layer - in the image, the smallest slice would end up at the bottom and the largest on top.

    Height Offset - lets the user "sink" the slices into the screen

    Bottom Color - solid color to fake depth shading

    Bottom Color Intensity - max intensity of the solid color

    ^

    In the image, suppose the bottom color is Black and the intensity is 1

    That means that the bottom slices color is fully black, the middle slice is a 50% mix of the sprite color and black and the top slice has 0% black mixed in.

    If the intensity was 0.5, then the bottom slice would be 50% mix of black and sprite colors, middle slice would be a 25% mix and top slice would only be the sprite colors.

    Top Color

    Top Color Intensity

    ^

    same as the Bottom Color/Intensity, but appied from the top down.

    Sorry for the wall of text - I have no idea how feasible this is or if this is the direction you want to take the effect in. The potential of this effect is amazing - and I'm extremely excited about it.

    Thanks for looking.

  • Gigatron

    [quote:2hga204e]"current" is declared so try this;

    color.rgb = texture2D(samplerFront, vec2(current, uv.y)).rgb

    You are absolutely right. I didn't notice current is the intensity formula. I'm using it in the main function now.

    I think I got the shader code itself working properly... I literally converted the C-DEX shader into GLSL the best I could... The main loop can probably be simplified, but it seems to be working fine. This means Intensity and Offset are working as well.

    That strange problem still remains, where the effect will show black unless I move/drag the sprite out of the window borders... I have no idea why it happens like that or what causes it - do you have any idea what is the issue?

    Here is the code:

    C2-DEX.xml

    <?xml version="1.0" encoding="UTF-8" ?>
    <c2effect>
    	<!-- About -->
    	<id>c2-dex</id>			<!-- A unique ID.  Change this!  Never change the ID after release - change the name instead. -->
    	<name>C2-DEX</name>		<!-- The displayed name of the effect -->
    	<category>Animated FX</category>	<!-- Any category can be used, but try to use one of: Color, Blend, or Distortion -->
    	<description>Gradient mapping effect</description>
    	<author>Gigatron and Funky Koval. Original by Tulamide.</author>
    	
    	<!-- Settings -->
    	
    	<!-- Extend the bounding box for effect processing by a number of pixels to show the edges
    		 of effects which go beyond the object edges, e.g. blur and warp.
    		 Do not set if not strictly necessay!  These options have a performance impact. -->
    	<extend-box-horizontal>0</extend-box-horizontal>
    	<extend-box-vertical>0</extend-box-vertical>
    	
    	<!-- Set to true if the background is sampled (see comments on background sampling in the .fx file) -->
    	<blends-background>true</blends-background>
    	
    	<!-- Set to true if the background is not sampled at 1:1 with the foreground (e.g. the
    		 background texture co-ordinates are modified in some way by the shader, as done
    		 by Glass and Lens) -->
    	<cross-sampling>true</cross-sampling>
    	<preserves-opaqueness>false</preserves-opaqueness>
    	<!-- Set to true if the effect changes by itself over time, e.g. Noise or Warp effects. -->
    	<animated>true</animated>
    	
    	<!-- Parameters -->
    	<parameters>
    		
    	<param>
    			<name>Offset</name>
    			<description>Relative offset from left to right used to animate the color palette.</description>
    			<type>float</type>
    			<initial>0.0</initial>
    			<uniform>offset</uniform>
    	</param>	
    	
    	<param>]
    			<name>Intensity</name>
    			<description>Merge the palette with the original colors by this value.</description>
    			<type>float</type>
    			<initial>1.0</initial>
    			<uniform>intensity</uniform>
    	</param>
     
     	</parameters>
    	
    </c2effect>
    [/code:2hga204e]
    
    [b]C2-DEX.fx[/b]
    [code:2hga204e]
    /* 
     Gradient mapping effect;
     Gigatron and Funky Koval for C2. Original by Tulamide.
     V0.9 almost there
     */
      
    #ifdef GL_ES
    precision mediump float;
    #endif
    
    uniform mediump sampler2D samplerBack;
    uniform mediump sampler2D samplerFront;
    uniform mediump vec2 destStart;
    uniform mediump vec2 destEnd;
    varying mediump vec2 vTex;
    uniform mediump float pixelWidth;
    uniform mediump float pixelHeight;
    
    uniform float intensity;
    uniform float offset;
    
    void main()
    {
    		    
    	float current; 
    	vec4 color =  texture2D(samplerBack, mix(destStart, destEnd, vTex));
          
    	color.rgb /= color.a;
    	current = (color.r + color.g + color.b) / 3.;
    
    	color.rgb = mix(color.rgb , texture2D(samplerFront, vec2(destStart.x + mod((((abs(destEnd.x - destStart.x)) * offset + ((abs(destEnd.x - destStart.x)) - pixelWidth) * current) + pixelWidth / 2.), (abs(destEnd.x - destStart.x))),destStart.y + pixelHeight / 2.)).rgb , intensity);
    
    	color.rgb *= color.a;
        
    	gl_FragColor = vec4(color);
    }
    [/code:2hga204e]
    
    I also renamed the effect to C2-DEX since it's literally a direct port of C-DEX.
    
    It's almost there. Only the runtime glitch remains.
Funky Koval's avatar

Funky Koval

Member since 28 Mar, 2010

None one is following Funky Koval yet!

Trophy Case

  • 14-Year Club
  • Forum Contributor Made 100 posts in the forums
  • Regular Visitor Visited Construct.net 7 days in a row
  • RTFM Read the fabulous manual
  • Email Verified

Progress

18/44
How to earn trophies