forum

Skinning tutorial (+ skinning support)

posted
Total Posts
4,226
show more
esibun
I've noticed that Osu!'s sprite rendering engine tends to have weird artifacts with certain images. Most notably, I've had to work around white borders when I use the stroke layer effect in Photoshop by using outer glow with a small size instead.

However, I've run into a new artifact that I can't seem to work around. On the scorebar (scorebar-colour@2x.png), I'm using gradient overlay and inner glow on a simple rectangle. However, when I load the sprite in-game, I'm getting a gray line on the left side of the bar that doesn't exist in the source file:



Edit: For some reason the image isn't showing up so here's a direct link: http://puu.sh/hFbwC/af4cd72fda.jpg

Does anyone have any idea what causes this and how I can work around the problem?

Edit2: Found a solution, for some reason Osu! doesn't like hard edges, so adding a small low-opacity border worked.
Jaye
Is it somehow possible to change the colours of the dons and kats in taiko? For example, rather than having red and blue you could make it black and white? If there is no such way to skin this, is there any way to change it at all?
Ayesha Altugle

dajayeway wrote:

Is it somehow possible to change the colours of the dons and kats in taiko? For example, rather than having red and blue you could make it black and white? If there is no such way to skin this, is there any way to change it at all?
No, but you can request it on Feature Requests Subforum.


And restored icon.
Nyanaro
I need help, i am trying to have all of my hitsounds to be the same. That means i have changed every hitsound i found into the one i want.

But however, all of the sounds are not always the same. For example in Aoi Eir: Ignite (By Guy) There are 2 sounds which are very annoying. No matter how hard i search for hitsounds i have not yet replaced. I cannot find them. I ALSO WENT INTO the songs files and found the 2 sounds which bothered me. I deleted them and every other map's hitsounds. BUT STILL the 2 sounds are there. (I HAVE IGNORED BEATMAP HITSOUNDS IN OPTIONS)

You can download my skin here: https://www.dropbox.com/s/9i4e7s2l2ymxo ... n.rar?dl=0
a1l2d3r4e5d6
Can the smoke be customizable? If so, then what's the file name for it?
Haskorion

a1l2d3r4e5d6 wrote:

Can the smoke be customizable? If so, then what's the file name for it?
cursor-smoke.png
a1l2d3r4e5d6

Haskorion wrote:

a1l2d3r4e5d6 wrote:

Can the smoke be customizable? If so, then what's the file name for it?
cursor-smoke.png
Ahh, that's what it was. Thanks.
Relax Main
Can someone help me with changing the size of a cursor+cursor trail to make it larger, then moving it into a different skin? pls friends
KawaiiGoat_old

Nyanaro124 wrote:

I need help, i am trying to have all of my hitsounds to be the same. That means i have changed every hitsound i found into the one i want.

But however, all of the sounds are not always the same. For example in Aoi Eir: Ignite (By Guy) There are 2 sounds which are very annoying. No matter how hard i search for hitsounds i have not yet replaced. I cannot find them. I ALSO WENT INTO the songs files and found the 2 sounds which bothered me. I deleted them and every other map's hitsounds. BUT STILL the 2 sounds are there. (I HAVE IGNORED BEATMAP HITSOUNDS IN OPTIONS)

You can download my skin here: https://www.dropbox.com/s/9i4e7s2l2ymxo ... n.rar?dl=0

You gotta go into the options, go to volume. Then check "ignore beatmap hitsounds"
KawaiiGoat_old
Anyone know how to add a spinner background, but have it not spin? I want to put artwork there but i cant because it just spins (lol)
I Have Autism
Anyone know how to show the song background on the menu button ?
Like in asthetic skin
mezzodrinker
Does anyone know how the placement of scorebar-ki.png, scorebar-kidanger.png and scorebar-kidanger2.png works? :?

I've been working on a skin and everything I tried as one of these images was cut off at the top (because the image was placed too close to the top of the screen). Each of these images has a size of 150x150 and there's a transparent space between the actual content and the border of the image. The scorebar-bg.png is 626x35 and the scorebar-color.png is 645x10 big.
deadbeat

