forum

[Guide] Making Delicious Sliders

posted
Total Posts
271
Topic Starter
RandomJibberish
Making Delicious Sliders: A Guide.

There is a growing epidemic of horrible, horrible sliders which make me want to commit suicide over seeing them again, so I am making this to help improve the quality of your curves.

All of these sliders use Bezier Curves - any Catmull slider can be improved with beziers, true story.

Arcs (Use essentially the same technique for any sliders symmetrical in one axis)



This is the easiest shape to make. Place all of your points symmetrically in the grid first of all. Select it and Ctrl+H when you think you have it accurate to make sure the points are on symmetrical grids. Then move the points around until the slider is the right length and falls just a little short of the final point. It's important that whenever you move a point, you move the corresponding point exactly the same way to keep all the points symmetrical with each other. Make sure you Ctrl+H often to check you haven't made a mistake.

To make the sliderend and endpoint line up hold shift to disable grid snap and move the top point down until the sliderend is right on the last point. When you think it's perfect, select and Ctrl+H a few times and see if the endpoint moves around. If it doesn't, congratulations, you have a beautiful slider. Show it off to your friends. If it does, move the top point around until it does.

If you want an arc at an angle, it's usually easiest to make it upright as above, then Edit > Rotate By... to make it the angle you want.

Waves (Use essentially the same technique for any sliders that are rotationally symmetrical)



Waves are made very similarly to arcs, only your points should be rotationally symmetrical with each other as opposed to horizontally flipped. If you press Ctrl + H + J it rotates the slider by 180 Degrees so you can check the points correspond.

To line the sliderend and endpoint up choose two corresponding symmetrical points. Disable grid snap and move them both in by a tiny bit at a time until the sliderend and last point are right on top of each other.

Beat Blankets



Blankets are easiest to do if you eyeball the slider first of all to get it roughly correct, then scroll to a point on the timeline where the approachcircle of the beat lines up with the closest edge of the slider's startpoint. It may help to go into 1/8 snap to get it just right. Then just tweak the points until the whole slider lines up with the approchcircle as perfectly as you can.

Keep in mind that if you want a slider to blanket and be perfectly symmetrical, worry about symmetry first then adjust the points symmetrically to improve the blanket.

Circles (Courtesy of mm201)

mm201 wrote:



The number of control points you want depends on the angle covered by your arc.
0°: 2 points
0°-20°: 3 points
20°-170°: 4 points
170°-200°: 5 points
200°-300°: 6 points
300°-350°: 7 points

None of this is really exact, just a general idea. Similar to waves, the further the control point is from the start/end in order, the further away from the curve it goes. Make sure the first and last control lines are pointed in the direction you want your loop to begin at. The others, just adjust by eye until it's mostly round. Using an approach circle as a guide can help with this.

Like with most shapes, keep one (two if the number of points is even) control point to take out of grid snap so you can line up the endpoint.


Elbows (Use same technique for any slider with straight bits and curved bits)



When you want a slider with a transistion between a curved bit and a straight bit you use a red point where it switches. The most important thing is to ALWAYS PUT THE RED POINT AND POINTS ON EITHER SIDE IN A STRIAGHT LINE. Like exactly straight. Get a ruler if you have to. We don't want any sharp bends here kthx. But yeah it's pretty straightforward apart from that.

Heart sliders (Use same technique for any slider which is symmetrical, but the startpoint is on the centre line)



Instructions are kinda long, so I've put them in here
First, make a basic heart shape, slightly longer than you need, with both the start and end points in the same place at the bottom. Try and copy these points roughly if you're having trouble. Putting just a redpoint at the top is fine, but I prefer to use an elbow curve :P


Next, copypaste this slider to the tick immediately after itself and horizontal flip like so


Then grab the endpoint of the first slider and pull it back to the length you want your slider to be.


See how it's asymmetrical and ugly? well mess with the points on the tail half of the slider until it lines up perfectly with the slider behind.


If you managed all that, you're done! Delete the slider behind and edit/scale by if you want to fill any gaps.

Awesome Wiggles
There are a couple of ways to do this, depending on what kind of wiggle you're after.

Type 1 - Start and end pointing the same way.



