add bone and attachment color

flyover · Apr 22, 2016 · afbe525 · afbe525
1 parent 345fdd8
commit afbe525
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/demo/render-ctx2d.js b/demo/render-ctx2d.js
@@ -274,6 +274,8 @@ RenderCtx2D.prototype.drawPose = function(spine_pose, atlas_data) {
         ctxApplySpace(ctx, attachment.local_space);
         ctxApplyAtlasSitePosition(ctx, site);
         ctx.scale(attachment.width / 2, attachment.height / 2);
+        // TODO: attachment.color.rgb
+        ctx.globalAlpha *= attachment.color.a;
         ctxDrawImageMesh(ctx, render.region_vertex_triangle, render.region_vertex_position, render.region_vertex_texcoord, image, site, page);
         break;
       case 'mesh':
@@ -284,6 +286,8 @@ RenderCtx2D.prototype.drawPose = function(spine_pose, atlas_data) {
         var bone = spine_pose.bones[slot.bone_key];
         ctxApplySpace(ctx, bone.world_space);
         ctxApplyAtlasSitePosition(ctx, site);
+        // TODO: attachment.color.rgb
+        ctx.globalAlpha *= attachment.color.a;
         ctxDrawImageMesh(ctx, attachment_info.vertex_triangle, attachment_info.vertex_position, attachment_info.vertex_texcoord, image, site, page);
         break;
       case 'weightedmesh':
@@ -292,6 +296,8 @@ RenderCtx2D.prototype.drawPose = function(spine_pose, atlas_data) {
         var slot_info = skin_info.slot_info_map[slot_key] || default_skin_info.slot_info_map[slot_key];
         var attachment_info = slot_info.attachment_info_map[attachment_key];
         ctxApplyAtlasSitePosition(ctx, site);
+        // TODO: attachment.color.rgb
+        ctx.globalAlpha *= attachment.color.a;
         ctxDrawImageMesh(ctx, attachment_info.vertex_triangle, attachment_info.vertex_blend_position, attachment_info.vertex_texcoord, image, site, page);
         break;
     }
@@ -383,7 +389,7 @@ RenderCtx2D.prototype.drawDebugPose = function(spine_pose, atlas_data) {
     ctx.closePath();
     ctx.strokeStyle = 'white';
     ctx.stroke();
-    ctxDrawPoint(ctx);
+    ctxDrawPoint(ctx, strColor(bone.color));
     ctx.scale(1, -1);
     ctx.fillText(bone_key, 0, 0);
     ctx.restore();
@@ -473,7 +479,7 @@ RenderCtx2D.prototype.drawDebugData = function(spine_pose, atlas_data) {
     ctx.closePath();
     ctx.strokeStyle = 'white';
     ctx.stroke();
-    ctxDrawPoint(ctx);
+    ctxDrawPoint(ctx, strColor(bone.color));
     ctx.scale(1, -1);
     ctx.fillText(bone_key, 0, 0);
     ctx.restore();
@@ -482,6 +488,10 @@ RenderCtx2D.prototype.drawDebugData = function(spine_pose, atlas_data) {
   ctxDrawIkConstraints(ctx, spine_pose.data, spine_pose.data.bones);
 }
 
+function strColor(color) {
+  return 'rgba(' + (color.r * 255) + ',' + (color.g * 255) + ',' + (color.b * 255) + ',' + color.a + ')';
+}
+
 function ctxApplySpace(ctx, space) {
   if (space) {
     ctx.translate(space.position.x, space.position.y);

diff --git a/demo/render-webgl.js b/demo/render-webgl.js
@@ -526,17 +526,17 @@ RenderWebGL.prototype.drawPose = function(spine_pose, atlas_data) {
     gl.enable(gl.BLEND);
     switch (slot.blend) {
       default:
-        case 'normal':
+      case 'normal':
         gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-      break;
+        break;
       case 'additive':
-          gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
         break;
       case 'multiply':
-          gl.blendFunc(gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA);
+        gl.blendFunc(gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA);
         break;
       case 'screen':
-          gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
+        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
         break;
     }
 
@@ -547,6 +547,7 @@ RenderWebGL.prototype.drawPose = function(spine_pose, atlas_data) {
         mat3x3ApplySpace(gl_modelview, attachment.local_space);
         mat3x3Scale(gl_modelview, attachment.width / 2, attachment.height / 2);
         mat3x3ApplyAtlasSitePosition(gl_modelview, site);
+        vec4ApplyColor(gl_color, attachment.color);
 
         var gl_shader = render.gl_mesh_shader;
         var gl_vertex = render.gl_region_vertex;
@@ -582,6 +583,7 @@ RenderWebGL.prototype.drawPose = function(spine_pose, atlas_data) {
         var bone = spine_pose.bones[slot.bone_key];
         mat3x3ApplySpace(gl_modelview, bone.world_space);
         mat3x3ApplyAtlasSitePosition(gl_modelview, site);
+        vec4ApplyColor(gl_color, attachment.color);
 
         var anim = spine_pose.data.anims[spine_pose.anim_key];
         var anim_ffd = anim && anim.ffds && anim.ffds[spine_pose.skin_key];
@@ -691,6 +693,7 @@ RenderWebGL.prototype.drawPose = function(spine_pose, atlas_data) {
             mat3x3ApplyAtlasSitePosition(modelview, site);
           }
         }
+        vec4ApplyColor(gl_color, attachment.color);
 
         var anim = spine_pose.data.anims[spine_pose.anim_key];
         var anim_ffd = anim && anim.ffds && anim.ffds[spine_pose.skin_key];