Main page: Skinning.
The Skinning Tutorial articles are to serve as a general how to on skinning.
Images must use the
.png format. However, the
menu-background.jpg element can use either
In addition to using the
.png format, you should:
Overlays will overlay an element's image and will not be colored or tinted. Note that only a few elements contains an overlay.
Since osu! can be played using different window resolutions, some skinning elements may overlap or be placed farther apart than what would be expected otherwise. This means that not elements will scale themselves to fit the game window resolution.
It is best to keep the following resolutions in mind while skinning.
Images will be adjusted by the game itself to fit resolutions derivating from the ones mentioned above. Most of them will be rescaled to fit the playfield or repositioned on different aspect ratios.
HD sprites are used in place of the normal sprites on higher resolutions, when present. Compared to normal sprites, HD sprites look much sharper and cleaner on these larger resolutions. They get scaled by the game itself automatically to fit the resolution used. Resolutions supporting HD sprites begin at a minimum of 800 pixels in height. HD sprites are tagged with
@2x at the end of their names. For example:
HD sprites have doubled dimension sizes. For example: the normal
hitcircle.png sprite has the dimension sizes of 128x128 pixels. Where its HD sprite,
firstname.lastname@example.org, has the dimension sizes of 256x256 pixels.
Every sprite has an HD counterpart, even all frames in an animation can have HD counterparts. As a result, the filesize of the folder or archive will increase due to having more images than normal.
All HD sprites may also be bigger in filesize due to the fact that the canvas size used is four times bigger compared to the normal sprite. There are essentially two resolution modes osu! is using. Each of them prefers one set of sprites. The first mode is LowResolution while the second mode is HighResolution.
If you have gone through the entire osu!skinning forums and you are certain that you cannot find that skin, then congrats, osu! doesn't have it yet. With this in mind, you can take this initiative to create the skin you dream of and make it something that everyone else may want!
Nonetheless, please, never request for a skin anywhere in the osu!forums. Failing to follow this rule will your thread be moved to the wastelands.
First off, don't ask this in the osu!forums. Otherwise, your thread will most likely be thrown into the wastelands. Secondly, your better off asking that person for the skin they're using.
Nice choice, but remember, skinning can be little hard for newbies. At the beginning of making a skin, you should have:
This question may also be known as, "What's skin version 1.0 and 2.0+?".
The new and old style skinning was an option in the osu!client. It was, however, removed because the skin.ini now handles the skin versioning.
Old style skinning, now known as "version 1.0", is a style that was used by old default skin (before March 2013). After the "March 2013 update", also known as "version 2.0", peppy introduced the new default skin with its new behaviours and parts. There were few important changes like new spinner, countdown, hitbursts, ranking-panel behaviour. For a changelog of skinning updates, see Skinning.
It may not seem important to denote which version you use, but know that some older features may not be available in the latest version of skinning and vise versa.
Luckily, you don't need magical powers to skin.
Skinning is a simple picture changing mechanism that osu! will load upon selecting a skin in the options. Creating skins is easy (but creating elements, the images, is a little more difficult thing to achieve).
First you need to find your
Skins folder which is inside your osu! directory. From here, you could either make a new folder and call it whatever you want then start making the skin. (You could, instead, install the template skin, rename it, and start editing it.)
You should note that osu! has over 200 skinable elements (not counting the individual animation frames). Don’t be scared with the amount because, remember, you are not forced to change everything.
Generally, the skinning elements and the skin.ini file are important parts of your skin and should be included. Which parts you are going to add it’s completely up to you because anything you don't change, the default element will be used instead.
You are able to add different folders with alternative parts into your skin. osu! won’t care if they are there or not. Do note, however, the subfolder called
taiko (name is case-insensitive) is reserved for osu!taiko skins, which will override all of the osu!taiko elements (and some interface elements when playing an osu!taiko map).
Never post a skin with another user's skinning element(s) without permission!
This is an important rule of skinning. If you got permission, or user is no longer active and it’s impossible to contact with them, just remember to credit them properly.
You could do that, but (even if you do get permission) please don't share those in the osu! skinning subforums. Please keep those to yourself and/or post it on your profile page. This will help skinners make their original skins stand out than the remixed/mashup-ed skins.
Know that osu! allows you to animate some elements, but not all of them. To create an animation for an animatable element, you will need the frames for that animation frame by frame. With those, name them in order prefixed with the skinning element name then suffix with a hyphen (
-), an index number (start the count at zero), then the file extension (
Most of the animatable skinning elements do not limit you to the amount of frames. However, know that the animation rate could play the animation too slowly before the user would be able to see them. To find the balance between the animation rate and the frames, you'll need to do trail-and-error (see next section below for more details).
Lastly, while most do, not all skinning elements use the hyphen then number system for animating a skinning element. For example:
sliderbhas its frames named:
pippidonclearhas its frames named:
If your animation is too fast/slow, you have two ways to fix it
AnimationFrameratecommand in the
Those are the three basic categories for skins:
followpoint.png, semi-transparent hit circle, and less sounds.
See also: skin.ini.
skin.ini file allows you to define specific behaviors on how osu! will display your skin.
The list includes but isn't limited to:
To make sharing your skin easy, you should export your skin as an
.osk file. With this file, you can upload it then post about it in the skinning subforums.
Here is how to make an
.osk file with osu!
Export as .osk
Yes, and if you do, you must add warning that your skin contains any of the below.
Probably some of you ~~perverts~~ would like to make a skin that will contain mature content. All cases are simple, if you are going to post a skin that have it, you are only allowed to post R15 or "ecchi" skins.
R15 skins may include but are not limited to:
You are never allowed to post skins that contains any R18 content anywhere in osu!. Period.
If you post your R18 skin anywhere in the osu!community, be aware that you will be punished for that. On the other hand, if you release it outside the osu!community walls, nobody will hunt you down.
Of course, this is the optional last step to skinning!
.oskfile (follow steps from above) and upload it somewhere.
If you don't know how to make friendly looking thread you can use this template.
[General] [b]Skin Name[/b]: Your skin name will go here. [b]Creator[/b]: Name(s) of who made it. [b]Theme[/b]: Tell us what theme your skin is based at. [b]Version[/b]: Self-explanatory [b]Tags[/b]: This can make finding your skin easier. [b]Download[/b]: Put download link here. [Data] [b]Size[/b]: Approx. size of your skin [b]Is it fully skinned? Yes/No.[/b] (Gameplay/Menu/Taiko/Catch the Beat/cursor - only?) [b]HD support? Yes/No.[/b] (does the skin use HD images (using the @2x suffix)) [b]Screenshots[/b]: Screenshots go here. (Adding a spoilerbox is useful for people with slow connections) [b]Video preview[/b]: (Optional, if you have one) [Misc] [b]Creator's comment[/b]: Self-explanatory. [b]Updates[/b]: Leave your updates here (Again, a spoilerbox could be very useful here) [b]Requests[/b]: Since no one is perfect, you can use this to request help to your skin :)
It is really important to include various screenshots of gameplay and the song selection, etc. A lot of people will want to see your skin looks like before carelessly downloading it! You can use upppy or puush to upload them.