forum

Skinning tutorial (+ skinning support)

posted
Total Posts
4,226
show more
tokaku
So what is spinner-middle2 and spinner-glow?
Nathanael
If you check the new default template,
  1. spinner-middle2 is the circle with a half black color that you can see behind spinner-middle.
  2. spinner-glow will show when you at least completed the spinner, of course behind spinner-bottom.
Kert
Thanks, TouchFluffyTail
Unfortunately nothing works well, except adding outer glow
Garygoh884
It would've been better if there would be another setting to change the color of the spinner glow. It may be useful to match with the skins' theme.
Ayesha Altugle
you can request it if you want actually
tokaku
I tried making a spinner-middle but nothing appeared when I tested it
OsuMe65
Make sure that you're using the new default behavior in order for that element to work
Ayesha Altugle


I would like to know what font is used in the above picture because I will also try to recreate this.

because it is bad to ask by making a new topic
Mathsma

vahn10 wrote:



I would like to know what font is used in the above picture because I will also try to recreate this.

because it is bad to ask by making a new topic
http://www.myfonts.com/fonts/emigre/mat ... t/regular/

I don't know, maybe. http://www.myfonts.com/WhatTheFont/
Ayesha Altugle
wow, you let me search for the free font for that one particular font I'm so impressed! But it is the font that I am looking for a minutes ago
Nathanael
The main post kinda needs an update so I would like to update it with some help so if anyone wanted to put or change something, throw a message here or me via PM and I'll check it. I already asked MLGnom about this and got their permission.
cageslammer
Hey. im making a custom skin and i was wondering. can you alternate between section pass images? kinda like the combo burst images?

took me an hour to find this page -.-
OsuMe65
.png only (except menu-background.jpg)
And section images can't alternate like the comboburst
CarinderYeah
Nope, Section-pass.png is single image. yes, it has to be PNG.

I'm very sorry for this, but can I ask what fonts are being used on these cards?



SPOILER
Content Removed by Author.

If this is very troubling for you guys, can you PM me a method for searching the font's used in images?
Shikeu
Sorry if this question has been answered already, but are the spinner-background and spinner-metre elements off from each other now?
Didn't seem to be off before, or is it just me?
cageslammer
i recently downloaded a skin and changed it to suit my liking. however the hit circles are a little too transparent and blend in with some backgrounds making some songs unplayable with the skin. how would i go about making them a little darker?
Eizan Arizawa

cageslammer wrote:

i recently downloaded a skin and changed it to suit my liking. however the hit circles are a little too transparent and blend in with some backgrounds making some songs unplayable with the skin. how would i go about making them a little darker?
why not try using "Dim background"?
Rio-

Eizan Arizawa wrote:

cageslammer wrote:

i recently downloaded a skin and changed it to suit my liking. however the hit circles are a little too transparent and blend in with some backgrounds making some songs unplayable with the skin. how would i go about making them a little darker?
why not try using "Dim background"?
or using another hitcircle.png < not really a choice, but I always do this

Shikeu wrote:

Sorry if this question has been answered already, but are the spinner-background and spinner-metre elements off from each other now?
Didn't seem to be off before, or is it just me?
It's separated in the first place... or screenshot perhaps?
cageslammer
Tried dimming. kinda helps on bright maps and doesn't help the darker ones, and i can't find any sort of hitcircle.PNG =(
Shikeu

satriobp wrote:

Shikeu wrote:

Sorry if this question has been answered already, but are the spinner-background and spinner-metre elements off from each other now?
Didn't seem to be off before, or is it just me?
It's separated in the first place... or screenshot perhaps?

The spinner-background is higher than the spinner-metre
Topic Starter
MLGnom
It's because original spinner from template have weird size. 1023px x 692px
Just make it 1024x768 and it should be good. ;)
Shikeu

MLGnom wrote:

It's because original spinner from template have weird size. 1023px x 692px
Just make it 1024x768 and it should be good. ;)
They're already 1024x768
They used to work, but after a recent update it seemed to have changed.
blackenanan
If I download old skin template I can use it on osu? :<

