forum

Skinning tutorial (+ skinning support)

posted
Total Posts
4,226
show more
Rei Hakurei

OsuMe65 wrote:

ArcadeSona wrote:

One more. Is there a possible way to change the font for a skin?
osu! uses the font "Verdana" which is one of Windows' System Fonts (if i'm correct)

It is non-skinnable and definitely no one can change it.
peppy said Tahoma *iirc*
TheAussie
loool
OsuMe65

Rei Hakurei wrote:

peppy said Tahoma *iirc*
ah yes...
i forgot about that already
primrose
Can someone make a list and what it does to new skinnable elements?
Rei Hakurei

Awoken- wrote:

Can someone make a list and what it does to new skinnable elements?
download the template? and check what people keep talking on this thread?
TheAussie

Rei Hakurei wrote:

Awoken- wrote:

Can someone make a list and what it does to new skinnable elements?
download the template? and check what people keep talking on this thread?

there isnt a template yet for new skin.
jemhuntr
someone on #osu changed the ui font before. (well I have no idea if that's still possible on the new build but meh)
i forgot who he was, though.

I really hope peppy is already working on improving the taiko and mania interfaces though... oh well *back to enjoying my time drawing vividred operation*
Immaterial_old
Hey!!

Update the template plz

thx
Yuki-kun

Immaterial wrote:

Hey!!

Update the template plz

thx
You should pm peppy instead of posting here :P
Immaterial_old
seriously? I thought it was difficult to contact. I'll do it anyway. thx
Bittersweet
You should wait and keep on eye on the foruns, he said he will release it, so he will. No need to pm him for that :P
Immaterial_old
-_- I have not all the time in the world, I will have to check the total program
jarrisonfor
take long to publish the new skin? say how long it will take to publish about

I have a question, the new skin accepts funds in 1920x1080 resolution and resized according to the user's screen?

sorry for my bad English I'm Spanish and I'm using google translator to write
Topic Starter
MLGnom

jarrisonfor wrote:

take long to publish the new skin? say how long it will take to publish about

I have a question, the new skin accepts funds in 1920x1080 resolution and resized according to the user's screen?

sorry for my bad English I'm Spanish and I'm using google translator to write
Well, that's depends on person who is making skin. (his/her photoediting skills, ideas, free time, what is actually skinned etc.). If person really want to release skin it can take few days - up to week.

Yes it is, as long as it's created for HD resolution (resolution with height larger than 1000px or forced in osu! config file). Every skin file that is supposed to be HD should have "@2x" in the end. For example :
pause-overlay@2x.png
jarrisonfor

MLGnom wrote:

jarrisonfor wrote:

take long to publish the new skin? say how long it will take to publish about

I have a question, the new skin accepts funds in 1920x1080 resolution and resized according to the user's screen?

sorry for my bad English I'm Spanish and I'm using google translator to write
Well, that's depends on person who is making skin. (his/her photoediting skills, ideas, free time, what is actually skinned etc.). If person really want to release skin it can take few days - up to week.

Yes it is, as long as it's created for HD resolution (resolution with height larger than 1000px or forced in osu! config file). Every skin file that is supposed to be HD should have "@2x" in the end. For example :
pause-overlay@2x.png

thanks for the reply, but sorry I have a problem with that you said about @ x2

is that it does not work I put an image and adapt to 1920x1080 resolution I put the name to be next to @ x2 and does not work, put a transparent black screen

supposedly this although I have a lower resolution screen (mine is 1366x768) image would have to adapt to my resolution even though the picture is 1920x1080 right?

What I want is to make a skin that can be used on any screen and images are made full screen
Topic Starter
MLGnom
If you are using 1366x768 you (or anyone else) will need to force this option to work. (resolution height is lower than 1000px)

Find in main osu! folder, file named "osu!.<username>.cfg" and open it with notepad.
Then you need to find this line :
HighResolution = 0

And change 0 to 1.

