Skip to content

Commit 4469edb

Browse files
dingpinglvdingpinglv
committed
Issue cocos2d#2806: refactor cc.SkeletonCanvasRenderCmd
1 parent c12d3dd commit 4469edb

File tree

7 files changed

+167
-146
lines changed

7 files changed

+167
-146
lines changed

‎extensions/spine/CCSkeleton.js

+15-1
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,7 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
221221
if (!slot.attachment || slot.attachment.type != sp.ATTACHMENT_TYPE.REGION)
222222
continue;
223223
var attachment = slot.attachment;
224-
sp._regionAttachment_computeWorldVertices(attachment, slot.bone.skeleton.x, slot.bone.skeleton.y, slot.bone, vertices);
224+
this._computeRegionAttachmentWorldVertices(attachment, slot.bone.skeleton.x, slot.bone.skeleton.y, slot.bone, vertices);
225225
minX = Math.min(minX, vertices[VERTEX.X1] * scaleX, vertices[VERTEX.X4] * scaleX, vertices[VERTEX.X2] * scaleX, vertices[VERTEX.X3] * scaleX);
226226
minY = Math.min(minY, vertices[VERTEX.Y1] * scaleY, vertices[VERTEX.Y4] * scaleY, vertices[VERTEX.Y2] * scaleY, vertices[VERTEX.Y3] * scaleY);
227227
maxX = Math.max(maxX, vertices[VERTEX.X1] * scaleX, vertices[VERTEX.X4] * scaleX, vertices[VERTEX.X2] * scaleX, vertices[VERTEX.X3] * scaleX);
@@ -231,6 +231,20 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
231231
return cc.rect(position.x + minX, position.y + minY, maxX - minX, maxY - minY);
232232
},
233233

234+
_computeRegionAttachmentWorldVertices : function(self, x, y, bone, vertices){
235+
var offset = self.offset, vertexIndex = sp.VERTEX_INDEX;
236+
x += bone.worldX;
237+
y += bone.worldY;
238+
vertices[vertexIndex.X1] = offset[vertexIndex.X1] * bone.m00 + offset[vertexIndex.Y1] * bone.m01 + x;
239+
vertices[vertexIndex.Y1] = offset[vertexIndex.X1] * bone.m10 + offset[vertexIndex.Y1] * bone.m11 + y;
240+
vertices[vertexIndex.X2] = offset[vertexIndex.X2] * bone.m00 + offset[vertexIndex.Y2] * bone.m01 + x;
241+
vertices[vertexIndex.Y2] = offset[vertexIndex.X2] * bone.m10 + offset[vertexIndex.Y2] * bone.m11 + y;
242+
vertices[vertexIndex.X3] = offset[vertexIndex.X3] * bone.m00 + offset[vertexIndex.Y3] * bone.m01 + x;
243+
vertices[vertexIndex.Y3] = offset[vertexIndex.X3] * bone.m10 + offset[vertexIndex.Y3] * bone.m11 + y;
244+
vertices[vertexIndex.X4] = offset[vertexIndex.X4] * bone.m00 + offset[vertexIndex.Y4] * bone.m01 + x;
245+
vertices[vertexIndex.Y4] = offset[vertexIndex.X4] * bone.m10 + offset[vertexIndex.Y4] * bone.m11 + y;
246+
},
247+
234248
/**
235249
* Computes the world SRT from the local SRT for each bone.
236250
*/

‎extensions/spine/CCSkeletonAnimation.js

-112
Original file line numberDiff line numberDiff line change
@@ -58,118 +58,6 @@ sp._atlasLoader = {
5858
}
5959
};
6060

