Merge pull request cocos2d#3294 from ntrrgc/hidpi-text

HiDPI support in CCLabelTTF

Author: pandamicro

cocos2d/core/labelttf/CCLabelTTF.js

@@ -135,6 +135,11 @@ cc.LabelTTF = cc.Sprite.extend(/** @lends cc.LabelTTF# */{
         this._renderCmd._setColorsString();
         this._renderCmd._updateTexture();
         this._setUpdateTextureDirty();
+
+        // Needed for high dpi text.
+        // In order to render it crisp, we request devicePixelRatio times the
+        // font size and scale it down 1/devicePixelRatio.
+        this._scaleX = this._scaleY = 1 / cc.view.getDevicePixelRatio();
         return true;
     },
 
@@ -578,6 +583,87 @@ cc.LabelTTF = cc.Sprite.extend(/** @lends cc.LabelTTF# */{
         return texDef;
     },
 
+    /*
+     * BEGIN SCALE METHODS
+     *
+     * In order to make the value of scaleX and scaleY consistent across
+     * screens, we provide patched versions that return the same values as if
+     * the screen was not HiDPI.
+     */
+
+    /**
+     * Returns the scale factor of the node.
+     * @warning: Assertion will fail when _scaleX != _scaleY.
+     * @function
+     * @return {Number} The scale factor
+     */
+    getScale: function () {
+        if (this._scaleX !== this._scaleY)
+            cc.log(cc._LogInfos.Node_getScale);
+        return this._scaleX * cc.view.getDevicePixelRatio();
+    },
+
+    /**
+     * Sets the scale factor of the node. 1.0 is the default scale factor. This function can modify the X and Y scale at the same time.
+     * @function
+     * @param {Number} scale or scaleX value
+     * @param {Number} [scaleY=]
+     */
+    setScale: function (scale, scaleY) {
+        this._scaleX = scale / cc.view.getDevicePixelRatio();
+        this._scaleY = ((scaleY || scaleY === 0) ? scaleY : scale) /
+          cc.view.getDevicePixelRatio();
+        this._renderCmd.setDirtyFlag(cc.Node._dirtyFlags.transformDirty);
+    },
+
+    /**
+     * Returns the scale factor on X axis of this node
+     * @function
+     * @return {Number} The scale factor on X axis.
+     */
+    getScaleX: function () {
+        return this._scaleX * cc.view.getDevicePixelRatio();
+    },
+
+    /**
+     * <p>
+     *     Changes the scale factor on X axis of this node                                   <br/>
+     *     The default value is 1.0 if you haven't changed it before
+     * </p>
+     * @function
+     * @param {Number} newScaleX The scale factor on X axis.
+     */
+    setScaleX: function (newScaleX) {
+        this._scaleX = newScaleX / cc.view.getDevicePixelRatio();
+        this._renderCmd.setDirtyFlag(cc.Node._dirtyFlags.transformDirty);
+    },
+
+    /**
+     * Returns the scale factor on Y axis of this node
+     * @function
+     * @return {Number} The scale factor on Y axis.
+     */
+    getScaleY: function () {
+        return this._scaleY * cc.view.getDevicePixelRatio();
+    },
+
+    /**
+     * <p>
+     *     Changes the scale factor on Y axis of this node                                            <br/>
+     *     The Default value is 1.0 if you haven't changed it before.
+     * </p>
+     * @function
+     * @param {Number} newScaleY The scale factor on Y axis.
+     */
+    setScaleY: function (newScaleY) {
+        this._scaleY = newScaleY / cc.view.getDevicePixelRatio();
+        this._renderCmd.setDirtyFlag(cc.Node._dirtyFlags.transformDirty);
+    },
+
+    /*
+     * END SCALE METHODS
+     */
+
     /**
      * Changes the text content of the label
      * @warning Changing the string is as expensive as creating a new cc.LabelTTF. To obtain better performance use cc.LabelAtlas
@@ -832,6 +918,15 @@ document.body ?
         document.body.appendChild(cc.LabelTTF.__labelHeightDiv);
     }, false);
 
+/**
+ * Returns the height of text with an specified font family and font size, in
+ * device independent pixels.
+ *
+ * @param {string|cc.FontDefinition} fontName
+ * @param {number} fontSize
+ * @returns {number}
+ * @private
+ */
 cc.LabelTTF.__getFontHeightByDiv = function (fontName, fontSize) {
 
     if(fontName instanceof cc.FontDefinition){

cocos2d/core/labelttf/CCLabelTTFCanvasRenderCmd.js

@@ -57,7 +57,8 @@ cc.LabelTTF._firsrEnglish = /^[a-zA-Z0-9ÄÖÜäöüßéèçàùêâîôû]/;
             this._fontClientHeight = cc.LabelTTF.__getFontHeightByDiv(fontNameOrFontDef);
 
         }else {
-            this._fontStyleStr = fontStyle + " " + fontWeight + " " + fontSize + "px '" + fontNameOrFontDef + "'";
+            var deviceFontSize = fontSize * cc.view.getDevicePixelRatio();
+            this._fontStyleStr = fontStyle + " " + fontWeight + " " + deviceFontSize + "px '" + fontNameOrFontDef + "'";
             this._fontClientHeight = cc.LabelTTF.__getFontHeightByDiv(fontNameOrFontDef, fontSize);
         }
     };
@@ -123,22 +124,32 @@ cc.LabelTTF._firsrEnglish = /^[a-zA-Z0-9ÄÖÜäöüßéèçàùêâîôû]/;
             locStrokeShadowOffsetY += Math.abs(locOffsetSize.y) * 2;
         }
 
+        var pixelRatio = cc.view.getDevicePixelRatio();
         //get offset for stroke and shadow
         if (locDimensionsWidth === 0) {
             if (this._isMultiLine)
-                locSize = cc.size(Math.ceil(Math.max.apply(Math, locLineWidth) + locStrokeShadowOffsetX),
-                    Math.ceil((this._fontClientHeight * this._strings.length) + locStrokeShadowOffsetY));
+                locSize = cc.size(
+                    Math.ceil(Math.max.apply(Math, locLineWidth) + locStrokeShadowOffsetX),
+                    Math.ceil((this._fontClientHeight * pixelRatio * this._strings.length) + locStrokeShadowOffsetY));
             else
-                locSize = cc.size(Math.ceil(this._measure(node._string) + locStrokeShadowOffsetX), Math.ceil(this._fontClientHeight + locStrokeShadowOffsetY));
+                locSize = cc.size(
+                    Math.ceil(this._measure(node._string) + locStrokeShadowOffsetX),
+                    Math.ceil(this._fontClientHeight * pixelRatio + locStrokeShadowOffsetY));
         } else {
             if (node._dimensions.height === 0) {
                 if (this._isMultiLine)
-                    locSize = cc.size(Math.ceil(locDimensionsWidth + locStrokeShadowOffsetX), Math.ceil((node.getLineHeight() * this._strings.length) + locStrokeShadowOffsetY));
+                    locSize = cc.size(
+                        Math.ceil(locDimensionsWidth + locStrokeShadowOffsetX),
+                        Math.ceil((node.getLineHeight() * pixelRatio * this._strings.length) + locStrokeShadowOffsetY));
                 else
-                    locSize = cc.size(Math.ceil(locDimensionsWidth + locStrokeShadowOffsetX), Math.ceil(node.getLineHeight() + locStrokeShadowOffsetY));
+                    locSize = cc.size(
+                        Math.ceil(locDimensionsWidth + locStrokeShadowOffsetX),
+                        Math.ceil(node.getLineHeight() * pixelRatio + locStrokeShadowOffsetY));
             } else {
                 //dimension is already set, contentSize must be same as dimension
-                locSize = cc.size(Math.ceil(locDimensionsWidth + locStrokeShadowOffsetX), Math.ceil(node._dimensions.height + locStrokeShadowOffsetY));
+                locSize = cc.size(
+                    Math.ceil(locDimensionsWidth + locStrokeShadowOffsetX),
+                    Math.ceil(node._dimensions.height * pixelRatio + locStrokeShadowOffsetY));
             }
         }
         if(node._getFontStyle() !== "normal"){    //add width for 'italic' and 'oblique'