forum

[Guide] How colorization works in osu!

posted
Total Posts
13
Topic Starter
ziin
This is more of a guide for me rather than anyone else.

Normal colorization in hitcircles and SB objects
It's pretty simple actually. Osu! simply divides the channel. A black image will always be black. A red image can only be some shade of red. You can't start with an orange image and make it blue, since orange is a combination of red and green.

If you take one pixel of an image, say "98,174,200" and colorize it to "255,22,98" the output color will be "98,15,77".

Color = Base * SB color / 255

The osu! playfield dim
osu! dims all images in the storyboard and video to be 3/4 of its normal RGB value. Thus, no image in the background can ever be more than 192,192,192 (a completely white image will be this shade of gray while playing) unless you use additive blending.

Whenever you use the storyboard to colorize something, this dimming effect takes place after you colorize, but is still subtracted as if it were the base image.

Let's take a perfectly white image (255,255,255). The dimming property will then subtract out 63 from each channel giving 192,192,192. If you colorize that image to be a very dark gray color (63,63,63), the image when osu dims it will be completely black (0,0,0). During breaks it will be the proper color.

So the equation for the color is like this:

Color = (Base * SB color / 255) - (Base * 1/4)
If you're using a white image (255,255,255):
Color= SB color - 63
This also can lead to a bit of optimization in storyboarding, should you want to remove a redraw from the SB load and you're fading to black:

Instead of putting a layer of black in the foreground, colorize each channel from 255 to 63. Just be warned that after you colorize to 63, if there is a break, it will fade in again slightly, so you'll need to colorize it all the way to 0.

Additive coloring
Additive color is slightly different, but works on the same principles. Instead of changing the actual channel's value, it adds that amount to the channel.

Let's say you have a completely white image (255,255,255) and storyboard it to be additive. First, the osu dim reduces it to 192,192,192. Now, that value is added on to each pixel underneath the image, to a maximum of 255,255,255. That means if your background's color is greater than 84,84,84, and you put a white additive layer above it, it will come out to be perfectly white, and not "dimmed" at all.

It uses the same formula as before:

Additive Color = (Base * SB color / 255) - (Base * 1/4)

"starbreakadditive" in skin.ini works by colorizing star2.png. The default colorization as far as I can guess is 255,192,192.

Notes
In my opinion, the osu! dim is broken. It shouldn't be calculated based on the original RGB value, but the final output RGB value. This would avoid any exploits with additive blending, and would also fix problems with matching colors to the background.
Shiirn
i love you
mm201
Just wait till I introduce colour matrices. Then you'll have fun!
Equivalent_old
//Storyboard Layer 3 (Foreground)
Sprite,Foreground,Centre,"BG_Dark.jpg",320,240
F,2,-1868,7132,1,0
M,0,7132,,320,240
F,2,11632,14632,0,1
C,0,11632,14632,0,0,0
F,2,14632,16132,1,0
C,0,16132,17632,255,255,255
F,0,50632,53632,0,1
F,0,53632,56632,0.99,0
F,0,59632,64132,0,1
C,0,59632,64132,0,0,0
F,0,64132,67132,0.99,0
C,0,67132,68632,255,255,255
F,0,95632,100132,0,1
C,0,95632,100132,0,0,0
F,0,100132,103132,0.99,0
C,0,103132,106132,255,255,255
Sprite,Foreground,Centre,"BG_Light.jpg",320,240
F,0,7132,10132,0,0.8
C,0,7132,10132,255,0,6
F,0,10132,13132,0.79,0
C,0,13132,13507,255,255,255
M,0,24757,,320,240
F,0,24757,26632,1,0
S,0,24757,26632,1,1.1
S,0,26632,28132,1.1,1
F,0,43882,46132,0,1
F,0,46132,49132,0.99,0
F,0,67132,68632,0,0.8
C,0,67132,68632,242,59,134
F,0,68632,70132,0.79,0
C,0,70132,,255,255,255
F,0,78757,79882,0,1
F,0,79882,81382,0.99,0
F,0,85132,86632,0,0.8
C,0,85132,86632,242,59,134
F,0,86632,88132,0.79,0
C,0,88132,,255,255,255
F,0,88507,94132,0,1
F,0,94132,95257,0.99,0
F,0,107632,110632,1,0
S,0,107632,110632,1,1.1

Am I doing it right? This for the map M2U - The Prince Of Darkness. My first attempt on making colorized SB <3
ArmandoR
now there is custom background dim.This affects storyboarding and colors, but thats user-preference so dont worry too much about it.
Topic Starter
ziin
the bg dim ranges from 10% to 75% now. The math is easy.
Muzika
i am an idiot so idk what all this stuff means :c
-Myhra
or there is a another way is the value of what color you want
myself i found it at edit thanks to Yua that tell me some values and i figured it out
Tony cutie

ziin wrote:

the bg dim ranges from 10% to 75% now. The math is easy.
I do not understand (You can just give type codes 255,255,255
alispalis
''how to use skins for osu?''
Yotecc
what is storyboard lol
Aiq

Yotecc wrote:

what is storyboard lol
wiki/en/Storyboards

NOW PLEASE DON'T NECRO EVER AGAIN
McEndu

Aiq wrote:

Yotecc wrote:

what is storyboard lol
wiki/en/Storyboards

NOW PLEASE DON'T NECRO EVER AGAIN
this is a pinned topic lol
Please sign in to reply.

New reply