Back in March I made a thread asking about color tinting for canvas and the answer was that it couldn't be done without WebGL - and so now I'm happily working with the WebGL runtime and I'm back at it. I'm happy to see that if I tint something in the Spine program itself, it'll render out to the canvas now. Huzzah!
But, my new goal is to use a color picker to dynamically change a slot's tint at runtime. The html is basic:
<span> Hair Color: <input id="hair_color" type="color"> </span>And then I've got some jQuery going on:
/* Everytime a new color is chosen: */
$("#hair_color").change(function() {
var color = hexToRgb($(this).val());
console.log(color.b); // As an example, calling color.b will return just the blue value :D
});
/* This is used above to convert the hex value from the html5 colorpicker into rgb values: */
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}Now I've got access to the RGB values I want to change my "forelock" slot to (not the bone color, not an attachment, but the slot - and in doing so, tint all of the attachments associated with that slot). So, what now?
var skeleton = skeletons[activeSkeleton].skeleton;
console.log(skeleton.findSlot("forelock").data.color); // Returns the existing "forelock" slot color, I know that much?
I not sure where to begin to figure out what to do to actually change a slot color. :$
See here:
