forum

Skinning tutorial (+ skinning support)

posted
Total Posts
4,226
show more
Topic Starter
MLGnom
Come on! Peppy added that few minutes ago. Give me some time. XD
Luna
Yeah, just informing you because it could easily be missed ;P
Topic Starter
MLGnom
Yay for 24h supporter! I was able to test backgrounds for osu!direct and main menu. ^^;

So, since last public release we are able to :

1. Make Hitbursts animated! (300,100,50, miss)
You can animate it in similar way like others files, example.
hit300-0.png , hit300-1.png , hit300-2.png etc.

Note 2 things :
- Animation is pretty fast so for slow down you will need duplicate frames.
- skin.ini "AnimationFramerate" doesn't affect hitbursts.

2. Changing background for multiplayer lobby, match-room and osu! direct search :
Names :

lobby-background.png - background for lobby window. Acts in same way like fail/pause backgrounds. Size : 1024x768

matchsetup-background.png - background for multiplayer room. Acts in same way like fail/pause backgrounds. Size : 1024x768

search-background.png - background for osu!direct. Width should be correct with your aspect ratio. Height must be 768px for correct resize.

3. We are already able to set our own menu background!
Name : menu-background.jpg - Size for it should be your aspect-ratio resolution.

Menu-background is only available for osu! supporters.

"Why it must be in jpg?" - Because peppy say so! ^^;

I think that's all for today.
N A L U

MLGnom wrote:

Yay for 24h supporter! I was able to test backgrounds for osu!direct and main menu. ^^;

So, since last public release we are able to :

1. Make Hitbursts animated! (300,100,50, miss)
You can animate it in similar way like others files, example.
hit300-0.png , hit300-1.png , hit300-2.png etc.

Note 2 things :
- Animation is pretty fast so for slow down you will need duplicate frames.
- skin.ini "AnimationFramerate" doesn't affect hitbursts.

2. Changing background for multiplayer lobby, match-room and osu! direct search :
Names :

lobby-background.png - background for lobby window. Acts in same way like fail/pause backgrounds. Size : 1024x768

matchsetup-background.png - background for multiplayer room. Acts in same way like fail/pause backgrounds. Size : 1024x768

search-background.png - background for osu!direct. Width should be correct with your aspect ratio. Height must be 768px for correct resize.

3. We are already able to set our own menu background!
Name : menu-background.jpg - Size for it should be your aspect-ratio resolution.

Menu-background is only available for osu! supporters.

"Why it must be in jpg?" - Because peppy say so! ^^;

I think that's all for today.
+When I set up osu direct bg the search window disappearded lol
anyway, thanks MLGnom
Garygoh884
Here I have so far:


Firstly I take three screenshots before skinning. Then I template the backgrounds with my image editor.

Here is the image template for the osu!direct if the free acces is over:

Topic Starter
MLGnom
Ah I see the problem. Typing field is part of default background, so you will need to add something similar on your background to show where it is. ^^;
Will try to do some kind of template for search-background to make it a little easier.
Same for lobby background, using bright pictures will make it unreadable. Also will try to do something about that.
Hah even "player" numbers in matchsetup-background are part of default background.

Okay, give me some time and I will prepare something.
Topic Starter
MLGnom
Okay, so here is what I have done so far.
Made 3 templates that should correct any problems with missing texts on backgrounds and make things readable.
Easiest way to use them, simply put your picture under template layer. One thing, template of search-background is in 1024x768 resolution so for widescreen use, you only need to change it's width canvas (workspace) to 1229px to make it fit correctly. And download : Template Backgrounds

And of course example how they looks.

Please tell me if these are okay, maybe I missed something? If these are fine I can add them to normal skin template.

Edit: Updated template skin. Added these background templates.
Topic Starter
MLGnom
Yay, triple post!

So today we have a new spinner for CtB. And it show up as... bananas.

Files : fruit-bananas.png and fruit-bananas-overlay.png (Resolution of both files is 128x128, they are not restricted by size).
Also they appear only in 2 colours, orange and yellow.

"Right click and save"
S4suk3
thanks :)
Garygoh884
Now had this in my skin. I guessed the new sprite's filename before viewing the previous post.


If you're not color blind, there are three colors of the banana sprites in the screenshot.
OsuMe65
if you take it generally, there are 2. but actually, there are 3

