学习是一件开心的额事情
- 学习目标
从零打造直播视频弹幕框架
- 主要用到的技术
OpenGL ES 2.0
- 核心思路
文字转图片-> 图片通过OpenGL渲染
-
已实现功能
1.支持文字弹幕
2.支持图片弹幕
3.支持Gif动画弹幕
4.支持弹幕缓冲
5.支持碰撞检测
6.弹幕速度可调节
7.弹幕的大小和颜色设置
8.弹幕特效 -
架构方案
设计图
弹幕基类
弹幕的顶点数据和图片数据属性,以及一些方法设置顶点坐标位置的方法
文字弹幕，图片弹幕，gif弹幕
生成对应弹幕数据的方法
弹幕信息类
包含用户信息，等级，时间,弹幕速度，弹幕类等
弹幕加工厂
处理弹幕先屏幕中显示的位置，以及缓存弹幕的数量等
渲染类
负责配置OpenGL,如帧率,深度格式等
目前的进度
1.支持文字弹幕和图片弹幕
2.用户等级排序
3.支持弹幕碰撞效果和重叠效果
4.支持自定义字体大小和颜色
5.支持多种特效弹幕
6.速度可调节
- 重叠效果
让学习成为一种习惯
- 碰撞检测
让学习成为一种习惯
-
做了几种特效
有木有很爽
让学习成为一种习惯
让学习成为一种习惯
让学习成为一种习惯
让学习成为一种习惯
- 图片弹幕
让学习成为一种习惯
让学习成为一种习惯
- gif动画弹幕
让学习成为一种习惯
- 支持淡入,淡出,淡入淡出效果
只是其中一种
遇到的问题
1.在异步计算,弹幕顶点的位置,在主线程计算渲染计算后的数据,导致两个线程同时竞争一个数组对象,计算的时候,不能显示, 显示的时候不能计算,导致了出现卡顿现象
解决方案: 让移步计算每次触发的间隔时间变长,降低竞争的概率,但有时还是会竞争,不过概率大大减小,牺牲了弹幕的移动速度。
解决方案二:使用了一种快速排序算法,每一帧同步计算弹幕的位置,检测碰撞,去掉弹幕数组的线程锁,弹幕运行效率明显提高,所以最终选择了方案2.
2.在将纹理数据加载到GPU 中去后,调用下面的方法不能释放,导致内存不断增高!
解决:发现内存增高的问题不是纹理导致的,而是自己获取图片RGBA 数据的时候,不小心多申请了一次内存
- 总结
弹幕框架继续完善中,如果你想要代码,请到这里下载,如果你觉得那些地方不合理,烦请直言指出!万分感谢。框架持续更新中,敬请关注!
网友评论