Move tweens now just use quadout instead of inout.
Made shaders a class to make it easier to add more in future. Added shaders for updown and downup fades. Fix loading characters with no pattern (e.g. black_mask) not working. Gave ability to cancel lerps in case a character gets put on then immediately faded to another alpha.
This commit is contained in:
firebingo
parent
338d42d2a1
commit
6134339bc6
4 changed files with 332 additions and 157 deletions
227
Js/Shaders.js
227
Js/Shaders.js
|
|
@ -1,61 +1,170 @@
|
|||
//http://glslsandbox.com/e#39992.0
|
||||
const leftToRightFadeShader = `
|
||||
precision mediump float;
|
||||
varying vec2 vTextureCoord;
|
||||
uniform vec2 dimensions;
|
||||
uniform vec4 filterArea;
|
||||
|
||||
uniform float time;
|
||||
uniform vec4 fadeincolor;
|
||||
uniform vec4 fadeoutcolor;
|
||||
|
||||
vec2 mapCoord( vec2 coord ) {
|
||||
coord *= filterArea.xy;
|
||||
return coord;
|
||||
}
|
||||
|
||||
void main( void ) {
|
||||
vec2 uv = vTextureCoord;
|
||||
vec2 mappedCoord = mapCoord(uv) / dimensions;
|
||||
class Shaders {
|
||||
constructor() {
|
||||
this.leftToRightFadeShader = `
|
||||
precision mediump float;
|
||||
varying vec2 vTextureCoord;
|
||||
uniform vec2 dimensions;
|
||||
uniform vec4 filterArea;
|
||||
|
||||
uniform float time;
|
||||
uniform vec4 fadeincolor;
|
||||
uniform vec4 fadeoutcolor;
|
||||
|
||||
vec2 mapCoord( vec2 coord ) {
|
||||
coord *= filterArea.xy;
|
||||
return coord;
|
||||
}
|
||||
|
||||
void main( void ) {
|
||||
vec2 uv = vTextureCoord;
|
||||
vec2 mappedCoord = mapCoord(uv) / dimensions;
|
||||
|
||||
float step2 = time;
|
||||
float step3 = time + 0.2;
|
||||
step3 = clamp(step3, -1.0, 1.0);
|
||||
float step4 = 1.0;
|
||||
|
||||
vec4 color = fadeincolor;
|
||||
color = mix(color, fadeoutcolor, smoothstep(step2, step3, mappedCoord.x));
|
||||
color = mix(color, fadeoutcolor, smoothstep(step3, step4, mappedCoord.x));
|
||||
|
||||
gl_FragColor = color;
|
||||
}`
|
||||
this.rightToLeftFadeShader = `
|
||||
precision mediump float;
|
||||
varying vec2 vTextureCoord;
|
||||
uniform vec2 dimensions;
|
||||
uniform vec4 filterArea;
|
||||
|
||||
uniform float time;
|
||||
uniform vec4 fadeincolor;
|
||||
uniform vec4 fadeoutcolor;
|
||||
|
||||
vec2 mapCoord( vec2 coord ) {
|
||||
coord *= filterArea.xy;
|
||||
return coord;
|
||||
}
|
||||
|
||||
void main( void ) {
|
||||
vec2 uv = vTextureCoord;
|
||||
vec2 mappedCoord = mapCoord(uv) / dimensions;
|
||||
|
||||
float step2 = (1.0 - time);
|
||||
float step3 = (1.0 - time) - 0.2;
|
||||
step3 = clamp(step3, 0.0, 1.0);
|
||||
float step4 = -0.0001;
|
||||
|
||||
vec4 color = fadeincolor;
|
||||
color = mix(color, fadeoutcolor, smoothstep(step2, step3, mappedCoord.x));
|
||||
color = mix(color, fadeoutcolor, smoothstep(step3, step4, mappedCoord.x));
|
||||
|
||||
gl_FragColor = color;
|
||||
}`
|
||||
this.downToUpFadeShader = `
|
||||
precision mediump float;
|
||||
varying vec2 vTextureCoord;
|
||||
uniform vec2 dimensions;
|
||||
uniform vec4 filterArea;
|
||||
|
||||
uniform float time;
|
||||
uniform vec4 fadeincolor;
|
||||
uniform vec4 fadeoutcolor;
|
||||
|
||||
vec2 mapCoord( vec2 coord ) {
|
||||
coord *= filterArea.xy;
|
||||
return coord;
|
||||
}
|
||||
|
||||
void main( void ) {
|
||||
vec2 uv = vTextureCoord;
|
||||
vec2 mappedCoord = mapCoord(uv) / dimensions;
|
||||
|
||||
float step2 = (1.0 - time);
|
||||
float step3 = (1.0 - time) - 0.2;
|
||||
step3 = clamp(step3, 0.0, 1.0);
|
||||
float step4 = -0.0001;
|
||||
|
||||
vec4 color = fadeincolor;
|
||||
color = mix(color, fadeoutcolor, smoothstep(step2, step3, mappedCoord.y));
|
||||
color = mix(color, fadeoutcolor, smoothstep(step3, step4, mappedCoord.y));
|
||||
|
||||
gl_FragColor = color;
|
||||
}`
|
||||
this.uptoDownFadeShader = `
|
||||
precision mediump float;
|
||||
varying vec2 vTextureCoord;
|
||||
uniform vec2 dimensions;
|
||||
uniform vec4 filterArea;
|
||||
|
||||
uniform float time;
|
||||
uniform vec4 fadeincolor;
|
||||
uniform vec4 fadeoutcolor;
|
||||
|
||||
vec2 mapCoord( vec2 coord ) {
|
||||
coord *= filterArea.xy;
|
||||
return coord;
|
||||
}
|
||||
|
||||
void main( void ) {
|
||||
vec2 uv = vTextureCoord;
|
||||
vec2 mappedCoord = mapCoord(uv) / dimensions;
|
||||
|
||||
float step2 = time;
|
||||
float step3 = time + 0.2;
|
||||
step3 = clamp(step3, -1.0, 1.0);
|
||||
float step4 = 1.0;
|
||||
|
||||
vec4 color = fadeincolor;
|
||||
color = mix(color, fadeoutcolor, smoothstep(step2, step3, mappedCoord.y));
|
||||
color = mix(color, fadeoutcolor, smoothstep(step3, step4, mappedCoord.y));
|
||||
|
||||
gl_FragColor = color;
|
||||
}`
|
||||
this.shaders = {};
|
||||
}
|
||||
|
||||
float step2 = time;
|
||||
float step3 = time + 0.2;
|
||||
step3 = clamp(step3, -1.0, 1.0);
|
||||
float step4 = 1.0;
|
||||
|
||||
vec4 color = fadeincolor;
|
||||
color = mix(color, fadeoutcolor, smoothstep(step2, step3, mappedCoord.x));
|
||||
color = mix(color, fadeoutcolor, smoothstep(step3, step4, mappedCoord.x));
|
||||
|
||||
gl_FragColor = color;
|
||||
}`
|
||||
const rightToLeftFadeShader = `
|
||||
precision mediump float;
|
||||
varying vec2 vTextureCoord;
|
||||
uniform vec2 dimensions;
|
||||
uniform vec4 filterArea;
|
||||
|
||||
uniform float time;
|
||||
uniform vec4 fadeincolor;
|
||||
uniform vec4 fadeoutcolor;
|
||||
|
||||
vec2 mapCoord( vec2 coord ) {
|
||||
coord *= filterArea.xy;
|
||||
return coord;
|
||||
}
|
||||
|
||||
void main( void ) {
|
||||
vec2 uv = vTextureCoord;
|
||||
vec2 mappedCoord = mapCoord(uv) / dimensions;
|
||||
|
||||
float step2 = (1.0 - time);
|
||||
float step3 = (1.0 - time) - 0.2;
|
||||
step3 = clamp(step3, 0.0, 1.0);
|
||||
float step4 = -0.0001;
|
||||
|
||||
vec4 color = fadeincolor;
|
||||
color = mix(color, fadeoutcolor, smoothstep(step2, step3, mappedCoord.x));
|
||||
color = mix(color, fadeoutcolor, smoothstep(step3, step4, mappedCoord.x));
|
||||
|
||||
gl_FragColor = color;
|
||||
}`
|
||||
buildShaders() {
|
||||
let divalefttorightfade = new PIXI.Filter(null, this.leftToRightFadeShader, {
|
||||
time: { type: 'f', value: 0 },
|
||||
dimensions: { type: 'v2', value: [baseDimensions.width, baseDimensions.height] },
|
||||
fadeincolor: { type: 'v4', value: [0.0,0.0,0.0,1.0] },
|
||||
fadeoutcolor: { type: 'v4', value: [0.0,0.0,0.0,0.0] }
|
||||
});
|
||||
divalefttorightfade.apply = baseShaderApply;
|
||||
this.shaders['divalefttorightfade'] = divalefttorightfade;
|
||||
|
||||
let divarighttoleftfade = new PIXI.Filter(null, this.rightToLeftFadeShader, {
|
||||
time: { type: 'f', value: 0 },
|
||||
dimensions: { type: 'v2', value: [baseDimensions.width, baseDimensions.height] },
|
||||
fadeincolor: { type: 'v4', value: [0.0,0.0,0.0,1.0] },
|
||||
fadeoutcolor: { type: 'v4', value: [0.0,0.0,0.0,0.0] }
|
||||
});
|
||||
divarighttoleftfade.apply = baseShaderApply;
|
||||
this.shaders['divarighttoleftfade'] = divarighttoleftfade;
|
||||
|
||||
let divauptodownfade = new PIXI.Filter(null, this.uptoDownFadeShader, {
|
||||
time: { type: 'f', value: 0 },
|
||||
dimensions: { type: 'v2', value: [baseDimensions.width, baseDimensions.height] },
|
||||
fadeincolor: { type: 'v4', value: [0.0,0.0,0.0,1.0] },
|
||||
fadeoutcolor: { type: 'v4', value: [0.0,0.0,0.0,0.0] }
|
||||
});
|
||||
divauptodownfade.apply = baseShaderApply;
|
||||
this.shaders['divauptodownfade'] = divauptodownfade;
|
||||
|
||||
let divadowntoupfade = new PIXI.Filter(null, this.downToUpFadeShader, {
|
||||
time: { type: 'f', value: 0 },
|
||||
dimensions: { type: 'v2', value: [baseDimensions.width, baseDimensions.height] },
|
||||
fadeincolor: { type: 'v4', value: [0.0,0.0,0.0,1.0] },
|
||||
fadeoutcolor: { type: 'v4', value: [0.0,0.0,0.0,0.0] }
|
||||
});
|
||||
divadowntoupfade.apply = baseShaderApply;
|
||||
this.shaders['divadowntoupfade'] = divadowntoupfade;
|
||||
|
||||
function baseShaderApply(filterManager, input, output) {
|
||||
this.uniforms.dimensions[0] = input.sourceFrame.width
|
||||
this.uniforms.dimensions[1] = input.sourceFrame.height
|
||||
filterManager.applyFilter(this, input, output);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue