forum

Skinning tutorial (+ skinning support)

posted
Total Posts
4,226
show more
mugasha
Is the spinner background supposed to be dimmed in-game?
Kyuunei_old

mugasha wrote:

Is the spinner background supposed to be dimmed in-game?
Yes.
dionzz99
What is the source code to:
1. making the spinner glow. i see the default osu! skin can make them.
2. insert another picture to the spinner instead only one spinner-circle. the default osu! skin can make those too
Hatsune Chiyo
What's exactly the taiko-bar-right dimensions? I tried something and it's always stretched in-game..

here-'s in-game look

1280x800 (16:10)
Did that part only works with standard resolution, e.g. 4:3?
Nathanael
Haven't you checked the default template? Its 845x200.

Edit: Kotori <3
Hatsune Chiyo
Just remembered the reason why I made my taiko-bar-right wider than the template:
because of my stretching issue :p


does it means taiko-bar-right isn't widescreen-compatible?
OsuMe65
Maybe it's because that's the default behavior of that element.
Hatsune Chiyo
you mean, filling out the bar by stretching it?
OsuMe65
Possibly

I won't test it out yet since I'm using a 4:3 monitor.
Hatsune Chiyo
Just did it.
211x200px taiko-bar-right.


No, it isn't filling up.. :|
Topic Starter
MLGnom

Hatsune Chiyo wrote:

Just did it.
211x200px taiko-bar-right.

No, it isn't filling up.. :|
What resolution you are using in game?
tokaku
I have a few questions...

Okay so ever since I was a noob, the first non default skin I used was a skin I mixed and matched around because I didn’t like how one skin had one part but I liked this other part etc.
But recently I started altering the skins to more of my likings. Now to the point where I created some parts by myself with the help of a base.
I have a few questions because I’m nervous of calling it a skin I made all by myself and reassurance.

1) Is it okay if my skin resembles other skins?
I’ve seen on osu! Skin forums where people are using the same follow point I see everywhere (the one where it looks like a line) without crediting. Did they make it themselves and it’s okay to have it look almost exactly the same except it’s remade by the poster?
I’ve also noticed that most of my ideas have been made already except maybe slightly different after looking around at other things. Is it okay or do I need to make a full on makeover?

2) How do you make hitsounds?
I know what I want for menu-click, failsound etc. But the ones for play is the ones I’m not sure. Did people take them from other free music sites and alter them? Where/how did they find such sounds? Or do they make them themselves? How is each sound suppose the sound like? (I can’t find a download the default skin apparently. There probably isn’t any. So I can’t have a proper template to figure it out)

That’s pretty much my fears and concerns for it. Any help?
OsuMe65
1) Yes. As long as the element DOESN'T PERFECTLY MATCH another element.
Some of the skinners here ask permission to the original authors for some elements. Some of them replicates an element (like me in some cases) and some of them places an element that he/she didn't create for the sake of his/her skin (illegal here, but not in userpages and signatures).

2) Google is your best friend if you don't like to do the hitsounds in a hard way. The template skin is also your best friend too. Some of us (RARELY... I MEAN IT...) uses a Digital Audio Workstation / DAW in making hitsounds. Best examples of these are FL Studio and Cubase. If you want to know the actual sounds of the default skin, simply go to the first page of this thread. There's 2 download links available; the choice is still yours.
tokaku
Thank you so much now I know what the heck I should do
Hatsune Chiyo

MLGnom wrote:

What resolution you are using in game?
1280x800
deadbeat
just posting to say there's a new mod icon:
[peppy] Add cinema mod. Watch storyboards with no interruptions!
BasedGod

deadbeat wrote:

just posting to say there's a new mod icon:
[peppy] Add cinema mod. Watch storyboards with no interruptions!
I can't find the mod with the default skin :/
deadbeat
the mod is located under Auto
guessing the file name is selection-mod-cinema.png
BasedGod

deadbeat wrote:

the mod is located under Auto
guessing the file name is selection-mod-cinema.png
i think he removed it again or restricted it to Auto. (check the changelog)
deadbeat
wish i was at home so i could do testing on this >_>
BasedGod

deadbeat wrote:

