用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 | 绳子纹理 | 四叉树 | 数学

更多精彩欢迎关注微信公众号

 点赞  在看 打赏 留言 鼓励一下▼