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
show more
Please sign in to reply.

New reply