osu!
Personal tools
Namespaces
Variants
Actions

Skinning

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

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


Work.png
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!

Contents

Skins

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, ranking screen alignment changes and overall improvements.
  • HD skin support (use *@2x.png)
  • Smaller lighting.png expansion
  • Sliderpoints are disabled
  • Colored (red) warning arrows at end of breaks
  • Centered countdowns
  • Hitcircle numbers no longer expand with hitbursts
  • New spinner styles
  • Ranking screen moved down a bit
  • Selectionbar image anchors changed
2.1 Same as 2.0, but includes Taiko @2x support as well as Taiko alignment changes to match.
  • taiko-bar-right(-glow).png is directly placed under taiko-bar-left.png
  • Taiko drum positions changed
2.2 Introduction of new beatmap panel layout.
  • Thumbnails (can be disabled with Options)
  • Star Difficulty Ratings are scaled (rather than halved)
  • Panel text alignments optimized
2.3 Includes the new CtB mascot Yuzu, changes in CtB catcher behaviour.
  • fruit-ryuuta.png will not work from this point forward
  • new Catch the Beat specific combobursts using comboburst-fruits(-#).png
2.4 Improvements to mania scaling
  • Smaller combo counter and hitbursts
  • column lines are drawn on both sides, if spaced
  • added the hold note tails (works on all versions)
2.5 Allowed osu!mania to be more skinnable! (use the skin.ini file)
  • New commands KeyFlipWhenUpsideDown and NoteFlipWhenUpsideDown
  • New command NoteBodyStyle (stretch, cascade from top, cascade from bottom)
  • New command LightingNWidth and LightingLWidth
Misc. latest 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

  1. Images should always be in the *.png format (with one exception).
    • This is because other file formats don't support transparency and will usually add a solid background color to the image.
  2. Trim or crop your images whenever possible.
    • osu! will render every pixel of an image. This will result in a bigger workload for osu!
  3. Compress images whenever possible.
    • Compressing usually removes unnecessary info about blank pixels and reduces the file sizes dramatically.
  4. Certain elements face a certain direction.
    • Some elements have a standard as to which direction they must face to face the correct direction when osu! uses it.

Overlays

  • 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.

Resolutions

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.

osu!supporter

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 (this is the exception, this element MUST be in *.jpg format)
  • triangle.png (currently disabled by the game)
  • welcome_text.png
  • seeya.wav
  • welcome.wav

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.


The individual sets can be found on these pages divided into each gamemode and the user interface shared by most gamemodes:


Edit.png
Beatmap Editor
META Beatmap Editor (Menu)
Sections Compose Design Timing Song Setup
Components Beat Snap Divisor Distance Snap Custom Sample Overrides Kiai Time Timelines
Difficulties Easy-s.png Easy Diffeasy.png Normal Diffhard.png Hard Insane-s.png Insane Diffexpert.png Expert
Mapping Beatmapping Mapping Techniques Timing (How to time songs) Modding Storyboarding (Scripting) Skinning (Skin.ini)



Contents of
Logo.png
wiki
Getting Started Registration Installation Newbie's guide Game Interface Options Hit Objects
osu! Game Styles Basic explanation Multi-play
External ports » osu!stream osu!droid opsu! osu!wp T-Aiko Beats
External clients » osu!tourney osu!MapDownloader
World of osu!
Miscellaneous » Mascots osu!academy osu!talk
Beatmap Editor Compose / Design (Scripting) / Timing / Song Setup

Beatmapping Beat Snap Divisor / Distance Snap Custom Sample Overrides Kiai Time Mapping Techniques Skinning Skin.ini Storyboarding

Online Editing
and Ranking
Beatmap forum Submission Beatmap Approval (How to Get Your Map Ranked) Modding (Getting Your Map Modded) Music Theory Audio Editing Kudosu / Star Priority
People The Team Administrators/Global Moderation Team Quality Assurance Team Beatmap Nomination Group Language Moderators osu! Alumni Support Team Community Contributors List of notable people