tranthaison2000 wrote:

Anyone know how to show the song background on the menu button ?
Like in asthetic skin
you need to be a supporter to use menu-background.jpg :3
I Have Autism

deadbeat wrote:

tranthaison2000 wrote:

Anyone know how to show the song background on the menu button ?
Like in asthetic skin
you need to be a supporter to use menu-background.jpg :3
I know i have to be supporter to use menu backgound
But what i mean is the song thumbnail on menu "button"
OsuMe65
There's an option called "Thumbnails". Search for that in Options and tick it on.
-makoto yuki
does anyone know what kind the name of that white thingy on slider ball element
you know i meant that light effect on slider ball like this
OsuMe65

RBRat3 wrote:

Its a part that will soon be tintable but as of now it just makes up the black parts of the sliderball.
For now spec and nd are not skinnable just the sliderb and only work on the default ball.

Maybe this will help explain things better :D

Give up your dreams, mate
abraker
Is there a way to disable CtB hit lights?
Haskorion

abraker wrote:

Is there a way to disable CtB hit lights?
Make the fruit-x.png transparent, change fruit-x-overlay.png to your fruit, and make your combo colours black.
KingGelatin
I've only recently started making my own skin and had a few questions that I hope can be answered here.
A few to start with are:
  1. Why are the pixel ratios even? Why are some odd?
    1. For example, on the default cursor the cursormiddle.png is odd but the cursor.png is even. This causes the crosshair to seem off center (or maybe it's just me).
  2. Does aspect ratio play into skinning at all?
  3. What's up with the double resolution versions of each element? Why are they there? How would you make that if you've only made the smaller ratio so far?
Any help is greatly appreciated!
nikealvaro
I need help! When I tried to add an sound when "SectionPass/Fail.WAV" it doesn't work for me, can you help me with this guys?, Thanks and sorry for my bad english.
-[Jess]-

nikealvaro wrote:

I need help! When I tried to add an sound when "SectionPass/Fail.WAV" it doesn't work for me, can you help me with this guys?, Thanks and sorry for my bad english.

wrong name

use this
"sectionfail"
"sectionpass"
Ozaro
Hi everyone!
There is something that I don't understand about the "menu-button-background.png" file

Indeed, I use the SAME file for two different skins, however in one case the map's picture appear whereas in the second case, it doesn't.

In practice :
http://www.noelshack.com/2015-21-1432475073-help-skin.jpg
http://www.noelshack.com/2015-21-1432475074-help-skin2.jpg

So what I have to do if I want to see map's pictures ? Something to change in "skin.ini" ?

Thanks ! :)
OsuMe65

Ozaro wrote:

Something to change in "skin.ini" ?
go to Settings -> type Thumbnails -> tick on

skin.ini: Version 2.2 (or higher)
Ozaro

OsuMe65 wrote:

Ozaro wrote:

Something to change in "skin.ini" ?
go to Settings -> type Thumbnails -> tick on

skin.ini: Version 2.2 (or higher)
Thanks ! I didn't think to check settings :x
Waz
Something I really want to know is how to disable star2 completely, it just bothers me.
-[Jess]-

slashnhak wrote:

Something I really want to know is how to disable star2 completely, it just bothers me.
Make a 1x1 image of star.2
Tokitsu_old
still waiting for catch the beat elements :oops:
Ayesha Altugle
Icon fixed.
OsuMe65

Tokitsu wrote:

still waiting for catch the beat elements :oops:
Heh. :V Do that all by yourself. :V
An Hero
I don't know if it was answered in the thread already, but I didn't feel like looking through 214 pages so what exactly qualifies as mixed elements? For example if I were to take the same image from say google images that they used for star.png and render it myself would that still be a stolen element or would it then be my own?
Waz

-[Jess]- wrote:

slashnhak wrote:

Something I really want to know is how to disable star2 completely, it just bothers me.
Make a 1x1 image of star.2
Thanks!
Hinei
How to change "welcome to osu" and "see ya" sounds?
deadbeat
welcome/seeya.mp3
it might be supporter only though
IppE

entropykid wrote:

I don't know if it was answered in the thread already, but I didn't feel like looking through 214 pages so what exactly qualifies as mixed elements? For example if I were to take the same image from say google images that they used for star.png and render it myself would that still be a stolen element or would it then be my own?
Pretty sure mixed elements refers to taking elements from other skins you didn't make and using them in your skin.
An Hero

IppE wrote:

entropykid wrote:

I don't know if it was answered in the thread already, but I didn't feel like looking through 214 pages so what exactly qualifies as mixed elements? For example if I were to take the same image from say google images that they used for star.png and render it myself would that still be a stolen element or would it then be my own?
Pretty sure mixed elements refers to taking elements from other skins you didn't make and using them in your skin.
Thanks a bunch.
abraker
How do you make the approach circle a different color and the slider black such that the combo colour is black? I want the hit lights to be black in CtB, but not affect the approach circle in standard.
OsuMe65

abraker wrote:

How do you make the approach circle a different color and the slider black such that the combo colour is black? I want the hit lights to be black in CtB, but not affect the approach circle in standard.
You can't.
Haskorion
Just wanted to share some infos about the following elements since I still see them often in newer skins.

This was changed long time ago but not really spoken of but there is no need to replace scorebar-ki.png, scorebar-kidanger.png, scorebar-kidanger2.png, sliderpoint10.png and sliderpoint30.png with transparent 1x1px images anymore.
Basically these images were made transparent from the game client side without the need to have blank files.

Additionally the sliderpoint images only work in skins using "Version: 1".

When using only the scorebar-bg.png and scorebar-colour.png images they still retain the anchor position of ki element usage (that position is at [5,16]).

Lastly you can use one single combo colour without the need to define a second combo colour. I see this more often lately since minimal monochrome skins are released and just wanted to repeat it.
Epzillon
Is there any way to edit the osu! circle in the main menu? Also, anyone who can help me with fixing a background to ranking panel? (Since ranking-panel.png leaves a blank space in the upper part of the screen.)

Sorry for not reading the other 214 pages, too lazy :p
Kuuharu
Thanks for youre Tutorial, sir ;)
OsuMe65

EpiX0R wrote:

  1. Is there any way to edit the osu! circle in the main menu?
  2. Also, anyone who can help me with fixing a background to ranking panel? (Since ranking-panel.png leaves a blank space in the upper part of the screen.)
  1. No
  2. You can't
Epzillon

OsuMe65 wrote:

EpiX0R wrote:

  1. Is there any way to edit the osu! circle in the main menu?
  2. Also, anyone who can help me with fixing a background to ranking panel? (Since ranking-panel.png leaves a blank space in the upper part of the screen.)
  1. No
  2. You can't

Oh, well thanks anyways.
SgtSitdown
Is there a way i can make the "play-skip" button play at a certain frame-rate, it's going way to quick, so i want to slow it down.
-[Jess]-

SgtSitdown wrote:

Is there a way i can make the "play-skip" button play at a certain frame-rate, it's going way to quick, so i want to slow it down.
Use 2-3 frame for a img.

It should be slower
p a n t s u
so anyone know how to get screenshots of osu? I need them for the thread im making but when i press F12 like it says to do. i dont get any screen shots? Im not sure if im just doing something wrong.
However if it helps... I do own a apple computer and so the osu verison I have is the one for mac
Zefo
Thanks a bunch! :)
-[Jess]-

pantsusenpai wrote:

so anyone know how to get screenshots of osu? I need them for the thread im making but when i press F12 like it says to do. i dont get any screen shots? Im not sure if im just doing something wrong.
However if it helps... I do own a apple computer and so the osu verison I have is the one for mac
F12+shift

Fixed icon
p a n t s u

-[Jess]- wrote:

pantsusenpai wrote:

so anyone know how to get screenshots of osu? I need them for the thread im making but when i press F12 like it says to do. i dont get any screen shots? Im not sure if im just doing something wrong.
However if it helps... I do own a apple computer and so the osu verison I have is the one for mac
F12+shift