61-
sp._regionAttachment_computeWorldVertices = function(self, x, y, bone, vertices){
62-
var offset = self.offset;
63-
x += bone.worldX;
64-
y += bone.worldY;
65-
var vertexIndex = sp.VERTEX_INDEX;
66-
vertices[vertexIndex.X1] = offset[vertexIndex.X1] * bone.m00 + offset[vertexIndex.Y1] * bone.m01 + x;
67-
vertices[vertexIndex.Y1] = offset[vertexIndex.X1] * bone.m10 + offset[vertexIndex.Y1] * bone.m11 + y;
68-
vertices[vertexIndex.X2] = offset[vertexIndex.X2] * bone.m00 + offset[vertexIndex.Y2] * bone.m01 + x;
69-
vertices[vertexIndex.Y2] = offset[vertexIndex.X2] * bone.m10 + offset[vertexIndex.Y2] * bone.m11 + y;
70-
vertices[vertexIndex.X3] = offset[vertexIndex.X3] * bone.m00 + offset[vertexIndex.Y3] * bone.m01 + x;
71-
vertices[vertexIndex.Y3] = offset[vertexIndex.X3] * bone.m10 + offset[vertexIndex.Y3] * bone.m11 + y;
72-
vertices[vertexIndex.X4] = offset[vertexIndex.X4] * bone.m00 + offset[vertexIndex.Y4] * bone.m01 + x;
73-
vertices[vertexIndex.Y4] = offset[vertexIndex.X4] * bone.m10 + offset[vertexIndex.Y4] * bone.m11 + y;
74-
};
75-
76-
/*cc._spCallback = function(state, trackIndex, type,event, loopCount){
77-
state.context.onAnimationStateEvent(trackIndex, type, event, loopCount);
78-
};*/
79-
80-
sp._regionAttachment_updateQuad = function(self, slot, quad, premultipliedAlpha) {
81-
var vertices = {};
82-
self.computeVertices(slot.bone.skeleton.x, slot.bone.skeleton.y, slot.bone, vertices);
83-
var r = slot.bone.skeleton.r * slot.r * 255;
84-
var g = slot.bone.skeleton.g * slot.g * 255;
85-
var b = slot.bone.skeleton.b * slot.b * 255;
86-
var normalizedAlpha = slot.bone.skeleton.a * slot.a;
87-
88-
if (premultipliedAlpha) {
89-
r *= normalizedAlpha;
90-
g *= normalizedAlpha;
91-
b *= normalizedAlpha;
92-
}
93-
var a = normalizedAlpha * 255;
94-
95-
quad.bl.colors.r = quad.tl.colors.r = quad.tr.colors.r = quad.br.colors.r = r;
96-
quad.bl.colors.g = quad.tl.colors.g = quad.tr.colors.g = quad.br.colors.g = g;
97-
quad.bl.colors.b = quad.tl.colors.b = quad.tr.colors.b = quad.br.colors.b = b;
98-
quad.bl.colors.a = quad.tl.colors.a = quad.tr.colors.a = quad.br.colors.a = a;
99-
100-
var VERTEX = sp.VERTEX_INDEX;
101-
quad.bl.vertices.x = vertices[VERTEX.X1];
102-
quad.bl.vertices.y = vertices[VERTEX.Y1];
103-
quad.tl.vertices.x = vertices[VERTEX.X2];
104-
quad.tl.vertices.y = vertices[VERTEX.Y2];
105-
quad.tr.vertices.x = vertices[VERTEX.X3];
106-
quad.tr.vertices.y = vertices[VERTEX.Y3];
107-
quad.br.vertices.x = vertices[VERTEX.X4];
108-
quad.br.vertices.y = vertices[VERTEX.Y4];
109-
110-
quad.bl.texCoords.u = self.uvs[VERTEX.X1];
111-
quad.bl.texCoords.v = self.uvs[VERTEX.Y1];
112-
quad.tl.texCoords.u = self.uvs[VERTEX.X2];
113-
quad.tl.texCoords.v = self.uvs[VERTEX.Y2];
114-
quad.tr.texCoords.u = self.uvs[VERTEX.X3];
115-
quad.tr.texCoords.v = self.uvs[VERTEX.Y3];
116-
quad.br.texCoords.u = self.uvs[VERTEX.X4];
117-
quad.br.texCoords.v = self.uvs[VERTEX.Y4];
118-
};
119-
120-
sp._meshAttachment_updateQuad = function(self, slot, quad, premultipliedAlpha) {
121-
var vertices = {};
122-
self.computeWorldVertices(slot.bone.x, slot.bone.y, slot, vertices);
123-
var r = slot.bone.skeleton.r * slot.r * 255;
124-
var g = slot.bone.skeleton.g * slot.g * 255;
125-
var b = slot.bone.skeleton.b * slot.b * 255;
126-
var normalizedAlpha = slot.bone.skeleton.a * slot.a;
127-
if (premultipliedAlpha) {
128-
r *= normalizedAlpha;
129-
g *= normalizedAlpha;
130-
b *= normalizedAlpha;
131-
}
132-
var a = normalizedAlpha * 255;
133-
134-
quad.bl.colors.r = quad.tl.colors.r = quad.tr.colors.r = quad.br.colors.r = r;
135-
quad.bl.colors.g = quad.tl.colors.g = quad.tr.colors.g = quad.br.colors.g = g;
136-
quad.bl.colors.b = quad.tl.colors.b = quad.tr.colors.b = quad.br.colors.b = b;
137-
quad.bl.colors.a = quad.tl.colors.a = quad.tr.colors.a = quad.br.colors.a = a;
138-
139-
var VERTEX = sp.VERTEX_INDEX;
140-
quad.bl.vertices.x = vertices[VERTEX.X1];
141-
quad.bl.vertices.y = vertices[VERTEX.Y1];
142-
quad.tl.vertices.x = vertices[VERTEX.X2];
143-
quad.tl.vertices.y = vertices[VERTEX.Y2];
144-
quad.tr.vertices.x = vertices[VERTEX.X3];
145-
quad.tr.vertices.y = vertices[VERTEX.Y3];
146-
quad.br.vertices.x = vertices[VERTEX.X4];
147-
quad.br.vertices.y = vertices[VERTEX.Y4];
148-
149-
quad.bl.texCoords.u = self.uvs[VERTEX.X1];
150-
quad.bl.texCoords.v = self.uvs[VERTEX.Y1];
151-
quad.tl.texCoords.u = self.uvs[VERTEX.X2];
152-
quad.tl.texCoords.v = self.uvs[VERTEX.Y2];
153-
quad.tr.texCoords.u = self.uvs[VERTEX.X3];
154-
quad.tr.texCoords.v = self.uvs[VERTEX.Y3];
155-
quad.br.texCoords.u = self.uvs[VERTEX.X4];
156-
quad.br.texCoords.v = self.uvs[VERTEX.Y4];
157-
};
158-
159-
sp._regionAttachment_updateSlotForCanvas = function(self, slot, points) {
160-
if(!points)
161-
return;
162-
163-
var vertices = {};
164-
self.computeVertices(slot.bone.skeleton.x, slot.bone.skeleton.y, slot.bone, vertices);
165-
var VERTEX = sp.VERTEX_INDEX;
166-
points.length = 0;
167-
points.push(cc.p(vertices[VERTEX.X1], vertices[VERTEX.Y1]));
168-
points.push(cc.p(vertices[VERTEX.X4], vertices[VERTEX.Y4]));
169-
points.push(cc.p(vertices[VERTEX.X3], vertices[VERTEX.Y3]));
170-
points.push(cc.p(vertices[VERTEX.X2], vertices[VERTEX.Y2]));
171-
};
172-
17361
/**
17462
* The event type of spine skeleton animation. It contains event types: START(0), END(1), COMPLETE(2), EVENT(3).
17563
* @constant

‎extensions/spine/CCSkeletonCanvasRenderCmd.js

+66-26
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,10 @@
3333
var proto = sp.Skeleton.CanvasRenderCmd.prototype = Object.create(cc.Node.CanvasRenderCmd.prototype);
3434
proto.constructor = sp.Skeleton.CanvasRenderCmd;
3535

36-
proto._drawSkeleton = function(){
37-
38-
};
39-
4036
proto.rendering = function (wrapper, scaleX, scaleY) {
4137
var node = this._node, i, n;
4238
wrapper = wrapper || cc._renderContext;
39+
var context = wrapper.getContext();
4340

4441
var locSkeleton = node._skeleton,color = node.getColor();
4542
locSkeleton.r = color.r / 255;
@@ -52,51 +49,79 @@
5249
locSkeleton.b *= locSkeleton.a;
5350
}
5451

55-
wrapper.setTransform(this._worldTransform, scaleX, scaleY);
56-
wrapper.save();
52+
/*wrapper.setTransform(this._worldTransform, scaleX, scaleY);
53+
context.save();
54+
//draw skeleton by itself.
55+
var slot, attachment, selTexture, selBone, rendererObject;
56+
for (i = 0, n = locSkeleton.drawOrder.length; i < n; i++) {
57+
slot = locSkeleton.drawOrder[i];
58+
if (!slot.attachment)
59+
continue;
5760
58-
/* //draw skeleton sprite by it self
59-
wrapper.save();
61+
attachment = slot.attachment;
62+
rendererObject = attachment.rendererObject;
63+
selTexture = rendererObject.page._texture;
64+
if(!selTexture || !selTexture._textureLoaded || !slot.bone)
65+
continue;
66+
67+
selBone = slot.bone;
68+
//context.transform(selBone.m00, selBone.m01, selBone.m10, selBone.m11, selBone.worldX, selBone.worldY);
69+
context.translate(selBone.worldX, selBone.worldY);
70+
context.scale(selBone.worldScaleX, selBone.worldScaleY);
71+
console.log(selBone);
72+
context.rotate(selBone.worldRotation);
73+
context.drawImage(selTexture._htmlElementObj,
74+
rendererObject.x, rendererObject.y, rendererObject.width, rendererObject.height,
75+
//locX * scaleX, locY * scaleY, locWidth * scaleX, locHeight * scaleY);
76+
0, 0, rendererObject.width * scaleX, rendererObject.height * scaleY);
77+
78+
}
79+
context.restore();*/
80+
81+
//draw skeleton sprite by it self
82+
/* wrapper.save();
6083
//set to armature mode (spine need same way to draw)
6184
wrapper._switchToArmatureMode(true, this._worldTransform, scaleX, scaleY);
62-
for(i = 0, n = sprites.length; i < n; i++){
85+
var sprites = this._skeletonSprites, slot, selSpriteCmd,attachment;
86+
for (i = 0, n = sprites.length; i < n; i++) {
6387
selSpriteCmd = sprites[i]._renderCmd;
64-
if(sprites[i]._visible && selSpriteCmd && selSpriteCmd.rendering){
88+
if (sprites[i]._visible && selSpriteCmd && selSpriteCmd.rendering) {
6589
selSpriteCmd.rendering(wrapper, scaleX, scaleY);
6690
selSpriteCmd._dirtyFlag = 0;
6791
}
6892
}
6993
wrapper._switchToArmatureMode(false);
7094
wrapper.restore();*/
7195

