Bullet-screen-engine NPM

openBSE

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 and WebGL. 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 bullet-screen-engine

Use

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

Minimum Version:

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

Debug Version:

<script src="bulletScreenEngine.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 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(^_^)",
        color: 'white',
        startTime: _startTime
    });
    _startTime += parseInt(Math.random() * 300);
}
bulletScreenEngine.play();

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

See wiki for detailed instructions.