wish i was at home so i could do testing on this >_>
:p i wonder why he restricted it tho, wasn't really watching the stream
Garygoh884
Oh yes, here comes another one! (prepares SD and HD sprites of that using his own template)
Rolling Boy
Hi,

my question is, Can I change the colour of the spinner-glow? its blue by default.
deadbeat

/me runs
Nathanael
Where the heck is that Cinema mod... :/
Ayesha Altugle
[peppy] Add cinema mod. Watch storyboards with no interruptions!

?
on the changelog
Nathanael
I know its at the changelog. I was looking for it at the test build... :/
OsuMe65
Cinema (CN) mod is under Autoplay, if I'm right.
deadbeat

OsuMe65 wrote:

Cinema (CN) mod is under Autoplay, if I'm right.
not yet, that's where it will be. it's rather hidden at the moment. should hopefully should be more visible in the next few days

vahn10 wrote:

[peppy] Add cinema mod. Watch storyboards with no interruptions!

?
on the changelog
yeah, i mentioned that on the previous page :p
Ginky
What is about the images with the suffix of "@2x"? What is their significance of exisitence? How should they be made?
Mathsma

bayun lan wrote:

What is about the images with the suffix of "@2x"? What is their significance of exisitence? How should they be made?
They are HD images meant for resolutions higher than some resolution I am unsure of. They are 2x the resolution of non-@2x files which allows for them to look better in higher resolution game windows.
Hatsune Chiyo

Rolling Boy wrote:

Hi,

my question is, Can I change the colour of the spinner-glow? its blue by default.
spinner-glow.png, 825x825

also, for anyone who hasn't yet looked the changelog, cinema mode is ctrl-shift-enter, it just added to the public build :p
Rolling Boy

Hatsune Chiyo wrote:

Rolling Boy wrote:

Hi,

my question is, Can I change the colour of the spinner-glow? its blue by default.
spinner-glow.png, 825x825
Emm... I'm asking for some code in the skin.ini, not the name of the file...
Hatsune Chiyo
oh, you mean the code..
sorry man I did not.. :\
Rei Hakurei
skin it, since you can't specify it
Khorux
Hello, I was wondering if it was possible to add animations to the playfield, similar to the dancing kurousagi on this person's vid:

I'm not sure if it's part of the skin, or just video animations
Ayesha Altugle
It is made from the scorebar-colour I think.
FieryLight
Quick question: how are numbers aligned? does the centre of the image just align to the centre of the hitcircle?

Thanks in advance! =)
Hatsune Chiyo
yes, it aligned to the center of the circle :)
Hykisho
Quick question, can you make a HD skin out of a SD skin? If so, how? Do you need to recreate every sprite in HD for it?
OsuMe65
It must be the other way around.
(If you're skilled enough, why not recreate them in HD?)
-Jaunty-
Does anyone here know how to make REALLY good custom skins? If so please reply. ;) ;) ;)
Nya Nya Neko
ive got a question
what is about the key overlay
in some skins they are costumized in some not
How do I create these overlays.
I couldn't find an image in my skin
Timorisu

not94 wrote:

ive got a question
what is about the key overlay
in some skins they are costumized in some not
How do I create these overlays.
I couldn't find an image in my skin
inputoverlay-background.png

inputoverlay-key.png
Hykisho

OsuMe65 wrote:

It must be the other way around.
(If you're skilled enough, why not recreate them in HD?)
Well, I don't really know how and I'm too lazy to find out. :D
deadbeat
i know there's volume-bg.png
but what's the element for the effects volume. it is just effects-volume-bg.png?
Haskorion

deadbeat wrote:

i know there's volume-bg.png
but what's the element for the effects volume. it is just effects-volume-bg.png?
it's volume-bg-effect.png
deadbeat
excellent. thank you
P-San
Why is it that some ranking-panel s fill my screen but others only fill parts?
OsuMe65

PandaDoctor wrote:

Why is it that some ranking-panel s fill my screen but others only fill parts?
Ranking screens vary because of their image resolutions.
Also, skin behavior matters
P-San

OsuMe65 wrote:

PandaDoctor wrote:

Why is it that some ranking-panel s fill my screen but others only fill parts?
Ranking screens vary because of their image resolutions.
Also, skin behavior matters
What do you mean by skin behavior?
OsuMe65


that one
Khorux
Hi, I was wondering if it was possible to control the speed of the scorebar-colour animation. I've tried to add extra frames to make the animation slower or delete frames to make it faster, but these frame changes only come into effect when previewing the skin. When I'm in game the animation speed is always the same no matter how many frames there are.
OsuMe65
AnimationFramerate: (value in numbers)
This code applies to skin.ini
This will help. The lower the #, the slower the animation.
Topic Starter
MLGnom

Stort wrote:

Hi, I was wondering if it was possible to control the speed of the scorebar-colour animation. I've tried to add extra frames to make the animation slower or delete frames to make it faster, but these frame changes only come into effect when previewing the skin. When I'm in game the animation speed is always the same no matter how many frames there are.
I will just quote thing that I wrote 5 month ago. :D

MLGnom wrote:

That depends which one part you are actually animating.

With adding to skin.ini "AnimationFramerate: <Number of frames per second>" - This option will affect every animation that you have in your skin (except hitbursts and sliderball).
But now how to control speed with it and how to make different speed on different parts?

This is a tricky part. As stated AnimationFramrate is affecting amount of frames used per second.
Example: We have animated lifebar that contains 8 frames and animated skip button that contains 20 frames. We are setting AnimationFramerate to 4.
Full loop of lifebar animation will take 2 seconds , 5 second for skip button.
In other words The more frames you have and lower Animation Framerate is, then slower animation will be.

But now case where we want fast animation for skip and very slow for lifebar. Let's say we are using the same amount of frames as previosly stated (8 and 20)
You are setting AnimationFramerate to 10. Now you have pretty fast skip button but way too fast lifebar (less than 1 second to do loop) but you want it to be slow. So the only way is to increase amount of frames. You will need to duplicate frames few times.
Example :
scorebarcolour-0, scorebarcolour-1, scorebarcolour-2 and scorebarcolour-3 are using picture number 1. scorebarcolour-4, scorebarcolour-5, scorebarcolour-6, scorebarcolour-7 are using picture number 2 etc.

After that you will have "8 frames" as 40. So now with AnimationFramerate it will take 4 second instead less than 1.
It's not taking that much time as it's looks to duplicate frames. Generally only renaming them is a little annoying but still is possible to do this in few minutes.

(menu-back is not affected by normal duplication of frames. You need to add AnimationFramerate to control it's speed).
[ Zan ]
I don't know if this is just me but after today's update all of the hitcircle combo colours that are a part of a slider have turned black (not that I'm complaining cuz it looks pretty cool but I'm wondering if this is a glitch?)

Example:
Rio-

[ Zan ] wrote:

I don't know if this is just me but after today's update all of the hitcircle combo colours that are a part of a slider have turned black (not that I'm complaining cuz it looks pretty cool but I'm wondering if this is a glitch?)

Example:
Yes It is...
t/192473
[ Zan ]

satriobp wrote:

[ Zan ] wrote:

I don't know if this is just me but after today's update all of the hitcircle combo colours that are a part of a slider have turned black (not that I'm complaining cuz it looks pretty cool but I'm wondering if this is a glitch?)

Example:
Yes It is...
t/192473
Thanks, didn't see that post.
Galagrawr
On one of the skins that I use, the cursortrail lasts too long for my cursor and just gets in the way, and i cant deal with it xD
How do you fix it? Thanks!
Topic Starter
MLGnom
Remove cursor-middle from skin.
Arcanine
how to get rid of fuzziness for hit circle borders

everytime i make a white one it ends up looking pixelly or w/e
Topic Starter
MLGnom

Arcanine wrote:

how to get rid of fuzziness for hit circle borders

everytime i make a white one it ends up looking pixelly or w/e
While using GIMP

For making nicer circles, use feather edges option.

Uruoki

Hatsune Chiyo wrote:

Just remembered the reason why I made my taiko-bar-right wider than the template:
because of my stretching issue :p[/box]

does it means taiko-bar-right isn't widescreen-compatible?
Just to let you know, I messed with that element for a hour. It is a pain in the ass to get perfect. I gave up.
OsuMe65

Hatsune Chiyo wrote:

Just remembered the reason why I made my taiko-bar-right wider than the template:
because of my stretching issue :p
does it means taiko-bar-right isn't widescreen-compatible?
I have doubts that taiko-bar-right stretches from left to right (assuming that taiko-bar-right has a text).
Topic Starter
MLGnom
First peppy finally fixed spinner background

[peppy] Fix spinner background opacity being completely wrong.
But next

[peppy] Restore spinner background dim. Fix using SpinnerBackground = 255,255,255 in skin.ini.
He needed to restore it. Many people are used to that dim and I understand that. But we have alternative way to fix dimming.
Great option for people who can't use editing programs and just want to have more or less dimmed spinner background.

As stated in change log, add SpinnerBackground: 255,255,255 under [colours] section to remove spinner background dim. <3

And by changing RGB code in SpinnerBackground: 255,255,255 you can manipulate colour of that dim. For example :



Hatsune Chiyo

Uruoki wrote:

Just to let you know, I messed with that element for a hour. It is a pain in the ass to get perfect. I gave up.
Actually, there IS a solution, by 'squeezing' your taiko-bar-right, but, yeah, I feel ya

OsuMe65 wrote:

I have doubts that taiko-bar-right stretches from left to right (assuming that taiko-bar-right has a text).
It DOES stretch from the right edge of taiko-bar-left, but probably only for non-standard res (4:3), as I told you earlier (or not?)..
Arcanine
wtf is a hitcircleselect
Topic Starter
MLGnom
Ctrl + F on first post of this thread :

MLGnom wrote:

Hitcircleselect
Hitcircleselect is a sprite for "selected object" in beatmap editor.
It's a blue glow on the picture.
Arcanine

MLGnom wrote:

Ctrl + F on first post of this thread :

MLGnom wrote:

Hitcircleselect
Hitcircleselect is a sprite for "selected object" in beatmap editor.
It's a blue glow on the picture.
o lord im blind. thx :3
Owntrolf
Is it possible to change Osu Mania bar positions example

|_|_|_|_| |_|_|_|_|

So that it has a space in the middle?
Hatsune Chiyo
it's okay to post a solution instead of just asking for support, right? :p
[ for widescreen (16:10/16:9) skinners ]

I'm assuming you've already saw my post about stretching taiko-bar-right issue, so I'm giving y'all a solution :

Make the taiko-bar-right(-glow) HALF of the size template, which is originally 845*200 to 423*200, But, instead of just a canvas resize, do an image resize, or 'squeeze' your image.

NOTE: For Photoshop users don't add any blending options (glows, shadows) AFTER you 'squeeze' the image. Instead, flatten your layers first, then resize.
Same thing goes for any image editor.

But there's a catch:
your taiko-bar-right WILL be blurry (looks like you've just used a JPG on this element/not HD even on standard). A possible workaround would be make this element the only HD element on a standard resolution skin, thus the element dimension would be 845 x 400 (haven't tested yet, If anyone have tested this, let me know :D )

as an example below, I've just ONLY 'squeezed' the text, but method I gave above will work, hopefully.



this solution is dedicated to Uruoki, who has messed with this element for an hour, and finally gave up :p
Don't giving up, Uruoki, you can do this~! :D
Cataku
Is it possible to have the two taiko circles (red and blue) have different images? I tried taikocircleoverlay0 and 1 but it wouldn't work D:

Also, I got a custom taiko pippidon.. which disappears after the idle time. Vanishes and doesn't come back again.. Any idea why that happens?
ninfiia
hello, i was wondering how you would go about making the taiko-slider transparent?
Hatsune Chiyo

Tokiiko wrote:

hello, i was wondering how you would go about making the taiko-slider transparent?
Put a transparent taiko-slider instead of not skinning it (this will make your skin uses default taiko-slider)
Here, use mine, if you're too lazy :p
SPOILER

yes, it's there, right click and save :D

Cataku wrote:

Is it possible to have the two taiko circles (red and blue) have different images? I tried taikocircleoverlay0 and 1 but it wouldn't work D:

Also, I got a custom taiko pippidon.. which disappears after the idle time. Vanishes and doesn't come back again.. Any idea why that happens?
1. No, you can't. taikohitcircleoverlay# is for animated overlay (?) You can only have different images for normal and big notes..

2. Probably you're missing some images that is required:
Quoting from this thread:

The rules of the character (thx to peppy) :

clear animation
animates with sequence: 0 1 2 3 4 5 6 5 6 5 4 3 2 1 0

pippidonclear0
pippidonclear1
pippidonclear2
pippidonclear3
pippidonclear4
pippidonclear5
pippidonclear6

idle

pippidonidle0.png
pippidonidle1.png
etc.

kiai idle

pippidonkiai0.png
pippidonkiai1.png
etc.

fail

pippidonfail0
pippidonfail1
pippidonfail2
pippidonfail3
pippidonfail4
Tangerine
Can someone clarify what determines the length of a cursor trail for me?
Mathsma

Tangerine wrote:

Can someone clarify what determines the length of a cursor trail for me?
If you want a super long cursor trail like the default skin trail then add a cursormiddle.png

Other than that it's just changing the opacity on the cursortrail.png image itself.
Cataku

Hatsune Chiyo wrote:

Cataku wrote:

Is it possible to have the two taiko circles (red and blue) have different images? I tried taikocircleoverlay0 and 1 but it wouldn't work D:

Also, I got a custom taiko pippidon.. which disappears after the idle time. Vanishes and doesn't come back again.. Any idea why that happens?
1. No, you can't. taikohitcircleoverlay# is for animated overlay (?) You can only have different images for normal and big notes..

2. Probably you're missing some images that is required:
Quoting from this thread:

The rules of the character (thx to peppy) :

clear animation
animates with sequence: 0 1 2 3 4 5 6 5 6 5 4 3 2 1 0

pippidonclear0
pippidonclear1
pippidonclear2
pippidonclear3
pippidonclear4
pippidonclear5
pippidonclear6

idle

pippidonidle0.png
pippidonidle1.png
etc.

kiai idle

pippidonkiai0.png
pippidonkiai1.png
etc.

fail

pippidonfail0
pippidonfail1
pippidonfail2
pippidonfail3
pippidonfail4

Didn't have enough pippidonclear images, copy-pasting some in fixed it, thanks a lot! :D
It's a shame about the circles but oh well
Hatsune Chiyo
Yo, not a prob :D
ninfiia

Hatsune Chiyo wrote:

Tokiiko wrote:

hello, i was wondering how you would go about making the taiko-slider transparent?
Put a transparent taiko-slider instead of not skinning it (this will make your skin uses default taiko-slider)
Here, use mine, if you're too lazy :p
SPOILER

yes, it's there, right click and save :D
thanks! also one last question, is it possible to remove the applause sound at the end of each ranking?
Rio-
Just Asking... Is It possible to create a separate hitsounds for Mania?
*My Hitsounds that's useful for STD kinda sounds weird in Mania-mode

Tokiiko wrote:

thanks! also one last question, is it possible to remove the applause sound at the end of each ranking?
replace applause.mp3 or applause.wav with a blank/mute sound file
Elzapatoverde
Hi, I've forced the new behavior in my skin. Anyone knows why my playfield wont show up even when it has a dimension of 1920x1080?
Inori
Can anyone compile a new skin.ini with all the new lines in it?
Preferably the lines that came after menuglow?
quaternary

elzapatoverde wrote:

Hi, I've forced the new behavior in my skin. Anyone knows why my playfield wont show up even when it has a dimension of 1920x1080?
IIRC new skin doesn't use the playfield anymore :(

That new-ish update is really annoying for me - my old-style spinner now looks like turd because the meter is way off. Bummer. I'll fix it eventually.

Also just want to drop this here: the osu!mania combo number coloring (forgot the name x.x) is subtractive coloring, not additive (I wondered why 0,128,255 came out orange). Pick the color you want in photogimp and hit Invert, then use the eyedropper tool to read the result (or subtract the rgb values from 255)
Hatsune Chiyo

tuddster wrote:

IIRC new skin doesn't use the playfield anymore :(

That new-ish update is really annoying for me - my old-style spinner now looks like turd because the meter is way off. Bummer. I'll fix it eventually.
1. Yes, new skin, even the old style, doesn't use playfield anymore EXCEPT:
when a beatmap didn't have any background. ~2007 beatmaps didn't have them, so your skin's playfield will be used (if any)

2. Yes, even I only skin for myself, that thing really bugged me off, i'd ended up using a minimal spinner instead :(
Sfjck
What's the difference between soft and normal hit-sounds? Is there a way to alternate between the two in edit mode?

Sorry if this has been asked before, but I have no idea how to search a thread.
Ayesha Altugle
the difference of it was volume, I think.
different samples

maybe there's more
Nathanael
There are three different sets of hitsounds: Normal, Soft, Drum
You can't alternate any of the sets because it follows the mapper's settings from the timing points.
Why don't you just use a single set by using the same file (or sound effect) on the other sets?
Eden333
hey,
i have a question:



can i skin these buttons on the right side?
when yes: how is the skindata.png called and how big should it be
OsuMe65
no

that's all
Eden333
but why is it changed on the picture, is it a skin or what is it?

i found the picture online and i don't know from who it is
my question is:
how did he/she changed it?
OsuMe65
those icons are present before peppy's update

after that update (I don't know when), those were replaced with flat ones.
Eden333
ohh..
ok thx ;)
Norae
i'm trying to put http://puu.sh/7x0Ch.png INTO http://puu.sh/73LIa/acdcea8e41.zip <- That is thelewas latest skin which is uploaded on his youtube page ANYHOW i cannot seem to put the spinner-circle into to the skin file someone please help! :/
Haskorion

NoRae wrote:

i'm trying to put http://puu.sh/7x0Ch.png INTO http://puu.sh/73LIa/acdcea8e41.zip <- That is thelewas latest skin which is uploaded on his youtube page ANYHOW i cannot seem to put the spinner-circle into to the skin file someone please help! :/
A skin is not a file. The file is a archive and you you need to extract it first. After that put the spinner image into the extracted folder and place that folder into the skin folder in the osu! directory.
Norae
A skin is not a file. The file is a archive and you you need to extract it first. After that put the spinner image into the extracted folder and place that folder into the skin folder in the osu! directory.
Thats wat i meant! haha xD its all extracted and all. I'm currently using the skin right now but i want to modify is a little :)
sheela
What is the name of the file that make snow falling in the main menu?
Rio-

sheela901 wrote:

What is the name of the file that make snow falling in the main menu?
menu-snow I guess...
sheela

satriobp wrote:

sheela901 wrote:

What is the name of the file that make snow falling in the main menu?
menu-snow I guess...
Thank you~
DeViezeMan

Nathanael wrote:

There are three different sets of hitsounds: Normal, Soft, Drum
You can't alternate any of the sets because it follows the mapper's settings from the timing points.
Why don't you just use a single set by using the same file (or sound effect) on the other sets?
I found the normal and soft sound sets quite easily, but i couldn't find the drum hitsound set.
Do you (or anyone else) happen to know the drum set filenames so I can add custom drum hitsounds?

I'm asking because i think the absence of a costumized drumset is responsible for the standard (drum) hitsounds in this map.
Can anyone confirm i'm on the right track?

Thanks in advance.
Haskorion

DeViezeMan wrote:

Nathanael wrote:

There are three different sets of hitsounds: Normal, Soft, Drum
You can't alternate any of the sets because it follows the mapper's settings from the timing points.
Why don't you just use a single set by using the same file (or sound effect) on the other sets?
I found the normal and soft sound sets quite easily, but i couldn't find the drum hitsound set.
Do you (or anyone else) happen to know the drum set filenames so I can add custom drum hitsounds?

I'm asking because i think the absence of a costumized drumset is responsible for the standard (drum) hitsounds in this map.
Can anyone confirm i'm on the right track?

Thanks in advance.
Mostly if a set of hitsounds or a single hitsound isn't included it means that the mappper finds the default sounds fitting for his/her map. Same rule applies to skins.
Here's a list of the drum hitsounds:
  1. drum-hitclap
  2. drum-hitfinish
  3. drum-hitnormal
  4. drum-hitwhistle
  5. drum-sliderslide
  6. drum-slidertick
show more
Please sign in to reply.

New reply