72-
//draw skeleton by itself.
73-
var slot, attachment;
74-
for (i = 0, n = locSkeleton.drawOrder.length; i < n; i++) {
75-
slot = locSkeleton.drawOrder[i];
76-
if (!slot.attachment)
77-
continue;
78-
79-
attachment = slot.attachment;
80-
var regionTextureAtlas = node.getTextureAtlas(attachment);
96+
//set to armature mode (spine need same way to draw)
97+
var sprites = this._skeletonSprites, slot, selSpriteCmd,attachment;
98+
for (i = 0, n = sprites.length; i < n; i++) {
99+
selSpriteCmd = sprites[i]._renderCmd;
100+
if (sprites[i]._visible && selSpriteCmd && selSpriteCmd.rendering) {
101+
selSpriteCmd.transform(this, false);
102+
selSpriteCmd.rendering(wrapper, scaleX, scaleY);
103+
selSpriteCmd._dirtyFlag = 0;
104+
}
81105
}
82-
wrapper.restore();
83106

84107
if (!node._debugSlots && !node._debugBones)
85108
return;
86-
109+
wrapper.setTransform(this._worldTransform, scaleX, scaleY);
87110
var drawingUtil = cc._drawingUtil;
88111
if (node._debugSlots) {
89112
// Slots.
90113
drawingUtil.setDrawColor(0, 0, 255, 255);
91114
drawingUtil.setLineWidth(1);
92115

93116
var points = [];
94-
for (i = 0, n = locSkeleton.slots.length; i < n; i++) {
117+
var drawOrder = node._skeleton.drawOrder;
118+
for (i = 0, n = drawOrder.length; i < n; i++) {
119+
//for (i = 0, n = locSkeleton.slots.length; i < n; i++) {
95120
slot = locSkeleton.drawOrder[i];
96121
if (!slot.attachment || slot.attachment.type != sp.ATTACHMENT_TYPE.REGION)
97122
continue;
98123
attachment = slot.attachment;
99-
sp._regionAttachment_updateSlotForCanvas(attachment, slot, points);
124+
this._updateRegionAttachmentSlot(attachment, slot, points);
100125
drawingUtil.drawPoly(points, 4, true);
101126
}
102127
}
@@ -129,6 +154,19 @@
129154
}
130155
};
131156

