cocos creator 制作圆形头像及高清字体方案

第一点制作圆形头像
有两张做法，第一种是手动在 creator 编辑器上添加一个 Mask 组件，然后在组件下添加一个
Sprite，接着就 new cc.SpriteFrame(texture)。组件 Mask 的 type 改为 ellipse，
size改为你想要的大小（如 W 70 H 70），然后把你要遮罩的图片放到这个节点下作为子节点，
同样图片 W 70 H 70。
第二种就是用代码的方式直接写出来。
直接贴一个方法，如下

setAvatar: function () {
    var self = this;
    var avatar = window.global.avatar;
    // var avatar = "http://wx.qlogo.cn/mmopen/vi_32/aSKcBBPpibyKNicHNTMM0qJVh8Kjgiak2AHWr8MHM4WgMEm7GFhsf8OYrySdbvAMvTsw3mo8ibKicsnfN5pRjl1p8HQ/0"
    cc.loader.load({
        url: avatar,
        type: 'jpg'
      }, function (err, texture) {
          if (err) {
              console.log('加载玩家头像err === ', err);
              return;
            }
          var node = new cc.Node('avatar');
          var sp = node.addComponent(cc.Sprite);
          sp.spriteFrame = new cc.SpriteFrame(texture);
          var mask = new cc.Node();
          var mask_node = mask.addComponent(cc.Mask);
          // var mask = new cc.Node('mask');
          mask.parent = self.node;
          // mask_node.parent = mask;
          node.parent = mask;
          node.width = 50;
          node.height = 50;
          mask.x = -138;
          mask.y = 233;
          mask_node.type = cc.Mask.Type.ELLIPSE;
          console.log(mask)
          mask.width = 50;
          mask.height = 50;
          })
        },

这里的重点是

var mask_node = mask.addComponent(cc.Mask);

上面这一句是用程序加上了 Mask 这个真正的组件，有了这个 mask_node 才能操作属性检查器中的 Mask 的专有属性，同理别的组件也是这样，有时候可以直接用 getComponent 获得，如某个 Label，就是 

cc.find('Canvas/xx/ab').getComponent(cc.Label);

当我们做排行榜的时候就用 prefab 的方法，然后用第一种方法会更加简单。

cocos creator 的字体清晰度问题，这里也是一个坑，因为如果按照设计稿来做，如字号设为 20 point，真机上是会模糊的，后来发现了一个不错的方案，就是直接将字号乘以 4 （上面的字号就是 80 了），scaleX = 0.25， scaleY = 0.25 ，这样做真机上就很清晰了。