Cocos Creator 3.0 教程! 标志板! Billboard !
共 1651字,需浏览 4分钟
·
2020-12-26 20:38
用2D素材节省包体!节约性能!
前言
标志板是什么呢?
billboard
英文翻译为广告牌,标志板和广告牌肯定会有不可告人的联系!
广告牌的使命是什么?就是无论你在哪里,都要让你看到!
标志板也是这个意思!无论你(摄像机)怎么看,这个板永远朝向着你!
以上纯属个人理解,不构成正确的定义
标志板可以以低廉的成本呈现出还不错的效果,例如场景中大量出现的草(一种植物)、树和金币等。
一起看看,我们这最终实现的效果,可以看到随着视角(摄像机)的转动,金币和logo都是一直朝着我们的。
使用
此组件并未在线上实际项目实践过,小心驾驶使用!
打开冰箱要几步,使用这个标志板就要几步:
在场景中新建一个节点,并为其添加蜜汁组件 BillboardHelper
。被迫拖入特殊调制的 lamyoung-billboard.effect
, 拖入你想要或不想要展示的图片资源。调教 BillboardHelper
中的参数,找到一个你喜欢的姿势。
La perfection est atteinte non quand il ne reste rien à ajouter,mais quand il ne reste rien à enlever
实现
Cocos Creator 3.0
有一个 Billboard
组件(引擎内是为粒子系统服务的),本来想直接用的,但存在以下几个问题。
颜色值过亮(原因是初始化颜色值没有归一化) 纹理上下翻转(原因是计算时纹理坐标与位置坐标的对应关系) 不支持纹理缩放偏移( effect
中有一个变量没用到)
针对上面问题,我们只需要重新写一个组件脚本,继承 Billboard
,修改成我们想要的(也可改源码,但可能影响粒子系统)。
export class BillboardHelper extends Billboard
针对纹理翻转和缩放偏移,我们可以新建一个lamyoung-billboard.effect
,把内置的builtin-billboard.effect
拷贝再改改。
接着在代码中替换材质。
this._material.initialize({ effectAsset: this._effect, technique: 1 });
在代码中添加一个属性,修改偏移值,啪的一下,就完成啦!
set tillOffset(val) {
this._tillOffset = val;
this._material.setProperty('mainTiling_Offset', this._tillOffset);
}
小结
巧用标志板!3d效果值得拥有!
本文中出现的游戏开发程序员必备英语单词回顾:
billboard
-[ˈbilbôrd]
广告牌
以上为白玉无冰使用 Cocos Creator 3.0 preview-1
实现 "标志版!Cocos Creator Billboard !"
的技术分享。听说大帅哔/大漂亮都喜欢分享!
完美之道,不在无可增加,而在无可删减!
更多
Cocos Creator 3.0 入门! 2D 素材 3D 效果!
基础光照模型!Cocos Creator 2D 光照!
2020 原创精选! shader | 挖洞 | 流体 | 3D | 绳子纹理 | 四叉树 | 数学
更多精彩欢迎关注微信公众号
完整项目:整理好后放评论区置顶(从微信中打开)
点击“阅读原文”查看精选导航
点赞 在看 打赏 留言 鼓励一下▼