forum

Skinning tutorial (+ skinning support)

posted
Total Posts
4,226
show more
Topic Starter
MLGnom
Added information about uploading/creating skin thread.
Please correct me if you found any mistakes (grammar too). :3
Firo Prochainezo
One of the most useful guide in osu! in my humble opinion. Once again, wonderful job MLGnom! Bravo!
Void
Is there any particular reason for StarBreakAdditive to cause star2 to go invisible? Or is it just because I'm setting it to black and white?

EDIT: The term "alpha channel" came across my mind for some reason, but I'm not sure if it could somehow be related or not.

Also, why is the fail background mentioned to 800x600 only, and not 1024x768?
Topic Starter
MLGnom
About StarBreakAdditive. I tested it a little, and yeah it seems to manipulate transparency if you are changing values by same amount (Like StarBreakAdditive: 25,25,25 - nearly visible star2) While making it white (255,255,255) it's stays unchanged. If Black (0,0,0) it's disappear (transparency = 0) (Still I'm thinking how to explain this correctly)

About fail-background : For long time it's wasn't scaled properly by osu! (while you made resolution higher than 800x600, it was oversized ingame). Well it seems that has been changed.

I will correct both information later. Thank you for noticing these. ^^'
AnimeMusicgirl24
I don't understand the skin.ini thing. I mean, I understand it, but where can I get it?
ziin
create a file called "skin.ini". Edit the file so that it has all of the items listed in the tutorial in a text editing program.

Or download any other skin and use its skin.ini as a guide.

MLGnom wrote:

About StarBreakAdditive. I tested it a little, and yeah it seems to manipulate transparency if you are changing values by same amount (Like StarBreakAdditive: 25,25,25 - nearly visible star2) While making it white (255,255,255) it's stays unchanged. If Black (0,0,0) it's disappear (transparency = 0) (Still I'm thinking how to explain this correctly)
About Additive color blending:

colorizing in osu means subtracting out a number from a channel. For example, you can't take an orange image and make it blue. It's impossible, since the blue value is already 0.

When using the storyboard colorize, it will set the image's RGB value to a percentage of the original. If you use 0, it's black. If you use 255, it's the original. When you use additive blending, instead of reducing the value of the channel, it reduces the alpha channel (transparency).

Thus if your star2.png is blue (0,0,255) and you use starbreakadditive 128,128,128, the first two 128s don't do anything (they could be 255), and the second one will reduce the transparency of the blue star2.png to 50%.

This is how the background is dimmed when playing, and how the stars eventually fade into nothing as well.
Topic Starter
MLGnom
So, you can use StarBreakAdditive to reduce transparency of star2.png or colorize it if it's gray-scale yes?
After all I understand now how it's work.
And please, can you write an explanation in form that would be easier to understand? (for people who would have problem with understanding this). Then I would be able to add this to the main post.
ziin
I barely understand it myself. I don't know how to actually calculate it either, so it's best to just use guess-check.
ShadowzI_old
Just wanted to add to the tutorial specifically about the health bar. The distance of the scorebar-color should be exactly 16 pixels down and 5 pixels to the right. In otherwords that's where the anchor point is. So all you need to remember is to make sure in your scorebar-background 16x5 form the top left corner you start making the top left corner of you scorebar-color.
Just thought I include this info cause it's usually quite easy for me to make the health bars.
Update: Damn I think the vodka is getting to me I can't remember if it is 5 pixel or 4. I'll check again in the morning
My1_old
can somebody explain the thin with the falling stars (these falling from the cursor) from the game???
there are only values explained and I dont get anything
ziin

My1 wrote:

can somebody explain the thin with the falling stars from the game???
How colorization works in osu!

Take star2.png
Take any pixel in the image. It will have a color associated with it, usually white, or [255,255,255].
For the purposes of this experiment, let's use a different color though, say [255,222,200]
StarBreakAdditive will then modify that pixel on a channel by channel basis. Thus if the additive is [34,255,92] then we will do the following:

255 * 34 / 255 = 34
222 * 255 / 255 = 222
200 * 92 / 255 = 72

The star's color during breaks will be [34,222,72], some nasty shade of green.

Now, instead of drawing just a nasty shade of green star, it instead adds [34,222,72] to the pixel directly behind it. On a black pixel [0,0,0], it will look exactly like [34,222,72]. On a white pixel, it will look white [255,255,255] because you can't go any higher than [255,255,255]. On a gray image, say [192,192,192] it will bet a bit different:

192 + 34 = 226
192 + 222 > 255
192 + 72 > 255

So it will be the color [226,255,255], a very light cyan. As time goes on, the star itself fades out.

Note that these are only the stars that fall from your cursor during the breaks. I just use white all the time in my skin, but the default skin uses a pinkish color, I presume to be [255,192,192].
Topic Starter
MLGnom
Great. Added link to your post. Let's hope that will help with understanding how it's working.
My1_old
yes and I change the general color with th imge or is there an ini option too???
ziin

My1 wrote:

yes and I change the general color with th imge or is there an ini option too???
StarbreakAdditive: is in the ini.

You can also change the color in the image.
YuZuKi Kenny
I have a question.
How to make an *.ini file of my skin?
My English is poor. ;(
Luna
Just take the *.ini from any skin (for example from the template skin) and edit it
My1_old

ziin wrote:

My1 wrote:

yes and I change the general color with th imge or is there an ini option too???
StarbreakAdditive: is in the ini.

You can also change the color in the image.
but it says that this option only applies in breaks or in "kaiai time" (dont aks me what that is I am the one who wants to know thies...)
but I said general and general means always
-> edit
OK I had enough of setting the col in the ini so I mad it with the image...
however is there an option to let the stars shine always
YuZuKi Kenny

Luna wrote:

Just take the *.ini from any skin (for example from the template skin) and edit it
ok,Thx :)
ziin

My1 wrote:

but it says that this option only applies in breaks or in "kaiai time" (dont aks me what that is I am the one who wants to know thies...)
but I said general and general means always
-> edit
OK I had enough of setting the col in the ini so I mad it with the image...
however is there an option to let the stars shine always
The stars only fall from the cursor during breaks and kiai time.
Breaks look like this in the editor: http://puu.sh/5bmq
Breaks are gray on the timeline, Kiai time is orange: http://puu.sh/5bmx
If you want to see the stars all the time, edit the beatmap so that kiai is always on.

During kiai time, the star changes color according to the combo color instead of starbreakadditive.
My1_old
and what is kiai time exactly???
ziin
It's a timing section which makes lighting.png show up behind all hitcircles, colorized to the hitcircle color, star2.png will be emitted from the cursor in the color of the hitcircle, and there will be a fountain of non-colorized stars at the very beginning of the timing section.
My1_old
so ok but is there something eöse special like bonuspoints or whatever
ziin
in taiko you get 10% more points.
My1_old
only in taiko???
man...
Neclory
someone knows what "LayeredHitSounds" means? I found it in a .ini file.
My1_old
can you say me where ya found it???
I can try it and say what I found...
and a question can sb. give me the original autopilot icon, I need it for skinning
but MAY I even use the standard skin (recolored)???
Topic Starter
MLGnom

Rin wrote:

someone knows what "LayeredHitSounds" means? I found it in a .ini file.
Errr where did you find that?
I think it's something related to the mapping (editor), not to the skin.ini . D:
My1_old

My1 wrote:

can sb. give me the original autopilot icon, I need it for skinning
but MAY I even use the standard skin (recolored)???
My1_old
little questiion what are hit100k hit300g and hit 300k for???
ziin
they are displayed at the end of a combo. 300g if you SSed it. 300k if you got a 100 somewhere. 100k if you got the last note as 100 but no 50s anywhere in the combo.

if you want the autopilot icon, just printscreen it.
My1_old
no screenshot makes It somehow darker...
dont ask me how and why It is just so...
Wassaaaa
parts that can be animated just go from 0 to 9 -.-" , there is a way to extend this? I'm wanting to create a great skin and i'm limited a lot these few numbers like the combobursts .-.
Topic Starter
MLGnom
Hmmm... I will check this tomorrow. But they shouldn't have limits. D:
I know there is no limits for comboburst (actually in one of my skin I have 20 of them)
Wassaaaa
how do you do?? i put a comboburst-10.png and only goes to 9 and start again from 0
EDIT: LOL, now i can put more comboburst. I have no idea what has happened, thanks :P see my other problem please

otherwise, the animation of ryuuta going too fast D: you can not handle the frame rate?
Topic Starter
MLGnom
Yep like I said. There is no limit amount of frames for animations.
Tested :
- Play-skip,
- Fruit ryuuta,
- Followpoint ,
- Sliderfollowcircle,
They had +10 frames and worked fine.

For making slower animation try using same pictures for few frames (Fruit ryuuta 1,2,3 - picture 1, Fruit ryuuta 4,5,6 - picture 2 etc.)
That's the only way to slowdown animations.

Also If you are making Fruit-ryuuta animation you should add also "Fruit-ryuuta.png" as sprite for character "dash". Probably it will need a small position correction.
-Napoleon-
I have a skin problem how to create hitsouds!
Wassaaaa

MLGnom wrote:

Yep like I said. There is no limit amount of frames for animations.
Tested :
- Play-skip,
- Fruit ryuuta,
- Followpoint ,
- Sliderfollowcircle,
They had +10 frames and worked fine.

For making slower animation try using same pictures for few frames (Fruit ryuuta 1,2,3 - picture 1, Fruit ryuuta 4,5,6 - picture 2 etc.)
That's the only way to slowdown animations.

Also If you are making Fruit-ryuuta animation you should add also "Fruit-ryuuta.png" as sprite for character "dash". Probably it will need a small position correction.
Thank you very much for helping me! appreciate it ^^
miffman
i know this is in odd question , but is there a hex or a code for color rotation? like it moves through every color. i think that would be pretty cool for a score bar
ziin
Edit: ah fuck I'm not in the Storyboard section. Feel free to ignore the rest of this post, has nothing to do with skinning. To make some element flash all colors, you need to have a frame for each color. you want to flash. If you want to do all 24 bit colors, it's going to be a huge amount. so if you just flash those 6 colors, and maybe throw in 255,127,0 (orange) in between the red and yellow section and continue that trend you'll have 12 colors.



yeah. sort of.
Barring black and white:
255,0,0
255,255,0
0,255,0
0,255,255
0,0,255
255,0,255

these are the colors you're looking at: RGB and CYM
if you put them in that order you'll get something like what you want I think.

_c,blah,blah,blah,255,0,0,255,255,0
_c,blah,blah,blah,255,255,0,0,255,0
_c,blah,blah,blah,0,255,0,0,255,255
_c,blah,blah,blah,0,255,255,0,0,255
_c,blah,blah,blah,0,0,255,255,0,255
_c,blah,blah,blah,255,0,255,255,0,0

You could do every color if you had enough time, but every color looks like this:
http://upload.wikimedia.org/wikipedia/c ... colors.png
and it wouldn't be "fluid".
K a Y e
Where do you find that Skin.ini thing??

And by the way, What is Skin.ini? :?
show more
Please sign in to reply.

New reply