The important thing here is that each arc that make up the wiggle is made up of four points, and as you get closer to the centre the taller the four points need to be. Once you have the basic shape, it's just messing around and eyeballing until it looks even and the tail end of the slider lines up on the last point. As with arcs, don't forget to be Ctrl + Hing all the time to make sure the points are symmetrical.
Other than that, it's mostly practice. Once you've made a few nice looking wiggles you'll be able to knock them out in no time.

Type 2 - Start and end pointing different ways.



Similarly to type 1, each arc is made up of four points, but in my experience it helps if they're kinda twisted round, like in the image. These are rotationally symmetrical, like waves, so use Ctrl + H + J to check points.

Type 3 - Super Tight Wiggles



Sometimes wiggles are just too tight to use the above method, so redpoints are neccesary. Make sure that the points of each section between each pair of redpoints are identical, apart from the end ones - you can check this by dupicating the slider and moving them around, checking it lines up all the way along, or by simply counting grids. Also, make sure that each redpoint and the two points either side make a perfect straight line, to avoid unwanted bumps.
The sections towards the end really need to be eyeballed, and should be what you adjust when you want to make the tail end land on the last point. This just takes a lot of messing around, but hopefully you'll get there eventually.

Loops



The things to remember when forming loops is that the points go up a lot further than the loop does: The further each point is from the ends, the further away it needs to be from the slider.

The biggest issue I see with people's loops are the hole. You're looking for an open, rounded teardrop shape like the above slider.
If the hole of the loop looks like any of these, your loop isn't as awesome as the above screenshot:


Wise words from wise peoples

Ephemeral wrote:

always align slider endpoints to the smallest possible value - that is, if you drag them any further backwards, the slider will shorten. the point will center itself in the slider end and will make attaining passable curves much easier to accomplish.
Also, doing this makes reverse selection on sliders not fuck them up. Which is a good thing.

Gonzvlo wrote:

As a variation of Beat Blankets, sometimes I use a spinner to make nice circles.

Inspiration Gallery Corner
blame naraku

narakucrimson's sliders of wonderment






"U" Slider:


Semi-elbow:




Awesome wiggle:




Interesting heart-shaped slider:


Slider blankets:
>
>



Creativity is just a click away! (or quite a lot):


You know, creativity:


Self-blanketed slider:



Zodiac Signs
By Krisom

Capricorn


Cancer


Gemini


By Soaprman

Scorpio


Taurus


Armin's sliders of further wonderment
Xmas' tree



Extended Loops




Crushed slider



Spirals
(with and without anchor points)




Heart sliders



Other stuff/patterns (please read notes where is needed)






