Kil10 development 01-25-2016

Background paintings

Background painting, making the background seemless.

Background painting / fixing. We also have to make it tilable.

Shaders

Main menu shader (before/after)

Vertex

//
// TV Fx vertex shader
//
attribute vec3 in_Position;                  // (x,y,z)
//attribute vec3 in_Normal;                  // (x,y,z)     unused in this shader.
attribute vec4 in_Colour;                    // (r,g,b,a)
attribute vec2 in_TextureCoord;              // (u,v)

varying vec2 v_vTexcoord;
varying vec4 v_vColour;

void main()
{
    vec4 object_space_pos = vec4( in_Position.x, in_Position.y, in_Position.z, 1.0);
    gl_Position = gm_Matrices[MATRIX_WORLD_VIEW_PROJECTION] * object_space_pos;

    v_vColour = in_Colour;
    v_vTexcoord = in_TextureCoord;
}

Fragment

uniform float g_Time;

uniform vec4 m_FilterColor;
uniform float m_ColorDensity;
uniform float m_RandomValue;
uniform float m_NoiseDensity;
uniform float m_ScratchDensity;
uniform float m_ScanLinesDensity;
uniform float m_ScanLinesSpace;
uniform bool m_ShowNoise;
uniform bool m_ShowScratch;
uniform bool m_ShowScanLines;
uniform bool m_ShowFlicker;
uniform bool m_ShowBorder;

varying vec2 v_vTexcoord;
varying vec4 v_vColour;

/*vec2 resolution = vec2(1.0,1.0);

float rand(vec2 co) {
  return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}*/

// Computes the overlay between the source and destination colours.
vec3 overlay(vec3 src, vec3 dst){
  float aa,bb,cc;

  if (dst.x<=0.5) {aa = (2.0 * src.x * dst.x);} else {aa = (1.0 - 2.0 * (1.0 - dst.x) * (1.0 - src.x));}
  if (dst.y <= 0.5) {bb = (2.0 * src.y * dst.y);} else {bb = (1.0 - 2.0 * (1.0 - dst.y) * (1.0 - src.y));}
  if (dst.z <= 0.5) {cc = (2.0 * src.z * dst.z);} else {cc = (1.0 - 2.0 * (1.0 - dst.z) * (1.0 - src.z));}

  return vec3(aa, bb, cc);
}

// 2D Noise by Ian McEwan, Ashima Arts.
vec3 mod289(vec3 xx) { return xx - floor(xx * (1.0 / 289.0)) * 289.0; }
vec2 mod289(vec2 xx) { return xx - floor(xx * (1.0 / 289.0)) * 289.0; }
vec3 permute(vec3 xx) { return mod289(((xx*34.0)+1.0)*xx); }

float snoise (vec2 v){
  const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0
  0.366025403784439, // 0.5*(sqrt(3.0)-1.0)
  -0.577350269189626, // -1.0 + 2.0 * C.x
  0.024390243902439); // 1.0 / 41.0

  // First corner
  vec2 i = floor(v + dot(v, C.yy) );
  vec2 x0 = v - i + dot(i, C.xx);

  // Other corners
  vec2 i1;
  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
  vec4 x12 = x0.xyxy + C.xxzz;
  x12.xy -= i1;

  // Permutations
  i = mod289(i); // Avoid truncation effects in permutation
  vec3 pp = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))+ i.x + vec3(0.0, i1.x, 1.0 ));

  vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
  m = m*m ;
  m = m*m ;

  // Gradients: 41 points uniformly over a line, mapped onto a diamond.
  // The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)

  vec3 xx = 2.0 * fract(pp * C.www) - 1.0;
  vec3 h = abs(xx) - 0.5;
  vec3 ox = floor(xx + 0.5);
  vec3 a0 = xx - ox;

  // Normalise gradients implicitly by scaling m
  // Approximation of: m *= inversesqrt( a0*a0 + h*h );
  m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );

  // Compute final noise value at P
  vec3 gg;
  gg.x = a0.x * x0.x + h.x * x0.y;
  gg.yz = a0.yz * x12.xz + h.yz * x12.yw;
  return 130.0 * dot(m, gg);
}