I really like how the old skin looks like :'3
Nathanael
Yes, you can use it. ;)
Just place them on your skins folder.
blackenanan

Nathanael wrote:

Yes, you can use it. ;)
Just place them on your skins folder.
Oh ok ^^

I'm not at a computer atm to find out so I ask :3
GoJang
Hello, I just tried to make my own scorebar but there's something wrong with the Scorebar-colour. As you can see it's not placed right can anybody tell what I did wrong ?
TouchFluffyTail

GoJang wrote:

Hello, I just tried to make my own scorebar but there's something wrong with the Scorebar-colour. As you can see it's not placed right can anybody tell what I did wrong ?
You're going to have to move it around on the canvas untill you get them to line up. The background and the fill don't line up the same way which leads to things like this.
Ayesha Altugle
the anchor points of the scorebar-bg to scorebar-colour is

16 px moved down from the top
5 px move to the right from the left, iirc
GoJang
Thanks but it doesn't seem to work for me. Is there anyone I can send the scorebar to and maybe check it out or something ?

EDIT: Thanks alot to vahn10 for helping me out for fixing the scorebar. :P
sennank
excuse me .... i dont understand with http://puu.sh/1RM0C step number 4 .... after i remove i dont understand i must do what D:
Ayesha Altugle

GoJang wrote:

Thanks but it doesn't seem to work for me. Is there anyone I can send the scorebar to and maybe check it out or something ?
I'll try

maybe you are using HD so it won't work
Topic Starter
MLGnom

sennank wrote:

excuse me .... i dont understand with http://puu.sh/1RM0C step number 4 .... after i remove i dont understand i must do what D:
Generally step 4. is optional because sometimes you won't have white corners. ^^;

But if some of them still exist, use free select tool for easier selection. Using ctrl + F repeats last used filter (so just repeat step 3 when selected).

GoJang wrote:

Thanks but it doesn't seem to work for me. Is there anyone I can send the scorebar to and maybe check it out or something ?
Just post it here and someone will take care of it. ;)
Ayesha Altugle
Takink care of that one since that particularly sent the file via pm

Done sending to PM
Dikoy_old
How i can make slider without end circle like this?

Mathsma
I'm just going to guess and say it has to do with hitcircleoverlay animation, i.e hitcircleoverlay-0/hitcircleoverlay-1. I could be wrong though, I haven't owned any skins with that nor have I actually tested it.
Ayesha Altugle
tip: make the default numbers like hitcircle and set the hitcircleovelap (in the skin.ini the same as the width of that paticular element) but you cannot put numbers on it instead
Dikoy_old
domo
Haskorion
This is kinda a shameless selfpromotion but also involves some of the questions here.

t/186787

I made a topic based on some answers I found here and myself about some skin element behaviours during gamelplay and more.
It has notes about HD-elements, beatmap skins, some basic animation notes, a list about skinnable elements and skin.ini lines, a section about the mania key files and more. It is stickied and since it doesn't get any responses I don't know if this is all there is or I left out obvious stuff.

My goal was to list some of the answers to have a quick overview about eventual problems and there solves.
It mostly has standard gameplay covered but other gamemodes are in need of facts.
Some points may overlap with the OP from here but mine aren't really as detailed as here.
I hope by posting here to get my topic a bit more alive since it is kinda related to this topic.

Thanks for reading this and eventually my topic.
Rinku
I have a question about followpoints. My aim is to make them as useful as possible while not guessing which is the best.

I don't understand what each one does in the animation. In most skins I use, the creators have 8-10 files with only 2 of them being visible (sometimes 3). I am assuming (correct me if I am wrong) that each individual file is important and having the few visible files being different numbers changes how they act while playing.

I am wondering what is the earliest frame seen and if all you have to do to extend it is by adding another frame in the next number. I basically want my followpoint to extend as far as possible (not in terms of total length as I don't wan't it to be lagging behind after I click a note, but rather the farthest ahead) to the next note and then decide when I want it to fade by testing. However I would assume it starts on followpoint-0 and am confused as to why most skins start at followpoint-2, unless I am not understanding how followpoints come to be in the first place.
Mathsma

