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 ,这样做真机上就很清晰了。

点击查看原文

未经允许不得转载:cocos集中营 » Cocos Creator制作圆形头像及高清字体方案
微信公众号:zs40086
免vip看全网视频,抢先福利电影啥都有!
10000人已关注
分享到:
赞(0) 打赏