ErekT's Recent Forum Activity

  • 0.13 seems to have worse webgl performance than 0.12, my intel iris could handle 0.12 fine but now there's stutter.

  • I messed around in package and package-win.json quite a bit with nothing happening. Not a sausage. But then I remembered; my project uses the node-webkit object and not the nwjs object! They're functionally identical as far as I know but only nwjs will access package-win.json in the nwjs folder obviously. Hoo man. Now it works.

    Thanks for all the help

  • I'm already using it :-/

    This is what I get before going fullscreen:

    ... and this is The Next Penelope using a custom res:

  • Hmm, I tried changing width and height in the different json files but it didn't make a difference. Good guess tho, thanks I think I'll try to contact the guy who made Last Penelope next and ask how he did it.

  • Yeah, for a split second there I see a window that then gets blown up to fullscreen. Ideally I'd like to have it run at fullscreen immediately but I know there's a way to customize the resolution for that loader window too. I've seen it done before in the C2 game The Last Penelope. Thanks for helping out btw

  • Oh okay, so the loader window is supposed to be set to Window Size from the project settings? That's not what's happening here. I have fullscreen set to Letterbox Scale but the runtime still starts out in a small window until it's finished loading. And yep, I want it to start in fullscreen right away.

  • Yeah the initial loader window is set to something like 350x280 resolution and then when the loader layout starts out the game goes fullscreen like it's supposed to. That's normal behaviour right?

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • Like the title says, I need to change the default loader window size to a higher resolution. It's possible, I just don't know how. Something in index.html or c2runtime.js maybe? Help?

  • Thanks a bunch for that It's interesting to see how you structure things by breaking them up into separate functions.

    I made some progress with my own conversion as well. It doesn't blend with the background like it should and there's some hefty artifacting going on, but it's a start.

    Gigatron:

    ErekT:

    There's also some kind of interpolation weirdness in both our conversions (mine especially) that needs addressing.

    Finally, if I want to assign the shader to a separate layer that affects everything underneath I need to read from samplerBack, do shader magic to it, and then write the result to samplerFront which represents the layer in question. Right?

    /////////////////////////////////////////////////////////
// FXAA effect

#ifndef FXAA_REDUCE_MIN
    #define FXAA_REDUCE_MIN   (1.0/ 128.0)
#endif
#ifndef FXAA_REDUCE_MUL
    #define FXAA_REDUCE_MUL   (1.0 / 8.0)
#endif
#ifndef FXAA_SPAN_MAX
    #define FXAA_SPAN_MAX     8.0
#endif

precision lowp float;

varying mediump vec2 vTex;
uniform lowp sampler2D samplerFront;
uniform lowp sampler2D samplerBack;
uniform mediump vec2 destStart;
uniform mediump vec2 destEnd;

uniform highp float WindowsWidth;
uniform highp float WindowsHeight;

void main(void)
{
    lowp vec4 front = texture2D(samplerFront, vTex);
    lowp vec4 back = texture2D(samplerBack, mix(destStart, destEnd, vTex));

    mediump vec2 resolution = vec2(WindowsWidth, WindowsHeight);
    mediump vec2 inverseVP = vec2(1.0 / WindowsWidth, 1.0 / WindowsHeight);
    vec3 rgbNW = texture2D(samplerFront, vTex + (vec2(-1.0,-1.0)/resolution)).xyz;
    vec3 rgbNE = texture2D(samplerFront, vTex + (vec2(1.0,-1.0)/resolution)).xyz;
    vec3 rgbSW = texture2D(samplerFront, vTex + (vec2(-1.0,1.0)/resolution)).xyz;
    vec3 rgbSE = texture2D(samplerFront, vTex + (vec2(1.0,1.0)/resolution)).xyz;
    vec3 rgbM  = texture2D(samplerFront, vTex).xyz;

    vec3 luma = vec3(0.299, 0.587, 0.114);
    float lumaNW = dot(rgbNW, luma);
    float lumaNE = dot(rgbNE, luma);
    float lumaSW = dot(rgbSW, luma);
    float lumaSE = dot(rgbSE, luma);
    float lumaM  = dot(rgbM,  luma);

    float lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));
    float lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));
    
    mediump vec2 dir;
    dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));
    dir.y =  ((lumaNW + lumaSW) - (lumaNE + lumaSE));
    
    float dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) *
                          (0.25 * FXAA_REDUCE_MUL), FXAA_REDUCE_MIN);
    
    float rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce);
    dir = min(vec2(FXAA_SPAN_MAX, FXAA_SPAN_MAX),
              max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX),
              dir * rcpDirMin)) / resolution;
    
    vec3 rgbA = 0.5 * ( 
	texture2D(samplerFront, vTex + dir * (1.0 / 3.0 - 0.5)).xyz +
        texture2D(samplerFront, vTex + dir * (2.0 / 3.0 - 0.5)).xyz);
    vec3 rgbB = rgbA * 0.5 + 0.25 * (
        texture2D(samplerFront, vTex + dir * -0.5).xyz +
        texture2D(samplerFront, vTex + dir * 0.5).xyz);

    float lumaB = dot(rgbB, luma);
    if((lumaB < lumaMin) || (lumaB > lumaMax))
        gl_FragColor.xyz=rgbA;
    else
        gl_FragColor.xyz=rgbB;

}
[/code:1rpu4wdf]

  • Hmm. I get this error from the line "gl_FragColor = mix(gl_FragColor, color);":

    'mix': no matching overloaded function found.

    'assign': cannot convert from 'const float' to 'Fragcolor mediump 4-component vector of float'

    Any shader-experts out there who knows what's going on?

    Here's the full shader code:

    /////////////////////////////////////////////////////////
