From b4d2d00151aee510fb1cdccb69030ea5fc0e2483 Mon Sep 17 00:00:00 2001 From: Mark Henderson Date: Mon, 22 Jul 2013 11:07:09 -0700 Subject: [PATCH 1/4] Fix handling of contentScaleFactor != 1 fixes for Sprite, scale9Sprite, and LabelTTF. --- cocos2d/cocoa/CCGeometry.js | 5 ++++ cocos2d/label_nodes/CCLabelTTF.js | 25 +++++++++++++------ cocos2d/platform/jsloader.js | 6 ++--- cocos2d/sprite_nodes/CCSprite.js | 25 +++++++++++++------ cocos2d/sprite_nodes/CCSpriteFrame.js | 1 + extensions/CCBReader/CCNodeLoader.js | 2 +- .../GUI/CCControlExtension/CCScale9Sprite.js | 1 + 7 files changed, 45 insertions(+), 20 deletions(-) diff --git a/cocos2d/cocoa/CCGeometry.js b/cocos2d/cocoa/CCGeometry.js index 4944efb269..af5cf6b0a0 100644 --- a/cocos2d/cocoa/CCGeometry.js +++ b/cocos2d/cocoa/CCGeometry.js @@ -24,6 +24,11 @@ THE SOFTWARE. ****************************************************************************/ +/** + * @namespace + */ +var cc = cc || {}; + //-------------------------------------------------------- // // POINT diff --git a/cocos2d/label_nodes/CCLabelTTF.js b/cocos2d/label_nodes/CCLabelTTF.js index 21919daaa9..f03fc8df2e 100644 --- a/cocos2d/label_nodes/CCLabelTTF.js +++ b/cocos2d/label_nodes/CCLabelTTF.js @@ -200,7 +200,7 @@ cc.LabelTTFCanvas = cc.Sprite.extend(/** @lends cc.LabelTTFCanvas# */{ this._fontName = fontName; this._hAlignment = hAlignment; this._vAlignment = vAlignment; - this._fontSize = fontSize * cc.CONTENT_SCALE_FACTOR(); + this._fontSize = fontSize; this._fontStyleStr = this._fontSize + "px '" + this._fontName + "'"; this._fontClientHeight = cc.LabelTTF.__getFontHeightByDiv(this._fontName,this._fontSize); this.setString(strInfo); @@ -362,6 +362,7 @@ cc.LabelTTFCanvas = cc.Sprite.extend(/** @lends cc.LabelTTFCanvas# */{ this._fontSize = textDefinition.fontSize; this._fontStyleStr = this._fontSize + "px '" + this._fontName + "'"; + // shadow if ( textDefinition.shadowEnabled) this.enableShadow(textDefinition.shadowOffset, textDefinition.shadowOpacity, textDefinition.shadowBlur, false); @@ -598,8 +599,9 @@ cc.LabelTTFCanvas = cc.Sprite.extend(/** @lends cc.LabelTTFCanvas# */{ } var locVAlignment = this._vAlignment, locHAlignment = this._hAlignment, - locContentSizeWidth = this._contentSize.width, locContentSizeHeight = this._contentSize.height; - var locFontHeight = this._fontClientHeight; + locContentSizeWidth = this._contentSize.width* cc.CONTENT_SCALE_FACTOR(), + locContentSizeHeight = this._contentSize.height* cc.CONTENT_SCALE_FACTOR(); + var locFontHeight = this._fontClientHeight* cc.CONTENT_SCALE_FACTOR(); context.textBaseline = cc.LabelTTF._textBaseline[locVAlignment]; context.textAlign = cc.LabelTTF._textAlign[locHAlignment]; @@ -702,6 +704,7 @@ cc.LabelTTFWebGL = cc.Sprite.extend(/** @lends cc.LabelTTFWebGL# */{ _string:"", _isMultiLine:false, _fontStyleStr:null, + _scaledFontStyleStr:null, _colorStyleStr:null, // font shadow @@ -734,6 +737,7 @@ cc.LabelTTFWebGL = cc.Sprite.extend(/** @lends cc.LabelTTFWebGL# */{ this._vAlignment = cc.VERTICAL_TEXT_ALIGNMENT_TOP; this._opacityModifyRGB = false; this._fontStyleStr = ""; + this._scaledFontStyleStr = ""; this._colorStyleStr = ""; this._fontName = "Arial"; this._opacity = 255; @@ -868,8 +872,9 @@ cc.LabelTTFWebGL = cc.Sprite.extend(/** @lends cc.LabelTTFWebGL# */{ this._fontName = fontName; this._hAlignment = hAlignment; this._vAlignment = vAlignment; - this._fontSize = fontSize * cc.CONTENT_SCALE_FACTOR(); + this._fontSize = fontSize; this._fontStyleStr = this._fontSize + "px '" + this._fontName + "'"; + this._scaledFontStyleStr = this._fontSize * cc.CONTENT_SCALE_FACTOR() + "px '" + this._fontName + "'"; this._fontClientHeight = cc.LabelTTF.__getFontHeightByDiv(this._fontName,this._fontSize); this.setString(strInfo); this._updateTexture(); @@ -1039,6 +1044,7 @@ cc.LabelTTFWebGL = cc.Sprite.extend(/** @lends cc.LabelTTFWebGL# */{ this._fontName = textDefinition.fontName; this._fontSize = textDefinition.fontSize || 12; this._fontStyleStr = this._fontSize + "px '" + this._fontName + "'"; + this._scaledFontStyleStr = this._fontSize * cc.CONTENT_SCALE_FACTOR() + "px '" + this._fontName + "'"; this._fontClientHeight = cc.LabelTTF.__getFontHeightByDiv(this._fontName,this._fontSize); // shadow @@ -1059,6 +1065,7 @@ cc.LabelTTFWebGL = cc.Sprite.extend(/** @lends cc.LabelTTFWebGL# */{ _prepareTextDefinition:function(adjustForResolution){ var texDef = new cc.FontDefinition(); + //Do these reference to CONTENT_SCALE_FACTOR need to be removed ? if (adjustForResolution){ texDef.fontSize = this._fontSize * cc.CONTENT_SCALE_FACTOR(); texDef.fontDimensions = cc.SIZE_POINTS_TO_PIXELS(this._dimensions); @@ -1160,6 +1167,7 @@ cc.LabelTTFWebGL = cc.Sprite.extend(/** @lends cc.LabelTTFWebGL# */{ if (this._fontSize != fontSize) { this._fontSize = fontSize; this._fontStyleStr = fontSize + "px '" + this._fontName + "'"; + this._scaledFontStyleStr = this._fontSize * cc.CONTENT_SCALE_FACTOR() + "px '" + this._fontName + "'"; this._fontClientHeight = cc.LabelTTF.__getFontHeightByDiv(this._fontName,fontSize); // Force update this._needUpdateTexture = true; @@ -1174,6 +1182,7 @@ cc.LabelTTFWebGL = cc.Sprite.extend(/** @lends cc.LabelTTFWebGL# */{ if (this._fontName && this._fontName != fontName) { this._fontName = fontName; this._fontStyleStr = this._fontSize + "px '" + fontName + "'"; + this._scaledFontStyleStr = this._fontSize * cc.CONTENT_SCALE_FACTOR() + "px '" + this._fontName + "'"; this._fontClientHeight = cc.LabelTTF.__getFontHeightByDiv(fontName,this._fontSize); // Force update this._needUpdateTexture = true; @@ -1189,8 +1198,8 @@ cc.LabelTTFWebGL = cc.Sprite.extend(/** @lends cc.LabelTTFWebGL# */{ context.setTransform(1, 0, 0, 1, 0, locContentSizeHeight); //this is fillText for canvas - if (context.font != this._fontStyleStr) - context.font = this._fontStyleStr; + if (context.font != this._scaledFontStyleStr) + context.font = this._scaledFontStyleStr; context.fillStyle = this._fillColorStr; //stroke style setup @@ -1388,8 +1397,8 @@ cc.LabelTTFWebGL = cc.Sprite.extend(/** @lends cc.LabelTTFWebGL# */{ this._labelContext.font = this._fontStyleStr; this._updateTTF(); var width = this._contentSize.width, height = this._contentSize.height; - this._labelCanvas.width = width; - this._labelCanvas.height = height; + this._labelCanvas.width = width * cc.CONTENT_SCALE_FACTOR(); + this._labelCanvas.height = height * cc.CONTENT_SCALE_FACTOR();; //draw text to labelCanvas this._drawTTFInCanvasForWebGL(this._labelContext); diff --git a/cocos2d/platform/jsloader.js b/cocos2d/platform/jsloader.js index caad0ff4c3..1afcb74f4b 100644 --- a/cocos2d/platform/jsloader.js +++ b/cocos2d/platform/jsloader.js @@ -26,6 +26,9 @@ ****************************************************************************/ (function () { var engine = [ + 'cocoa/CCGeometry.js', + 'platform/Sys.js', + 'platform/CCConfig.js', 'platform/CCClass.js', 'platform/miniFramework.js', 'platform/CCCommon.js', @@ -38,9 +41,6 @@ 'platform/CCAccelerometer.js', 'platform/zlib.min.js', 'platform/CCEGLView.js', - 'cocoa/CCGeometry.js', - 'platform/Sys.js', - 'platform/CCConfig.js', 'platform/CCImage.js', 'kazmath/utility.js', 'kazmath/vec2.js', diff --git a/cocos2d/sprite_nodes/CCSprite.js b/cocos2d/sprite_nodes/CCSprite.js index 3f7e2f7856..6c6890586e 100644 --- a/cocos2d/sprite_nodes/CCSprite.js +++ b/cocos2d/sprite_nodes/CCSprite.js @@ -122,6 +122,7 @@ cc.generateTextureCacheForColor.tempCtx = cc.generateTextureCacheForColor.tempCa cc.generateTintImage2 = function (texture, color, rect) { if (!rect) { rect = cc.rect(0, 0, texture.width, texture.height); + rect = cc.RECT_PIXELS_TO_POINTS(rect); } var selColor; if (color instanceof cc.Color4F) { @@ -933,6 +934,7 @@ cc.SpriteCanvas = cc.NodeRGBA.extend(/** @lends cc.SpriteCanvas# */{ loadImg.addEventListener("load", function () { if (!rect) { rect = cc.rect(0, 0, loadImg.width, loadImg.height); + rect = cc.RECT_PIXELS_TO_POINTS(rect); } selfPointer.initWithTexture(loadImg, rect); cc.TextureCache.getInstance().cacheImage(filename, loadImg); @@ -947,6 +949,7 @@ cc.SpriteCanvas = cc.NodeRGBA.extend(/** @lends cc.SpriteCanvas# */{ if (texture) { if (!rect) { rect = cc.rect(0, 0, texture.width, texture.height); + rect = cc.RECT_PIXELS_TO_POINTS(rect); } return this.initWithTexture(texture, rect); } @@ -996,8 +999,10 @@ cc.SpriteCanvas = cc.NodeRGBA.extend(/** @lends cc.SpriteCanvas# */{ if (!rect) { rect = cc.rect(0, 0, 0, 0); - if ((texture instanceof HTMLImageElement) || (texture instanceof HTMLCanvasElement)) + if ((texture instanceof HTMLImageElement) || (texture instanceof HTMLCanvasElement)) { rect.size = cc.size(texture.width, texture.height); + rect = cc.RECT_PIXELS_TO_POINTS(rect); + } } this._originalTexture = texture; @@ -1163,7 +1168,7 @@ cc.SpriteCanvas = cc.NodeRGBA.extend(/** @lends cc.SpriteCanvas# */{ return cc.SpriteFrame._frameWithTextureForCanvas(this._texture, cc.RECT_POINTS_TO_PIXELS(this._rect), this._rectRotated, - this._unflippedOffsetPositionFromCenter, + cc.POINT_POINTS_TO_PIXELS(this._unflippedOffsetPositionFromCenter), cc.SIZE_POINTS_TO_PIXELS(this._contentSize)); }, @@ -1203,8 +1208,10 @@ cc.SpriteCanvas = cc.NodeRGBA.extend(/** @lends cc.SpriteCanvas# */{ if (this._texture != texture) { if (texture instanceof HTMLImageElement) { - if (!this._rect || cc.rectEqualToRect(this._rect, cc.RectZero())) + if (!this._rect || cc.rectEqualToRect(this._rect, cc.RectZero())) { this._rect = cc.rect(0, 0, texture.width, texture.height); + this._rect = cc.RECT_PIXELS_TO_POINTS(this._rect); + } this._originalTexture = texture; } this._texture = texture; @@ -1217,10 +1224,11 @@ cc.SpriteCanvas = cc.NodeRGBA.extend(/** @lends cc.SpriteCanvas# */{ if (cacheTextureForColor) { this._colorized = true; //generate color texture cache + var rect = cc.RECT_POINTS_TO_PIXELS(this._rect); if (this._texture instanceof HTMLCanvasElement && !this._rectRotated) - cc.generateTintImage(this.getTexture(), cacheTextureForColor, this._displayedColor, this.getTextureRect(), this._texture); + cc.generateTintImage(this.getTexture(), cacheTextureForColor, this._color, rect, this._texture); else { - var colorTexture = cc.generateTintImage(this.getTexture(), cacheTextureForColor, this._displayedColor, this.getTextureRect()); + var colorTexture = cc.generateTintImage(this.getTexture(), cacheTextureForColor, this._color, rect); this.setTexture(colorTexture); } } @@ -1238,6 +1246,7 @@ cc.SpriteCanvas = cc.NodeRGBA.extend(/** @lends cc.SpriteCanvas# */{ context.globalAlpha = this._realOpacity / 255; var locRect = this._rect; + var scaledRect = cc.RECT_POINTS_TO_PIXELS(locRect); var flipXOffset = 0 | (this._offsetPosition.x), flipYOffset = -this._offsetPosition.y - locRect.height; if (this._flipX) { flipXOffset = -this._offsetPosition.x - locRect.width; @@ -1250,11 +1259,11 @@ cc.SpriteCanvas = cc.NodeRGBA.extend(/** @lends cc.SpriteCanvas# */{ if (this._texture) { if (this._colorized) { context.drawImage(this._texture, - 0, 0, locRect.width, locRect.height, + 0, 0, scaledRect.width, scaledRect.height, flipXOffset, flipYOffset, locRect.width, locRect.height); } else { context.drawImage(this._texture, - locRect.x, locRect.y, locRect.width, locRect.height, + scaledRect.x, scaledRect.y, scaledRect.width, scaledRect.height, flipXOffset, flipYOffset, locRect.width, locRect.height); } } else if (this._contentSize.width !== 0) { @@ -2454,7 +2463,7 @@ cc.SpriteWebGL = cc.NodeRGBA.extend(/** @lends cc.SpriteWebGL# */{ return cc.SpriteFrame.createWithTexture(this._texture, cc.RECT_POINTS_TO_PIXELS(this._rect), this._rectRotated, - this._unflippedOffsetPositionFromCenter, + cc.POINT_POINTS_TO_PIXELS(this._unflippedOffsetPositionFromCenter), cc.SIZE_POINTS_TO_PIXELS(this._contentSize)); }, diff --git a/cocos2d/sprite_nodes/CCSpriteFrame.js b/cocos2d/sprite_nodes/CCSpriteFrame.js index 83ba993c6d..9df2204ccf 100644 --- a/cocos2d/sprite_nodes/CCSpriteFrame.js +++ b/cocos2d/sprite_nodes/CCSpriteFrame.js @@ -198,6 +198,7 @@ cc.SpriteFrame = cc.Class.extend(/** @lends cc.SpriteFrame# */{ */ setOffset:function (offsets) { this._offset = offsets; + this._offsetInPixels = cc.POINT_POINTS_TO_PIXELS(offsetInPixels); }, clone: function(){ diff --git a/extensions/CCBReader/CCNodeLoader.js b/extensions/CCBReader/CCNodeLoader.js index 0605eda93d..4f42cc1127 100644 --- a/extensions/CCBReader/CCNodeLoader.js +++ b/extensions/CCBReader/CCNodeLoader.js @@ -493,7 +493,7 @@ cc.NodeLoader = cc.Class.extend({ if(texture instanceof cc.Texture2D){ bounds = cc.RectMake(0, 0, texture.getContentSize().width, texture.getContentSize().height); }else{ - bounds = cc.RectMake(0, 0, texture.width, texture.height); + bounds = cc.RECT_PIXELS_TO_POINTS(bounds); } spriteFrame = cc.SpriteFrame.createWithTexture(texture, bounds); } else { diff --git a/extensions/GUI/CCControlExtension/CCScale9Sprite.js b/extensions/GUI/CCControlExtension/CCScale9Sprite.js index 2b1b1fd5fa..fa02e3655f 100644 --- a/extensions/GUI/CCControlExtension/CCScale9Sprite.js +++ b/extensions/GUI/CCControlExtension/CCScale9Sprite.js @@ -457,6 +457,7 @@ cc.Scale9Sprite = cc.Node.extend(/** @lends cc.Scale9Sprite# */{ rect = cc.RectMake(0, 0, textureSize.width, textureSize.height); } else { rect = cc.RectMake(0, 0, selTexture.width, selTexture.height); + rect = cc.RECT_PIXELS_TO_POINTS(rect); } } From 26bf859fd82230b0b0079ee0d7bacf992c8fafc8 Mon Sep 17 00:00:00 2001 From: Mark Henderson Date: Mon, 22 Jul 2013 15:19:16 -0700 Subject: [PATCH 2/4] performance improvement for contentScaleFactor fix in Sprite.draw --- cocos2d/sprite_nodes/CCSprite.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/cocos2d/sprite_nodes/CCSprite.js b/cocos2d/sprite_nodes/CCSprite.js index 6c6890586e..4597f29c52 100644 --- a/cocos2d/sprite_nodes/CCSprite.js +++ b/cocos2d/sprite_nodes/CCSprite.js @@ -1246,7 +1246,6 @@ cc.SpriteCanvas = cc.NodeRGBA.extend(/** @lends cc.SpriteCanvas# */{ context.globalAlpha = this._realOpacity / 255; var locRect = this._rect; - var scaledRect = cc.RECT_POINTS_TO_PIXELS(locRect); var flipXOffset = 0 | (this._offsetPosition.x), flipYOffset = -this._offsetPosition.y - locRect.height; if (this._flipX) { flipXOffset = -this._offsetPosition.x - locRect.width; @@ -1257,13 +1256,14 @@ cc.SpriteCanvas = cc.NodeRGBA.extend(/** @lends cc.SpriteCanvas# */{ context.scale(1, -1); } if (this._texture) { + var scaleFactor = cc.CONTENT_SCALE_FACTOR(); if (this._colorized) { context.drawImage(this._texture, - 0, 0, scaledRect.width, scaledRect.height, + 0, 0, locRect.width * scaleFactor, locRect.height * scaleFactor, flipXOffset, flipYOffset, locRect.width, locRect.height); } else { context.drawImage(this._texture, - scaledRect.x, scaledRect.y, scaledRect.width, scaledRect.height, + locRect.x * scaleFactor, locRect.y * scaleFactor, locRect.width * scaleFactor, locRect.height * scaleFactor, flipXOffset, flipYOffset, locRect.width, locRect.height); } } else if (this._contentSize.width !== 0) { From 5982c7aea7b115ad746321f51459747abc264b44 Mon Sep 17 00:00:00 2001 From: dingpinglv Date: Mon, 29 Jul 2013 10:45:31 +0800 Subject: [PATCH 3/4] Test ContentScaleFactor NotEqual 1 --- cocos2d/platform/jsloader.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/cocos2d/platform/jsloader.js b/cocos2d/platform/jsloader.js index 0b02ba538b..33ca17c25b 100644 --- a/cocos2d/platform/jsloader.js +++ b/cocos2d/platform/jsloader.js @@ -26,9 +26,6 @@ ****************************************************************************/ (function () { var engine = [ - 'cocoa/CCGeometry.js', - 'platform/Sys.js', - 'platform/CCConfig.js', 'platform/CCClass.js', 'cocoa/CCGeometry.js', 'platform/Sys.js', @@ -220,7 +217,7 @@ '../extensions/PluginX/plugins/SocialQQWeibo.js', '../extensions/PluginX/plugins/SocialQzone.js', '../extensions/PluginX/plugins/SocialTwitter.js', - '../extensions/PluginX/plugins/SocialFacebook.js', + '../extensions/PluginX/plugins/SocialFacebook.js' //'../extensions/PluginX/plugins/AdsGoogle.js' ]); } From 4a2f77a3cfb840de8883a7fee927a78bbcef71e3 Mon Sep 17 00:00:00 2001 From: dingpinglv Date: Mon, 29 Jul 2013 11:35:44 +0800 Subject: [PATCH 4/4] Fix handling of contentScaleFactor != 1 --- cocos2d/cocoa/CCGeometry.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/cocos2d/cocoa/CCGeometry.js b/cocos2d/cocoa/CCGeometry.js index af5cf6b0a0..4944efb269 100644 --- a/cocos2d/cocoa/CCGeometry.js +++ b/cocos2d/cocoa/CCGeometry.js @@ -24,11 +24,6 @@ THE SOFTWARE. ****************************************************************************/ -/** - * @namespace - */ -var cc = cc || {}; - //-------------------------------------------------------- // // POINT