cocos creator 制作圓形頭像及高清字體方案
標(biāo)簽:
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 ,这样做真机上就很清晰了。
點(diǎn)擊查看更多內(nèi)容
2人點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí),寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得
100積分直接送
付費(fèi)專(zhuān)欄免費(fèi)學(xué)
大額優(yōu)惠券免費(fèi)領(lǐng)