Started out as a friday-night proof of concept, ended up as a sexy little tool that actually works.
Presenting: osb.js
What is it?
osb.js is the successor of my previously failed oosbl (p/792028), which was just flat out bad. The idea was to script a osu storyboard without fiddling around with the osb DSL.
But why creating another DSL for it? Why not using something that already exists and is simple as well?
osb.js is, as the name already says, a JavaScript wrapper of the osu storyboard language. It aims to make story boarding a bit more simple and comfortable, even for beginner.
Having that in mind, compiling the script should be easy as well. Just like saving a osb document.
osb.js is a chronological tool, objects have their own flow. You set the start time and the tool will care about the rest. Animation durations are relative only.
Sounds good. How do I use it?
Right now, osb.js is available as a extension for adobes editor brackets (http://download.brackets.io/).
Brackets, because it already knows javascript and writing plugins is pretty easy.
Using brackets and the osb.js extension will allow compiling the moment you press save
Documentation?
Pros?
Code available here - https://github.com/dabido/osb.js
Please tell me what you think.
Presenting: osb.js
osb.js is the successor of my previously failed oosbl (p/792028), which was just flat out bad. The idea was to script a osu storyboard without fiddling around with the osb DSL.
But why creating another DSL for it? Why not using something that already exists and is simple as well?
osb.js is, as the name already says, a JavaScript wrapper of the osu storyboard language. It aims to make story boarding a bit more simple and comfortable, even for beginner.
Having that in mind, compiling the script should be easy as well. Just like saving a osb document.
var pulse = new Effect();will result in:
pulse
.setTransparency(1)
.setSize(0, 0.2)
.startBatch()
.resize(1000, 1)
.fadeOut(1000)
.endBatch()
;
var stone = new Sprite("stone.jpg", 0, Origin.CENTRELEFT, Layer.BACKGROUND);
stone
.setTransparency(0)
.fadeIn(1000)
.fadeOut(1000)
.fadeIn(1000)
.resize(1000, 0.2)
.moveTo(1000, 200, 200)
.moveTo(1000, 320, 240)
.applyEffect(pulse, 10)
.fadeIn(0)
.resize(0, 0.2)
.startLoop(10)
.moveTo(1000, 250, 250)
.moveTo(1000, 320, 240)
.startBatch()
.resize(200, 1)
.fadeOut(200)
.fadeIn(200)
.endBatch()
.resize(200, 0.2)
.endLoop()
.moveTo(1000, 100, 120)
;
[Events]
Sprite,Background,CentreLeft,"stone.jpg",320,240
_F,0,0,1000,0,1
_F,0,1000,2000,1,0
_F,0,2000,3000,0,1
_S,0,3000,4000,1,0.2
_M,0,4000,5000,320,240,200,200
_M,0,5000,6000,200,200,320,240
_L,6000,10
__S,0,0,1000,0,1
__F,0,0,1000,1,0
_F,0,16000,16000,1,1
_S,0,16000,16000,0.2,0.2
_L,16000,10
__M,0,0,1000,320,240,250,250
__M,0,1000,2000,250,250,320,240
__S,0,2000,2200,0.2,1
__F,0,2000,2200,1,0
__F,0,2000,2200,0,1
__S,0,2200,2400,1,0.2
_M,0,40000,41000,320,240,100,120
osb.js is a chronological tool, objects have their own flow. You set the start time and the tool will care about the rest. Animation durations are relative only.
Right now, osb.js is available as a extension for adobes editor brackets (http://download.brackets.io/).
Brackets, because it already knows javascript and writing plugins is pretty easy.
Using brackets and the osb.js extension will allow compiling the moment you press save
Set up brackets with osb.js
1. Download brackets at http://download.brackets.io/ and install it
2. Download the osb.js extension: https://github.com/dabido/osb.js/archive/master.zip
3. Open up brackets and click on help -> show extensions folder
4. Extract the osb.js zip archive and move the folder containing the main.js to your extensions / user directory. If it does not exist, create it.
5. Reload brackets by pressing F5. If everything went correctly, you should see a "Osb.js" menu entry
6. You are now ready to hack osb.js with brackets
2. Download the osb.js extension: https://github.com/dabido/osb.js/archive/master.zip
3. Open up brackets and click on help -> show extensions folder
4. Extract the osb.js zip archive and move the folder containing the main.js to your extensions / user directory. If it does not exist, create it.
5. Reload brackets by pressing F5. If everything went correctly, you should see a "Osb.js" menu entry
6. You are now ready to hack osb.js with brackets
Using osb.js with brackets
Using osb.js with brackets is fairly simple.
1. Create a new file and name it "mystoryboard.osb.js". (The ending 'osb.js' is important!)
2. Click Osb.js -> Set output file and navigate to your .osb file inside your map folder.
3. Write some osb code and see brackets directly writing your osb file.
4. Test it. Copy
1. Create a new file and name it "mystoryboard.osb.js". (The ending 'osb.js' is important!)
2. Click Osb.js -> Set output file and navigate to your .osb file inside your map folder.
3. Write some osb code and see brackets directly writing your osb file.
4. Test it. Copy
var test = new Sprite("test.png");
test.fadeIn(200);in your editor and hit save. Open up your osb file. If everything got set up the correct way, you should see [Events]
Sprite,Background,Centre,"test.png",320,240
_F,0,0,200,1,1
Documentation?
SPOILER
Sprite
var meh = new Sprite(image, milliseconds = 0, origin = Origin.CENTRE, layer = Layer.BACKGROUND, x = 320, y = 240);
These methods won't write your osb file
.setTime = function(ms) // Overwrites the ms time
.applyEffect = function (effect, loopAmount) // Applies effect object at current time
.sleep = function (duration) // Simply does nothing for duration
.setPosition = function (x, y) // Overwrites x / y
.setSize = function (size) // Overwrites size
.setTransparency = function (transparency) // Overwrites the transparency
.setColor = function (r, g, b) // Overwrites color
.setRotation = function (rotation) // Overwrites rotation
These have impact on the osb file
.fadeIn = function (duration, easing) // Fades object in
.fadeOut = function (duration, easing) // Fades object out
.fade = function (duration, transparency, easing) // Fades object to transparency
.moveTo = function (duration, x, y, easing) // Moves object to x y
.resize = function (duration, newsize, easing) // Resizes object
.rotate = function (duration, rotation, easing) // Rotates object
.color = function (duration, r, g, b, easing) // Changes objects color
.parameter = function (duration, string, easing) // Applies osu parameter command
.startLoop = function (loopcount) // Activate loop mode
.endLoop = function () // End loop mode
.startBatch = function () // Activate batch mode
.endBatch = function() // Ends batch mode
Effect
var meh = new Effect();
Effects work the same way sprites does. Just don't have access to .startLoop, .endLoop and .applyEffect
var meh = new Sprite(image, milliseconds = 0, origin = Origin.CENTRE, layer = Layer.BACKGROUND, x = 320, y = 240);
These methods won't write your osb file
.setTime = function(ms) // Overwrites the ms time
.applyEffect = function (effect, loopAmount) // Applies effect object at current time
.sleep = function (duration) // Simply does nothing for duration
.setPosition = function (x, y) // Overwrites x / y
.setSize = function (size) // Overwrites size
.setTransparency = function (transparency) // Overwrites the transparency
.setColor = function (r, g, b) // Overwrites color
.setRotation = function (rotation) // Overwrites rotation
These have impact on the osb file
.fadeIn = function (duration, easing) // Fades object in
.fadeOut = function (duration, easing) // Fades object out
.fade = function (duration, transparency, easing) // Fades object to transparency
.moveTo = function (duration, x, y, easing) // Moves object to x y
.resize = function (duration, newsize, easing) // Resizes object
.rotate = function (duration, rotation, easing) // Rotates object
.color = function (duration, r, g, b, easing) // Changes objects color
.parameter = function (duration, string, easing) // Applies osu parameter command
.startLoop = function (loopcount) // Activate loop mode
.endLoop = function () // End loop mode
.startBatch = function () // Activate batch mode
.endBatch = function() // Ends batch mode
Effect
var meh = new Effect();
Effects work the same way sprites does. Just don't have access to .startLoop, .endLoop and .applyEffect
Pros?
- Incredible easy to use
- Use variables, loops and functions. It's still javascript!
- Re-use code
- It makes you fly! (that's a lie)
- In a very early state
- Requires a external editor
- Bugs? Possible. You tell me.
Code available here - https://github.com/dabido/osb.js
Please tell me what you think.
