高级弹幕

Mfuns高级弹幕手册

文档当前版本 ：1.7.0beta

弹幕实验室地址：
弹幕实验室(已停止维护)
弹幕实验室(新版)

入门

Mfuns 的高级弹幕是由 JSON 格式组成，关于基本 JSON 格式语法，请参阅：菜鸟教程 - JSON 语法。

文件格式

弹幕文件是由 JSON 文件组成，基本的格式为：

1
2
3
4
5
6
7
8
9
[
  {
    //单个弹幕。。。
  },
  {
    //单个弹幕。。。
  }
  //。。。
]

所有的弹幕，最外层由 [] 英文半角状态的中括号包裹，单个弹幕以 {} 大括号包裹。

舞台

此弹幕引擎的舞台的大小比例固定为 16:9，其逻辑分辨率为 1600:900,1920:1080(1.1.0 更新，修改了舞台分辨率大小) ,会根据屏幕的大小自动进行缩放。

因此，弹幕作者并不需要去考虑弹幕大小对于屏幕的适配问题，可放心的使用绝对像素值对内容进行描述与定位

弹幕基本格式

一个弹幕的基本组成内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "type":"text",
    "start":0,
    "id":"id",
    "extends":"id",
    "then":"id",
    "x":0,
    "y":0,
    "z":0,
    "duration":1000,
    "delay":0,
    "content":"danmaku",
    "style":{},
    "animations":[],
    "child":[]
},

接下来我将对其一一介绍：

属性 可选 内容 备注
type 可选 text 弹幕类型，目前仅有 text
start 必须存在 数字 弹幕开始时间（毫秒）优先级比 then 更高
content 必须存在 文本 弹幕内容
style 可选 弹幕样式 直接应用 css 的样式（小驼峰命名）
animations 可选 动画列表 作用于弹幕的动画
child 可选 弹幕子元素 子元素也是一个完整的弹幕，但是 start 属性不能使用
x,y,z 可选 数字 设置弹幕的坐标 当 animations 中 存在内容时将会被覆盖
duration 可选 数字 弹幕存活时间 当 animations 中 存在内容时将会被覆盖
id 可选 文本 设置弹幕的 id，可以在其他地方引用
extends 可选 文本 继承一个弹幕属性，内容为已经设置的 id，可以使用 _LAST_ 引用上一条
then 可选 文本 在一条弹幕结束之后，播放此弹幕 内容为 id，可以使用 _LAST_ 引用上一条
delay 可选 数字 延迟播放毫秒数，使用负数将会提前播放

注意：弹幕内的所有属性，注意分清是大括号还是中括号，如果括号错误，弹幕无法解析
每个属性结尾，如果有下一个属性，不要忘记加逗号

弹幕类型

当前仅有文本弹幕( type 属性为 text )，以后或许会开发出其他类型的弹幕（比如 SVG ）

弹幕生命周期

一条弹幕的完整生命周期由开始时间到结束时间，弹幕的开始时间由 start 属性设置，单位时间为毫秒。弹幕的结束时间由动画时长进行控制，其长度为动画的时长

弹幕的样式

目前弹幕样式可以直接使用 CSS 的大部分常用样式，如果你没有接触过网页，也不知道 CSS 是什么，不用担心，这并不会影响到弹幕的使用。

您可以从这里找到有关于样式的全部属性 菜鸟教程 - CSS 参考手册

例如：

我们希望让弹幕的字体为 40px，并且为红色，我们从上面链接中的参考手册中找到设置字体大小的属性为 font-size 我们将横线去掉，其转换成首字母小写的驼峰命名：fontSize，这便是弹幕中 style 属性的成员之一，同理，我们再找到设置字体颜色的属性 color，最后得出以下弹幕：

1
2
3
4
5
6
7
8
9
10
11
[
  {
    "type": "text",
    "start": 0,
    "content": "这是一段40像素的红色文本",
    "style": {
      "fontSize": "40px",
      "color": "red"
    }
  }
]

点我运行一下

弹幕 id

弹幕的 id 用于标记某一条弹幕
id 的命名规则无任何要求，可以使用任意的字符串数字特殊符号，但使用_LAST_将会冲突

