From 6a4bb7a4599359e13ec58deefaf77a6f9a395cab Mon Sep 17 00:00:00 2001 From: firebingo Date: Tue, 1 May 2018 22:23:11 -0700 Subject: [PATCH] Changed moveto animations to use quadratic easing instead of exponential. Added shader for screen wipes (e.g. DivaLeftToRightBlackFade). --- Js/Common.js | 17 ++++++++++++ Js/Main.js | 2 +- Js/Player.js | 72 ++++++++++++++++++++++++++++++++++++++++++++++----- Js/Shaders.js | 31 ++++++++++++++++++++++ gulpfile.js | 1 + 5 files changed, 116 insertions(+), 7 deletions(-) create mode 100644 Js/Shaders.js diff --git a/Js/Common.js b/Js/Common.js index 9250c4c..36cf733 100644 --- a/Js/Common.js +++ b/Js/Common.js @@ -92,6 +92,14 @@ class commonFunctions { t = -0.45; } break; + //http://www.gizma.com/easing/ + case "quadinout": + var change = end - start; + t = t * 2; + if (t < 1) { return change/2*t*t + start; } + t--; + return -change/2 * (t*(t-2) - 1) + start; + break; } return (1 - t) * start + t * end; //-(2*x-1)^4 +1 @@ -108,6 +116,15 @@ class commonFunctions { } } + static hexToRgb (hex) { + hex = hex.toString(16); + let bigint = parseInt(hex, 16); + let r = (bigint >> 16) & 255; + let g = (bigint >> 8) & 255; + let b = bigint & 255; + return [r, g, b]; + } + static convertUtageTextTags(text) { text = text.replace(/|<\/speed>/g, ""); text = text.replace(/\\n/g, "
") diff --git a/Js/Main.js b/Js/Main.js index 7cc0ab3..5f99c03 100644 --- a/Js/Main.js +++ b/Js/Main.js @@ -100,7 +100,7 @@ function buildMissionSelectList() { opt.innerText = 'Select Mission'; } else { let m = utage.missionsList[i]; - if(!m.includes('MA3.5-')) { + if(!m.includes('101000111') && !m.includes('MA3.5-')) { continue; } opt.setAttribute('value', m); diff --git a/Js/Player.js b/Js/Player.js index b9fbc82..64dbd9e 100644 --- a/Js/Player.js +++ b/Js/Player.js @@ -32,6 +32,7 @@ class Player { this.assetLoadPercent = 0; this.audioLoadPercent = 0; this.playingVoice = undefined; + this.shaders = {}; } playFile() { @@ -182,6 +183,21 @@ class Player { } } + buildShaders() { + let divalefttorightfade = new PIXI.Filter(null, 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 = function(filterManager, input, output) + { + this.uniforms.dimensions[0] = input.sourceFrame.width + this.uniforms.dimensions[1] = input.sourceFrame.height + filterManager.applyFilter(this, input, output); + } + this.shaders['divalefttorightfade'] = divalefttorightfade; + } //Laoding progress functions onPixiProgress(loader, resource) { @@ -206,6 +222,7 @@ class Player { setTimeout(() => { this.runEvent = true; this.buildLayerContainers(); + this.buildShaders(); resolve(); }, 1000); } else { @@ -263,9 +280,15 @@ class Player { if(pos >= 1) { pos = 1; toRemove.push(i); - if(l.post === "destroy") { - l.object.destroy(); - continue; + var split = l.post.split('|'); + switch(split[0].toLowerCase()) { + case "destroy": + l.object.destroy(); + continue; + case "clearshader": + l.object.filters = null; + l.object.alpha = Number(split[1]); + break; } } switch(l.type) { @@ -293,6 +316,12 @@ class Player { } break; } + case "shader": { + try { + l.object.filters[0].uniforms.time = pos; + l.object.filters[0].apply(); + } catch(error) {} + } default: { let newValue = commonFunctions.lerp(l.initV, l.finalV, pos, inter); let split = l.type.split("."); @@ -353,6 +382,37 @@ class Player { this.layers["bg|whiteFade"].sprite.tint = commonFunctions.getColorFromName(cur.Arg1); this.lerpTargets.push({type: 'alpha', object: this.layers["bg|whiteFade"].sprite, curTime: 0, time: this.waitTime, finalV: 0, initV: 1}); break; + case "divalefttorightblackfade": { + //This has a color but ive always seen it be black and its called black so im just assuming for now. + this.waitTime = Number(cur.Arg6) * 1000; + let sprite = this.layers["bg|whiteFade"].sprite; + let filter = this.shaders['divalefttorightfade']; + var color = commonFunctions.getColorFromName(cur.Arg1); + let rgbcolor = commonFunctions.hexToRgb(color); + sprite.tint = color; + sprite.alpha = 1.0; + filter.uniforms.time = 0.0; + filter.uniforms.fadeincolor = [rgbcolor[0],rgbcolor[1],rgbcolor[2],1.0]; + filter.uniforms.fadeoutcolor = [0.0,0.0,0.0,0.0]; + sprite.filters = [ filter ]; + this.lerpTargets.push({type: 'shader', object: sprite, curTime: 0, time: this.waitTime, post: 'clearshader|1'}); + break; + } + case "divalefttorightclearfade": { + this.waitTime = Number(cur.Arg6) * 1000; + let sprite = this.layers["bg|whiteFade"].sprite + let filter = this.shaders['divalefttorightfade']; + var color = commonFunctions.getColorFromName(cur.Arg1); + let rgbcolor = commonFunctions.hexToRgb(color); + sprite.tint = color; + sprite.alpha = 1.0; + filter.uniforms.time = 0.0; + filter.uniforms.fadeincolor = [0.0,0.0,0.0,0.0]; + filter.uniforms.fadeoutcolor = [rgbcolor[0],rgbcolor[1],rgbcolor[2],1.0]; + sprite.filters = [ filter ]; + this.lerpTargets.push({type: 'shader', object: sprite, curTime: 0, time: this.waitTime, post: 'clearshader|0'}); + break; + } case "bg": { let bgInfo = this.utage.textureInfo[cur.Arg1]; let container = this.layers[this.bgLayerName].container; @@ -436,6 +496,7 @@ class Player { let curChar = this.currentCharacters[c]; if(curChar.charName === cur.Arg1) { let time = Number(cur.Arg6) * 1000; + if(!time) { time = 100; } this.lastCharOffLayer = this.currentCharacters[c].layer; this.lerpTargets.push({type: 'alpha', object: curChar.sprite, curTime: 0, time: time, finalV: 0, initV: 1, post: "destroy" }); this.currentCharacters[c] = undefined; @@ -628,7 +689,6 @@ class Player { switch(cur.Arg2.toLowerCase()) { case "moveto": { let props = commonFunctions.getPropertiesFromTweenCommand(cur.Arg3); - debugger; //moveto has a islocal value that im just assuming is true until I run into a case it actually isint. //note that islocal is local to the layer's position not the characters current position so the final pos will be 0 + what the command says if(!cur.Arg6 || cur.Arg6 !== "NoWait") { @@ -637,7 +697,7 @@ class Player { if(props.x != undefined) { if(props.time) { this.lerpTargets.push({type: 'position.x', object: curChar.sprite, curTime: 0 - (props.delay || 0), time: props.time, - finalV: props.x, initV: curChar.sprite.position.x, inter: 'exp' }); + finalV: props.x, initV: curChar.sprite.position.x, inter: 'quadinout' }); } else { curChar.sprite.position.x = props.x; } @@ -645,7 +705,7 @@ class Player { if(props.y != undefined) { if(props.time) { this.lerpTargets.push({type: 'position.y', object: curChar.sprite, curTime: 0 - (props.delay || 0), time: props.time, - finalV: props.y, initV: curChar.sprite.position.y, inter: 'exp' }); + finalV: props.y, initV: curChar.sprite.position.y, inter: 'quadinout' }); } else { curChar.sprite.position.y = props.y; } diff --git a/Js/Shaders.js b/Js/Shaders.js new file mode 100644 index 0000000..362ec88 --- /dev/null +++ b/Js/Shaders.js @@ -0,0 +1,31 @@ +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; + + 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; +}` +//http://glslsandbox.com/e#39992.0 \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 9209824..d09ca9b 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -8,6 +8,7 @@ const jsonmin = require('gulp-jsonminify'); const jsFiles = [ "Js/Common.js", +"JS/Shaders.js", "Js/TextFunctions.js", "Js/UtageParse.js", "Js/Audio.js",