Chart Embed Library

Embed VSRG levels directly into the browser for customizable previews with highlights and simple management!

View project

Here is an example of what the game preview looks like:

Features:

  • A timeline bar, listed time and the ability to seek
  • Any number of highlights on the timeline bar of any desired colors
  • Keyboard configuration and the ability to test for ghosting
  • Volume control, custom scroll direction and scroll speeds
  • Keyboard buttons for pause/play, and seek forwards and backwards one second
  • Can optionally add a download link to the file
  • Separate sync track for timing and X-mod track for choreographed effects

Getting Started

Embedding a level into the page is really simple! First, let's include all the libraries we need.

<script src="https://code.createjs.com/1.0.0/createjs.js"></script>
<script src="gamesrc/html5kbo.js"></script>

Next, let's create a canvas element where our game preview will be. Set up the body element with an onload method.

<body onload="init()">
	<canvas id="throwdown" width="800" height="600"></canvas>
</body>

Finally, we create a configuration object and pass it to the setup function.

<script>
    function init() {
        // initialize game
        var games = [
            {
                canvasid: "throwdown",              // canvas ID
                song: "Throwdown.mp3",              // path of audio file
                chart: {
                    src: "Throwdown.sm",            // path of .sm file
                    type: "6k",                     // 4k or 6k
                    diff: 'Easy',                   // chart difficulty name
                    highlights: [                   // list all of the higlights
                        [68,100]                    // [starting beat, ending beat, (optional) hex color]
                    ],
                    chartArtist: 'CosmoVibe'        // chart artist
                },
                downloadURL: '<download url link>'  // (optional) download URL link
            }
        ]
        html5kbo(games);
    }
</script>

Notice that the "games" variable is an array. You can put multiple chart configurations into this array to set up multiple canvas elements on the same page!

X-mod configuration

By default, the .sm file will be converted so that the notes scroll at a constant speed. However, with additional configuration, we can include X-mod effects. We will add additional variables to the .sm file. Let's begin with a very simple pattern consisting of 4th notes. We will also assume these are beats 0 through 3.

1000
0100
0010
0001

Now, we will create a stutter effect on the first two notes by pausing briefly on each note, and then catching up with a higher speed. We begin by doubling all of these speeds on the first two notes and then setting the speed back to normal for the last two.

#XMODBPMS:0=2,2=1;

Notice that for the X-mod speed value, the default is always 1. The value is the multiplier to the default speed. Once the speed of the first two notes have been doubled, the spacing between those notes is also doubled. We will now add the stutter to pull them back to their original positions.

#XMODSTOPS:0=0.5,1=0.5;

Again, notice that the stop values are not in units of seconds, but in beats. Specifically, beats of the original chart. This makes creating X-mod effects very appealing for several reasons. Everything is scaled to a simple factor that does not depend on how the file is synced, which standardizes the speed to be much more consistent, and also makes it much easier for the artist to adjust their speeds or get creative because the calculations are far simpler.

Upcoming features