forum

[resolved] Skinning osu!mania

posted
Total Posts
16
Topic Starter
Exemmar
Is there any way to customize each key in osu!mania? For example: In 7k I'd like to have green,blue,red,yellow,red,blue,green keys but in skin folder i have only "key1" "key2" and "keyS". So i guess if I edit key1 it'll change both left and right "key1" instead of just left.
Blaizer
Yes. Refer to the KeyImage and NoteImage part of https://osu.ppy.sh/wiki/Skin.ini .
Topic Starter
Exemmar
Thanks for quick answer, I'll do my best and let know if i nailed it.

@edit It's way harder than i thought. It seems i need easier commands because i can't understand almost anything. :?
VeilStar
Well I thought we couldn't do this (I remember seeing a feature request regarding this a few days ago)...
But if I understand correctly it goes as following:

From the skin.ini wiki:
//The sprite to use (mania-note1.png) for notes appearing in the first column
NoteImage0: mania-note1
//The sprite to use (mania-note1H.png) for the head of slider notes appearing in the first column
NoteImage0H: mania-note1H
//The sprite to use (mania-note1L.png) for the body of slider notes appearing in the first column
NoteImage0L: mania-note1L
//The sprite to use (mania-note1T.png) for the tail of slider notes appearing in the first column
NoteImage0T: mania-note1T

The lines that start with // are descriptions of what the line below it does.
Basically you can 'stack' these for each lane/column/key in mania.

So for 5k that would be this.
//
Keys: 5
//
//The sprite to use (mania-key1.png) when the key is not pressed
KeyImage0: mania-key1
//The sprite to use (mania-key1D.png) when the key is pressed
KeyImage0D: mania-key1D
//
//The sprite to use (mania-key2.png) when the key is not pressed
KeyImage1: mania-key2
//The sprite to use (mania-key2D.png) when the key is pressed
KeyImage1D: mania-key2D
//
//The sprite to use (mania-key3.png) when the key is not pressed
KeyImage2: mania-key3
//The sprite to use (mania-key3D.png) when the key is pressed
KeyImage2D: mania-key3D
//
//The sprite to use (mania-key4.png) when the key is not pressed
KeyImage3: mania-key4
//The sprite to use (mania-key4D.png) when the key is pressed
KeyImage3D: mania-key4D
//
//The sprite to use (mania-key5.png) when the key is not pressed
KeyImage4: mania-key5
//The sprite to use (mania-key5D.png) when the key is pressed
KeyImage4D: mania-key5D
//
//
//The sprite to use (mania-note1.png) for notes appearing in the first column
NoteImage0: mania-note1
//The sprite to use (mania-note1H.png) for the head of slider notes appearing in the first column
NoteImage0H: mania-note1H
//The sprite to use (mania-note1L.png) for the body of slider notes appearing in the first column
NoteImage0L: mania-note1L
//The sprite to use (mania-note1T.png) for the tail of slider notes appearing in the first column
NoteImage0T: mania-note1T
//
//The sprite to use (mania-note2.png) for notes appearing in the second column
NoteImage1: mania-note2
//The sprite to use (mania-note2H.png) for the head of slider notes appearing in the second column
NoteImage1H: mania-note2H
//The sprite to use (mania-note2L.png) for the body of slider notes appearing in the second column
NoteImage1L: mania-note2L
//The sprite to use (mania-note2T.png) for the tail of slider notes appearing in the second column
NoteImage1T: mania-note2T
//
//The sprite to use (mania-note3.png) for notes appearing in the third column
NoteImage2: mania-note3
//The sprite to use (mania-note3H.png) for the head of slider notes appearing in the third column
NoteImage2H: mania-note3H
//The sprite to use (mania-note3L.png) for the body of slider notes appearing in the third column
NoteImage2L: mania-note3L
//The sprite to use (mania-note3T.png) for the tail of slider notes appearing in the third column
NoteImage2T: mania-note3T
//
//The sprite to use (mania-note4.png) for notes appearing in the fourth column
NoteImage3: mania-note4
//The sprite to use (mania-note4H.png) for the head of slider notes appearing in the fourth column
NoteImage3H: mania-note4H
//The sprite to use (mania-note4L.png) for the body of slider notes appearing in the fourth column
NoteImage3L: mania-note4L
//The sprite to use (mania-note4T.png) for the tail of slider notes appearing in the fourth column
NoteImage3T: mania-note4T
//
//The sprite to use (mania-note5.png) for notes appearing in the fifth column
NoteImage4: mania-note5
//The sprite to use (mania-note5H.png) for the head of slider notes appearing in the fifth column
NoteImage4H: mania-note5H
//The sprite to use (mania-note5L.png) for the body of slider notes appearing in the fifth column
NoteImage4L: mania-note5L
//The sprite to use (mania-note5T.png) for the tail of slider notes appearing in the fifth column
NoteImage4T: mania-note5T

