Skip to content

Commit 17dc57f

Browse files
author
SeanLin
committed
Merge pull request #993 from dingpinglv/Iss2293_MigrateRenderingSubclasses
Fixed #2293 Migrate the rendering subclasses of CCNode to Cocos2d-x 2.1.4
2 parents 09997ca + 3b5f4a6 commit 17dc57f

29 files changed

+2760
-1166
lines changed

‎HelloHTML5World/build.xml

+2
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@
4444
<file name="support/CCTIFFReader.js"/>
4545
<file name="support/CCUserDefault.js"/>
4646
<file name="support/CCVertex.js"/>
47+
<file name="support/component/CCComponent.js"/>
48+
<file name="support/component/CCComponentContainer.js"/>
4749
<file name="support/TransformUtils.js"/>
4850
<file name="shaders/CCShaders.js"/>
4951
<file name="shaders/CCGLProgram.js"/>

‎cocos2d/base_nodes/CCAtlasNode.js

+89-81
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@
3333
* <p> All features from cc.Node are valid, plus the following features: <br/>
3434
* - opacity and RGB colors </p>
3535
* @class
36-
* @extends cc.Node
36+
* @extends cc.NodeRGBA
3737
*/
38-
cc.AtlasNodeCanvas = cc.Node.extend(/** @lends cc.AtlasNode# */{
38+
cc.AtlasNodeCanvas = cc.NodeRGBA.extend(/** @lends cc.AtlasNode# */{
3939
/// ---- common properties start ----
4040
RGBAProtocol:true,
4141
//! chars per row
@@ -54,18 +54,15 @@ cc.AtlasNodeCanvas = cc.Node.extend(/** @lends cc.AtlasNode# */{
5454
_opacityModifyRGB:false,
5555
_blendFunc:null,
5656

57-
_opacity:0,
58-
_color:null,
59-
6057
// quads to draw
6158
_quadsToDraw:0,
59+
_ignoreContentScaleFactor:false, // This variable is only used for CCLabelAtlas FPS display. So plz don't modify its value.
6260

6361
ctor:function () {
6462
this._super();
65-
this._colorUnmodified = cc.WHITE;
66-
this._color = cc.white();
63+
this._colorUnmodified = cc.white();
6764
this._blendFunc = {src:cc.BLEND_SRC, dst:cc.BLEND_DST};
68-
this._opacity = 255;
65+
this._ignoreContentScaleFactor = false;
6966
},
7067

7168
/** updates the Atlas (indexed vertex array).
@@ -81,14 +78,7 @@ cc.AtlasNodeCanvas = cc.Node.extend(/** @lends cc.AtlasNode# */{
8178
getColor:function () {
8279
if (this._opacityModifyRGB)
8380
return this._colorUnmodified;
84-
return this._color;
85-
},
86-
87-
/**
88-
* @return {Number}
89-
*/
90-
getOpacity:function () {
91-
return this._opacity;
81+
return cc.NodeRGBA.prototype.getColor.call(this);
9282
},
9383

9484
/**
@@ -153,11 +143,10 @@ cc.AtlasNodeCanvas = cc.Node.extend(/** @lends cc.AtlasNode# */{
153143
setQuadsToDraw:function (quadsToDraw) {
154144
this._quadsToDraw = quadsToDraw;
155145
},
156-
/// ---- common properties end ----
157146

147+
/// ---- common properties end ----
158148
_textureForCanvas:null,
159149
_originalTexture:null,
160-
_colorF32Array:null,
161150

162151
/** initializes an cc.AtlasNode with an Atlas file the width and height of each item and the quantity of items to render
163152
* @param {String} tile
@@ -168,11 +157,24 @@ cc.AtlasNodeCanvas = cc.Node.extend(/** @lends cc.AtlasNode# */{
168157
*/
169158
initWithTileFile:function (tile, tileWidth, tileHeight, itemsToRender) {
170159
cc.Assert(tile != null, "title should not be null");
160+
var texture = cc.TextureCache.getInstance().addImage(tile);
161+
return this.initWithTexture(texture, tileWidth, tileHeight, itemsToRender);
162+
},
163+
164+
/**
165+
* initializes an CCAtlasNode with a texture the width and height of each item measured in points and the quantity of items to render
166+
* @param {HTMLImageElement|HTMLCanvasElement} texture
167+
* @param {Number} tileWidth
168+
* @param {Number} tileHeight
169+
* @param {Number} itemsToRender
170+
* @returen {Boolean}
171+
*/
172+
initWithTexture:function(texture, tileWidth, tileHeight, itemsToRender){
171173
this._itemWidth = tileWidth;
172174
this._itemHeight = tileHeight;
173175

174176
this._opacityModifyRGB = true;
175-
this._originalTexture = cc.TextureCache.getInstance().addImage(tile);
177+
this._originalTexture = texture;
176178
if (!this._originalTexture) {
177179
cc.log("cocos2d: Could not initialize cc.AtlasNode. Invalid Texture.");
178180
return false;
@@ -188,31 +190,34 @@ cc.AtlasNodeCanvas = cc.Node.extend(/** @lends cc.AtlasNode# */{
188190
* @param {cc.Color3B} color3
189191
*/
190192
setColor:function (color3) {
191-
if ((this._color.r == color3.r) && (this._color.g == color3.g) && (this._color.b == color3.b))
193+
if ((this._realColor.r == color3.r) && (this._realColor.g == color3.g) && (this._realColor.b == color3.b))
192194
return;
193-
this._color = this._colorUnmodified = color3;
195+
var temp = new cc.Color3B(color3.r,color3.g,color3.b);
196+
this._colorUnmodified = color3;
197+
198+
if (this._opacityModifyRGB) {
199+
temp.r = temp.r * this._displayedOpacity / 255;
200+
temp.g = temp.g * this._displayedOpacity / 255;
201+
temp.b = temp.b * this._displayedOpacity / 255;
202+
}
203+
cc.NodeRGBA.prototype.setColor.call(this, color3);
194204
if (this.getTexture()) {
195205
var cacheTextureForColor = cc.TextureCache.getInstance().getTextureColors(this._originalTexture);
196206
if (cacheTextureForColor) {
197207
var tx = this._originalTexture;
198208
var textureRect = cc.rect(0, 0, tx.width, tx.height);
199-
var colorTexture = cc.generateTintImage(tx, cacheTextureForColor, this._color, textureRect);
209+
var colorTexture = cc.generateTintImage(tx, cacheTextureForColor, this._realColor, textureRect);
200210
this.setTexture(colorTexture);
201211
}
202212
}
203-
204-
if (this._opacityModifyRGB) {
205-
this._color.r = color3.r * this._opacity / 255;
206-
this._color.g = color3.g * this._opacity / 255;
207-
this._color.b = color3.b * this._opacity / 255;
208-
}
209213
},
210214

211215
/**
212216
* @param {Number} opacity
213217
*/
214218
setOpacity:function (opacity) {
215-
this._opacity = opacity;
219+
cc.NodeRGBA.prototype.setOpacity.call(this, opacity);
220+
216221
// special opacity for premultiplied textures
217222
if (this._opacityModifyRGB) {
218223
this.setColor(this._colorUnmodified);
@@ -241,26 +246,13 @@ cc.AtlasNodeCanvas = cc.Node.extend(/** @lends cc.AtlasNode# */{
241246

242247
this._itemsPerColumn = 0 | (size.height / this._itemHeight);
243248
this._itemsPerRow = 0 | (size.width / this._itemWidth);
249+
},
250+
251+
_setIgnoreContentScaleFactor:function(ignoreContentScaleFactor){
252+
this._ignoreContentScaleFactor = ignoreContentScaleFactor;
244253
}
245254
});
246255

247-
/** creates a cc.AtlasNodeCanvas with an Atlas file the width and height of each item and the quantity of items to render
248-
* @param {String} tile
249-
* @param {Number} tileWidth
250-
* @param {Number} tileHeight
251-
* @param {Number} itemsToRender
252-
* @return {cc.AtlasNode}
253-
* @example
254-
* // example
255-
* var node = cc.AtlasNode.create("pathOfTile", 16, 16, 1);
256-
*/
257-
cc.AtlasNodeCanvas.create = function (tile, tileWidth, tileHeight, itemsToRender) {
258-
var ret = new cc.AtlasNodeCanvas();
259-
if (ret.initWithTileFile(tile, tileWidth, tileHeight, itemsToRender))
260-
return ret;
261-
return null;
262-
};
263-
264256
/** <p> cc.AtlasNode is a subclass of cc.Node that implements the cc.RGBAProtocol and<br/>
265257
* cc.TextureProtocol protocol (WebGL implement)</p>
266258
*
@@ -272,7 +264,7 @@ cc.AtlasNodeCanvas.create = function (tile, tileWidth, tileHeight, itemsToRender
272264
* @class
273265
* @extends cc.Node
274266
*/
275-
cc.AtlasNodeWebGL = cc.Node.extend({
267+
cc.AtlasNodeWebGL = cc.NodeRGBA.extend({
276268
/// ---- common properties start ----
277269
RGBAProtocol:true,
278270
//! chars per row
@@ -291,18 +283,15 @@ cc.AtlasNodeWebGL = cc.Node.extend({
291283
_opacityModifyRGB:false,
292284
_blendFunc:null,
293285

294-
_opacity:0,
295-
_color:null,
296-
297286
// quads to draw
298287
_quadsToDraw:0,
288+
_ignoreContentScaleFactor:false, // This variable is only used for CCLabelAtlas FPS display. So plz don't modify its value.
299289

300290
ctor:function () {
301291
this._super();
302-
this._colorUnmodified = cc.WHITE;
303-
this._color = cc.white();
292+
this._colorUnmodified = cc.white();
304293
this._blendFunc = {src:cc.BLEND_SRC, dst:cc.BLEND_DST};
305-
this._opacity = 255;
294+
this._ignoreContentScaleFactor = false;
306295
},
307296

308297
/** updates the Atlas (indexed vertex array).
@@ -318,14 +307,7 @@ cc.AtlasNodeWebGL = cc.Node.extend({
318307
getColor:function () {
319308
if (this._opacityModifyRGB)
320309
return this._colorUnmodified;
321-
return this._color;
322-
},
323-
324-
/**
325-
* @return {Number}
326-
*/
327-
getOpacity:function () {
328-
return this._opacity;
310+
return cc.NodeRGBA.prototype.getColor.call(this);
329311
},
330312

331313
/**
@@ -403,14 +385,32 @@ cc.AtlasNodeWebGL = cc.Node.extend({
403385
*/
404386
initWithTileFile:function (tile, tileWidth, tileHeight, itemsToRender) {
405387
cc.Assert(tile != null, "title should not be null");
388+
var texture = cc.TextureCache.getInstance().addImage(tile);
389+
return this.initWithTexture(texture, tileWidth, tileHeight, itemsToRender);
390+
},
391+
392+
/**
393+
* initializes an CCAtlasNode with a texture the width and height of each item measured in points and the quantity of items to render
394+
* @param {cc.Texture2D} texture
395+
* @param {Number} tileWidth
396+
* @param {Number} tileHeight
397+
* @param {Number} itemsToRender
398+
* @returen {Boolean}
399+
*/
400+
initWithTexture:function(texture, tileWidth, tileHeight, itemsToRender){
406401
this._itemWidth = tileWidth;
407402
this._itemHeight = tileHeight;
403+
this._colorUnmodified = cc.WHITE;
408404
this._opacityModifyRGB = true;
409405

410-
this._colorF32Array = new Float32Array([this._color.r / 255.0, this._color.g / 255.0, this._color.b / 255.0, this._opacity / 255.0]);
411-
var newAtlas = new cc.TextureAtlas();
412-
newAtlas.initWithFile(tile, itemsToRender);
413-
this.setTextureAtlas(newAtlas);
406+
this._blendFunc.src = cc.BLEND_SRC;
407+
this._blendFunc.dst = cc.BLEND_DST;
408+
409+
var locRealColor = this._realColor;
410+
this._colorF32Array = new Float32Array([locRealColor.r / 255.0, locRealColor.g / 255.0, locRealColor.b / 255.0, this._realOpacity / 255.0]);
411+
this._textureAtlas = new cc.TextureAtlas();
412+
this._textureAtlas.initWithTexture(texture, itemsToRender);
413+
414414
if (!this._textureAtlas) {
415415
cc.log("cocos2d: Could not initialize cc.AtlasNode. Invalid Texture.");
416416
return false;
@@ -428,7 +428,7 @@ cc.AtlasNodeWebGL = cc.Node.extend({
428428
},
429429

430430
/**
431-
* @param {WebGLRenderingContext} ctx CanvasContext
431+
* @param {WebGLRenderingContext} ctx renderContext
432432
*/
433433
draw:function (ctx) {
434434
var context = ctx || cc.renderContext;
@@ -442,28 +442,30 @@ cc.AtlasNodeWebGL = cc.Node.extend({
442442
* @param {cc.Color3B} color3
443443
*/
444444
setColor:function (color3) {
445-
if ((this._color.r == color3.r) && (this._color.g == color3.g) && (this._color.b == color3.b))
446-
return;
447-
this._color = this._colorUnmodified = color3;
445+
var temp = cc.Color3B(color3.r,color3.g,color3.b);
446+
this._colorUnmodified = color3;
448447

449448
if (this._opacityModifyRGB) {
450-
this._color.r = color3.r * this._opacity / 255;
451-
this._color.g = color3.g * this._opacity / 255;
452-
this._color.b = color3.b * this._opacity / 255;
449+
temp.r = temp.r * this._displayedOpacity / 255;
450+
temp.g = temp.g * this._displayedOpacity / 255;
451+
temp.b = temp.b * this._displayedOpacity / 255;
453452
}
454-
this._colorF32Array = new Float32Array([this._color.r / 255.0, this._color.g / 255.0, this._color.b / 255.0, this._opacity / 255.0]);
453+
cc.NodeRGBA.prototype.setColor.call(this, color3);
454+
this._colorF32Array = new Float32Array([this._displayedColor.r / 255.0, this._displayedColor.g / 255.0,
455+
this._displayedColor.b / 255.0, this._displayedOpacity / 255.0]);
455456
},
456457

457458
/**
458459
* @param {Number} opacity
459460
*/
460461
setOpacity:function (opacity) {
461-
this._opacity = opacity;
462+
cc.NodeRGBA.prototype.setOpacity.call(this, opacity);
462463
// special opacity for premultiplied textures
463464
if (this._opacityModifyRGB) {
464465
this.setColor(this._colorUnmodified);
465466
} else {
466-
this._colorF32Array = new Float32Array([this._color.r / 255.0, this._color.g / 255.0, this._color.b / 255.0, this._opacity / 255.0]);
467+
var locDisplayedColor = this._displayedColor;
468+
this._colorF32Array = new Float32Array([locDisplayedColor.r / 255.0, locDisplayedColor.g / 255.0, locDisplayedColor.b / 255.0, this._displayedOpacity / 255.0]);
467469
}
468470
},
469471

@@ -488,6 +490,9 @@ cc.AtlasNodeWebGL = cc.Node.extend({
488490
_calculateMaxItems:function () {
489491
var selTexture = this.getTexture();
490492
var size = selTexture.getContentSize();
493+
if(this._ignoreContentScaleFactor){
494+
size = selTexture.getContentSizeInPixels();
495+
}
491496

492497
this._itemsPerColumn = 0 | (size.height / this._itemHeight);
493498
this._itemsPerRow = 0 | (size.width / this._itemWidth);
@@ -502,10 +507,16 @@ cc.AtlasNodeWebGL = cc.Node.extend({
502507

503508
_updateOpacityModifyRGB:function () {
504509
this._opacityModifyRGB = this._textureAtlas.getTexture().hasPremultipliedAlpha();
510+
},
511+
512+
_setIgnoreContentScaleFactor:function(ignoreContentScaleFactor){
513+
this._ignoreContentScaleFactor = ignoreContentScaleFactor;
505514
}
506515
});
507516

508-
/** creates a cc.AtlasNodeWebGL with an Atlas file the width and height of each item and the quantity of items to render
517+
cc.AtlasNode = cc.Browser.supportWebGL ? cc.AtlasNodeWebGL : cc.AtlasNodeCanvas;
518+
519+
/** creates a cc.AtlasNode with an Atlas file the width and height of each item and the quantity of items to render
509520
* @param {String} tile
510521
* @param {Number} tileWidth
511522
* @param {Number} tileHeight
@@ -515,13 +526,10 @@ cc.AtlasNodeWebGL = cc.Node.extend({
515526
* // example
516527
* var node = cc.AtlasNode.create("pathOfTile", 16, 16, 1);
517528
*/
518-
cc.AtlasNodeWebGL.create = function (tile, tileWidth, tileHeight, itemsToRender) {
519-
var ret = new cc.AtlasNodeWebGL();
529+
cc.AtlasNode.create = function (tile, tileWidth, tileHeight, itemsToRender) {
530+
var ret = new cc.AtlasNode();
520531
if (ret.initWithTileFile(tile, tileWidth, tileHeight, itemsToRender))
521532
return ret;
522533
return null;
523534
};
524535

525-
cc.AtlasNode = cc.Browser.supportWebGL ? cc.AtlasNodeWebGL : cc.AtlasNodeCanvas;
526-
527-

0 commit comments

Comments
 (0)