进入B站后笔者首先着手的就是哔哩哔哩国际版的弹幕重构。
哔哩哔哩国际版内部简称蓝版,这是因为其主题色位蓝色,这么做的目的是为了和国内的粉版区分。其能在海外的 App Store上下载到,以下是 APP 的介绍页面:

B站海外版应用

蓝版的代码最初是从粉版 fork 出来的,并且阉割了一些比较重的、不常用的功能。考虑到海外的网络情况和国内差的不是一点半点,因此本人(kyson.cn)在重构弹幕时还做了很大幅度的优化。这会在文章中慢慢分享给大家。

引言

首先给大家提个问题:如果让您设计一个弹幕,你会怎么着手去做这件事。这里我相信大家不约而同肯定会想到:github。
我们先罗列一下 github 上 star 数较多的几个弹幕库:

弹幕库名star 数地址
BarrageRenderer2.2khttps://github.com/unash/BarrageRenderer
DanmakuFlameMaster9.5khttps://github.com/bilibili/DanmakuFlameMaster

BarrageRenderer

BarrageRenderer 是个人开发者编写的,完成度还算挺高,可惜目前已经不维护了。查看 BarrageRenderer 代码可知,其关键逻辑还是更改 UIView 的 Frame:

#pragma mark - update
/// 每个刷新周期执行一次
- (void)update
{
    [_dispatcher dispatchSprites]; // 分发精灵
    for (BarrageSprite * sprite in _dispatcher.activeSprites) {
        [sprite updateWithTime:self.time];
    }
}

#pragma mark - update

- (void)updateWithTime:(NSTimeInterval)time
{
    _valid = !self.forcedInvalid && [self validWithTime:time];
    _view.frame = [self rectWithTime:time];
    if ([_view respondsToSelector:@selector(updateWithTime:)]) {
        [_view updateWithTime:time];
    }
}

DanmakuFlameMaster

DanmakuFlameMaster 简称 DFM,开源的只有 Android 版本,是哔哩哔哩早期使用的弹幕引擎。由于本人不是专业的 Android 开发,因此我不做过多分析。

本人(kyson.cn)在B站第一个任务就是负责将 DFM 下架,转而使用字幕/弹幕统一框架 Chronos。 关于 Chronos 我后面做详细介绍,这里先和大家报告一下 DFM 在 iOS 版本下的一些实现原理。

由于 iOS 版本的 DFM 没有开源,我这里不能将具体代码贴出,但我会将其实现原理大致告诉大家。

和 BarrageRenderer 有一些相似之处

我怀疑 BarrageRenderer 作者是否在B站工作过,他的设计理念,甚至一些方法名都和 DFM 一模一样。不信你看:

- (void)updateWithTime:(DFMTime)time {
   //此处省略一部分代码
}

这是核心的更新弹幕位置的函数。其他的部分相似的还有命名:DFMClock,设计思想也有一部分类似,因此看懂 BarrageRenderer 代码对理解 DFM 有一定帮助

DFM 不是基于 UIKit

这是和 BarrageRenderer 差异最明显的地方。DFM 基于更底层的 Metal/OpenGL,使用哪个 Render 组件取决于手机型号是否支持。

集大成者 Chronos

不管是 BarrageRenderer 还是 DFM 都有一定的局限性:他们很难在 iOS 和 Android 实现统一,最多保证理念一致,但实现需要依靠各自平台库支持。这个时候一个大一统的方案呼之欲出,他就说 Chronos。
Chronos 脱胎于谷歌的 Khronos , 在 B 站内部被封装成了 Framework,具体的展现逻辑需要依赖一个 js 项目,有点类似于 Webkit 的 Canvas 。如此一来,我们只需要把 js 逻辑写好,其他部分交给 chronos 来绘制即可。Android 和 iOS 各自安装一份 Chronos 库文件相对来说就容易的多。

其他方案

  • 腾讯的 PAG 可以实现酷炫的动画效果,简单的弹幕当然不在话下
  • gltf

引用

awesome-danmaku

B站弹幕库DanmakuFlameMaster源码浅析