Fixed icon
oh thank you so much !
EshkushMeh xD
Thanks for this tutorial! :D
Batujitsu
Please edit
Hitcricleoveraly - use it to make your hitcircle readable! It isn't affected by combo colours so you can make them in whatever way/colour you want.
Hitcricleoveraly is misspelled
and--- Thanks for the tutorial :)
Zerokae
Does anyone know how to get rid of the stuff, looks kinda like stars, that comes off of notes after you hit them in certain skins like C's?
It's really distracting and I'd like to get rid of it.
Rio-

Zerokae wrote:

Does anyone know how to get rid of the stuff, looks kinda like stars, that comes off of notes after you hit them in certain skins like C's?
It's really distracting and I'd like to get rid of it.
replace lightning.png inside your skin folder with a blank png picture (1x1) OR uncheck hit lightning option in the option menu
makemecool123
??? Why my hit lighitng riple wont expand?? can somean explane me is this from skin.ini
or just the animation :?:
Chaoslitz

makemecool123 wrote:

??? Why my hit lighitng riple wont expand?? can somean explane me is this from skin.ini
or just the animation :?:


did you enable this?
greeeen89
Hi, does anyone know how to enable the little preview picture that shows up next to the song name in the song library? Thanks!
dws123

greeeen89 wrote:

Hi, does anyone know how to enable the little preview picture that shows up next to the song name in the song library? Thanks!
check the "Show Thumbnail" in options. Also make sure that your skin is Version: 2.2 and above if checking it doesn't work
Rinny Rin-chan
This helped a lot !!! THANKS !!!
-Spooky-
Hi, does anybody know how to make the approach circle a exact color you want them? example: blue, gray, Thanks ^-^
greeeen89

dws123 wrote:

greeeen89 wrote:

