mirror of
https://github.com/logsol/chuck.js.git
synced 2026-05-11 10:37:34 +00:00
colorfull shirts
This commit is contained in:
Jeena
parent
40cdf9867e
commit
2213a50623
4 changed files with 163 additions and 70 deletions
|
|
@ -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,
|
||||
|
|
|
|||
89
app/Game/Client/View/Views/Pixi/ColorRangeReplaceFilter.js
Normal file
89
app/Game/Client/View/Views/Pixi/ColorRangeReplaceFilter.js
Normal file
|
|
@ -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;
|
||||
});
|
||||
|
|
@ -2,75 +2,21 @@ define([
|
|||
"Game/Client/View/Views/AbstractView",
|
||||
"Game/Client/View/DomController",
|
||||
"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;
|
||||
}
|
||||
|
|
|
|||
41
app/Lib/Utilities/ColorConverter.js
Normal file
41
app/Lib/Utilities/ColorConverter.js
Normal file
|
|
@ -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<max*step+start; r+=step) {
|
||||
for(var g=start; g<max*step+start; g+=step) {
|
||||
for(var b=start; b<max*step+start; b+=step) {
|
||||
|
||||
color = r.toString(16)
|
||||
+ r.toString(16)
|
||||
+ g.toString(16)
|
||||
+ g.toString(16)
|
||||
+ b.toString(16)
|
||||
+ b.toString(16);
|
||||
|
||||
palette.push(parseInt(color, 16));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.palette = palette;
|
||||
}
|
||||
|
||||
ColorConverter.prototype.getColorByName = function(name) {
|
||||
var ac = 0;
|
||||
for(var c = 0; c < name.length; c++) {
|
||||
ac += name.charCodeAt(c);
|
||||
}
|
||||
return this.palette[ac * 9 % this.palette.length];
|
||||
}
|
||||
|
||||
return ColorConverter;
|
||||
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue