Changed moveto animations to use quadratic easing instead of exponential.
Added shader for screen wipes (e.g. DivaLeftToRightBlackFade).
This commit is contained in:
parent
00eaff29fb
commit
6a4bb7a459
17
Js/Common.js
17
Js/Common.js
@ -92,6 +92,14 @@ class commonFunctions {
|
|||||||
t = -0.45;
|
t = -0.45;
|
||||||
}
|
}
|
||||||
break;
|
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;
|
return (1 - t) * start + t * end;
|
||||||
//-(2*x-1)^4 +1
|
//-(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) {
|
static convertUtageTextTags(text) {
|
||||||
text = text.replace(/<speed.*?>|<\/speed>/g, "");
|
text = text.replace(/<speed.*?>|<\/speed>/g, "");
|
||||||
text = text.replace(/\\n/g, "<br/>")
|
text = text.replace(/\\n/g, "<br/>")
|
||||||
|
@ -100,7 +100,7 @@ function buildMissionSelectList() {
|
|||||||
opt.innerText = 'Select Mission';
|
opt.innerText = 'Select Mission';
|
||||||
} else {
|
} else {
|
||||||
let m = utage.missionsList[i];
|
let m = utage.missionsList[i];
|
||||||
if(!m.includes('MA3.5-')) {
|
if(!m.includes('101000111') && !m.includes('MA3.5-')) {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
opt.setAttribute('value', m);
|
opt.setAttribute('value', m);
|
||||||
|
68
Js/Player.js
68
Js/Player.js
@ -32,6 +32,7 @@ class Player {
|
|||||||
this.assetLoadPercent = 0;
|
this.assetLoadPercent = 0;
|
||||||
this.audioLoadPercent = 0;
|
this.audioLoadPercent = 0;
|
||||||
this.playingVoice = undefined;
|
this.playingVoice = undefined;
|
||||||
|
this.shaders = {};
|
||||||
}
|
}
|
||||||
|
|
||||||
playFile() {
|
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
|
//Laoding progress functions
|
||||||
onPixiProgress(loader, resource) {
|
onPixiProgress(loader, resource) {
|
||||||
@ -206,6 +222,7 @@ class Player {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.runEvent = true;
|
this.runEvent = true;
|
||||||
this.buildLayerContainers();
|
this.buildLayerContainers();
|
||||||
|
this.buildShaders();
|
||||||
resolve();
|
resolve();
|
||||||
}, 1000);
|
}, 1000);
|
||||||
} else {
|
} else {
|
||||||
@ -263,9 +280,15 @@ class Player {
|
|||||||
if(pos >= 1) {
|
if(pos >= 1) {
|
||||||
pos = 1;
|
pos = 1;
|
||||||
toRemove.push(i);
|
toRemove.push(i);
|
||||||
if(l.post === "destroy") {
|
var split = l.post.split('|');
|
||||||
|
switch(split[0].toLowerCase()) {
|
||||||
|
case "destroy":
|
||||||
l.object.destroy();
|
l.object.destroy();
|
||||||
continue;
|
continue;
|
||||||
|
case "clearshader":
|
||||||
|
l.object.filters = null;
|
||||||
|
l.object.alpha = Number(split[1]);
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
switch(l.type) {
|
switch(l.type) {
|
||||||
@ -293,6 +316,12 @@ class Player {
|
|||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
case "shader": {
|
||||||
|
try {
|
||||||
|
l.object.filters[0].uniforms.time = pos;
|
||||||
|
l.object.filters[0].apply();
|
||||||
|
} catch(error) {}
|
||||||
|
}
|
||||||
default: {
|
default: {
|
||||||
let newValue = commonFunctions.lerp(l.initV, l.finalV, pos, inter);
|
let newValue = commonFunctions.lerp(l.initV, l.finalV, pos, inter);
|
||||||
let split = l.type.split(".");
|
let split = l.type.split(".");
|
||||||
@ -353,6 +382,37 @@ class Player {
|
|||||||
this.layers["bg|whiteFade"].sprite.tint = commonFunctions.getColorFromName(cur.Arg1);
|
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});
|
this.lerpTargets.push({type: 'alpha', object: this.layers["bg|whiteFade"].sprite, curTime: 0, time: this.waitTime, finalV: 0, initV: 1});
|
||||||
break;
|
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": {
|
case "bg": {
|
||||||
let bgInfo = this.utage.textureInfo[cur.Arg1];
|
let bgInfo = this.utage.textureInfo[cur.Arg1];
|
||||||
let container = this.layers[this.bgLayerName].container;
|
let container = this.layers[this.bgLayerName].container;
|
||||||
@ -436,6 +496,7 @@ class Player {
|
|||||||
let curChar = this.currentCharacters[c];
|
let curChar = this.currentCharacters[c];
|
||||||
if(curChar.charName === cur.Arg1) {
|
if(curChar.charName === cur.Arg1) {
|
||||||
let time = Number(cur.Arg6) * 1000;
|
let time = Number(cur.Arg6) * 1000;
|
||||||
|
if(!time) { time = 100; }
|
||||||
this.lastCharOffLayer = this.currentCharacters[c].layer;
|
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.lerpTargets.push({type: 'alpha', object: curChar.sprite, curTime: 0, time: time, finalV: 0, initV: 1, post: "destroy" });
|
||||||
this.currentCharacters[c] = undefined;
|
this.currentCharacters[c] = undefined;
|
||||||
@ -628,7 +689,6 @@ class Player {
|
|||||||
switch(cur.Arg2.toLowerCase()) {
|
switch(cur.Arg2.toLowerCase()) {
|
||||||
case "moveto": {
|
case "moveto": {
|
||||||
let props = commonFunctions.getPropertiesFromTweenCommand(cur.Arg3);
|
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.
|
//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
|
//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") {
|
if(!cur.Arg6 || cur.Arg6 !== "NoWait") {
|
||||||
@ -637,7 +697,7 @@ class Player {
|
|||||||
if(props.x != undefined) {
|
if(props.x != undefined) {
|
||||||
if(props.time) {
|
if(props.time) {
|
||||||
this.lerpTargets.push({type: 'position.x', object: curChar.sprite, curTime: 0 - (props.delay || 0), time: 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 {
|
} else {
|
||||||
curChar.sprite.position.x = props.x;
|
curChar.sprite.position.x = props.x;
|
||||||
}
|
}
|
||||||
@ -645,7 +705,7 @@ class Player {
|
|||||||
if(props.y != undefined) {
|
if(props.y != undefined) {
|
||||||
if(props.time) {
|
if(props.time) {
|
||||||
this.lerpTargets.push({type: 'position.y', object: curChar.sprite, curTime: 0 - (props.delay || 0), time: 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 {
|
} else {
|
||||||
curChar.sprite.position.y = props.y;
|
curChar.sprite.position.y = props.y;
|
||||||
}
|
}
|
||||||
|
31
Js/Shaders.js
Normal file
31
Js/Shaders.js
Normal file
@ -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
|
@ -8,6 +8,7 @@ const jsonmin = require('gulp-jsonminify');
|
|||||||
|
|
||||||
const jsFiles = [
|
const jsFiles = [
|
||||||
"Js/Common.js",
|
"Js/Common.js",
|
||||||
|
"JS/Shaders.js",
|
||||||
"Js/TextFunctions.js",
|
"Js/TextFunctions.js",
|
||||||
"Js/UtageParse.js",
|
"Js/UtageParse.js",
|
||||||
"Js/Audio.js",
|
"Js/Audio.js",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user