为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
JavaScript
第一点制作圆形头像
有两张做法,第一种是手动在 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 ,这样做真机上就很清晰了。





点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消