// FXAA effect

#ifndef FXAA_REDUCE_MIN
    #define FXAA_REDUCE_MIN   (1.0/ 128.0)
#endif
#ifndef FXAA_REDUCE_MUL
    #define FXAA_REDUCE_MUL   (1.0 / 8.0)
#endif
#ifndef FXAA_SPAN_MAX
    #define FXAA_SPAN_MAX     8.0
#endif

precision mediump float;

varying mediump vec2 vTex;
uniform lowp sampler2D samplerFront;
uniform lowp sampler2D samplerBack;
uniform mediump vec2 destStart;
uniform mediump vec2 destEnd;

uniform highp float WindowWidth;
uniform highp float WindowHeight;

void main(void)
{
    lowp vec4 front = texture2D(samplerFront, vTex);
    lowp vec4 back = texture2D(samplerBack, mix(destStart, destEnd, vTex));

    vec2 v_rgbNW;
    vec2 v_rgbNE;
    vec2 v_rgbSW;
    vec2 v_rgbSE;
    vec2 v_rgbM;

    vec4 color;
    mediump vec2 inverseVP = vec2(1.0 / WindowWidth, 1.0 / WindowHeight);
    vec3 rgbNW = texture2D(samplerFront, v_rgbNW).xyz;
    vec3 rgbNE = texture2D(samplerFront, v_rgbNE).xyz;
    vec3 rgbSW = texture2D(samplerFront, v_rgbSW).xyz;
    vec3 rgbSE = texture2D(samplerFront, v_rgbSE).xyz;
    vec4 texColor = texture2D(samplerFront, v_rgbM);
    vec3 rgbM  = texColor.xyz;
    vec3 luma = vec3(0.299, 0.587, 0.114);
    float lumaNW = dot(rgbNW, luma);
    float lumaNE = dot(rgbNE, luma);
    float lumaSW = dot(rgbSW, luma);
    float lumaSE = dot(rgbSE, luma);
    float lumaM  = dot(rgbM,  luma);
    float lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));
    float lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));
    
    mediump vec2 dir;
    dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));
    dir.y =  ((lumaNW + lumaSW) - (lumaNE + lumaSE));
    
    float dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) *
                          (0.25 * FXAA_REDUCE_MUL), FXAA_REDUCE_MIN);
    
    float rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce);
    dir = min(vec2(FXAA_SPAN_MAX, FXAA_SPAN_MAX),
              max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX),
              dir * rcpDirMin)) * inverseVP;
    
    vec3 rgbA = 0.5 * ( 
	texture2D(samplerFront, vTex * inverseVP + dir * (1.0 / 3.0 - 0.5)).xyz +
        texture2D(samplerFront, vTex * inverseVP + dir * (2.0 / 3.0 - 0.5)).xyz);
    vec3 rgbB = rgbA * 0.5 + 0.25 * (
        texture2D(samplerFront, vTex * inverseVP + dir * -0.5).xyz +
        texture2D(samplerFront, vTex * inverseVP + dir * 0.5).xyz);

    float lumaB = dot(rgbB, luma);
    if ((lumaB < lumaMin) || (lumaB > lumaMax))
        color = vec4(rgbA, texColor.a);
    else
        color = vec4(rgbB, texColor.a);

    gl_FragColor = mix(gl_FragColor, color);
}
[/code:3gbyn4a7]

  • Okay I see. Thanks for the pointers

    I have been sniffing around the various shaders that come with C2 and an FXAA shader I found on the net, and I'm starting to get an idea of what's what. I tried converting an FXAA shader I found on the net but get greeted with this error straight off the bat:

    Error reading XML file

    Unknown effect parameter type

    Line 36, column 9

    Element c2effect \ parameters \ param

    ... which is very strange since the XML is basically a straight copy/paste job from an existing effect. Man this isn't very confidence-building :/

    XML:

    <?xml version="1.0" encoding="UTF-8" ?>
