Skip to content

Commit 88fa7ff

Browse files
author
minggo
committed
spine works on canvas
1 parent eb8e61d commit 88fa7ff

File tree

6 files changed

+5467
-2781
lines changed

6 files changed

+5467
-2781
lines changed

‎extensions/spine/CCSkeleton.js

+6-20
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
183183
if (cc.isString(argAtlasFile)) {
184184
var data = cc.loader.getRes(argAtlasFile);
185185
sp._atlasLoader.setAtlasFile(argAtlasFile);
186-
atlas = new spine.Atlas(data, sp._atlasLoader);
186+
atlas = new spine.TextureAtlas(data, sp._atlasLoader.load.bind(sp._atlasLoader));
187187
} else {
188188
atlas = atlasFile;
189189
}
@@ -212,14 +212,14 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
212212
getBoundingBox: function () {
213213
var minX = cc.FLT_MAX, minY = cc.FLT_MAX, maxX = cc.FLT_MIN, maxY = cc.FLT_MIN;
214214
var scaleX = this.getScaleX(), scaleY = this.getScaleY(), vertices = [],
215-
slots = this._skeleton.slots, VERTEX = sp.VERTEX_INDEX;
215+
slots = this._skeleton.slots, VERTEX = spine.RegionAttachment;
216216

217217
for (var i = 0, slotCount = slots.length; i < slotCount; ++i) {
218218
var slot = slots[i];
219-
if (!slot.attachment || slot.attachment.type != sp.ATTACHMENT_TYPE.REGION)
219+
if (!slot.attachment || ! (attachment instanceof spine.RegionAttachment))
220220
continue;
221221
var attachment = slot.attachment;
222-
this._computeRegionAttachmentWorldVertices(attachment, slot.bone.skeleton.x, slot.bone.skeleton.y, slot.bone, vertices);
222+
vertices = attachment.updateWorldVertices(slot, false);
223223
minX = Math.min(minX, vertices[VERTEX.X1] * scaleX, vertices[VERTEX.X4] * scaleX, vertices[VERTEX.X2] * scaleX, vertices[VERTEX.X3] * scaleX);
224224
minY = Math.min(minY, vertices[VERTEX.Y1] * scaleY, vertices[VERTEX.Y4] * scaleY, vertices[VERTEX.Y2] * scaleY, vertices[VERTEX.Y3] * scaleY);
225225
maxX = Math.max(maxX, vertices[VERTEX.X1] * scaleX, vertices[VERTEX.X4] * scaleX, vertices[VERTEX.X2] * scaleX, vertices[VERTEX.X3] * scaleX);
@@ -229,20 +229,6 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
229229
return cc.rect(position.x + minX, position.y + minY, maxX - minX, maxY - minY);
230230
},
231231

232-
_computeRegionAttachmentWorldVertices : function(self, x, y, bone, vertices){
233-
var offset = self.offset, vertexIndex = sp.VERTEX_INDEX;
234-
x += bone.worldX;
235-
y += bone.worldY;
236-
vertices[vertexIndex.X1] = offset[vertexIndex.X1] * bone.m00 + offset[vertexIndex.Y1] * bone.m01 + x;
237-
vertices[vertexIndex.Y1] = offset[vertexIndex.X1] * bone.m10 + offset[vertexIndex.Y1] * bone.m11 + y;
238-
vertices[vertexIndex.X2] = offset[vertexIndex.X2] * bone.m00 + offset[vertexIndex.Y2] * bone.m01 + x;
239-
vertices[vertexIndex.Y2] = offset[vertexIndex.X2] * bone.m10 + offset[vertexIndex.Y2] * bone.m11 + y;
240-
vertices[vertexIndex.X3] = offset[vertexIndex.X3] * bone.m00 + offset[vertexIndex.Y3] * bone.m01 + x;
241-
vertices[vertexIndex.Y3] = offset[vertexIndex.X3] * bone.m10 + offset[vertexIndex.Y3] * bone.m11 + y;
242-
vertices[vertexIndex.X4] = offset[vertexIndex.X4] * bone.m00 + offset[vertexIndex.Y4] * bone.m01 + x;
243-
vertices[vertexIndex.Y4] = offset[vertexIndex.X4] * bone.m10 + offset[vertexIndex.Y4] * bone.m11 + y;
244-
},
245-
246232
/**
247233
* Computes the world SRT from the local SRT for each bone.
248234
*/
@@ -305,7 +291,7 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
305291
* @returns {spine.RegionAttachment|spine.BoundingBoxAttachment}
306292
*/
307293
getAttachment: function (slotName, attachmentName) {
308-
return this._skeleton.getAttachmentBySlotName(slotName, attachmentName);
294+
return this._skeleton.getAttachmentByName(slotName, attachmentName);
309295
},
310296

311297
/**
@@ -356,7 +342,7 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
356342
* @returns {cc.Node}
357343
*/
358344
getTextureAtlas: function (regionAttachment) {
359-
return regionAttachment.rendererObject.page.rendererObject;
345+
return regionAttachment.region;
360346
},
361347

362348
/**

‎extensions/spine/CCSkeletonAnimation.js

+9-8
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,13 @@ sp._atlasLoader = {
4747
setAtlasFile:function(spAtlasFile){
4848
this.spAtlasFile = spAtlasFile;
4949
},
50-
load:function(page, line, spAtlas){
50+
load:function(line){
5151
var texturePath = cc.path.join(cc.path.dirname(this.spAtlasFile), line);
52-
if (cc._renderType === cc.game.RENDER_TYPE_WEBGL)
53-
sp._atlasPage_createTexture_webGL(page,texturePath);
54-
else
55-
sp._atlasPage_createTexture_canvas(page,texturePath);
52+
var texture = cc.textureCache.addImage(texturePath);
53+
var tex = new sp.SkeletonTexture();
54+
tex._image = { width: texture.getPixelsWide(), height: texture.getPixelsHigh() };
55+
tex.setRealTexture(texture);
56+
return tex;
5657
},
5758
unload:function(obj){
5859
}
@@ -139,7 +140,7 @@ sp.SkeletonAnimation = sp.Skeleton.extend(/** @lends sp.SkeletonAnimation# */{
139140
* @param {Number} duration
140141
*/
141142
setMix: function (fromAnimation, toAnimation, duration) {
142-
this._state.data.setMixByName(fromAnimation, toAnimation, duration);
143+
this._state.data.setMixWith(fromAnimation, toAnimation, duration);
143144
},
144145

145146
/**
@@ -165,7 +166,7 @@ sp.SkeletonAnimation = sp.Skeleton.extend(/** @lends sp.SkeletonAnimation# */{
165166
cc.log("Spine: Animation not found: " + name);
166167
return null;
167168
}
168-
return this._state.setAnimation(trackIndex, animation, loop);
169+
return this._state.setAnimationWith(trackIndex, animation, loop);
169170
},
170171

171172
/**
@@ -183,7 +184,7 @@ sp.SkeletonAnimation = sp.Skeleton.extend(/** @lends sp.SkeletonAnimation# */{
183184
cc.log("Spine: Animation not found:" + name);
184185
return null;
185186
}
186-
return this._state.addAnimation(trackIndex, animation, loop, delay);
187+
return this._state.addAnimationWith(trackIndex, animation, loop, delay);
187188
},
188189

