@@ -5,16 +5,16 @@ require.config({ | |||||
baseUrl: '', | baseUrl: '', | ||||
waitSeconds: 120, | waitSeconds: 120, | ||||
paths: { | paths: { | ||||
socket: 'plugins/socket', | |||||
wquery: 'plugins/jquery.min', | |||||
socket: 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.slim', | |||||
jquery: 'https://code.jquery.com/jquery-3.4.1.slim.min', | |||||
text: 'plugins/text', | text: 'plugins/text', | ||||
html: 'plugins/html', | html: 'plugins/html', | ||||
css: 'plugins/css', | css: 'plugins/css', | ||||
main: 'js/main', | main: 'js/main', | ||||
helpers: 'js/misc/helpers', | helpers: 'js/misc/helpers', | ||||
particles: 'plugins/pixi.particles', | particles: 'plugins/pixi.particles', | ||||
picture: 'plugins/pixi.picture', | |||||
pixi: 'plugins/pixi.min', | |||||
//picture: 'plugins/pixi.picture', | |||||
pixi: 'https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min', | |||||
howler: 'plugins/howler.min' | howler: 'plugins/howler.min' | ||||
}, | }, | ||||
shim: { | shim: { | ||||
@@ -24,12 +24,12 @@ require.config({ | |||||
socket: { | socket: { | ||||
exports: 'io' | exports: 'io' | ||||
}, | }, | ||||
wquery: { | |||||
jquery: { | |||||
exports: '$' | exports: '$' | ||||
}, | }, | ||||
helpers: { | helpers: { | ||||
deps: [ | deps: [ | ||||
'wquery' | |||||
'jquery' | |||||
] | ] | ||||
}, | }, | ||||
pixi: { | pixi: { | ||||
@@ -40,11 +40,11 @@ require.config({ | |||||
'pixi' | 'pixi' | ||||
] | ] | ||||
}, | }, | ||||
picture: { | |||||
/*picture: { | |||||
deps: [ | deps: [ | ||||
'pixi' | 'pixi' | ||||
] | ] | ||||
}, | |||||
},*/ | |||||
main: { | main: { | ||||
deps: [ | deps: [ | ||||
'helpers', | 'helpers', | ||||
@@ -1,10 +1,55 @@ | |||||
define([ | define([ | ||||
'js/rendering/renderer', | |||||
'picture' | |||||
'js/rendering/renderer'/*, | |||||
'picture'*/ | |||||
], function ( | ], function ( | ||||
renderer, | |||||
picture | |||||
renderer/*, | |||||
picture*/ | |||||
) { | ) { | ||||
const frag = ` | |||||
varying vec2 vTextureCoord; | |||||
uniform sampler2D uSampler; | |||||
uniform vec4 targetColor; | |||||
void main(void) | |||||
{ | |||||
vec4 source = texture2D(uSampler, vTextureCoord); | |||||
//reverse hardlight | |||||
if (source.a == 0.0) { | |||||
gl_FragColor = vec4(0, 0, 0, 0); | |||||
return; | |||||
} | |||||
//yeah, premultiplied | |||||
vec3 Cb = source.rgb/source.a, Cs; | |||||
if (targetColor.a > 0.0) { | |||||
Cs = targetColor.rgb / targetColor.a; | |||||
} | |||||
vec3 multiply = Cb * Cs * 2.0; | |||||
vec3 Cb2 = Cb * 2.0 - 1.0; | |||||
vec3 screen = Cb2 + Cs - Cb2 * Cs; | |||||
vec3 B; | |||||
if (Cs.r <= 0.5) { | |||||
B.r = 0.0; | |||||
} else { | |||||
B.r = screen.r; | |||||
} | |||||
if (Cs.g <= 0.5) { | |||||
B.g = 0.0; | |||||
} else { | |||||
B.g = screen.g; | |||||
} | |||||
if (Cs.b <= 0.5) { | |||||
B.b = 0.0; | |||||
} else { | |||||
B.b = screen.b; | |||||
} | |||||
vec4 res; | |||||
res.xyz = (1.0 - source.a) * Cs + source.a * B; | |||||
res.a = source.a + targetColor.a * (1.0-source.a); | |||||
gl_FragColor = vec4(res.xyz * res.a, res.a); | |||||
}`; | |||||
return { | return { | ||||
type: 'lightPatch', | type: 'lightPatch', | ||||
@@ -34,11 +79,19 @@ define([ | |||||
layerName: 'lightPatches' | layerName: 'lightPatches' | ||||
}); | }); | ||||
sprite.alpha = (0.2 + (Math.random() * 1)) * alpha; | sprite.alpha = (0.2 + (Math.random() * 1)) * alpha; | ||||
sprite.tint = '0x' + this.color; | |||||
//sprite.tint = '0x' + this.color; | |||||
//We assume that target alpha is 1.0 always | |||||
let overlayFilter = new PIXI.Filter(undefined, frag, { | |||||
targetColor: [0.0, 0.0, 0.0, 1.0] | |||||
}); | |||||
//assign the color to rgb array | |||||
sprite.blendMode = PIXI.BLEND_MODES.OVERLAY; | |||||
sprite.pluginName = 'picture'; | |||||
//sprite.blendMode = PIXI.BLEND_MODES.OVERLAY; | |||||
//sprite.pluginName = 'picture'; | |||||
sprite.filters = [overlayFilter]; | |||||
this.patches.push(sprite); | this.patches.push(sprite); | ||||
} | } | ||||
} | } | ||||
@@ -1,9 +1,9 @@ | |||||
define([ | define([ | ||||
'js/rendering/renderer', | |||||
'picture' | |||||
'js/rendering/renderer'/*, | |||||
'picture'*/ | |||||
], function ( | ], function ( | ||||
renderer, | |||||
picture | |||||
renderer/*, | |||||
picture*/ | |||||
) { | ) { | ||||
return { | return { | ||||
build: function (config) { | build: function (config) { | ||||
@@ -6,8 +6,8 @@ define([ | |||||
'js/rendering/tileOpacity', | 'js/rendering/tileOpacity', | ||||
'js/rendering/particles', | 'js/rendering/particles', | ||||
'js/rendering/shaders/outline', | 'js/rendering/shaders/outline', | ||||
'js/rendering/spritePool', | |||||
'picture' | |||||
'js/rendering/spritePool'/*, | |||||
'picture'*/ | |||||
], function ( | ], function ( | ||||
resources, | resources, | ||||
events, | events, | ||||
@@ -16,8 +16,8 @@ define([ | |||||
tileOpacity, | tileOpacity, | ||||
particles, | particles, | ||||
shaderOutline, | shaderOutline, | ||||
spritePool, | |||||
picture | |||||
spritePool/*, | |||||
picture*/ | |||||
) { | ) { | ||||
let pixi = PIXI; | let pixi = PIXI; | ||||
let mRandom = Math.random.bind(Math); | let mRandom = Math.random.bind(Math); | ||||
@@ -71,8 +71,8 @@ define([ | |||||
hiddenRooms: null, | hiddenRooms: null, | ||||
init: function () { | init: function () { | ||||
PIXI.GC_MODES.DEFAULT = PIXI.GC_MODES.AUTO; | |||||
PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST; | |||||
PIXI.settings.GC_MODE = PIXI.GC_MODES.AUTO; | |||||
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; | |||||
events.on('onGetMap', this.onGetMap.bind(this)); | events.on('onGetMap', this.onGetMap.bind(this)); | ||||
events.on('onToggleFullscreen', this.toggleScreen.bind(this)); | events.on('onToggleFullscreen', this.toggleScreen.bind(this)); | ||||
@@ -84,7 +84,9 @@ define([ | |||||
this.showTilesW = Math.ceil((this.width / scale) / 2) + 3; | this.showTilesW = Math.ceil((this.width / scale) / 2) + 3; | ||||
this.showTilesH = Math.ceil((this.height / scale) / 2) + 3; | this.showTilesH = Math.ceil((this.height / scale) / 2) + 3; | ||||
this.renderer = pixi.autoDetectRenderer(this.width, this.height, { | |||||
this.renderer = new PIXI.Renderer({ | |||||
width: this.width, | |||||
height: this.height, | |||||
backgroundColor: '0x2d2136' | backgroundColor: '0x2d2136' | ||||
}); | }); | ||||
@@ -334,7 +336,7 @@ define([ | |||||
this.clean(); | this.clean(); | ||||
spritePool.clean(); | spritePool.clean(); | ||||
this.stage.filters = [new PIXI.filters.VoidFilter()]; | |||||
this.stage.filters = [new PIXI.filters.AlphaFilter()]; | |||||
this.stage.filterArea = new PIXI.Rectangle(0, 0, w * scale, h * scale); | this.stage.filterArea = new PIXI.Rectangle(0, 0, w * scale, h * scale); | ||||
this.hiddenRooms = msg.hiddenRooms; | this.hiddenRooms = msg.hiddenRooms; | ||||
@@ -26,7 +26,7 @@ define([ | |||||
postRender: function () { | postRender: function () { | ||||
this.onEvent('onToggleOptions', this.toggle.bind(this)); | this.onEvent('onToggleOptions', this.toggle.bind(this)); | ||||
//Can only toggle fullscreen directly in a listener, not deferred the way wQuery does it | |||||
//Can only toggle fullscreen directly in a listener, not deferred the way jQuery does it | |||||
this.el.find('.btnScreen')[0].addEventListener('click', this.toggleScreen.bind(this)); | this.el.find('.btnScreen')[0].addEventListener('click', this.toggleScreen.bind(this)); | ||||
this.el.find('.btnNames').on('click', events.emit.bind(events, 'onKeyDown', 'v')); | this.el.find('.btnNames').on('click', events.emit.bind(events, 'onKeyDown', 'v')); | ||||
this.el.find('.btnCharSelect').on('click', this.charSelect.bind(this)); | this.el.find('.btnCharSelect').on('click', this.charSelect.bind(this)); | ||||