(<- you need to use a velocity slider's varation here)
(<- classic shape, just with a little varation: there's an anchor point that helps you to make the slider in a short time)




(for a good flow)
NotShinta
Slider Art
Topic Starter
RandomJibberish
Sliderart can be good, but I reccomend you get pro at basic shapes first as they're the basis for much more complex shapes.
Sallad4ever
Thank you very much for the delicious tips

Time to fix all the slider on my maps :D
Ekaru
I suck at making those really long sliders that are big and like 3/4 of a circle that take up most of the height and/or width of the screen.
Zekira
Any tips on making a circle/oblong? http://osu.ppy.sh/s/13342 the long slider here, which is supposed to be an oblong, is looking really bad and I want to change it... but I'm just horrible at making good looking slider shapes that aren't one curve :/
Powerdrone
RandomJibberish I love you.

Time to make sexy waves~
Topic Starter
RandomJibberish

Ekaru wrote:

I suck at making those really long sliders that are big and like 3/4 of a circle that take up most of the height and/or width of the screen.
If you mean rainbow sliders, you make them the same as arcs only bigger. You still only need four points or so though, just make it biiiig.

Zekira wrote:

Any tips on making a circle/oblong? http://osu.ppy.sh/s/13342 the long slider here, which is supposed to be an oblong, is looking really bad and I want to change it... but I'm just horrible at making good looking slider shapes that aren't one curve :/
Circles are a bitch. Making all the points symmetrical similar to arc is how you can get horizintal symmetry (Assuming endpoints are at the top or bottom, you can put them where you like after by rotating it), but vertically it's often best to get it as close as you can then check vertical symmetry by copypasting the slider ahead in the timeline and flipping it vertically, so you can see how the slider lines up with itself. Then you can adjust based on that.

For sliders like yours, Zekira, vertical symmetry is less important. As long as your points are horizontally symmetrical and it's roughly vertically symmetrical it won't look too terrible. I'd suggest something like this so the endpoints don't overlap.
Gens
A general rule of thumb is, for simpler sliders, use less sliderpoints. I don't want to see a curve 1/2 beat long with around 7 sliderpoints. This obviously doesn't apply to more complex sliders.

Just wanted to throw that out there.
Topic Starter
RandomJibberish
The sharper the curve is, the more sliderpoints you'll need too. But keep it to a minimum to make your curves more natural.
Zekira
OK I'm just trying this out now and...

Place all of your points symmetrically in the grid first of all.
Admittedly I am finding this very difficult to do on Grid Level 3. Any advise?

EDIT: Never mind, I just counted the grids manually (and wrecked my eyes in the process)

But now I have a recurring problem in that it still doesn't like symmetrical; I am inferring because there might be conflicts with the slider velocity. Any input on exact estimations (???) as to how much points should be away depending on the slider velocity? E.G. my 5 point symmetry for 1.28 velo would be different than that of 1.5 slider velo... Pic below uses 1.28 slider velo

Derekku

Zekira wrote:

OK I'm just trying this out now and...

Place all of your points symmetrically in the grid first of all.
Admittedly I am finding this very difficult to do on Grid Level 3. Any advise?
I always use grid level 2 (sometimes switching to 1 as a guide to help count) and then switch back to 1 for detailed repositioning.

Although, I suppose just horizontally flipping to make sure all points are symmetrical would be easier. :v
Zekira
Never mind, I just counted the grids manually (and wrecked my eyes in the process)

But now I have a recurring problem in that it still doesn't like symmetrical; I am inferring because there might be conflicts with the slider velocity. Any input on exact estimations (???) as to how much points should be away depending on the slider velocity? E.G. my 5 point symmetry for 1.28 velo would be different than that of 1.5 slider velo... Pic below uses 1.28 slider velo



...you know what because of this slider conspiracy I'm actually halting making this Normal for now :/
Topic Starter
RandomJibberish
Lol

What you have to do is move the top point(s) down a grid at a time, keeping them symmetrical until the endpoint and sliderend nearly line up. Then disable grid snap and move the top point down until it's exact. Ctrl + H to check.

Also I find that it's easiest to make your points symmetrical if you do it roughly at first, then Ctrl+H and see what moves. Then you can fix based on that. You can also use the switch to grid two method if you prefer.
Zekira
HOLY CRAP I DID IT :D



Lol

By the way this isn't Zekira posting
Topic Starter
RandomJibberish
Added Elbows
Lanttu
I want to give you, good RandomJibberish, a hug and ten kudosus right now<3 ;_;

*runs off to make more delicious pretty sliders*
Ephemeral
best tip in the universe:

always align slider endpoints to the smallest possible value - that is, if you drag them any further backwards, the slider will shorten. the point will center itself in the slider end and will make attaining passable curves much easier to accomplish.
Topic Starter
RandomJibberish
totally added to first post
Jarby

Ephemeral wrote:

always
No.
OzzyOzrock
teach teach teach


wait a minute I just have to move the second leg up one notch

fffffffffffffffff-

wait nooo nooo, the tick isn't lined up with the y-axis. that, and the left side looks floppy

wait, would I just move the left leg to the left one...?

Gah.

EDIT: Lemme guess it's just like an arch slider but I'm just stupid, gaaah.
Topic Starter
RandomJibberish
Yeah, those work just like arcs.

To align the endpoint to the start after symmetrifying points, disable grid snap and move the points at the top down an osupixel at a time until the tick's in the middle and nothing moves when you ctrl+h.
OzzyOzrock
Wow, I barely found out what you mean with the whole disable grid snap thing, but I still do it wrong. orz
Topic Starter
RandomJibberish
Lol, it's just practice. It takes quite a bit of mouse precision to move the top points down by single osupixels :P
OzzyOzrock
You should give instructions on all the beautiful sliders Krimsom and Gonzvlo make.

Or I could enter the editor and see myself. I always forget that.
Topic Starter
RandomJibberish
All of them are basically variations on sliders already here. Arcs with a red point in the middle, for example. Any symmetrical slider is essentially made the same way - keep the points symmetrical.
Gonzvlo

RandomJibberish wrote:

Circles are a bitch. Making all the points symmetrical similar to arc is how you can get horizintal symmetry (Assuming endpoints are at the top or bottom, you can put them where you like after by rotating it), but vertically it's often best to get it as close as you can then check vertical symmetry by copypasting the slider ahead in the timeline and flipping it vertically, so you can see how the slider lines up with itself. Then you can adjust based on that.


As a variation of Beat Blankets, sometimes I use a spinner to make nice circles.

Topic Starter
RandomJibberish
Indeed, that is a useful technique. Added to the first post~
OzzyOzrock


Can't figure these out.

EDIT: WAIT GAH, THIS IS THE SAME TECHNIQUE AS THOSE MOUNTAIN SLIDERS BUT FLATTENED ;_;

EDIT: Or... not?
Topic Starter
RandomJibberish
Doing them like that is kinda silly. Just put a redpoint in the middle :/



Or be super cool and use a magical wiggle which is basically the same without sharp angles

OzzyOzrock
Oh, wow, I'm terrible.

Thanks. Also, how do you make the sliders all transparent like that? Is it a lower graphics thing or a skin thing? ;_;
Derekku

OzzyOzrock wrote:

how do you make the sliders all transparent like that? Is it a lower graphics thing or a skin thing? ;_;
mmsliders

Open the skin.ini of whatever skin you're using and add a line "SliderStyle: 2" under the [General] section. Also, iirc opengl uses mmsliders by default.
Ozitiho
O: This helped buckets. You are god.
Zhanger_old
thanks O_O; never knew how people made such symmetrical sliders >~<
Hyguys
I make waves this way:
It's more easy to do
Topic Starter
RandomJibberish
It's also asymmetrical and ugly? You could fairly easily symmetrify the points on that slider and make it look nice :/
HakuNoKaemi
Basically there's another trick for waves... create it using the arches trick in that mode

Topic Starter
RandomJibberish
That works decently, and looks pretty good for short sliders, but on bigger sliders it's a bit uneven - it's squished up towards the ends. I'd recommend pulling the points a bit more towards the centre in most cases.
eldnl
Krisom and Gonzvlo slider rulz.
SapphireGhost
I noticed that this is also a way of making wave sliders blanket their friends.
Topic Starter
RandomJibberish
I love wave slider blankets :P
OzzyOzrock
Wave sliders are definitely the hardest to make...

...is there a technique? ;_;
Daru
Wave sliders are quite the fickle beasts...
OzzyOzrock
Teach my how to make these symmetrical (or just how to make them at all) because they're DAMN BEAUTIFUL.



BD is so pro at moe sliders that I steal them :V but then they end up not working well due to BPM and crap, so I cry.
EDIT: wait, this example is symmetrical, I just suck at realizing that. either way, :V
Topic Starter
RandomJibberish
Select it and Ctrl+H+J. If anything moves, adjust it so it doesn't :P
D33d
It's time for the comedy tryhard power hour!

Babby's first needlessly lengthy smooth slider!



Babby's first sliderhug!



What a waste of time they were!

In case you couldn't tell, I'm just playing around here. I'm not expecting masterpieces overnight.
Topic Starter
RandomJibberish
Added Heart Sliders thanks to SapphireGhost making ugly ones <3
OzzyOzrock
Request:
How to make

Into (Or something of the sort)

D: EDIT: Hmm, well they already look pretty alike ;_;
Topic Starter
RandomJibberish
Awesome wiggles? Sure thing, I'll do them today.
OzzyOzrock
Must be a British day or something. (lolol)
theowest
C
OzzyOzrock
^ Uh, that's just an arc with the 2nd and 4th points further out.

British days are long, it seems.
mm201
Just when I thought I knew everything there was to know about sliders
my mind just got blown.

OzzyOzrock
WHAT WHAT WHAT WHAT!?

Oh well, 5's still the best.

And I skipped out on using awesome wiggles three times already because they're not here yet T_T
mm201
It depends on how packed they are?

This is my method for creating long wave sliders:


The closer the pair of nodes is to the center, the further from the X-axis it goes. It takes a bit of eyeballing to get correct, same as spirals. The new single-axis scale feature (test builds) makes it easier to fit the size once they're made symmetric.

For very tight wiggles, use basic 4-point arcs, joined together with redpoints.


Edit: Are our minds nice and fucked? Good. These two sliders are the same:
Topic Starter
RandomJibberish
mm has killed the only things I truly believed in. At least I can't feel too guilty about being lazy and using five points rather than four for my arcs :P

And I'll seriously add awesome wiggles when I get home, although mm basically said what I was going to say. Sorry I forgot :(
mm201
Using fewer points in arcs makes it harder to make mistakes. Using 4 points instead of 3 lets me control whether the arc should be more flat, round, or boomerang-like. The 3-point variety is somewhere between boomerang and round, leaning towards the round side. I use them when the curvature is very slight, or for odd utilitarian sliders that don't need to be perfect.
Topic Starter
RandomJibberish
Wiggles finally added. Sorry for the delay :(
SapphireGhost
Jibbella, show us how to make varying types of non-ugly loop sliders.
mm201
What, you mean like these?


The number of control points you want depends on the angle covered by your arc.
0°: 2 points
0°-20°: 3 points
20°-170°: 4 points
170°-200°: 5 points
200°-300°: 6 points
300°-350°: 7 points

None of this is really exact, just a general idea. Similar to waves, the further the control point is from the start/end in order, the further away from the curve it goes. Make sure the first and last control lines are pointed in the direction you want your loop to begin at. The others, just adjust by eye until it's mostly round. Using an approach circle as a guide can help with this.

Like with most shapes, keep one (two if the number of points is even) control point to take out of grid snap so you can line up the endpoint.

Edit: In other news, loop sliders for lazy people:
Topic Starter
RandomJibberish
I'm pretty sure Sappha was referring to these



which I'm adding now, along with mm's symmetrical circles tutorial because it's that smexy.
eldnl

RandomJibberish wrote:

I'm pretty sure Sappha was referring to these



which I'm adding now, along with mm's symmetrical circles tutorial because it's that smexy.


That's work better I think.
OzzyOzrock
Holy CRAP that beat blanket science is genius
Raging Bull
Add Krisom sliders lol. So I won't fail at copying the osu and then ruining the slider because of different BPM/SV. Haha.

How about double loops too?

Odaril's awesome blanket!
Odaril's delicious loop!
Kytoxid

mm201 wrote:

Edit: In other news, loop sliders for lazy people:
I make loop sliders like this, and just wanted to put it into words, as in my opinion, it is the easiest one to pull off.

You want a red point for every QUARTER of the arc. Between every 2 red points (the very first point also counts as a red point, since the slider passes there 100%), you want at least two white points. (usually two is enough) Align the two white points on both sides of the red point in a way that they are in a straight line. In math terms, if you drew a circle along the center of the arc slider's path, the line formed by connecting the white-red-white points should form a tangent to the circle.

Because of this, especially if your red points fall perfectly along either of the two center lines, you should only need to adjust the white points in one direction (up/down for the ones neighbouring the left red point, for example, in mm's picture). As your circle is lined up with red points at 90 degrees, all the points except for the very end should be rotationally symmetrical, so check that with Ctrl+. and Ctrl+, .

Once you have the points adjacent to red points down, just fiddle with the "end bit" (the bit below the left red point in mm's picture). Sometimes it'll go into that position easily, sometimes you might want an extra point there just to fine-tune.

Since this relies on red points instead of white ones, you can also very easily insert large arcs into your other slider art this way.

EDIT: And I feel like I made it sound more complicated than it is.
SapphireGhost

Raging Bull wrote:

Add Krisom sliders lol.
Most Krisom sliders are made based off the simple shapes if I remember correctly. And symmetry, that's cool too. So make your own special sliders instead of copying Krisom's because that's cooler anyway.
Topic Starter
RandomJibberish

Raging Bull wrote:

Add Krisom sliders lol. So I won't fail at copying the osu and then ruining the slider because of different BPM/SV. Haha.

How about double loops too?
As Sappha said, master the basics and all of krisom's shapes are pretty easy. Krisom Krosses are just a pair of waves, there are blankets with linear bits off them, etc

Double loops work exactly as you'd expect. Just make sure each loop is nice and round and that the whole slider retains its symmetry

Kytoxid wrote:

lots of stuff
I would add this type of loop, since I'd rather people did this than eyeballed it (lol), but once you've had practice it's easier not to fuck up with the other method, and you get automatic symmetry. Idk, I might add it still
mm201
It's an okay method. I think iNiS used it in Ouendan2 to create those really funky sliders on certain maps, combining 2 or more part circles of different radii together. Up until the most recent builds, red points had some small bugs making them a little inaccurate, which I think plays a part in their unpopularity, at least with smooth shapes.
D33d
Speaking of redpoints, how are these, given that I'd effectively rammed them out in the space of a minute?

Topic Starter
RandomJibberish
Looking great! Could probably have slightly rounder curves, but I'm pretty sure even I wouldn't see that in game.
D33d
Yeah, I kind of wish that I could've got them rounder, because they're noticeable in Easy. I'd fiddled around with the points a bit, but the sliders would either kink weirdly or become too squishy. Thanks! :3

For the record, these are the points:



Pretty much as even as I could get them.
Derekku
^I looooooooooove those kinds of sliders.
mm201
For those kinds of U-shaped elbows, I would combine the "lazy circle" technique with the regular elbow method.
Otherwise, getting perfect 180° circles is much harder than other angles.


(hmmm I might keep something like this since the song is about magnets...)
D33d
That's pretty fantastic. Getting a properly rounded 'U' is a pain when using a regular arc.

DEEDIT: This 'PONPONPON' map sure is getting fun.

HellDawn
Im lazy u_u


Katsuri
Something basic?

Hmm, This wave slider is Easy to learn and good...


  1. Add a start point
  2. Make this Perfectly simetric (using ctrl+H)
  3. On the 2nd point, move 5 grids up like this.
  4. On the 4th point, move 5 grids down.
  5. Make the grid tiny and Make the points perfectly simetric using ctrl+H+J
  6. You have a easy simetric wave.
Jarby
You can also do them like this, but Larto hates me for it.

Topic Starter
RandomJibberish
Jar you suck at aligning the endpoint
Also doing sliders that way looks a little wonky, but it's pretty damn good.
D33d
I dunno; that endpoint looks pretty damn in place. By the way, I'm trying to get Jar to use more points for his waves, as they tend to be pretty pointy. At least two three-point arcs, but he should totally use the OP madstyle waves instead.

Also, I've been having a bucketload of fun with various sliderarts, which include heart sliders, rotationally symmetrical wiggles and a massive loop thing with handlebars. Should I bother to post them here? I wouldn't want to inundate the thread with my pratting around.
ziin
it's off by 2 pixels
Topic Starter
RandomJibberish
I'm pretty sure Jar sliders are improving and getting less pointy. I don't really mind them anyway, it's Jarby charm.

Oh, and we love a bit of pratting around
D33d
Pratting around, you say? Okay, have a load of sliders which are a bit more fancy than stitching together arcs and lines with redpoints.

LOOP SLIDER:


CIRCLE WRAP:


KRISS-KROSS:


ROTATIONALLY SYMMETRICAL WIGGLE:


HEART SLIDER:


This... Thing.


Note that I'm not trying to sell these as perfect sliders or anything, but I've been having a lot of fun with them recently and I tend to get a kick out of sharing this sort of thing so yeah.
Verdisphena
Thanks!, this guide help me so much, specially in loops
Mismagius

D33d wrote:


Sakura
BD's first slider made me think of Taurus symbol (and why all of a sudden i want to see sliders that resemble the zodiacal symbols?)
D33d

Blue Dragon wrote:

D33d wrote:




I'm basically going to do such ridiculous things as those in the future, but for now, I want to keep it as silly as that handlebar loop.

By the way, I'm curious to see the control points for those sliders.

Also, it's funny that Sakura should mention zodiac signs, because I kind of want to do a Libra slider pattern. That would be so sexy.
Derekku
Protip: I automatically love anyone who makes sliders like those.
show more
Please sign in to reply.

New reply

/