Hi, does anyone know how to enable the little preview picture that shows up next to the song name in the song library? Thanks!
check the "Show Thumbnail" in options. Also make sure that your skin is Version: 2.2 and above if checking it doesn't work
hmm show thumbnail is on, how do i check what version the skin is? also would there be a way to change the version? thanks!
Rinny Rin-chan
Can someone help me how to make a DIY hitcircle ?
PLS. !!!! :( :cry:
-[Jess]-

Rinny Rin-chan wrote:

Can someone help me how to make a DIY hitcircle ?
PLS. !!!! :( :cry:
do it yourself

you need photoshop(GIMP and paint.net also can)
-SayaKai

sSRayGunSs wrote:

Hi, does anybody know how to make the approach circle a exact color you want them? example: blue, gray, Thanks ^-^
Do it on yourself

-[Jess]- wrote:

you need photoshop(GIMP and paint.net also can)
-Spooky-

-SayaKai wrote:

sSRayGunSs wrote:

Hi, does anybody know how to make the approach circle a exact color you want them? example: blue, gray, Thanks ^-^
Do it on yourself

-[Jess]- wrote:

you need photoshop(GIMP and paint.net also can)
Okay Thanks
greeeen89

greeeen89 wrote:

hmm show thumbnail is on, how do i check what version the skin is? also would there be a way to change the version? thanks!
Never mind, I figured it out. If anyone has this problem, try adding "Version: latest" to your skin.ini
Safaklc_old
Thanks bro , that is helpfull :)
Elzapatoverde
Hi, I haven't done a skin in a while, so i don't know if theres new elements and you know i love to do complete skins. Someone know the new element or have a complete skin template? >__< thanks in advance.
Haskorion
New are:
  1. arrow-pause (not colored anymore)
  2. arrow-warning (^ same as above)
  3. mania-warningarrow
Not much since your last skin.

Here is a spreadsheet I made if you want check everything again: Click me!

Can't wait for your next skin.
Elzapatoverde
Thank you! C:
Barely_Alive
Someone plz help me with this i dont know how to upload my skin ive tried but it doesnt let me put the file in. If you dont understand plz just msg me or something with really helpful help about how to do it. Btw its a really cool sao skin.
-SayaKai

Barely_Alive wrote:

Someone plz help me with this i dont know how to upload my skin ive tried but it doesnt let me put the file in. If you dont understand plz just msg me or something with really helpful help about how to do it. Btw its a really cool sao skin.
use mediafire(?)
makemecool123

Rinny Rin-chan wrote:

Can someone help me how to make a DIY hitcircle ?
PLS. !!!! :( :cry:
anong DIY CIRCLE
CreedyFox
Need some help here. So i Erased the lightning effect in the skin folder and removed it from the game but still i'm getting the blue effect. any ides what i shall do next


]fice

niichanhitB wrote:

Need some help here. So i Erased the lightning effect in the skin folder and removed it from the game but still i'm getting the blue effect. any ides what i shall do next
You may use blank images for particle50, particle100 and particle300.
CreedyFox
nope i haven't tried that one ty
rapture_ruckus2
how do i make the star smaller, and put the picture of the song on the side of the menu-button?
Inori

rapture_ruckus2 wrote:

how do i make the star smaller, and put the picture of the song on the side of the menu-button?
make sure you have "Song Thumbnails" enabled in options and that in your skin.ini you have this:

Version: 2
I recommend setting the version to 2.5 right now.

or

Version: latest
TinBoy752
Help! My spinner in new version keeps rotating even it is not in the editor. This is confusing :-( Is there a way to stop the spinner-bottom to stop rotating and let just rotating the rest? Via skin.ini or image?
notkris
Is there a way to change the anchor position (where I would have 0 life/fail) of scorebar-color?

Here are the scorebar and scorebar-color I am currently using:





Currently when nearing 0 life, the life depletes in the actual bar, then the plus sign box to the left starts getting cut off; at 0 life, the plus sign box disappears. I want 0 life to be the start of the green on scorebar-color.

Thanks in advance!
yk_

waisokris wrote:

Is there a way to change the anchor position (where I would have 0 life/fail) of scorebar-color?

Currently when nearing 0 life, the life depletes in the actual bar, then the plus sign box to the left starts getting cut off; at 0 life, the plus sign box disappears. I want 0 life to be the start of the green on scorebar-color.

Thanks in advance!

No. You can't do that. :( But you can take the plus sign and put it on the scorebar so it doesn't disappear by using a little bit of copy and paste. :D
notkris

miningchr1s wrote:

waisokris wrote:

Is there a way to change the anchor position (where I would have 0 life/fail) of scorebar-color?

Currently when nearing 0 life, the life depletes in the actual bar, then the plus sign box to the left starts getting cut off; at 0 life, the plus sign box disappears. I want 0 life to be the start of the green on scorebar-color.

Thanks in advance!

No. You can't do that. :( But you can take the plus sign and put it on the scorebar so it doesn't disappear by using a little bit of copy and paste. :D
I actually edited the plus sign onto scorebar-color because it was really confusing having all my life disappear while not failing. Having something on the far left side disappear helped with that a little. I'd much rather have 0 life start at the green though.

Oh well thanks anyway s:
Logey
When I use my skin, the combo colours work exactly how they are supposed to. I want them to all just be white. And it works fine for me. But when I send my skin to a friend, they seem to have a few different combo colours (which I'm assuming is the default). Is there anyway I can fix this? Thank you.

EDIT: What I want it to look like (what I see):

What it looks like to my friend:

What I'm talking about is the colours of the approach circles.
Can anyone please help me to fix this?
Thank you. :)

EDIT: Here is my skin.ini if it helps:
SPOILER
[General]
Name: Logey Remake v1
Author: Logey
SliderBallFlip: 0
CursorRotate: 0
CursorExpand: 0
CursorCentre: 1
SliderBallFrames: 1
HitCircleOverlayAboveNumber: 1
AllowSliderBallTint: 0
ComboBurstRandom: 1
SliderStyle: 3
Version: latest
SpinnerFrequencyModulate: 1
SpinnerFadePlayfield: 1

[Colours]
Combo1: 200,200,200
SliderBorder: 255,255,255
SongSelectActiveText: 0,0,0

[Fonts]
HitCirclePrefix: default
HitCircleOverlap: 162
ScorePrefix: score
ScoreOverlap: 3
Haskorion

Logey wrote:

When I use my skin, the combo colours work exactly how they are supposed to. I want them to all just be white. And it works fine for me. But when I send my skin to a friend, they seem to have a few different combo colours (which I'm assuming is the default). Is there anyway I can fix this? Thank you.
Logey

Haskorion wrote:

Logey wrote:

When I use my skin, the combo colours work exactly how they are supposed to. I want them to all just be white. And it works fine for me. But when I send my skin to a friend, they seem to have a few different combo colours (which I'm assuming is the default). Is there anyway I can fix this? Thank you.

Thanks so much! <3
I feel stupid now.
Rinny Rin-chan
"do it yourself" ibig-sabihin sariling design mo.
Elzapatoverde
Hello, so I'm skinning the elements "arrow-pause" and "arrow-warning.png" but when I test it, it keeps appearing the default (and colored) version. What am I missing? >.<
Thanks in advance
Haskorion
It currently is on cuttingedge only. Not sure about beta.
Elzapatoverde
That explains a lot, thanks.
Kaxospere
Does anyone know how to shift the score number down a bit because it is overlapping the "combo" and the "accuracy" in the ranking panel. Thanks!
abraker
What part of the skin is responsible for the song background previews on song select?
Haskorion

abraker wrote:

What part of the skin is responsible for the song background previews on song select?
Skin versions 2.2 and higher enable the thumbnails. The thumbnails themselves come from the server.
In your skin.ini:
[General]
Version: 2.2 (or higher)
lit120
does anyone know the name of the font at the above right? i need it for my beatmap project (making skin)

https://osu.ppy.sh/ss/3378050

thx
I Have Autism
I'm having some problem. At the ranking panel menu, the replay button and the retry button don't use my ranking-retry.png and ranking-replay.png, they use the one in the pause menu.
How can i make it use my ranking pngs ?
OsuMe65

tranthaison2000 wrote:

I'm having some problem. At the ranking panel menu, the replay button and the retry button don't use my ranking-retry.png and ranking-replay.png, they use the one in the pause menu.
How can i make it use my ranking pngs ?
Version: 1
I Have Autism

OsuMe65 wrote:

tranthaison2000 wrote:

I'm having some problem. At the ranking panel menu, the replay button and the retry button don't use my ranking-retry.png and ranking-replay.png, they use the one in the pause menu.
How can i make it use my ranking pngs ?
Version: 1
Thanks for the help, it works !
But changing the version to 1 means i can't use song's thumbnails. So i guess i have to sacrify one of them for the other right?
OsuMe65
Ya, unfortunately.
MeariMary
I'm not sure if this problem has already been posted on here, but I feel like it'd take too much time to search every single page for it. Hope you don't mind me posting again, if that's the case.

My problem is during the opening to a song, specifically one with a count-down. My count1.png, count2.png and count3.png are sort of... stacking on top of each other, rather than the fade out-ish effect it should have. Is there something wrong with the photos I'm using, or is there a coding text I may have accidentally deleted during editing?

Thanks in advance for the help :D

EDIT: I feel I should mention that it didn't do this the first time I tested it. It was only after I started editing other parts of the skin that this began.
NAMEISSOLONGTHA
.
Mykaterasu
I've been at this mania skinning problem for hours and tbh it feels completely unavoidable and I have no solutions.

Basically right now I have three different lines when I want them all to be the same.
I have a fake judgement line (laser).
I have a line that is marked by where the hit lighting starts.
I have the real judgement line.

None of them are co-operating...
The best I can do is get either the fake line or the lighting line onto the judgement line, but not both.

Haskorion

Mykaterasu wrote:

I've been at this mania skinning problem for hours and tbh it feels completely unavoidable and I have no solutions.

Basically right now I have three different lines when I want them all to be the same.
I have a fake judgement line (laser).
I have a line that is marked by where the hit lighting starts.
I have the real judgement line.

None of them are co-operating...
The best I can do is get either the fake line or the lighting line onto the judgement line, but not both.

Make sure that your mania-stage-hint.png has the judgement line RIGHT IN THE MIDDLE of the picture, else it will always be offset from the real judgementline.
About the lighting just set LightingPosition the same value as your HitPosition.
show more
Please sign in to reply.

New reply