one has the color Aureolin [#fdee00] - (near to apple green but under a shade of yellow)

two contains an unidentified color which has a hex value of #d3da1c (under the shade of green)

and the third has a vivid orange color with a hex value of #fabd00
Don-Tan
WTF animated hitbursts (°^°)/--> simply awesome
tfkmaster
There could be a complete template with all elements can be changed ?
(sorry if that already exist but i don't see a fully complete template in the thread)
Topic Starter
MLGnom

MLGnom wrote:

The template skin – you can download it via the osu! updater or HERE ( this is updated version that contains missing files)
You can press at "HERE" for download.
But I see it's easy to miss it... later, I will do a minor banner that will be more visible. ^^;
tfkmaster
Oh thanks ^^
(that weird, i download it earlier but with not all customisable elements :o)
AussieEvil
Waiting for the skin elements for mania.
mintong89
The default mania skin : http://puu.sh/1akcD

~~
AussieEvil
The graphic for the osu!mania button is special-mania.

Topic Starter
MLGnom
Geez... now I will need to test every part and add info about them...
Will update template and add info about osu!mania when I will have more time (most likely Wednesday).
mintong89
hmmm...
Topic Starter
MLGnom
Okay, today I'm going to start testing osu!mania skinning (will update skin template too).

Also, options-background has been removed. Instead of it you will see your menu-background in options. :3
KingisNitro

MLGnom wrote:

Also, options-background has been removed. Instead of it you will see your menu-background in options. :3
I am sorry, what?
Also why did osu! decide to change again? The first menu (where's the button and you click it and options Play/Edit/Options/Exit come out) imo seems horrible now that it's so light Dx And the menu where you choose beatmap seems different as well...
(Though I kinda like shortcuts for effects, even though they are useless, and osu!mania. Which I still need to figure out how to get better accuracy at.)
AussieEvil
Is menu-background still "supporters only"?
Doodley

AussieEvil wrote:

Is menu-background still "supporters only"?
Yeah.
Don-Tan
hm there is a little cosmetical problem with the osu! direct menu :/ the beatmaps are covering up the half of the back button

btw i don't really like this thing with the removal of the options-background but i can live with it ^^
Topic Starter
MLGnom
So, time to make explanation of osu!mania skinning.

Let’s start with skin parts.
  1. LightingN – Lighting that appear when you hit a note on judgment bar (named that correctly?). Can be animated, through it’s pretty fast animation.
  2. LightingL - Same as above but it’s for “slider” notes.
  3. mania-hit0, 50, 100, 200, 300, 300g – Hitbursts for osu!mania. You can animate them, but remember these are really fast, so you need to be cleaver to make them visible. Animation isn’t looped, that means it is long as many sprites you did.
  4. mania-key1 /2/S – Skin for buttons. Be careful with using patterns on it. Because later in .ini files you might set length of buttons that can make patterns stretched. Special button is used in 7k/8k game mod.
  5. mania-key1D/2D/SD – Skin for buttons while pressed. Same as above.
  6. mania-note1/2/S – Skin for mania notes.
  7. mania-note1H/2H/SH – Skin for end parts of “slider”.
  8. mania-note1L/2L/SL – Skin for middle part of “slider”. This one can be animated.
  9. mania-stage-hint – known as judgment bar. Place where you need to hit note correctly. If you have problems with correct position of it use judgment line that you can set in .ini files.
  10. mania-stage-left/right – A left/right part of mania playfield. They aren’t restricted by size, so you can make neat sides by adding something more than border. If you will use it just for border, do a smaller part - rest will be repeated from upper part of screen to bottom.
    But if you are going to something larger, set height at 768px and width of your preference.
  11. mania-stage-light – special light that appears on column stage when you hit a button. Game will always try to fit it into column width, making them wide will force game to resize it to size of column.
    Better make higher than wider.
  12. selection-mod-key4/5/6/7/8 – mod icons for mania key mods.
  13. special-mania - osu!mania icon in special mode select.
Now second part – ini files.
Every mania skin should contains 5 .ini files ! 4k, 5k, 6k, 7k and 8k. As you can guess these are general options for mania-key mods.

Let’s start explaining them!
  1. ColumnWidth:50,25,30,25,30,25,30,25 – the widths of tracks. All numbers are separated by comma.
    Sizes goes from left to right. So if you changed special button position in 8k, you need to change it here too.
    WARNING! Use only 4 sizes for 4k, 5 for 5k, 6 for 6k, 7 for 7k, 8 for 8k. No more,no less than amount of tracks otherwise you will crash osu! when starting a map!
  2. SpecialPositionLeft:0/1 – Special position button for 8k. If turned off (set to 0) button will appear on right side of stage.
  3. ColumnStart: 230 – Position of osu!mania stage. You can set from 0 to 460. 0 - left side, 230 - center of screen, 460 - right side.
  4. ColumnLine: 1,0,0,0,0,0,1,1 – Set a white line between tracks. 0 – off, 1- on. Amount should be same as amount of tracks otherwise it won’t work.
  5. JudgementLine:0/1 – Show judgment line. It’s line where you need to hit notes.
  6. Colour1: 80,0,0,200 – Set colour of track. Numbers are in format RGB A (red, green, blue,alpha – transparency ). You should set colours amount same as amount of tracks (Up to 8 for 8k).
Template : http://puu.sh/1eKoc

For more recent osu!mania template we need to wait, because things are constantly added/changed etc.



Edit: Updated skin template.
--Greed--
o-o....

Okay, officially: My mind is blown.

Personally, ever since I've joined osu(which isn't that long ago surprisingly) I've always wanted to make an interesting beatmap. I literally have stalked the internet trying to find something that could help... and now that I have, I literally cannot think straight :o

I read at the very beginning that you need some sort of photoshop experience(Etc.) and in which I have none....

I am willing to spend hours reading manuals but what is the point if even at the end I do not understand...?

I have read the entire osu!Wiki which was of little help...

eAe... I feel like I need a tutor. Anyways... o-o.... Can I atleast have a little help since I am making my first beatmap? :?
ziin

--Greed-- wrote:

Can I atleast have a little help since I am making my first beatmap? :?
Are you sure you're in the right thread? If you don't have any artistic skill, you're not going to be able to make a skin. And if you're talking about making an actual beatmap, please don't hijack other threads.
H_Hitachiin
Thanks for this info,it really helped^^
mintong89
hi ML~

i just found drum original sampleset hitsound :)

link: http://puu.sh/1frsl
Luna
There's actually a small error in your *.ini explanations, MLGnom:

MLGnom wrote:

  1. ColumnWidth:50,25,30,25,30,25,30,25 – the widths of tracks. All numbers are separated by comma.
    Sizes goes from left to right. So if you changed special button position in 8k, you need to change it here too.
    WARNING! Use only 4 sizes for 4k, 5 for 5k, 6 for 6k, 7 for 7k, 8 for 8k. No more,no less than amount of tracks otherwise you will crash osu! when starting a map!
While this is correct on its own, you CAN add additional columns. Just remember that you need to add numbers to ColumnLine as well. The game only crashes if ColumnLine doesn't have exactly one more number than ColumnWidth.
Looks like this (8 columns in 7K mode, notice how the barline does not reach across the eighth row):

And a few missing functions of the *.ini:
ColourColumnLine: [color code with four variables, the last one being alpha] - Colour of the ColumnLines
Barline: 0/1 - Toggles the Barline on (1) and off (0)
ColourHold: [color code with four variables, the last one being alpha] - The colour used to tint the combo number when holding long notes (orange by default)

Tried ColourBarline, but it does nothing =(
Topic Starter
MLGnom
First I'm correct about crashing game.
That what you showed is 7k+1(???) that was added today.
Game is still crashing when you do this for 8k and probably other .ini's. Or add more than that.

There was a lot of things changed/added in past 2 days (today including). I don't have time to do instant check/update tutorial and don't want to do this. Things might change tomorrow and that will require more changes in tutorial. Just wait until mania gets into pretty "finished" stage.

Luna wrote:

ColourHold: [color code with four variables, the last one being alpha] - The colour used to tint the combo number when holding long notes (orange by default)
Oh, this one I'm sure that I have missed.

Will update it later, when more things will come.
Luna
Nope, it worked before the 7+1 patch (I'm not even sure what that's supposed to do) and you can do it to 8k and other *.inis (Up to a maximum of 10)
Proof:
;)
Topic Starter
MLGnom
Ah, I see. But... aren't they useless? I mean notes do fall on those additional tracks?
Luna
No, they have no function but they are useful if you want to have the same 8 columns for every number of keys, so you don't mess up with the buttons all the time (left-to-right layout)
Topic Starter
MLGnom
Mhm. I understand. Thank you for testing that.
Like I said, will make update later when more things will come. :3
--Greed--

ziin wrote:

Are you sure you're in the right thread? If you don't have any artistic skill, you're not going to be able to make a skin. And if you're talking about making an actual beatmap, please don't hijack other threads.
Trust me, I would never hijack a thread for that purpose.

I am merely implying I have no skill or understanding in how to create interesting skins that I could use in my beatmaps.
bwross
The simplest way is to just jump in. Take a skin like the template one, and try replacing the images and sounds. Try changing things in skin.ini and see what happens (lines beginning with // are comments, they'll be ignored by osu). Look at other skins and maps with skins you like and look in their directories to see how they did things.
vermeiren69
thx for the help :D
H_Hitachiin
Awesome^^It looks better now :D
show more
Please sign in to reply.

New reply