If you want to make skin for every resolution just make 2 backgrounds : Normal and HD (this is even recommended for everyone if someone is making HD skin)

Also, remember that @x2 MUST be 2x size of normal sprite since it will be way to small.

Example :
"pause-overlay.png" - is normal pause screen. Size : 1366x768px
"pause-overlay@x2.png" - will be replaced if person is using resolution with height above 1000px or forced it (this thing above). Size : 2732x1536px
AussieEvil
I really need the metrics for the ranking screen elements!
Topic Starter
MLGnom
About which elements do you need to know?
AussieEvil
Preferred size of "Perfect," how to align the score graph and position of accuracy/combo numbers
senofdark
is it possible to screenshot in the game and crop out the default skin ? lol
kona x taros

AussieEvil wrote:

Preferred size of "Perfect," how to align the score graph and position of accuracy/combo numbers
For reference...
but it doesn't work in the new skin style




btw, We need to skinning for new skin style?
Topic Starter
MLGnom

AussieEvil wrote:

Preferred size of "Perfect," how to align the score graph and position of accuracy/combo numbers
I will tell you a little more about this tomorrow. :3

senofdark wrote:

is it possible to screenshot in the game and crop out the default skin ? lol
If you really want, sure it's possible. You can get most of the elements that way.

senofdark wrote:

btw, We need to skinning for new skin style?
No, actually you can decide with which style you want to make a skin (but stil,l older skins might need some fixing).



I'm slowly testing things and maybe I will be able to make another update soon.
jemhuntr
I have two questions:
1. what are all the animate-able elements again...??
2. how do I name @2X animated elements? should it be <name>-0@2x.png or <name>@2x-0.png??
Topic Starter
MLGnom

JeMhUnTeR wrote:

I have two questions:
1. what are all the animate-able elements again...??
2. how do I name @2X animated elements? should it be <name>-0@2x.png or <name>@2x-0.png??
You can also create animation of several skin parts, with are :
- followpoint
- fruit-ryuuta
- menu-back
- play-skip
- scorebar-colour
- sliderfollowcircle
- taiko mascot
- taikocircleoverlay
- taikobigcircleoverlay
- hitbursts (300,100,50,miss etc.)
- hitcircleoverlay
- sliderball
And there is few in osu!mania like LightingL, hitbursts etc. but I don't remember them all (and maybe I missed something ^^; ).

2. After counting of animation, before .png extension.

"play-skip-0@2x.png"
"play-skip-1@2x.png"
"play-skip-2@2x.png"
"play-skip-3@2x.png"...
jemhuntr
animating the osu!mania hitbursts isn't good. only 3 or 4 frames will be appear since the next notes will most probably replace it. hmm.... thanks.

edit: use 12 frames
Ayesha Altugle
using kona x taros' template of ranking-perfect.png and ranking-graph.png , I've done It well and It turned nice thou I attempt many times

primrose
Thanks MLGnom for the HighResolution trick, I'm going to try it.
Also is there any new elements? :o
Topic Starter
MLGnom
There is few "new" elements, some has been changed, some have changed position a little. Everyone is still waiting for new template.
OsuMe65

MLGnom wrote:

There is few "new" elements, some has been changed, some have changed position a little. Everyone is still waiting for new template.
some might be/ are removed
Immaterial_old

MLGnom wrote:

If you are using 1366x768 you (or anyone else) will need to force this option to work. (resolution height is lower than 1000px)

Find in main osu! folder, file named "osu!.<username>.cfg" and open it with notepad.
Then you need to find this line :
HighResolution = 0

And change 0 to 1.

If you want to make skin for every resolution just make 2 backgrounds : Normal and HD (this is even recommended for everyone if someone is making HD skin)

Also, remember that @x2 MUST be 2x size of normal sprite since it will be way to small.

Example :
"pause-overlay.png" - is normal pause screen. Size : 1366x768px
"pause-overlay@x2.png" - will be replaced if person is using resolution with height above 1000px or forced it (this thing above). Size : 2732x1536px


