forum

Storyboard Editor Guide/Tips

posted
Total Posts
40
Topic Starter
peppy
Soon enough we will start adding to the FAQ section for storyboarding. Unfortunately I won't have time to look at this today at least, so for those of you eager to try out the new editor, share your knowledge and tips in here. If you play around with it a bit, you should be able to get a feel for how it works and help others. Use this thread to do so :).
DawnII
Move: Simply move sprite to X,Y position you want it to start. Then move to point in timeline you want the move function to stop, and click and drag the sprite to it's X,Y destination.

Scale: Click and drag down to decrease scale, drag up to increase. Choose beginning scale, move to endpoint on timeline, and choose a new scale to either shrink or grow the sprite over time.

Fade: Click and drag down to fade out, up to fade in. You need to set points on the timeline if you want it to fade gradually over time.

Rotate: Click and rotate to desired angle. Sprite will rotate in direction of your dragging when setting it to work over a period of time.

To designate the layer when you add a sprite, simply drag the sprite name listed (column on the right) to the desired layer section.

Removing a Transformation: Anchor points are demarcated by "white ticks" on the timeline. Choose the < or > arrows to move to each anchor point, with the transformation you want to remove toggled. Hit the - button to remove the anchor point. To remove the entire transformation, remove all the anchor points one by one.
m980
Guide to the SBE

Before you read

Keyframe Control
This will be used for adding anchor points. It works pretty much the same way as bookmarks. (The Buttons are just under the timeline.)

+ Add an Anchor Point
- Delete an Anchor Point

The other two will jump back to the previous anchor point and the next anchor point respectively.

Layer Toggles
These will disable layers from being shown. So if you didn't want to see the passing scene (That is always on top of the fail scene in editor), the turn that off and enjoy the fail scene. This is useful when you want to see commands for different objects but something is in the way

All the toggles are as shown
Background
Failing
Passing
Foreground
Hitobjects (Automatically disabled)
Transformation
These are the commands used for your object. Only 4 of the commands have been put in. Move, Scale, Fade and Rotate, leaving Vectorising, Colour, Loop and Parameters left to put in..

Move
This command tells your object where to go and when to go.
Create an anchor point at when you want it to start moving, go to when you want it to stop moving, and move the object to it's destination. Don't move it while moving forward (Time) because it will make the path look wonky..

Scale
This command tells your object to change size.
Dragging up will increase the object's size, whereas dragging down will decrease it's size.
Gradually increasing/decreasing in size works the same way as the Move Command. (Add Anchor Start and End, change the command at the end one)

Fade
This command tells your object when to fade in/out.
Dragging up will make the object visible, and dragging down will make your chosen object invisible.
Gradually fading in/out works the same way as the Move Command.

Rotate
This command tells your object to rotate a certain number of "Radians" (Not Degrees).
Dragging up will make the object rotate clockwise, and dragging down will make the object rotate anti-clockwise.
Rotating gradually works the same way as the Move Command.
Tweening
(Taken from Peppy)
You have Two Keyframes, Do you want to animate between them? If so, turn on Tweening. If not, then turn it off.
Easing
I'll explain what these do..

Easing In
This makes the command start off slow, then gradually becomes faster as the command finishes. So..

Move Easing In
This will make the object move from it's starting point to it's destination slowly, then it gradually becomes quicker until it reaches it's destination.

Easing Out
This makes the command start off quick, then become slower as the command finishes. So..

Move Easing Out
This will make the object move from it's starting point to it's destination quickly, then it gradually becomes slower until it reaches it's destination.
Origin
This will basicly change where the Object Changes Scale from or Rotate from.

Top Left Corner Origin will cause the object to become larger from the top left corner as well as rotate around the top left corner.
Centre Origin will cause the object to become larger from the middle as well as rotate around the middle.
Diff. Specific
Short for Difficulty Specific. This will make all the storyboarding you've done so far save to the .osu file instead of the .osb file.
Osb files are used so that you won't have to copy+paste all the code into each difficulty of your map. .osu codes can be used to make each of them slightly different from eachother if you use an osb.
How do I change a certain Layer for a Certain Object?
Click on the object you want to change layer, then click on the layer you wish to change it to. You can also drag, but isn't clicking easier?
Got Questions or Suggestions? PM or IRC, and hopefully this will be updated?
----------------------


This will probably be reworded later, but right now i'm tired..

Hope it's good?
YoshiKart
Layer Priority

On the right-hand side of the editor is the four main layers: Background, Failing, Passing, and Foreground. Objects that you grab from the Sprite Library are defaulted to Foreground and placed to the bottom of the list.

The original four main layers (+ HitObjects) are prioritized as increasing priority, from the top of the list to the bottom. This means that HitObjects always appear on top of the Foreground, the Foreground appears on top of Passing, and so on. This will apply to "sublayers" also. Inside the list of layers, the last object in the list will be at the top, in the field.