For 7k you would keep 'stacking' this for 2 more keys and put it under the "Key: 7" section, which is under the [Mania] section in the skin.ini.
Then you need to create the according sprites in the colours that you want that match the ones mentioned above.
It gets very confusing very quickly, and requires quite alot of work, but that's how it works from what I understand.
Blaizer
You can get rid of all the comment lines to make it easier to see the important parts. NoteImage0T (the note tail) is not required. If you don't specifiy it, the head will be flipped around and used as the tail.
Topic Starter
Exemmar
It's confusing indeed but the example is helping a lot so maybe this time I'll do better and hopefully finally understand it.
VeilStar

Blaizer wrote:

You can get rid of all the comment lines to make it easier to see the important parts. NoteImage0T (the note tail) is not required. If you don't specifiy it, the head will be flipped around and used as the tail.
Left them in to (hopefully) help understand how it works more easily. But yeah, they're not required.
As for the NoteImage0T, I didn't know that :o

Exemmar wrote:

It's confusing indeed but the example is helping a lot so maybe this time I'll do better and hopefully finally understand it.
Good luck.
Topic Starter
Exemmar
Good luck.
Thanks, it probably helped me because I think I'm getting it.
This is how i made it. I'm not sure if everything is fine so I'd be glad if one or both of you would check it.
And by the way: comment lines are "//" i suppose or that "description" line? I'm gonna get rid of them once I'll see everything is working.
If i wrote everything right I'll start editing skin colors so it will be less confusing for me in-game.
Also: should i make "7k.ini" for all these things i wrote with your help or just leave all of this in skin.ini? Or maybe both? Sorry for dumb questions but as you could probably see, I'm not so good with this.
SPOILER
Keys: 7
//
//The sprite to use (mania-key1.png) when the key is not pressed
KeyImage0: mania-key1
//The sprite to use (mania-key1D.png) when the key is pressed
KeyImage0D: mania-key1D
//
//The sprite to use (mania-key2.png) when the key is not pressed
KeyImage1: mania-key2
//The sprite to use (mania-key2D.png) when the key is pressed
KeyImage1D: mania-key2D
//
//The sprite to use (mania-key3.png) when the key is not pressed
KeyImage2: mania-key3
//The sprite to use (mania-key3D.png) when the key is pressed
KeyImage2D: mania-key3D
//
//The sprite to use (mania-key4.png) when the key is not pressed
KeyImage3: mania-key4
//The sprite to use (mania-key4D.png) when the key is pressed
KeyImage3D: mania-key4D
//
//The sprite to use (mania-key5.png) when the key is not pressed
KeyImage4: mania-key5
//The sprite to use (mania-key5D.png) when the key is pressed
KeyImage4D: mania-key5D
//
//The sprite to use (mania-key6.png) when the key is not pressed
KeyImage5: mania-key6
//The sprite to use (mania-key6D.png) when the key is pressed
KeyImage5D: mania-key6D
//
//The sprite to use (mania-key7.png) when the key is not pressed
KeyImage6: mania-key7
//The sprite to use (mania-key7D.png) when the key is pressed
KeyImage6D: mania-key7D
//
//
//The sprite to use (mania-note1.png) for notes appearing in the first column
NoteImage0: mania-note1
//The sprite to use (mania-note1H.png) for the head of slider notes appearing in the first column
NoteImage0H: mania-note1H
//The sprite to use (mania-note1L.png) for the body of slider notes appearing in the first column
NoteImage0L: mania-note1L
//
//The sprite to use (mania-note2.png) for notes appearing in the second column
NoteImage1: mania-note2
//The sprite to use (mania-note2H.png) for the head of slider notes appearing in the first column
NoteImage1H: mania-note2H
//The sprite to use (mania-note2L.png) for the body of slider notes appearing in the first column
NoteImage1L: mania-note2L
//
//The sprite to use (mania-note3.png) for notes appearing in the third column
NoteImage2: mania-note3
//The sprite to use (mania-note3H.png) for the head of slider notes appearing in the first column
NoteImage2H: mania-note3H
//The sprite to use (mania-note3L.png) for the body of slider notes appearing in the first column
NoteImage2L: mania-note3L
//
//The sprite to use (mania-note4.png) for notes appearing in the fourth column
NoteImage3: mania-note4
//The sprite to use (mania-note4H.png) for the head of slider notes appearing in the first column
NoteImage3H: mania-note4H
//The sprite to use (mania-note4L.png) for the body of slider notes appearing in the first column
NoteImage3L: mania-note4L
//
//The sprite to use (mania-note5.png) for notes appearing in the fifth column
NoteImage4: mania-note5
//The sprite to use (mania-note5H.png) for the head of slider notes appearing in the first column
NoteImage4H: mania-note5H
//The sprite to use (mania-note5L.png) for the body of slider notes appearing in the first column
NoteImage4L: mania-note5L
//
//The sprite to use (mania-note6.png) for notes appearing in the sixth column
NoteImage5: mania-note6
//The sprite to use (mania-note6H.png) for the head of slider notes appearing in the first column
NoteImage5H: mania-note6H
//The sprite to use (mania-note6L.png) for the body of slider notes appearing in the first column
NoteImage5L: mania-note6L
//
//The sprite to use (mania-note7.png) for notes appearing in the seventh column
NoteImage6: mania-note7
//The sprite to use (mania-note7H.png) for the head of slider notes appearing in the first column
NoteImage6H: mania-note7H
//The sprite to use (mania-note7L.png) for the body of slider notes appearing in the first column
NoteImage6L: mania-note7L
//
Blaizer
Looks good to me if you want 7 differently-coloured keys. Everything needs to be in skin.ini, unfortunately you can't just split it into multiple files.
Topic Starter
Exemmar
Well, I kinda failed <facepalm> because I wanted to do something like: "key1 key2 key3 keyS key3 key2 key1" but I can easily edit it since I understand how it works.

