openBSE

中文版本 | wiki | Demo Docs

A high-performance JavaScript bullet-screen (danmaku) engine. 1000+ at the same time

Summary

This is a high-performance JavaScript bullet-screen (danmaku) engine and it is very simple and easy to use. This bullet-screen engine can render bullet-screen by using CSS3, Canvas 2D, WebGL and SVG. This bullet-screen engine can render top, bottom and backward bullet-screen. Using Canvas 2D can render at lest 1000 bullet-screens at the same time. (some times can render 1600 ullet-screens at the same time)

Installation and use

Installation

You can click here to download latest release version. You also can install NPM package using following commands.

> npm install openbse

Use

After the installation, include the script in the html page.

Minimum Version:

<script src="openBSE.all.min.js"></script>

Debug Version:

<script src="openBSE.all.js"></script>

For display bullet-screen, you need add a fixed-size div tag in the html page and the id is BulletScreensDiv. Then add the following JavaScript code.

var bulletScreenEngine = new openBSE.BulletScreenEngine(document.getElementById('BulletScreensDiv'));
var _startTime = 5000;
for (var i = 0; i < 10000; i++) {
    bulletScreenEngine.addBulletScreen({
        text: "This is a long long long long long long long long long test(^_^)",
        startTime: _startTime
    });
    _startTime += Math.round(Math.random() * 300);
}
bulletScreenEngine.play();

Open the web page with a browser to display the bullet-screen.

See wiki for detailed instructions.

Contact

If you have any issue please write issues.
E-mail：scottxu@scottxublog.com

Copyright

This project is an open source project and it is licensed under the MIT License. If you want to read this license, please click here.