Therefore, any new object you put in from the Sprite Library will immediately become first priority (expect HitObjects, of course). You may change priorities by dragging them around the list, or quickly switch layers by clicking on the object name, then the layer, like m980 mentioned.
A bit obvious to some, but.... eh. :P
Mashley
How do I, um, find the StoryBoard editor?
YoshiKart
O_O

It's under the Design tab in Edit mode.
Behon
Do images of a certain resolution not work? I have a very wide image I'm trying to have pan across the screen and it doesn't show anything there, even when I have the image selected in the foreground.
Topic Starter
peppy
How wide? Anything over 2k pixels will have limited support due to graphics card limitations. You shouldnt really be loading somethign this big anyway. Split it into smaller textures and only display what you need.
LuigiHann
I think, based on experimentation, the background I used for Braid - Counting You Up is about as big as they're allowed to be.
ToRMeNToR_84
Does anyone know of a tool to separate Animated GIF's into all separate frames? I Understand how to import animations, I tried it out with the slider ball from the template skin. I was just wondering if you guys know of a tool that can separte an animation into lets say 10 different frames and rename them to Image_01, Image_02, Image_03 and so on.

If there is such tool, please inform me.
ToRMeNToR_84
Its ok, I answered my own question by searching for a few minutes. If anyone is interested, You can use Ulead Gif Animator. Forgot I had that program in my stuff.

Thanks anyways.
dumpsterdiver

ToRMeNToR_84 wrote:

Does anyone know of a tool to separate Animated GIF's into all separate frames? I Understand how to import animations, I tried it out with the slider ball from the template skin. I was just wondering if you guys know of a tool that can separte an animation into lets say 10 different frames and rename them to Image_01, Image_02, Image_03 and so on.

If there is such tool, please inform me.
You can also use photoshop. File > Import Video or something like that. The drop down menu on the file browser doesn't have an * all files option, but you can type the name of whatever file and it'll work. Grabs gifs and a bunch of video codecs into layers.
Vanmonky
Could someone explain what is storyboarding..?
LuigiHann

VanMoNky wrote:

Could someone explain what is storyboarding..?
http://osu.ppy.sh/?p=faq&n=7&c=1#c1
Vanmonky

LuigiHann wrote:

VanMoNky wrote:

Could someone explain what is storyboarding..?
http://osu.ppy.sh/?p=faq&n=7&c=1#c1
No no. I mean, the storyboarding in osu. I can't find the storyboarding in all beatmaps expect in Je'taime song.
Starrodkirby86
Go to Beatmaps > Ranked, and check 'Has Storyboard' to find all Ranked maps with Storyboards.

You can also just view all the beatmaps that have storyboards uploaded on this server.
Vanmonky
Hey, the storyboarding of PC version are different...

I mean, just look at the Je'taime beatmap. If you fail one round, the story will change worse. But if you success on round, the story will change better. Yeah. Sorry for my bad english.

To be honest, I really can't understand the storyboarding FAQ...
Starrodkirby86
That's because the parts where you see the guy going "RAAAGE" in the story is on the Fail Layer, and the one where he's going :D is the Success Layer.
LuigiHann
All these maps have storyboards: http://osu.ppy.sh/p/beatmaplist&s=4&r=0 ... 0&g=0&sb=1

Not all of them make much use of the good/bad structure, in fact, I think most don't use it at all. Also worth noting that the DS games have 3 "layers" (bad, normal, and good) where osu PC only has 2 layers (bad and good).
Yes_old
Hi! After I add a storyboard image and edit something in Design Tab, do I have to save it in some kind of special way? ,_,"

I uploaded the image with my pending beatmap and my friend says that he doesn't see the storyboard on the beatmap but the image file is in his song folder. I can see the storyboard on my screen though. o-o Sorry if this is the wrong place to ask this, too. x_x
Starrodkirby86
Tell him to redownload the beatmap, if he hasn't yet. He may need to get an updated version of the .osb .

You usually save it the regular method. Just make sure the images in the Storyboard are there the whole time (Like you have the fade set to 1 (solid) throughout whatever) :P
LuigiHann
This map has been deleted on the request of its creator. It is no longer available.
Vanmonky
This map has been deleted on the request of its creator. It is no longer available.
Starrodkirby86

VanMoNky wrote:

I think, the FAQs are really really incomplete. It doesn't look like a FAQ. Besides explanation about the function, we need the instructions about how to use them like the other beatmappers usually do. Err.. I can explain more far from here.. I can't explain it straight by english..
Why not look into the scripters' code and see what's up in there? o:

