SCDB-EventViewer-pack

ShinyColorsDB-EventViewer typescript version

A simple viewer that renders shinycolors events

Requirements

• PixiJS : >7
• GSAP : >3
• pixi-spine : >4

Installation

Via npm

npm i scdb-eventviewer

import { EventViewer } from 'scdb-eventviewer'

Via CDN

<script src="https://cdn.jsdelivr.net/npm/scdb-eventviewer/dist/scdb-eventviewer.min.js"></script> 

Basic usage

//create pixi app
const pixiapp = new PIXI.Application({
        width: 1136,
        height: 640,
        view: document.getElementById('canvas'),
});

/**
 * create EventViewer
 * same as 
 * const viewer = SCDB.EventViewer.new()
*/
const viewer = new SCDB.EventViewer();

/**
 * add the viewer to app stage
 * same as
 * pixiapp.stage.addChild(viewer);
*/
viewer.addTo(pixiapp.stage)

/**
 * load TranslateData
 * await viewer.searchAndLoadTranslation('produce_events/202100711.json');
 * or 
 * await viewer.loadTranslation(url) // *your translation file or full url 
*/
await viewer.loadTranslation('https://raw.githubusercontent.com/biuuu/ShinyColors/gh-pages/data/story/ac1b168.csv')

/**
 * load Track
 * or you can use 
 * viewer.loadAndPlayTrack('https://viewer.shinycolors.moe/json/produce_events/202100711.json');
*/
await viewer.loadTrack('https://viewer.shinycolors.moe/json/produce_events/202100711.json');
viewer.start();