void main() {
  vec3 colour;
  // Distort lightly
  /*vec2 q1 = v_vTexcoord.xy / resolution.xy;
  vec2 uv = 0.5 + (q1-0.5)*(0.99 + 0.006);*/
  vec2 uv = v_vTexcoord.xy * 0.986 + 0.007;
  colour.r = texture2D(gm_BaseTexture,vec2(uv.x+0.002,uv.y)).x;
  colour.g = texture2D(gm_BaseTexture,vec2(uv.x+0.0,uv.y)).y;
  colour.b = texture2D(gm_BaseTexture,vec2(uv.x-0.002,uv.y)).z;

  // No distortion
  //colour = texture2D(gm_BaseTexture, v_vTexcoord).rgb;

  // Convert to grayscale
  float gray = (colour.r + colour.g + colour.b) / 3.0;
  vec3 grayscale = vec3(gray);

  // Apply overlay
  vec3 finalColour = overlay(m_FilterColor.rgb, grayscale);

  // Lerp final colour
  float colorFactor = clamp(m_ColorDensity, 0.0, 1.0);
  finalColour = grayscale + colorFactor * (finalColour - grayscale);

  // Add noise
  if(m_ShowNoise==true){
    float noiseFactor = clamp(m_NoiseDensity, 0.0, 1.0);
    float noise = snoise(v_vTexcoord * vec2(1024.0 + m_RandomValue * 540.0, 1024.0 + m_RandomValue * 540.0)) * 0.5;
    finalColour += noise * noiseFactor;
  }

  // Scanlines
  if(m_ShowScanLines==true){
    float linesFactor = clamp(m_ScanLinesDensity, 0.0, 1.0);
    float linesSpace = clamp(m_ScanLinesSpace, 1.0, 540.0);
    float highValLinesFactor = 1.0 - linesFactor;
    finalColour *= (1.0 + highValLinesFactor) * (highValLinesFactor + linesFactor * 
    sin(6.0 * g_Time + v_vTexcoord.y * m_ScanLinesSpace));
  }
  
  // Light flicker
  if(m_ShowFlicker==true){
    finalColour *= 1.0 - 0.04 * fract(tan(g_Time * 100.0)); // rand(vec2(g_Time, tan(g_Time)));
  }

  // Apply scratches
  if(m_ShowScratch==true){
    float scratchFactor = clamp(m_ScratchDensity, 0.0, 1.0);
    if ( m_RandomValue < scratchFactor ){
      // Pick a random spot to show scratches
      float dist = 1.0 / scratchFactor;
      float d = distance(v_vTexcoord, vec2(m_RandomValue * dist, m_RandomValue * dist));
      if ( d < 0.4 ){
        // Generate the scratch
        float xPeriod = 8.0;
        float yPeriod = 1.0;
        float pii = 3.141592;
        float phase = g_Time;
        float turbulence = snoise(v_vTexcoord * 2.5);
        float vScratch = 0.5 + (sin(((v_vTexcoord.x * xPeriod + v_vTexcoord.y * yPeriod + turbulence)) * pii + phase) * 0.5);
        vScratch = clamp((vScratch * 10000.0) + 0.35, 0.0, 1.0);

        finalColour.xyz *= vScratch;
      }
    }
  }

  // Apply brownish burned border
  if(m_ShowBorder== true){
    finalColour *= vec3(1.2, 1.1, 0.8) * pow(0.95 - length(v_vTexcoord.xy - 0.5), 2.0);
  }

  // Apply colour
  gl_FragColor.xyz = finalColour * texture2D(gm_BaseTexture, v_vTexcoord).rgb;
  gl_FragColor.w = 1.0;
}

New greyed blurred shader for the pause menu.

Interface

Four players view

New main menu. Removed the placeholders.

In game flags for the ‘capture the flag” mode.

Early interface (placeholder) vs new. (before/after)

Comparison of early development vs current state (April 2015). About 8 months of development.