Cocos Creator 3.0 教程! 标志板! Billboard !

用2D素材节省包体!节约性能!

前言

标志板是什么呢?

billboard 英文翻译为广告牌,标志板和广告牌肯定会有不可告人的联系!

广告牌的使命是什么?就是无论你在哪里,都要让你看到!

标志板也是这个意思!无论你(摄像机)怎么看,这个板永远朝向着你!

以上纯属个人理解,不构成正确的定义。

标志板可以以低廉的成本呈现出还不错的效果,例如场景中大量出现的草(一种植物)、树和金币等。

Cocos Creator 3.0 Preview

一起看看,我们这最终实现的效果,可以看到随着视角(摄像机)的转动,金币和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 | 绳子纹理 | 四叉树 | 数学 样样都有!
四元数


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


原文链接
原创文章导航

NewProject_CCC3_0_billboard.zip (1.6 MB)

8赞

是啊。threejs上就有这个。

1.2 不显示,应该怎么改

我也是,颜色值归一化之后,就直接看不到了

试了一下 3d 1.2 颜色不用归一化, 原因没找到 :sob:
顺便改了一个1.2版的标志板。。可以试试
NewProject_3D_120_billboard.zip (284.9 KB)

billboard有啥高级? 十几年前上大学的时候dx9早就有了

大佬,麻烦问下有没有3.6.0版本得呀

对比一下1.2和3的代码,改一下就行了。
不过我有个疑惑,为什么image 这个createModel函数是private,内部又没调用,却有效果,是哪里强制跳过语法检查调用了吗