Funky Koval's Forum Posts

  • 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.

  • Gigatron

    Thank you for your continued support;

    When I view your online demo, the effect still looks like Multiply. When I put the effect in Construct2 - it does not show in the editor -the Sprite is pure black. When previewed in Nw.js, the sprite with the Effect becomes invisible - it does not affect anything.

    What I tried to do is to understand and modify your shader - note that I have no idea on how to write GLSL shaders - I simply tried to comprehend the math logic.

    I sort-of managed to get the effect working - in the Construct2 editor - here's an image to demonstrate:

    If you preview the .capx, the effect looks pitch black, until you move the PaletteSprite around the scene (it's locked to the mouse position) - it seems to look fine when you move the mouse to the top left edge of the bottom SourceImage... What causes that problem is beyond me...

    Here's the link to the modded .fx and the example .capx

    https://we.tl/0elCj2hYH1

    I changed the following:

    in colormixer_MOD.xml:

    <blends-background>true</blends-background> - this makes the effect preview in the editor.

    in colormixer_MOD.fx:

    replaced:

    color.rgb = mix( color.rgb, texture2D(samplerFront, uv).rgb, intensity );

    with:

    color.rgb = texture2D(samplerFront, vec2(float (((color.r + color.g + color.b) / 3.0)*1.0), 0.5)).rgb;

    ^my hacky logic which sets the final pixel color to the PaletteSprite color at UV coordinates of U=intensity and V=0.5 (which as far as I understand can be any number - vertically the PaletteSprite pixels are identical)

    The effect is almost there, I just don't have the knowledge to resolve the runtime glitching on my own.

    Thanks again.

  • Gigatron

    Strange, on my side the effect looks like a Multiply blend. The intensity value just multiplies the FX sprite's colors.

    The demo you posted looks like a Multiply blend on my computer as well. Could it be something with my setup? I checked the effect in Nw.Js and Firefox, WebGL enabled.

    I also ran another test in Construct Classic using C-DEX and Construct2 using your Color Mixer:

    My input images are:

    The bottom image:

    The top image (the one with the Color Mixer/C-DEX effect):

    Result is on the right side :

    In Construct Classic, using C-DEX:

    -correct result

    In Construct2, using Color Mixer:

    -incorrect, looks like Multiply

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • Gigatron

    Thank you for the demo. If I understand it correctly, the effect applies an offset curve to each color channel, with the overall blend controlled by the mixing slider at he bottom.

    What I am after, however, is a remapping a specific luminance/brightness range to specific colors. Something like this:

    This is just an example, but as you can see, I'm clipping most of the luminance. The current effect would not allow me to achieve such a look.

    Since Construct2 does not allow for a second texture input, what about having parameters in the effect itself, which could be used to specify the luminance position to be remapped along with the color to remap to? Something like:

    Remap Black: [R,G,B]

    Remap Luminance 1 Position: [value from 0-255]

    Remap Luminance 1 Color: [R,G,B]

    Remap Luminance 2 Position: [value from 0-255]

    Remap Luminance 2 Color: [R,G,B]

    etc...

    Remap White: [R,G,B]

    Of course, I'd keep the number of luminance positions low, definitelly below 10, not to clutter the UI. If more would be desired, a second sprite with the rest of the remapping flags could be overlaid on top with an appropriate blending mode.

    This set up would give me the flexibility I need and as an additional bonus, the remapping could be fully controlled with events. What do you think, would such a setup be feasible?

    Thank you again, for your time.

  • Gigatron

    Much obliged. Thank you.

  • Gigatron

    Would a palette re-mapper be possible? Like C-DEX for Construct Classic or Colorama for After Effects?

    Thanks.

  • @QuaziGNRLnose

    Just a feature request, since you're planning to release one last version of Q3D - I have nothing but praises (as a happy purchaser) and I fully understand that the code has become to unwieldy to maintain. No negativity here.

    Would it be possible to implement render style overrides for the Q3DViewport object? Specifically, I'm looking at having multiple viewports showing the same scene/camera, but one having the scene normal displayed (like setting an object's materials to Normal) another showing depth etc. - it would allow me to do runtime "comping". Right now, the only way I can achieve this is creating a literal copy of my base scene and setting all materials to normal etc. Not ideal, as you may know.

    Thanks in advance.

  • QuaziGNRLnose

    Wonderful. Thank you for the prompt reply.

  • QuaziGNRLnose - great to hear you'll be resuming development of Q3D - two quick questions as I'm about to start a new project with it:

    -are there any incompatibilities/issues between the latest version of Construct2 and Q3D 2.4?

    -if so, what is the version of C2 to use with 2.4?

    Thanks.

  • I'm actually using 3DObjects as well, for different parts of the project. The problem is that I need to dynamically alter the shape of the Sprite as a whole, but only at object init. Think of it as randomly generated terrain.

  • The title says it all... Does anyone know how to achieve Sprite rotation similar to Pitch/Yaw/Roll for 3DBoxes or 3DObjects? I can do it by transforming Distort Points, but it's very inefficient to transform every single point...

    Alternatively, how difficult would it be to implement such functionality in Sprites? And would anyone be willing to do it?

    I've reached a point in my project where performance is adversely affected by unnecessarily transforming a crapload of Distort Points. I've decided to seek help here before deciding to cut down on detail.

    Thanks in advance.

  • Pixel Distort

    Performs absolute pixel shifting on underlying data. Download the .cap to see an example. Cannibalized from DistortNormal and Offset.

    The layer with PixelDistort becomes a coordinate array where R,G equals X,Y for picking final color values. Sprite/Canvas dimensions act as a multiplier to distortion values. Only rotations in 90 degrees increments give predictable results.

    *EDIT*

    Updated the shader - functionality is the same, but now for pasting to canvas, Max X distortion and Max Y distortion should just be set to DisplayWidth and DisplayHeight. Also, B and A channel usage has been removed, since the distortion strenght is now relative to the source dimensions.

    // Pixel Distort

    // Q'ba

    // PS 2

    // Shifts BG.RGB values based on FG.RG

    //#CROSS-SAMPLING : changes Tex.xy.

    //#PARAM float xmax 256 : Max X distortion: In pixels. Corresponds to R=255. For pasting into Canvas, set to DisplayWidth.

    float xmax;

    //#PARAM float ymax 256 : Max Y distortion : In pixels. Corresponds to G=255. For pasting into Canvas, set to DisplayHeight.

    float ymax;

    //#PARAM float poff 0.5 : Precission offset : In pixels. Prevents sampling the preceeding/superceeding pixel.

    float poff;

    float pixelWidth;

    float pixelHeight;

    float boxLeft;

    float boxTop;

    // Foreground texture

    texture ForegroundTexture;

    // Background texture

    texture BackgroundTexture;

    // Foreground sampler

    sampler2D foreground = sampler_state {

        Texture = (ForegroundTexture);

        MinFilter = Point;

        MagFilter = Point;

        MipFilter = Point;

    };

    // OriginalTexture sampler

    sampler2D background = sampler_state {

        Texture = (BackgroundTexture);

        MinFilter = Point;

        MagFilter = Point;

        MipFilter = Point;

    };

    // Effect function

    float4 EffectProcess( float2 Tex : TEXCOORD0 ) : COLOR0

    {

         float4 col = tex2D(foreground, Tex.xy);

         {

              Tex.x = boxLeft+pixelWidth*(poff+col.r*xmax);

              Tex.y = boxTop+pixelHeight*(poff+col.g*ymax);

              col = tex2D(background, Tex.xy);

         }

         return col;

    }

    // ConstructEffect

    technique ConstructEffect

    {

        pass p0

        {

            VertexShader = null;

            PixelShader = compile ps_2_0 EffectProcess();

        }

    }

  • Yup. That was one of the first ideas I tried - I even tested it with a 3DBox as well - works fine as long as you do not alter the pitch/roll/yaw values, which I sadly need to do...

    I'll either live with the changing FOV or just render the view at the highest supported res and downscale it, though it's a huge waste of resources...

    Thank you for your help.