-Rinku- wrote:

I have a question about followpoints. My aim is to make them as useful as possible while not guessing which is the best.

I don't understand what each one does in the animation. In most skins I use, the creators have 8-10 files with only 2 of them being visible (sometimes 3). I am assuming (correct me if I am wrong) that each individual file is important and having the few visible files being different numbers changes how they act while playing.

I am wondering what is the earliest frame seen and if all you have to do to extend it is by adding another frame in the next number. I basically want my followpoint to extend as far as possible (not in terms of total length as I don't wan't it to be lagging behind after I click a note, but rather the farthest ahead) to the next note and then decide when I want it to fade by testing. However I would assume it starts on followpoint-0 and am confused as to why most skins start at followpoint-2, unless I am not understanding how followpoints come to be in the first place.
Some people use blank followpoint-0/1/2 etc.. to make the follow points appear later than they normally would (they appear on the screen, but they are blank images so you can't see them), then they use blank ending follow points to make them disappear earlier. You could try making the first 2 follow points an actual follow point and then the last one a blank follow point for a total of 3 images. This may make it extend as far ahead into the song as possible while making it disappear quickly after you've already hit that note.
Rinku

Mathsma wrote:

-Rinku- wrote:

I have a question about followpoints. My aim is to make them as useful as possible while not guessing which is the best.

I don't understand what each one does in the animation. In most skins I use, the creators have 8-10 files with only 2 of them being visible (sometimes 3). I am assuming (correct me if I am wrong) that each individual file is important and having the few visible files being different numbers changes how they act while playing.

I am wondering what is the earliest frame seen and if all you have to do to extend it is by adding another frame in the next number. I basically want my followpoint to extend as far as possible (not in terms of total length as I don't wan't it to be lagging behind after I click a note, but rather the farthest ahead) to the next note and then decide when I want it to fade by testing. However I would assume it starts on followpoint-0 and am confused as to why most skins start at followpoint-2, unless I am not understanding how followpoints come to be in the first place.
Some people use blank followpoint-0/1/2 etc.. to make the follow points appear later than they normally would (they appear on the screen, but they are blank images so you can't see them), then they use blank ending follow points to make them disappear earlier. You could try making the first 2 follow points an actual follow point and then the last one a blank follow point for a total of 3 images. This may make it extend as far ahead into the song as possible while making it disappear quickly after you've already hit that note.
Cool that answered most of my questions. Although the actual animation is still confusing. I tested a couple of combinations to find that I really like 1 out of 4 frames and 2 out of 8 frames being visible. However is there a difference between the two? Also another thing thing I noticed is the animation seems to start on the 1 frame instead of the zero frame. This was fine when I was using 1/4 but then when I tried 2/8, It only worked when I put them on the 2nd and 3rd frame. If I used the 1st and 2nd frames, it wouldn't be connected and would make two wierdly placed lines. This last part is whats really confusing me. I suppose what I have now is good and works but I kinda just want to know the actual meaning to why it works that way so I can think about all the possibilities.
Zamieci
Just a question, how many frames are supported for pipidons? I dislike the default 5.
Topic Starter
MLGnom

Niervaco wrote:

Just a question, how many frames are supported for pipidons? I dislike the default 5.
Do as much as you like.
Zamieci

MLGnom wrote:

Niervaco wrote:

Just a question, how many frames are supported for pipidons? I dislike the default 5.
Do as much as you like.
I should've worded that differently.

(reword) Is there a way to get frames to get super smooth pipidons like in this taiko vid?

https://www.youtube.com/watch?v=yywWFH47vVw
jTaeja
Does anybody have this Sliderfollowcircle ? Or could make a similar one ?
dws123

Niervaco wrote:

I should've worded that differently.

(reword) Is there a way to get frames to get super smooth pipidons like in this taiko vid?

https://www.youtube.com/watch?v=yywWFH47vVw
You should be able to if you actually made frame by frame of the animation like an actual animation instead of just "moving pictures"
CMIIW
sennank

MLGnom wrote:

Generally step 4. is optional because sometimes you won't have white corners. ^^;

But if some of them still exist, use free select tool for easier selection. Using ctrl + F repeats last used filter (so just repeat step 3 when selected).
Thanks for help me (:
Topic Starter
MLGnom

Niervaco wrote:

I should've worded that differently.

(reword) Is there a way to get frames to get super smooth pipidons like in this taiko vid?

https://www.youtube.com/watch?v=yywWFH47vVw
I'm pretty sure you have enough frames to make it smooth, but probably your problem is that it isn't animated fast enough, right?
I would recommend to use AnimationFramerate option... but sadly it doesn't work on pipidons. And there isn't any other options that could help you with this. :/
OsuMe65
(correct me if I'm wrong) pippidons are BPM dependent
that means... the higher the BPM, the faster the animation would take place (no matter how many frames you have for that pippidon in each state)
ZhuYuan_
Can we skin the loader logo (when we Launch osu! Skin the logo who appears on our deskop)
Eizan Arizawa

MioAkiyama wrote:

Can we skin the loader logo (when we Launch osu! Skin the logo who appears on our deskop)
To bad it's not skinned.
FappyBabes
tyty for ur help!
FappyBabes
How do you change pippi? i dont think it shows.
ncuh
Can't change matchsetup-background/search/lobby. It's all png 1024x768
Nathanael

prky wrote:

How do you change pippi? i dont think it shows.
pippi? where?

ncuh wrote:

Can't change matchsetup-background/search/lobby. It's all png 1024x768
Those are no longer used.
ncuh

Nathanael wrote:

ncuh wrote:

Can't change matchsetup-background/search/lobby. It's all png 1024x768
Those are no longer used.
Oh...sad...So only menu-background?
Ayesha Altugle
yes.
dws123

prky wrote:

How do you change pippi? i dont think it shows.
If you mean as in pippi the osu! mascot then its just used for the default skin taiko pippidon and comboburst if I'm not mistaken
If you mean pippidons, they are not included in the default skin, and there are pippidonclear(s), pippidonfail(s), pippidonidle(s) and pippidonkiai(s)
FappyBabes

Nathanael wrote:

prky wrote:

How do you change pippi? i dont think it shows.
pippi? where?

The girl that pops up. can u change her? if u can how?
FappyBabes

dws123 wrote:

prky wrote:

How do you change pippi? i dont think it shows.
If you mean as in pippi the osu! mascot then its just used for the default skin taiko pippidon and comboburst if I'm not mistaken
If you mean pippidons, they are not included in the default skin, and there are pippidonclear(s), pippidonfail(s), pippidonidle(s) and pippidonkiai(s)
The pippi for combo burst. Can u change her into someone else? if u can how?
Ayesha Altugle
comboburst.png

or if you want multiple comboburst,

use comboburst-(n) for example
comboburst-1 comboburst-2 etc.
Rio-
or comboburst-(number).png if it's more than one (comboburst-0, comboburst-1, etc) into Your skin folder
FappyBabes
ty
xclaudioh
good tutorial
Eismis
Few things I want to ask:
New defaults skin scorebar changes it's color when it's getting lower/higher.
I know how to make it change using scorebar-ki files, but is there a way to do it without -ki files? (If yes, continue reading, please)
Does the scorebar-marker has to do anything with this?
If not, can it be changed in skin.ini?
tobuei
Can anyone tell me if the part circled in blue is skinnable? i couldn't locate it in the default skin files,
as you can see in the red circled part the center circle is out of alignment i just noticed this and now i cannot unsee it



also another question
is there a separate .ini file for taiko or can one be made?
OsuMe65
1. Uses the approach circle and the taiko hit circle (iirc)
2. No. There's no separate .ini file for Taiko.
Pendual
How do i make the animation of the lifebar fast? it runs fast when in preview but ingame its slow. Can anyone help?
it runs way too sluggish ingame :/
spleen107
idk if i can get any help for skinning osu mania here but ill ask.


I'm using this skin: t/164309
I changed the noteboard to be transparent but i cant figure out how to make that black box at the bottom under the keys transparent as well. Is there a .png, or something in the .ini file i can change to make it transparent?
Topic Starter
MLGnom

Lawrencium wrote:

How do i make the animation of the lifebar fast? it runs fast when in preview but ingame its slow. Can anyone help?
Add to skin.ini AnimationFrameRate: X (X is the amount of frames you want to be animated within a second, more of them faster animation).

spleen107 wrote:

idk if i can get any help for skinning osu mania here but ill ask.


I'm using this skin: t/164309
I changed the noteboard to be transparent but i cant figure out how to make that black box at the bottom under the keys transparent as well. Is there a .png, or something in the .ini file i can change to make it transparent?
As far as I know you can't make it transparent right now.
Pendual
Just tried it out. Works great thanks so much! :)
spleen107
:( alright thanks
- [ Kaze ] -

What's that? Is that lightning? I try delete lightning.png but not work :|
Eizan Arizawa

- [ Kaze ] - wrote:


What's that? Is that lightning? I try delete lightning.png but not work :|
that particle300.png
check in your skin folder if you have "particle50, particle100, particle300" delete that and your problem solved :D
or if there nothing in your skin folder just put "hit300k - hit0" on your skin folder
- [ Kaze ] -
Thankyou, that work. But i still have question.


How about that, that appear after hitting circle but not lightning or particle.
Eizan Arizawa

- [ Kaze ] - wrote:

Thankyou, that work. But i still have question.


How about that, that appear after hitting circle but not lightning or particle.
disable this
- [ Kaze ] -

Eizan Arizawa wrote:

- [ Kaze ] - wrote:

Thankyou, that work. But i still have question.


How about that, that appear after hitting circle but not lightning or particle.
disable this
Nope, i want to know how to have this, i want add to my skin.
Eizan Arizawa

- [ Kaze ] - wrote:

Nope, i want to know how to have this, i want add to my skin.
put here on your skin folder, if name changed rename it to "lighting.png"
- [ Kaze ] -
I think it isn't lightning Because, a skin i capture screenshot don't have lightning.png and your skin don't have too
Eizan Arizawa

- [ Kaze ] - wrote:

I think it isn't lightning Because, a skin i capture screenshot don't have lightning.png and your skin don't have too
if that's not lighting maybe your "hit300,hit100,hit50,or hit0"?
- [ Kaze ] -

Eizan Arizawa wrote:

if that's not lighting maybe your "hit300,hit100,hit50,or hit0"?
No, not hitxxx.

I mean green color here. I think it's something in skin.ini. I guess it's HitCircleOverlap and tried but not work.
Eizan Arizawa

- [ Kaze ] - wrote:

Eizan Arizawa wrote:

if that's not lighting maybe your "hit300,hit100,hit50,or hit0"?
No, not hitxxx.

I mean green color here. I think it's something in skin.ini. I guess it's HitCircleOverlap and tried but not work.
you want this on your skin right?
just put this on your skin and enable this
- [ Kaze ] -
Just find out, that's default lighting. Just delete lighting.png i everything work as i want. Thankyou so much!
Granger
Does the game only color tint white parts of the ctb fruits?

I got a image of a ice crystall i liked from google and tried it out, ingame it was color tinted but only very subtle so i thought greyscaling the image would make the tint stronger but it looks just grey now. (ingame ofc)
Eizan Arizawa

Granger wrote:

Does the game only color tint white parts of the ctb fruits?

I got a image of a ice crystall i liked from google and tried it out, ingame it was color tinted but only very subtle so i thought greyscaling the image would make the tint stronger but it looks just grey now. (ingame ofc)
if you want the image not tintned why not use "fruit-(name fruit)-overlay" and make "fruit-(name fruit)" blank?
dws123

Granger wrote:

Does the game only color tint white parts of the ctb fruits?

I got a image of a ice crystall i liked from google and tried it out, ingame it was color tinted but only very subtle so i thought greyscaling the image would make the tint stronger but it looks just grey now. (ingame ofc)
make the fruit-(x).png the parts that you want tinted all white, like this
make the fruit-(x)-overlay.png the outline, like this
ninfiia
Hi! Is there any way to have the background image on each song be in full screen? It only seems to work when it's a video. The taiko slider I'm using is transparent.
aizhid
http://puu.sh/8vnhx.jpg
I seen this in rrtyui's livestream.
I also have his back ground downloaded from his profile page, but how do we actually change the back ground to a different color?

If anyone know please explain in detail since I'm a noob at this stuff, thanks!
Nathanael
Most likely he changed the beatmap backgrounds manually.
Granger

Eizan Arizawa wrote:

Granger wrote:

Does the game only color tint white parts of the ctb fruits?

I got a image of a ice crystall i liked from google and tried it out, ingame it was color tinted but only very subtle so i thought greyscaling the image would make the tint stronger but it looks just grey now. (ingame ofc)
if you want the image not tintned why not use "fruit-(name fruit)-overlay" and make "fruit-(name fruit)" blank?
I want the image tinted, but not as much as it is now, i fiddled around with the brightness settings but it either tints the image fully or it doesnt tint at all, i thought it was very subtly tinted at first but i figured that that was just the images own color already... :< (striked part was appartently a bug? Cant recreate it anymore...)


I want to achieve an effect similar to the purple crystall in the picture but i want the tint to be weaker, so all crystalls look more blue while it glows in the tints color. If thats understandable.

While this works nicely with purple tints currently the other colors totally override the base color, a red tint makes the crystall... just red. Which bugs me since the effect from the purple tint looks awesome.

This is the base i have currently:


Also sorry for the late answer, i fell asleep shortly after i wrote that...
aizhid

Nathanael wrote:

Most likely he changed the beatmap backgrounds manually.
I don't think he did that, he just went from one song to the next with the same BG. He also DT that 2000 combo song and placed rank 1 on his livestream with this BG
dws123

Granger wrote:

I want the image tinted, but not as much as it is now, i fiddled around with the brightness settings but it either tints the image fully or it doesnt tint at all, i thought it was very subtly tinted at first but i figured that that was just the images own color already... :< (striked part was appartently a bug? Cant recreate it anymore...)


I want to achieve an effect similar to the purple crystall in the picture but i want the tint to be weaker, so all crystalls look more blue while it glows in the tints color. If thats understandable.

While this works nicely with purple tints currently the other colors totally override the base color, a red tint makes the crystall... just red. Which bugs me since the effect from the purple tint looks awesome.

This is the base i have currently:


Also sorry for the late answer, i fell asleep shortly after i wrote that...
try making the part that you want to be tinted lighter even lighter, so it would be a little bit more translucent
CMIIW, I just guessed that since the edges of the crystals are lighter and in the screenshot the edges have a slightly lighter colour
Coffee Hero

aizhid wrote:

Nathanael wrote:

Most likely he changed the beatmap backgrounds manually.
I don't think he did that, he just went from one song to the next with the same BG. He also DT that 2000 combo song and placed rank 1 on his livestream with this BG
https://github.com/condone/OsuBGReplacer
Arcanine
font the osu cookie uses?
& what's the file name that osu uses for regular hit sounds
Rio-

Arcanine wrote:

font the osu cookie uses?
& what's the file name that osu uses for regular hit sounds
You mean the System Font? It is Aller Font
also,

normal-hitclap.wav
normal-hitfinish.wav
normal-hitnormal.wav
normal-hitwhistle.wav
normal-sliderslide.wav
normal-slidertick.wav
normal-sliderwhistle.wav

you mean that?
Ayesha Altugle

Arcanine wrote:

font the osu cookie uses?
Verdana?
OsuMe65
Verdana
Old cookie uses Tahoma
xiennamerl09
What application do you use in making cursors and hit circles??? I'm using GIMP and also I have a problem with RGB color changing, help please :(
Topic Starter
MLGnom
Well, I did all my skins in GIMP so...
With what exactly you have problem?
xiennamerl09
I'm currently stuck with making cursors , I don't know how to start making one hehehe.....and also I'm still learning usinr GIMP so A little help here or any tutorial and instructions in making one :P
show more
Please sign in to reply.

New reply