157+
proto._updateRegionAttachmentSlot = function(attachment, slot, points) {
158+
if(!points)
159+
return;
160+
161+
var vertices = {}, VERTEX = sp.VERTEX_INDEX, bone = slot.bone;
162+
attachment.computeVertices(bone.skeleton.x, bone.skeleton.y, bone, vertices);
163+
points.length = 0;
164+
points.push(cc.p(vertices[VERTEX.X1], vertices[VERTEX.Y1]));
165+
points.push(cc.p(vertices[VERTEX.X4], vertices[VERTEX.Y4]));
166+
points.push(cc.p(vertices[VERTEX.X3], vertices[VERTEX.Y3]));
167+
points.push(cc.p(vertices[VERTEX.X2], vertices[VERTEX.Y2]));
168+
};
169+
132170
proto._createChildFormSkeletonData = function(){
133171
var node = this._node;
134172
var locSkeleton = node._skeleton, rendererObject, rect;
@@ -182,11 +220,13 @@
182220
selSprite.setBlendFunc(cc.BLEND_SRC, slot.data.additiveBlending ? cc.ONE : cc.BLEND_DST);
183221

184222
var bone = slot.bone;
185-
selSprite.setPosition(bone.worldX + attachment.x * bone.m00 + attachment.y * bone.m01,
186-
bone.worldY + attachment.x * bone.m10 + attachment.y * bone.m11);
223+
selSprite.setPosition(bone.worldX, bone.worldY);
187224
selSprite.setScale(bone.worldScaleX, bone.worldScaleY);
188-
selSprite.setRotation(-(slot.bone.worldRotation + attachment.rotation));
225+
//selSprite.setRotation(-(slot.bone.worldRotation + attachment.rotation));
226+
selSprite.setRotation(-bone.worldRotation);
189227
selSprite.setOpacity(0 | (node._skeleton.a * slot.a * 255));
228+
selSprite.setFlippedX(bone.flipX);
229+
selSprite.setFlippedY(bone.flipY);
190230
var r = 0 | (node._skeleton.r * slot.r * 255);
191231
var g = 0 | (node._skeleton.g * slot.g * 255);
192232
var b = 0 | (node._skeleton.b * slot.b * 255);

0 commit comments

Comments
 (0)