Guest
home
beatmaps
rankings
community
store
help
forum
  1. Forums
  2. osu!
  3. Skinning

Skinning tutorial (+ skinning support)

posted
Total Posts
4,226
show more
MLGnom
1,365 posts
Joined October 2008
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
120 posts
Joined July 2010
AussieEvil
I really need the metrics for the ranking screen elements!
MLGnom
1,365 posts
Joined October 2008
Topic Starter
MLGnom
About which elements do you need to know?
AussieEvil
120 posts
Joined July 2010
AussieEvil
Preferred size of "Perfect," how to align the score graph and position of accuracy/combo numbers
senofdark
97 posts
Joined April 2012
senofdark
is it possible to screenshot in the game and crop out the default skin ? lol
kona x taros
48 posts
Joined March 2011
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

Screenshot
elements




btw, We need to skinning for new skin style?
MLGnom
1,365 posts
Joined October 2008
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
933 posts
Joined February 2012
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??
MLGnom
1,365 posts
Joined October 2008
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
933 posts
Joined February 2012
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
Last edited by jemhuntr , edited 1 time in total.
Ayesha Altugle
3,052 posts
Joined October 2011
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

Screenshots
primrose
primrose
Thanks MLGnom for the HighResolution trick, I'm going to try it.
Also is there any new elements? :o
MLGnom
1,365 posts
Joined October 2008
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
1,519 posts
Joined May 2011
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
13 posts
Joined November 2012
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
1,519 posts
Joined May 2011
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
13 posts
Joined November 2012
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
1,983 posts
Joined February 2011
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
1,519 posts
Joined May 2011
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
13 posts
Joined November 2012
Immaterial_old
But, and the background black?
Heibel
812 posts
Joined July 2011
Heibel

Immaterial wrote:

But, and the background black?
Add a plain black .png image and name it "playfield"
Kert
2,079 posts
Joined June 2009
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
812 posts
Joined July 2011
Heibel
Not yet i think. We just gotta wait for peppy to finish the skin
chelly
136 posts
Joined February 2012
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
568 posts
Joined December 2010
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
Heibel
812 posts
Joined July 2011
Heibel

Yuki-kun wrote:

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
Because the .png file is named "go.png"
Yukki
Yukki
can someone explain a little bit about
some new skin element like this one
SPOILER

+ cursormiddle.png and new cursortrail.png
i still not really understand how they work
OsuMe65
1,519 posts
Joined May 2011
OsuMe65

[ Y P ] wrote:

can someone explain a little bit about
some new skin element like this one
SPOILER

+ cursormiddle.png and new cursortrail.png
i still not really understand how they work
Cursors work this way: (i used Photoshop's Layers panel and sequence the elements from the top to bottom)


While the new spinner goes like this (in default):
Yukki
Yukki

OsuMe65 wrote:

Cursors work this way: (i used Photoshop's Layers panel and sequence the elements from the top to bottom)


While the new spinner goes like this (in default):
ic...
but did the cursortrail's size limited only up to 10*10 ?
cz as far as what I can see, most of new skin have cursotrail's size around 1*1 or 8*8
Yuki-kun
568 posts
Joined December 2010
Yuki-kun
Actually it doesn't have any limit for the size of any image in this game. That limit is only used to make sure it shouldn't break the game interface.
In my case, i still use a cursortrail 60x60.

Edit: LoL, your 499th post and my 466th post xD
Last edited by Yuki-kun , edited 1 time in total.
MLGnom
1,365 posts
Joined October 2008
Topic Starter
MLGnom
No, it isn't limited. If you want 80x80px do it, if you want more...do it. ^^;

But remember "cursor trail" have different behaviour if you add "cursor middle". If you are making large cursor trail together with cursor middle it requires more powerful PC to looks good (because it can heavily reduce fps).
Yuki-kun
568 posts
Joined December 2010
Yuki-kun
A small question: More image = more load = more reduce FPS?
Does this mean we shouldn't use more animated part in game?
OsuMe65
1,519 posts
Joined May 2011
OsuMe65

Yuki-kun wrote:

A small question: More image = more load = more reduce FPS?
Does this mean we shouldn't use more animated part in game?
imo (in my opinion), you can use animated parts depending on your preference
and it does not necessarily mean that a great FPS drop might occur

this happens (the FPS drop/Lag) for some players who are running low end PCs
filesize does matter too (in some occasions)
chelly
136 posts
Joined February 2012
chelly

Yuki-kun wrote:

gos.wav

Don't ask me why it has "s" xD
Ah, thanks a lot. It wasn't in the template skin so I got confused.

[ Y P ] wrote:

can someone explain a little bit about
some new skin element like this one
SPOILER

+ cursormiddle.png and new cursortrail.png
i still not really understand how they work
Cursor.png goes under cursormiddle and is rotatable. Cursormiddle will cause cursortrail to have an unlimited drawing rate, and is the topmost part of the entire cursor. This item does not rotate. Cursortrail is the bottom-most item and its drawing rate becomes unlimited if cursormiddle is present

Spinnertop and spinner bottom are the parts that "spin around" when you're doing a spinner. Spinnermiddle is the main part of the spinner where the spinnertop/bottom fits inside. Spinnerglow is the glow around the whole spinner. Spinnerapproachcircle is the element that changes in color as the spinner comes to an end. I actually play with the traditional "classic" style spinner so pardon me if the information I give is inaccurate, but I did a little testing prior to this post just to make sure :)
MLGnom
1,365 posts
Joined October 2008
Topic Starter
MLGnom

Yuki-kun wrote:

A small question: More image = more load = more reduce FPS?
Does this mean we shouldn't use more animated part in game?
The only noticeable fps drop is when you are using really large pictures or if you are doing any long and fast animations (50+ frames on hitbursts for example), but too be honest you must have really old PC (or something messed up on newer) to have fps drops caused by skins .

I'm actually using netbook Acer - Aspire One with AMD C-50 Dual core 1GHz CPU, 4 GB ram and Radeon HD 6250. I'm running osu! at 220 fps easily and when using HD skin (with forced HD in config file) and long cursor trail behaviour (29x29px size) still have fps at ~120-140.
jemhuntr
933 posts
Joined February 2012
jemhuntr

Kert wrote:

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:
use this atm. it's my 60-frame followpoint. it's some kind of an imitation of the default, plus a smoother motion and cleaner exit. use at 60 FPS setting on your skin.ini.

also, I hate the cursortrail right now. It draws the trail depending on the size of your cursortrail sprite (if you have a cursormiddle). I can't use my 150x150px smooth cursortrail anymore >.<
anyone know how to change this back to how it works before?
Ayesha Altugle
3,052 posts
Joined October 2011
Ayesha Altugle
found something new in skin again :idea:

it's name is selection-mod-random.png

dimensions: same size as other mod Icons

only appears in osu! mania

Screenshots
jemhuntr
933 posts
Joined February 2012
jemhuntr
OMG new osu!mania mod <3
Ayesha Altugle
3,052 posts
Joined October 2011
Ayesha Altugle

JeMhUnTeR wrote:

OMG new osu!mania mod <3

poot you!!!


did you try it?
jemhuntr
933 posts
Joined February 2012
jemhuntr
yeah, and I'm updating my skin right now.
show more
Please sign in to reply.

New reply

0
585 / 4,226