Skip to main content

A minimalist component-based
osu! storboarding framework.

Create osu storyboard in a simple yet flexible way.

npm i @osbjs/osbjs
Get started >

Fast. Simple. Easy to pick up.

Creating storyboard has never been easier. Just tell osbjs where your beatmap folder and what the output osb filename should be. No extra configurations.

index.js
// Create storyboard instance.
const sb = new Storyboard('Artist - Song Name (Map Host).osb')

// Create a sprite
let sprite = new Sprite('sb/s.png', Layer.Background, Origin.Center)

// Add move command to sprite.
let startTime = 0,
endTime = 10000,
startPos = new OsbVector2(320, 345),
endPos = new OsbVector2(240, 480)
sprite.Move(startTime, endTime, startPos, endPos, Easing.OutExpo)

// Register sprite.
sb.registerComponents(sprite)

// Generate storyboard file.
sb.generate()
components/Flash.js
class Flash extends Component {
constructor(startTime, endTime) {
super()
this.startTime = startTime
this.endTime = endTime
}

generate() {
let startScale = new OsbVector2(854, 480),
endScale = new OsbVector2(854, 480)
let fl = new Sprite('sb/dot.png', Layer.Background)
fl.ScaleVec(this.startTime, this.startTime, startScale, endScale)
fl.Fade(this.startTime, this.endTime, 1, 0)
this.registerComponents(fl)
}
}
index.js
let fl = new Flash(0, 3000)

sb.registerComponents(fl)

Flexible. Reusable.

Since everything is a component, you can reuse your code and manage your project however you want. Even better, you can publish your own component and let others use it!

Features