Personal tools


From osu!wiki
Jump to: navigation, search
Other languages

Français  Русский  Español  Bahasa Indonesia  中文  Deutsch  日本語  Português  Italiano 

Page in progress. Jump in the bandwagon if you can improve the page.

Osu!sys os.png Skinning Skin.ini
Tutorial » Interface Standard Taiko Catch the Beat Mania Sounds
Skin elements » Interface Standard Taiko Catch the Beat Mania Sounds

Skinning is one of the fundamentals of all osu! game modes. It enables users to derive from the "original" skin elements and to create their own!



Over the years here at osu!, skins have changed dramatically in style. There are various different ways that you can skin, with a few guides on the forums to start you off on how!

Skins vary from "for-fun" skins with some central theme (i.e some anime) that are nigh impossible to play with (such as this) to more serious "pro" skins that maximize play field visibility, minimize visual obtrusions (e.g replacing hitbursts with blank images or star2.png with blank images).

The Basic of Skinning

Skin Versions

Version Changes
1.x 1.0 2007~2013 initial release.
2.x 2.0 2013 global redesign, featuring new spinners, ranking screen alignment changes and overall improvements.
2.1 Same as 2.0, but includes Taiko @2x support as well as Taiko alignment changes to match.
2.2 Introduction of new beatmap panel layout. Includes rotating and scaled stars (rather than "half" stars), thumbnails and improved alignment of all elements.
2.3 Same as 2.2, but includes the new CtB mascot Yuzu, changes in CtB catcher behaviour as well as new CtB-exclusive combobursts.
2.4 Scales the mania combo counter, score, lights and warning arrows when the overall size of the mania stage is decreased.
2.5 Allowed osu!mania to be more skinnable! (using the skin.ini file)
Misc. latest Use this in distributed skins that require the latest version of skinning. (use this when you have multiple "User" skins)
  • do not use this when trying to distribute skins!
User Use this only when you want to change a skin element or two (or a few) for your own purposes!
  • Label the folder (that holds these elements) User
  • do not use this when trying to distribute skins!
  • does not require a skin.ini file
  • this will ensure you'll use the latest version

General Skinning Tips

Images should always be in the .png-format. Other fileformats don't support transparency and mostly add a background to the image to fill it up without any chance to be removed.

Trim / cut your images whenever possible. osu! renders every pixel of an image and puts more workload onto osu!
Compress images whenver possible. Compressing removes unneccesary info for blank pixels and reduces their filesizes dramatically.

It is best to keep the following resolutions in mind while skinning.

  • 1024x768 (4:3, standard game resolution, the game is based on it)
  • 2048x1536 (4:3, standard game resolution in HD scaling)
  • 1366x768 (16:9, standard game widescreen resolution)
  • 2732x1536 (16:9, standard game widescreen resolution in HD scaling)
  • 1920x1080 (16:9, standard HD resolution)

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.

If a sprite is not skinned, it will be loaded from the default skin.

Certain elements face a certain direction. These elements should be designed to face the same direction.

  • Example: reversearrow.png or fruit-ryuuta.png are facing right

Currently 3 sprites and 2 sounds can only be modified by Supporter tag.png otherwise the default one will be used.
These are:

  • menu-background.jpg (it's the only sprite which has to be a .jpg)
  • triangle.png (currently disabled by the game)
  • welcome_text.png
  • seeya.wav
  • welcome.wav

What's the difference between "image.png" and "image-overlay.png"?

  • Overlays will overlay the root element's image and will not be colored or tinted.

For best practice (Unless you know what you're doing):

  • You should keep the root element gray-styled so osu! can color it properly!
  • make overlay partly transparent so you can see both.
    • Examples: "fruit-apple.png" and "fruit-apple-overlay.png"

HD Sprites

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 pixel in height.

HD sprites are tagged with @2x at the end of their names.

  • Example: cursor@2x.png

HD sprites have doubled dimension sizes.

  • Example: the normal hitcircle sprite has the dimension sizes of 128x128 pixel.
    • Its HD sprite hitcircle@2x has the dimension sizes of 256x256 pixel.

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.

  • LowResolution mode uses the normal sprites and ignores the HD sprites (SD-resolution skin)
  • HighResolution mode prefers HD sprites and uses normal sprites as a fallback if no HD sprite is available (HD-resolution skin)

Skin Sets

If your beatmap uses a skin and has any of the elements included in here, all elements of the set must be included even if you need to use default skin elements to complete it. If all sets are included, then you may alternatively just force default skin.