Also, the storyboarding has only a finite amount of commands you can pull. You can assume that 'something' like this was made through 'these certain commands' and then you can emulate it. (For example, a pulse like effect might be formed through a Fade, Scale, and Move [Depending on origin point?]).

In my opinion, you should learn the how-tos of Storyboarding in the user friendly editor here. This thread really helps.

After you learn how to do some things in the editor, look in the .osb and see the code and try learning it for yourself. :)
Equivalent_old
I am pretty much guessing most of all know what is strobing already

Connection of strobe light and Epilepsy

Strobe lighting can trigger seizures in photosensitive epilepsy.

The British Health and Safety Executive recommend that a net flash rate for a bank of strobe lights does not exceed 5 flashes per second, at which only 5% of photosensitive epileptics are at risk. It also recommends that no strobing effect continue for more than 30 seconds, due to the potential for discomfort and disorientation.

A related condition is the Bucha effect or Flicker vertigo. Without going as far as epilepsy, after exposure to stroboscopic light the victims feel dizzy, disorientated and debilitated.

Just a quick research on strobe and epilepsy but useful before you start making a strobe
jonmaku_025
question! :)

how do you change your background image? what I mean is not going to the storyboard and not scaling it and centering it manually

just like dragging the pictures, but dragging pictures changes the whole background until the end of the song.

do i put it on the background layer?
ziin

jonmaku_025 wrote:

question! :)

how do you change your background image? what I mean is not going to the storyboard and not scaling it and centering it manually

just like dragging the pictures, but dragging pictures changes the whole background until the end of the song.

do i put it on the background layer?
to change the background, just put in a new background. if you want to change midsong, then do that by putting the original background into the storyboard (in the background layer) and put the new background also in the background and fade the old background out.
AngelTerrific98
I have a problem with the beatmap I created. Every time i go to catch the beat mode. The fruits just keeps stacking up on the catcher. How do I let the catcher clear after a few fruits get on it?
Breeze

AngelTerrific98 wrote:

I have a problem with the beatmap I created. Every time i go to catch the beat mode. The fruits just keeps stacking up on the catcher. How do I let the catcher clear after a few fruits get on it?
New combo
Hookgayo
How do you start a new difficulty to a song? :?
Breeze

GottaLoveDomo wrote:

How do you start a new difficulty to a song? :?
File -> Save as new difficulty

BTW these kind of questions should be posted in General Questions

This topic is for SBE
Kaitonyan
Hmmm... Trying to find the best way to explain and ask my question, but ummm... How can I put layers above the background layer (In the foreground layer)? I put it in the foreground layer, but I can't find any way to set the timing that it appears and disappears, or even set it to appear in the storyboard... I want to put subtitles to the song in my storyboard's foreground... Sorry if it's a dumb question... TwT Thanks in advance! :3
alex_98

Kaitonyan wrote:

Hmmm... Trying to find the best way to explain and ask my question, but ummm... How can I put layers above the background layer (In the foreground layer)? I put it in the foreground layer, but I can't find any way to set the timing that it appears and disappears, or even set it to appear in the storyboard... I want to put subtitles to the song in my storyboard's foreground... Sorry if it's a dumb question... TwT Thanks in advance! :3
On the left side, you have to click on "[ ]Foreground" to let the layer on display so that it shows "[■]Foreground"
snowflakepixie
I accidentally put the hit circle sprite as an object in the foreground, how do I get rid of it?
those
Left click an object and press your Delete key on your keyboard.
Infevo
I have some trouble with my storyboard.

1. Whenever I use vector scaling on a sprite in my board it doesnt seem to remember the scaling properly. So sometimes my images scale back to original size randomly
2. Whenever I use horizontally flipped sprites and want to vector scale them after wards they do a perfectly fluid flip animation during the scale time -.-
3. does the order of commands in the osb matter? is it possible that the order in the osb gets messed up from using the storyboard/design editor and due causes issues. like when i scale an image to its correct size at a later point of time in the timeline I of course assume this is gonna be scaled for to this set size for the whole displayed duration. but when the scaling command appears later in the list can this cause unexpected results?
NexusK2
How can I the whole storyboard?
joelin55667
I am only trying to add an image when I accidentally clicked it from the sprites library. That made everything go downhill, now I can't delete the sprites, nor add new images and now my whole map is blank, someone plz help. :( :( :(
NaxzedYT

ToRMeNToR_84 wrote:

Its ok, I answered my own question by searching for a few minutes. If anyone is interested, You can use Ulead Gif Animator. Forgot I had that program in my stuff.

Thanks anyways.
That still isn't a good software to use use an easy gif animator tool like Pivot, though it's mainly for stick animations.
NaxzedYT
CAN SOMEONNE HELP WHENEVER I MAKE A FADE KEYFRAME FOR FLASH IT JUST MAKES IT APPEAR AT THAT KEYFRAME
Please sign in to reply.

New reply