diff --git a/app/Game/Client/GameObjects/Doll.js b/app/Game/Client/GameObjects/Doll.js index dccae42..20c2343 100755 --- a/app/Game/Client/GameObjects/Doll.js +++ b/app/Game/Client/GameObjects/Doll.js @@ -2,10 +2,11 @@ define([ "Game/Core/GameObjects/Doll", "Game/Config/Settings", "Lib/Utilities/NotificationCenter", - "Lib/Utilities/Exception" + "Lib/Utilities/Exception", + "Lib/Utilities/ColorConverter" ], -function (Parent, Settings, Nc, Exception) { +function (Parent, Settings, Nc, Exception, ColorConverter) { function Doll(physicsEngine, uid, player) { this.animationDef = { @@ -28,6 +29,10 @@ function (Parent, Settings, Nc, Exception) { this.headMesh = null; this.holdingArmMesh = null; + var converter = new ColorConverter(); + this.primaryColor = converter.getColorByName(player.getNickname()); + console.log(this.primaryColor.toString(16)) + Parent.call(this, physicsEngine, uid, player); } @@ -66,6 +71,17 @@ function (Parent, Settings, Nc, Exception) { Doll.prototype.createMesh = function() { + var self = this; + + var setShirtColor = function (mesh) { + Nc.trigger(Nc.ns.client.view.mesh.addFilter, mesh, 'colorRangeReplace', { + minColor: 0x3b4a31, + maxColor: 0x657f54, + newColor: self.primaryColor, + brightnessOffset: 0.56 + }); + } + // Body var padF = function(n) { @@ -98,6 +114,8 @@ function (Parent, Settings, Nc, Exception) { var callback = function(mesh) { self.animatedMeshesContainer[arm][key] = mesh; Nc.trigger(Nc.ns.client.view.mesh.add, mesh); + + setShirtColor(mesh); }; Nc.trigger(Nc.ns.client.view.animatedMesh.create, texturePaths, callback, { @@ -119,11 +137,6 @@ function (Parent, Settings, Nc, Exception) { var callback = function (mesh) { self.headMesh = mesh; Nc.trigger(Nc.ns.client.view.mesh.add, mesh); - - Nc.trigger(Nc.ns.client.view.mesh.addFilter, mesh, 'pixelate', { - sizeX: 4, - sizeY: 4 - }); } Nc.trigger(Nc.ns.client.view.mesh.create, texturePath, callback, { pivot: { @@ -134,10 +147,14 @@ function (Parent, Settings, Nc, Exception) { height: 12 }); + // Holding arm + texturePath = Settings.GRAPHICS_PATH + "Characters/Chuck/holdingArm.png"; var callback = function (mesh) { self.holdingArmMesh = mesh; Nc.trigger(Nc.ns.client.view.mesh.add, mesh); + + setShirtColor(mesh); } Nc.trigger(Nc.ns.client.view.mesh.create, texturePath, callback, { visible: false, diff --git a/app/Game/Client/View/Views/Pixi/ColorRangeReplaceFilter.js b/app/Game/Client/View/Views/Pixi/ColorRangeReplaceFilter.js new file mode 100644 index 0000000..faf69bf --- /dev/null +++ b/app/Game/Client/View/Views/Pixi/ColorRangeReplaceFilter.js @@ -0,0 +1,89 @@ +define([ + "Lib/Vendor/Pixi" +], + +function (PIXI) { + + var Parent = PIXI.AbstractFilter; + + function ColorRangeReplaceFilter() { + Parent.call(this); + + this.passes = [this]; + + // set the uniforms + + this.uniforms = { + minColor: {type: '3fv', value: [0,0,0]}, + maxColor: {type: '3fv', value: [0,0,0]}, + newColor: {type: '3fv', value: [0,0,0]}, + brightnessOffset: {type: '1f', value: 0} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + 'uniform sampler2D uSampler;', + 'uniform vec3 minColor;', + 'uniform vec3 maxColor;', + 'uniform vec3 newColor;', + 'uniform float brightnessOffset;', + + 'void main(void) {', + ' vec4 pixel = texture2D(uSampler, vTextureCoord);', + ' if(pixel.x >= minColor.x && pixel.y >= minColor.y && pixel.z >= minColor.z', + ' && pixel.w == 1.0', + ' && pixel.x <= maxColor.x && pixel.y <= maxColor.y && pixel.z <= maxColor.z) {', + + ' pixel.rgb = mix(pixel.rgb, vec3(0.2126*pixel.r + 0.7152*pixel.g + 0.0722*pixel.b), 1.0);', // desaturate to gray + ' pixel.rgb += brightnessOffset;', + ' pixel.rgb *= newColor;', + ' }', + ' gl_FragColor = pixel;', + '}' + ]; + } + + ColorRangeReplaceFilter.prototype = Object.create(Parent.prototype); + ColorRangeReplaceFilter.prototype.constructor = ColorRangeReplaceFilter; + + + Object.defineProperty(ColorRangeReplaceFilter.prototype, 'minColor', { + get: function() { + return PIXI.rgb2hex(this.uniforms.minColor.value); + }, + set: function(value) { + this.uniforms.minColor.value = PIXI.hex2rgb(value); + } + }); + + Object.defineProperty(ColorRangeReplaceFilter.prototype, 'maxColor', { + get: function() { + return PIXI.rgb2hex(this.uniforms.maxColor.value); + }, + set: function(value) { + this.uniforms.maxColor.value = PIXI.hex2rgb(value); + } + }); + + Object.defineProperty(ColorRangeReplaceFilter.prototype, 'newColor', { + get: function() { + return PIXI.rgb2hex(this.uniforms.newColor.value); + }, + set: function(value) { + this.uniforms.newColor.value = PIXI.hex2rgb(value); + } + }); + + Object.defineProperty(ColorRangeReplaceFilter.prototype, 'brightnessOffset', { + get: function() { + return this.uniforms.brightnessOffset.value; + }, + set: function(value) { + this.uniforms.brightnessOffset.value = value; + } + }); + + return ColorRangeReplaceFilter; +}); diff --git a/app/Game/Client/View/Views/PixiView.js b/app/Game/Client/View/Views/PixiView.js index 88d9ec7..829048b 100755 --- a/app/Game/Client/View/Views/PixiView.js +++ b/app/Game/Client/View/Views/PixiView.js @@ -1,76 +1,22 @@ define([ "Game/Client/View/Views/AbstractView", "Game/Client/View/DomController", - "Lib/Vendor/Pixi", + "Lib/Vendor/Pixi", + "Game/Client/View/Views/Pixi/ColorRangeReplaceFilter", "Game/Config/Settings", "Lib/Utilities/NotificationCenter", "Lib/Utilities/Exception" ], -function (Parent, DomController, PIXI, Settings, Nc, Exception) { +function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Exception) { var AVAILABLE_MESH_FILTERS = { "blur": PIXI.BlurFilter, "desaturate": PIXI.GrayFilter, "pixelate": PIXI.PixelateFilter, - "colorRangeReplace": ColorRangeReplace, + "colorRangeReplace": ColorRangeReplaceFilter, }; - var ColorRangeReplace = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - gray: {type: '1f', value: 1}, - shirtColor: {type: '4fv', value: [1,1,1,1]} - }; - - this.fragmentSrc = [ - 'precision mediump float;', - 'varying vec2 vTextureCoord;', - 'varying vec4 vColor;', - 'uniform float invert;', - 'uniform mat4 matrix;', - 'uniform sampler2D uSampler;', - 'uniform float gray;', - 'uniform vec4 shirtColor;', - - 'void main(void) {', - ' vec4 pixel = texture2D(uSampler, vTextureCoord);', - ' vec3 min_color = vec3(49.0/256.0, 64.0/256.0, 39.0/256.0);', - ' vec3 max_color = vec3(106.0/256.0, 131.0/256.0, 90.0/256.0);', - ' if(pixel.x >= min_color.x && pixel.y >= min_color.y && pixel.z >= min_color.z', - ' &&', - ' pixel.x <= max_color.x && pixel.y <= max_color.y && pixel.z <= max_color.z) {', - ' pixel.rgb = mix(pixel.rgb, vec3(0.2126*pixel.r + 0.7152*pixel.g + 0.0722*pixel.b), gray);', - ' pixel = pixel * shirtColor;', - ' }', - ' gl_FragColor = pixel;', - - // ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', - // ' gl_FragColor = gl_FragColor;', - '}' - ]; - }; -/* - ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); - ColorMatrixFilter.prototype.constructor = ColorMatrixFilter; - - Object.defineProperty(ColorMatrixFilter.prototype, 'matrix', { - get: function() { - return this.uniforms.matrix.value; - }, - set: function(value) { - this.uniforms.matrix.value = value; - } - }); -*/ function PixiView () { Parent.call(this); @@ -196,9 +142,10 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception) { break; case 'colorRangeReplace': - if (options.min) filter.min = options.min; - if (options.max) filter.max = options.max; - if (options.new) filter.new = options.new; + if (options.minColor) filter.minColor = options.minColor; + if (options.maxColor) filter.maxColor = options.maxColor; + if (options.newColor) filter.newColor = options.newColor; + if (options.brightnessOffset) filter.brightnessOffset = options.brightnessOffset; break; case 'pixelate': @@ -221,8 +168,6 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception) { filters.push(filter); mesh.filters = filters; - - console.log(mesh.filters) }; PixiView.prototype.removeFilter = function(mesh, filterName) { @@ -456,6 +401,7 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception) { }; PixiView.prototype.onZoomIn = function() { + console.log("onZoomIn") if(this.currentZoom + Settings.ZOOM_FACTOR <= Settings.ZOOM_MAX) { this.currentZoom += Settings.ZOOM_FACTOR; } diff --git a/app/Lib/Utilities/ColorConverter.js b/app/Lib/Utilities/ColorConverter.js new file mode 100644 index 0000000..ca1ffb7 --- /dev/null +++ b/app/Lib/Utilities/ColorConverter.js @@ -0,0 +1,41 @@ +define([ +], + +function () { + + function ColorConverter() { + var palette = []; + var element, color; + var start = 4; + var step = 2; + var max = 6; + for(var r=start; r