<c2effect>
	<!-- About -->
	<id>fxaa</id>			<!-- Never change the ID.  Change the name instead -->
	<name>FXAA</name>
	<category>Blend</category>
	<description>Apply FX antialiasing.</description>
	<author>ErekT</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. -->
	<extend-box-horizontal>0</extend-box-horizontal>
	<extend-box-vertical>0</extend-box-vertical>
	
	<!-- Set to true if the background is sampled (samplerBack is referenced at all in the shader) -->
	<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>false</cross-sampling>
	
	<!-- Set to true if the shader does not modify the opaque areas of the foreground. In other words
		 any opaque pixels in the original image are output in the same position and still fully opaque.
		 This is used to optimise the front-to-back renderer's depth pass, since it can still write depth
		 and skip overdraw for any objects using only shaders which preserve opaqueness. -->
	<preserves-opaqueness>false</preserves-opaqueness>
	
	<!-- Set to true if the effect changes over time, e.g. Noise or Warp effects. -->
	<animated>false</animated>
	
	<!-- Parameters -->
	<parameters>
		<param>
			<name>Width</name>
			<description>Game resolution X</description>
			<type>int</type>
			<initial>0</initial>
			<uniform>WindowWidth</uniform>
		</param>
		<param>
			<name>Height</name>
			<description>Game resolution Y</description>
			<type>int</type>
			<initial>0</initial>
			<uniform>WindowHeight</uniform>
		</param>
	</parameters>
</c2effect>

[/code:rmnp6ym2]

The shader itself:
[code:rmnp6ym2]
/////////////////////////////////////////////////////////
// FXAA effect

varying mediump vec2 vTex;
uniform lowp sampler2D samplerFront;
uniform lowp sampler2D samplerBack;
uniform mediump vec2 destStart;
uniform mediump vec2 destEnd;

//uniform lowp sampler2D tex;
//uniform mediump vec2 fragCoord;
uniform highp int WindowWidth;
uniform highp int WindowHeight;

void main(void)
{
	lowp vec4 front = texture2D(samplerFront, vTex);
	lowp vec4 back = texture2D(samplerBack, mix(destStart, destEnd, vTex));

            vec2 v_rgbNW, vec2 v_rgbNE, 
            vec2 v_rgbSW, vec2 v_rgbSE, 
            vec2 v_rgbM) {
    vec4 color;
    mediump vec2 inverseVP = vec2(1.0 / WindowWidth, 1.0 / WindowHeight);
    vec3 rgbNW = texture2D(samplerFront, v_rgbNW).xyz;
    vec3 rgbNE = texture2D(samplerFront, v_rgbNE).xyz;
    vec3 rgbSW = texture2D(samplerFront, v_rgbSW).xyz;
    vec3 rgbSE = texture2D(samplerFront, v_rgbSE).xyz;
    vec4 texColor = texture2D(samplerFront, v_rgbM);
    vec3 rgbM  = texColor.xyz;
    vec3 luma = vec3(0.299, 0.587, 0.114);
    float lumaNW = dot(rgbNW, luma);
    float lumaNE = dot(rgbNE, luma);
    float lumaSW = dot(rgbSW, luma);
    float lumaSE = dot(rgbSE, luma);
    float lumaM  = dot(rgbM,  luma);
    float lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));
    float lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));
    
    mediump vec2 dir;
    dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));
    dir.y =  ((lumaNW + lumaSW) - (lumaNE + lumaSE));
    
    float dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) *
                          (0.25 * FXAA_REDUCE_MUL), FXAA_REDUCE_MIN);
    
    float rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce);
    dir = min(vec2(FXAA_SPAN_MAX, FXAA_SPAN_MAX),
              max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX),
              dir * rcpDirMin)) * inverseVP;
    
    vec3 rgbA = 0.5 * ( 
	texture2D(samplerFront, vTex * inverseVP + dir * (1.0 / 3.0 - 0.5)).xyz +
        texture2D(samplerFront, vTex * inverseVP + dir * (2.0 / 3.0 - 0.5)).xyz);
    vec3 rgbB = rgbA * 0.5 + 0.25 * (
        texture2D(samplerFront, vTex * inverseVP + dir * -0.5).xyz +
        texture2D(samplerFront, vTex * inverseVP + dir * 0.5).xyz);

    float lumaB = dot(rgbB, luma);
    if ((lumaB < lumaMin) || (lumaB > lumaMax))
        color = vec4(rgbA, texColor.a);
    else
        color = vec4(rgbB, texColor.a);

    gl_FragColor = mix(gl_FragColor, color);
}
[/code:rmnp6ym2]

EDIT:
Seems 'int' isn't acceptable syntax so I replaced it with a float for now.

  • Cool, thanks I'll check those out.

ErekT's avatar

ErekT

Member since 17 Dec, 2012

Twitter
ErekT has 1 followers

Trophy Case

  • 12-Year Club
  • Email Verified

Progress

13/44
How to earn trophies