Still have some doubts with "mania-note1L" 'cause it has multiple "versions" in default osu! skin (I don't know how to call it).
I mean: "mania-note1L-0.png" "mania-note1L-0@2x.png" "mania-note1L-1.png" "mania-note1L-2.png" "mania-note1L-3.png" "mania-note1L-4.png" "mania-note1L-5.png"

And if I use "mania-note1L-0.png" and then rename it with "mania-note1L" (so it will fit with that what I wrote in .ini) I'm not sure how it's gonna look in game. So is there any way I can use all of these I listed above after all changes I'm gonna make? Or what should I do to keep it animated? In the worst case I'll abandon animation but I'd like to keep it.

I add screenshot to show my work in progress. Yet got to edit a lot but words can't describe how happy I am that it works.
VeilStar

Exemmar wrote:

Well, I kinda failed <facepalm> because I wanted to do something like: "key1 key2 key3 keyS key3 key2 key1" but I can easily edit it since I understand how it works.
Just renaming the text that defines which sprite/texture is used for the keys will do the job.

Exemmar wrote:

Still have some doubts with "mania-note1L" 'cause it has multiple "versions" in default osu! skin (I don't know how to call it).
I mean: "mania-note1L-0.png" "mania-note1L-0@2x.png" "mania-note1L-1.png" "mania-note1L-2.png" "mania-note1L-3.png" "mania-note1L-4.png" "mania-note1L-5.png"
Files that have -0, -1, -2, etc behind them are frames used for animation.

Exemmar wrote:

And if I use "mania-note1L-0.png" and then rename it with "mania-note1L" (so it will fit with that what I wrote in .ini) I'm not sure how it's gonna look in game.
The same as mania-note1L-0.

Exemmar wrote:

So is there any way I can use all of these I listed above after all changes I'm gonna make? Or what should I do to keep it animated? In the worst case I'll abandon animation but I'd like to keep it.
Well yes, you can still use animated sprites by having -0, -1, -2, etc behind them. Each one of these -# represents a frame in the animation. The animation framerate is decided by the AnimationFramerate line in the skin.ini

Basically just take the sprite that has -0 at the end, remove the -0 part, and remove all files with the same name and end with -# if you want a non-animated long note (LN). If you want them animated you, of course, have to use them for each different note sprite.
Blaizer
If the game sees images that end in -0, -1, etc., it'll use those instead of the ones that don't. So you don't have to change anything in the skin to use (or not use) animated sprites.
Topic Starter
Exemmar
I actually renamed the files because I was too lazy to edit that wall of text in skin.ini :P Now with new informations from you I'll edit the rest and wait for answer for that question:

What's the point of files with "@x2" I noticed that they are 2 times wider and higher but what do they do in game? Do I have to use them in my skin and recolor them too?
VeilStar

Exemmar wrote:

"What's the point of files with "@x2" I noticed that they are 2 times wider and higher but what do they do in game? Do I have to use them in my skin and recolor them too?
@2x files are basically 'high definition' or 'high resolution' versions of the textures.

They're ONLY used IF they're in the skin folder AND a resolution of 800 pixels in height or higher is used.

The reason? Well, because at higher resolutions the 'default' (non-@2x) files get upscaled so much that they start to look very blurry.
Worst case scenario I've seen of this are the mod icons at 1920x1080 when no @2x files are used.

You could consider them a HD texture pack.
Topic Starter
Exemmar
I'm not making HD skin so probably won't use but I'm just curious:
They're ONLY used IF they're in the skin folder AND a resolution of 800 pixels or higher is used.
you mean resolution of osu! or resolution of .png in folder? Because these .png's aren't 800 pixels but still are using @2x. So it doesn't make sense for me.
And how does it look in game where long notes are usually longer than 800 pixels?

Sorry for lots of questions but I'm trying to make a perfect skin for myself. :oops:

@edit Just finished the whole skinning process. I'm very happy and proud of that. BIG thanks for both of you for guiding and teaching me how to do that.

I add screen.
VeilStar

Exemmar wrote:

you mean resolution of osu! or resolution of .png in folder? Because these .png's aren't 800 pixels but still are using @2x. So it doesn't make sense for me.
The resolution used in-game. NOT the resolution of the image files.



Exemmar wrote:

Just finished the whole skinning process. I'm very happy and proud of that. BIG thanks for both of you for guiding and teaching me how to do that.
No problem.

Nice :D
Please sign in to reply.

New reply