189190
/**

‎extensions/spine/CCSkeletonCanvasRenderCmd.js

+32-23
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
var points = [];
6161
for (i = 0, n = locSkeleton.slots.length; i < n; i++) {
6262
slot = locSkeleton.drawOrder[i];
63-
if (!slot.attachment || slot.attachment.type != sp.ATTACHMENT_TYPE.REGION)
63+
if (!slot.attachment || !(slot.attachment instanceof spine.RegionAttachment))
6464
continue;
6565
attachment = slot.attachment;
6666
this._updateRegionAttachmentSlot(attachment, slot, points);
@@ -76,8 +76,8 @@
7676

7777
for (i = 0, n = locSkeleton.bones.length; i < n; i++) {
7878
bone = locSkeleton.bones[i];
79-
var x = bone.data.length * bone.m00 + bone.worldX;
80-
var y = bone.data.length * bone.m10 + bone.worldY;
79+
var x = bone.data.length * bone.a + bone.worldX;
80+
var y = bone.data.length * bone.c + bone.worldY;
8181
drawingUtil.drawLine(
8282
{x: bone.worldX, y: bone.worldY},
8383
{x: x, y: y});
@@ -100,8 +100,8 @@
100100
if (!points)
101101
return;
102102

103-
var vertices = {}, VERTEX = sp.VERTEX_INDEX, bone = slot.bone;
104-
attachment.computeVertices(bone.skeleton.x, bone.skeleton.y, bone, vertices);
103+
var vertices = attachment.updateWorldVertices(slot, false);
104+
var VERTEX = spine.RegionAttachment;
105105
points.length = 0;
106106
points.push(cc.p(vertices[VERTEX.X1], vertices[VERTEX.Y1]));
107107
points.push(cc.p(vertices[VERTEX.X4], vertices[VERTEX.Y4]));
@@ -118,7 +118,7 @@
118118
slot._slotNode = slotNode;
119119

120120
if (attachment instanceof spine.RegionAttachment) {
121-
spriteName = attachment.rendererObject.name;
121+
spriteName = attachment.region.name;
122122
sprite = this._createSprite(slot, attachment);
123123
slot.currentSprite = sprite;
124124
slot.currentSpriteName = spriteName;
@@ -141,8 +141,8 @@
141141
};
142142

143143
proto._createSprite = function (slot, attachment) {
144-
var rendererObject = attachment.rendererObject;
145-
var texture = rendererObject.page._texture;
144+
var rendererObject = attachment.region;
145+
var texture = rendererObject.texture.getRealTexture();
146146
var sprite = new cc.Sprite();
147147
if (texture.isLoaded()) {
148148
loaded(sprite, texture, rendererObject, attachment);
@@ -158,7 +158,8 @@
158158

159159
proto._updateChild = function () {
160160
var locSkeleton = this._node._skeleton, slots = locSkeleton.slots;
161-
var i, n, selSprite;
161+
var color = this._displayedColor, opacity = this._displayedOpacity;
162+
var i, n, selSprite, ax, ay;
162163

163164
var slot, attachment, slotNode;
164165
for (i = 0, n = slots.length; i < n; i++) {
@@ -169,11 +170,10 @@
169170
slotNode.setVisible(false);
170171
continue;
171172
}
172-
var type = attachment.type;
173-
if (type === spine.AttachmentType.region) {
174-
if (attachment.rendererObject) {
173+
if (attachment instanceof spine.RegionAttachment){
174+
if (attachment.region) {
175175
if (!slot.currentSpriteName || slot.currentSpriteName !== attachment.name) {
176-
var spriteName = attachment.rendererObject.name;
176+
var spriteName = attachment.region.name;
177177
if (slot.currentSprite !== undefined)
178178
slot.currentSprite.setVisible(false);
179179
slot.sprites = slot.sprites || {};
@@ -188,28 +188,37 @@
188188
}
189189
}
190190
var bone = slot.bone;
191-
slotNode.setPosition(bone.worldX + attachment.x * bone.m00 + attachment.y * bone.m01,
192-
bone.worldY + attachment.x * bone.m10 + attachment.y * bone.m11);
193-
slotNode.setScale(bone.worldScaleX, bone.worldScaleY);
191+
if (attachment.region.offsetX === 0 && attachment.region.offsetY === 0) {
192+
ax = attachment.x;
193+
ay = attachment.y;
194+
}
195+
else {
196+
//var regionScaleX = attachment.width / attachment.regionOriginalWidth * attachment.scaleX;
197+
//ax = attachment.x + attachment.regionOffsetX * regionScaleX - (attachment.width * attachment.scaleX - attachment.regionWidth * regionScaleX) / 2;
198+
ax = (attachment.offset[0] + attachment.offset[4]) * 0.5;
199+
ay = (attachment.offset[1] + attachment.offset[5]) * 0.5;
200+
}
201+
slotNode.setPosition(bone.worldX + ax * bone.a + ay * bone.b, bone.worldY + ax * bone.c + ay * bone.d);
202+
slotNode.setScale(bone.getWorldScaleX(), bone.getWorldScaleY());
194203

195204
//set the color and opacity
196205
selSprite = slot.currentSprite;
197-
selSprite._flippedX = bone.worldFlipX;
198-
selSprite._flippedY = bone.worldFlipY;
206+
selSprite._flippedX = bone.skeleton.flipX;
207+
selSprite._flippedY = bone.skeleton.flipY;
199208
if (selSprite._flippedY || selSprite._flippedX) {
200-
slotNode.setRotation(bone.worldRotation);
209+
slotNode.setRotation(bone.getWorldRotationX());
201210
selSprite.setRotation(attachment.rotation);
202211
} else {
203-
slotNode.setRotation(-bone.worldRotation);
212+
slotNode.setRotation(-bone.getWorldRotationX());
204213
selSprite.setRotation(-attachment.rotation);
205214
}
206215

207216
//hack for sprite
208-
selSprite._renderCmd._displayedOpacity = 0 | (this._node.getOpacity() * locSkeleton.a * slot.a);
209-
var r = 0 | (locSkeleton.r * slot.r * 255), g = 0 | (locSkeleton.g * slot.g * 255), b = 0 | (locSkeleton.b * slot.b * 255);
217+
selSprite._renderCmd._displayedOpacity = 0 | (opacity * slot.color.a);
218+
var r = 0 | (color.r * slot.color.r), g = 0 | (color.g * slot.color.g), b = 0 | (color.b * slot.color.b);
210219
selSprite.setColor(cc.color(r, g, b));
211220
selSprite._renderCmd._updateColor();
212-
} else if (type === spine.AttachmentType.skinnedmesh) {
221+
} else if (attachment instanceof spine.MeshAttachment) {
213222
//todo for mesh
214223
} else {
215224
slotNode.setVisible(false);

‎extensions/spine/CCSkeletonTexture.js

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/****************************************************************************
2+
Copyright (c) 2017 Chukong Technologies Inc.
3+
4+
http://www.cocos2d-x.org
5+
6+
Permission is hereby granted, free of charge, to any person obtaining a copy
7+
of this software and associated documentation files (the "Software"), to deal
8+
in the Software without restriction, including without limitation the rights
9+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
copies of the Software, and to permit persons to whom the Software is
11+
furnished to do so, subject to the following conditions:
12+
13+
The above copyright notice and this permission notice shall be included in
14+
all copies or substantial portions of the Software.
15+
16+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22+
THE SOFTWARE.
23+
****************************************************************************/
24+
25+
sp.SkeletonTexture = cc.Class.extend({
26+
name: 'sp.SkeletonTexture',
27+
_texture: null,
28+
29+
setRealTexture: function(tex) {
30+
this._texture = tex;
31+
},
32+
33+
getRealTexture: function() {
34+
return this._texture;
35+
},
36+
37+
setFilters: function(minFilter, magFilter) {
38+
if (cc._renderType === cc.game.RENDER_TYPE_WEBGL) {
39+
var gl = cc._renderContext;
40+
this.bind();
41+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minFilter);
42+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, magFilter);
43+
}
44+
},
45+
46+
setWraps: function(uWrap, vWrap) {
47+
if (cc._renderType === cc.game.RENDER_TYPE_WEBGL) {
48+
var gl = cc._renderContext;
49+
this.bind();
50+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, uWrap);
51+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, vWrap);
52+
}
53+
},
54+
55+
dispose: function() {
56+
},
57+
58+
bind: function() {
59+
if (cc._renderType === cc.game.RENDER_TYPE_WEBGL) {
60+
cc.glBindTexture2D(this._texture);
61+
}
62+
}
63+
});
64+
65+
var proto = sp.SkeletonTexture.prototype;
66+
cc.extend(proto, spine.Texture.prototype);
67+
// proto.constructor = spine.Texture;
68+

0 commit comments

Comments
 (0)