_LAST_ 是一个特殊的指针 id，其始终指向其上一条弹幕，如果没有上一条，该 id 无效

id 的作用域

id 仅在当前弹幕文件中有效，分批次发送的弹幕，其 id 的作用域不同
父级对象的 id 无法被子级引用，子级弹幕拥有直接的定义域

弹幕的继承

弹幕可以使用 extends 属性继承一个弹幕，被继承的弹幕需要使用 id 进行标记，也可以使用_LAST_来引用上一条弹幕

被继承的弹幕，会继承父级弹幕的所有内容，可以对属性进行重写

动画(animations)由于在存储方式上为一个数组，所以如果aniamtions重写之后，会覆盖全部动画

这是一个继承的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
  {
    "content": "A",
    "id": "A",
    "style": {
      "color": "red",
      "fontSize": "100px"
    }
  },
  {
    "extends": "A",
    "content": "B"
  }
]

此处第二条弹幕继承了 id 为 A 的弹幕,他的颜色是 红色 大小是 100px

then 关键字

可以使用 then 关键字，引用一条弹幕，在这条引用的弹幕结束后展示弹幕，同样的，也可以使用 _LAST_ 来引用上一条弹幕

delay 关键字

delay 用于延迟播放一条弹幕，配合 then 属性有比较好的效果
但 delay 为负数时，表现为提前播放

弹幕动画

弹幕动画使用 animations 属性定义（注意最后有个 s），动画列表使用数组表示。

1
2
3
4
5
6
7
8
[
  {
    "type": "static", //动画类型
    "cubic": [0, 0, 1, 1], //贝塞尔曲线,可选
    "duration": 1 //弹幕的生存周期，可选，默认1000
    //...弹幕内部属性
  }
]

目前已经支持的基本动画类型有：

动画名称 type 类型 描述 内部属性
静止动画 static 静止在某个坐标一段时间 x,y,z
移动动画 translate 从一处移动到另一处 path:{x1,y1,z1,x2,y2,z2}
X 轴旋转 rotateX 沿着一个点绕 x 轴旋转一点角度 origin:[x,y,z],angle:{start:number,end:number}
Y 轴旋转 rotateY 沿着一个点绕 y 轴旋转一点角度 origin:[x,y,z],angle:{start:number,end:number}
Z 轴旋转 rotateZ 沿着一个点绕 z 轴旋转一点角度 origin:[x,y,z],angle:{start:number,end:number}
缩放动画 scale 按照某个原点对弹幕经行缩放 origin:[x,y,z],scale:{x1:number,y1:number,z1:number,x2:number,y2:number,z2:number}
透明度动画 opacity 从一个透明度变换成另一个透明度 opacity:[o1,o2]

1.1.0 更新透明度动画

目前支持的复杂动画类型有

动画名称 type 类型 描述 内部属性
组动画 group 组动画将多个基本动画放进一个组中，实现并行播放 animations:[]
列表动画 list 列表动画将对多个动画依次播放 animations:[]
重复动画 repeat 重复执行某个动画 n 次 repeat:number,animations:[]

目前，所有的复制动画类型均可嵌套其他复杂动画类型，组成更复杂的动画

例如，现在要实现一个基本的移动动画，我们依旧拿上一个弹幕作为例子，我们再此基础上加上 animations 属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
[
  {
    "type": "text",
    "start": 0,
    "content": "这是一段40像素的红色文本",
    "style": {
      "fontSize": "40px",
      "color": "red"
    },
    "animations": [
      {
        "type": "translate",
        "duration": 3000,
        "path": {
          "x1": 100,
          "y1": 100,
          "x2": 1000,
          "y2": 600
        }
      },
      {
        "type": "translate",
        "duration": 3000,
        "path": {
          "x2": -100,
          "y2": -200
        }
      }
    ]
  }
]

点我运行一下

子元素

子元素在 childs 属性内，内部内容为弹幕元素的数组，除了不能使用 start 属性,与上面讲的一致

子元素会根据父元素进行定位操作

一些简单的动画示例

带曲线动画的文字移动
红色方块移动
立方体旋转
Windows98 窗口(需要 1.1.3 以上版本)