It does not work, I was doing the skin in HD (1920 x 1080) and does not work, so I put the @ x2 does not work, or setting the "HighResolution: 1"

Edit: Forget it, I worked-_-
Edit 2 e.e: I found two states of an image, that of mode.

selection-mode.png
selection-mode-over.png

Is the new button where you select the game modes of rest, even not find them.
OsuMe65

Immaterial wrote:

Quote:

MLGnom wrote:

If you are using 1366x768 you (or anyone else) will need to force this option to work. (resolution height is lower than 1000px)

Find in main osu! folder, file named "osu!.<username>.cfg" and open it with notepad.
Then you need to find this line :
HighResolution = 0

And change 0 to 1.

If you want to make skin for every resolution just make 2 backgrounds : Normal and HD (this is even recommended for everyone if someone is making HD skin)

Also, remember that @x2 MUST be 2x size of normal sprite since it will be way to small.

Example :
"pause-overlay.png" - is normal pause screen. Size : 1366x768px
"pause-overlay@x2.png" - will be replaced if person is using resolution with height above 1000px or forced it (this thing above). Size : 2732x1536px



It does not work, I was doing the skin in HD (1920 x 1080) and does not work, so I put the @ x2 does not work, or setting the "HighResolution: 1"

Edit: Forget it, I worked-_-

Edit 2 e.e: I found two states of an image, that of mode.

selection-mode.png
selection-mode-over.png

Is the new button where you select the game modes of rest, even not find them.
since i'm working with my test skin with those new elements (probably, some element guesses from Clementine's archive), yes. it is the button where you can change the game mode



in that screenshot: selection-mode.png [hover image is selection-mode-over.png] (the one in violet)
Immaterial_old
Jajaja es que uso el google traductor y ha traducido mal... lo que quería decir es que no he encontrado mas formas de personalizar ese botón, como los 4 apartados :Taiko, osu,ctb y mania, he buscado pero :/ se me ha dificultado un poco ese Net Framework esta super largo, que gran trabajo fue lo que me impresiono, Peppy se ha esforzado.
Rei Hakurei
for reminder,
selection-XXX-over is OVERLAY whenever being hovered by mouse, so it doesn't replace the selection-XXX itself, (read: it'll load both of them when hovering)
OsuMe65

Immaterial wrote:

Jajaja es que uso el google traductor y ha traducido mal... lo que quería decir es que no he encontrado mas formas de personalizar ese botón, como los 4 apartados :Taiko, osu,ctb y mania, he buscado pero :/ se me ha dificultado un poco ese Net Framework esta super largo, que gran trabajo fue lo que me impresiono, Peppy se ha esforzado.(i won't give any translations cause the translator has many epic grammars)
you mean, the game mode icons itself (in the Mode button)?

these elements might work:
For Standard
mode-osu-med.png
mode-osu-small.png
For Taiko
mode-taiko-med.png
mode-taiko-small.png
For CTB
mode-fruits-med.png
mode-fruits-small.png
For Mania
mode-mania-med.png
mode-mania-small.png
Immaterial_old
But, and the background black?
Heibel

Immaterial wrote:

But, and the background black?
Add a plain black .png image and name it "playfield"
Kert
Is there any specific string for skin.ini that enables animated followpoints? (I mean new arrow ones)
They appear differently for default new osu! skin and empty custom skin. Even if I force new skin elements in the menu for empty one D:
Heibel
Not yet i think. We just gotta wait for peppy to finish the skin
chelly
I noticed my skins have the count1, count2, and count3 sounds but I can't seem to find the file that says "Go!" after the countdown. Not sure if I'm very careless but could someone provide the right name for the file?
Yuki-kun

PikaPika677 wrote:

I noticed my skins have the count1, count2, and count3 sounds but I can't seem to find the file that says "Go!" after the countdown. Not sure if I'm very careless but could someone provide the right name for the file?
gos.wav

Don't ask me why it has "s" xD
show more
Please sign in to reply.

New reply