OsuMe65 wrote:

Boy, this might be another long debate.
Also... keep this simple for newbies. Since anchoring WOULD be a big deal for those who don't have much experience in photo-editing softwares.
Just saying

• -expand list of dead elements (aimed at older skins as a template)

• -make a list with all currently skinnable elements sorted by game mode or usage

• -sort facts per game mode after more input

• -start making screenshots to provide visual help

• -start formatting to make it more visually appealing after input

• -maybe drop points from or expand list of anchorpoints

tuddster wrote:

What does multi-skipped.png do?

ReddScorn wrote:

Some elements should be coloured with a greyscale in mind since they get tinted by the game:

BlackStat wrote:

Can you give an example on how to specify animation frame rate for different elements?
I'm trying to set my scorebar-colour frame rate to 10, but using the name before "Framerate" doesn't seem to work.

Pilesos wrote:

Is there a way to turn off the beatmap playing on in you ranking panel so that it does not overplay the applause.mp3 ? Thanks in advance !

OsuMe65 wrote:

menu screen (the one with a blue BG and the osu! logo in the center.)

vahn10 wrote:

It think it uses star2.png, iirc.

A i k a wrote:

OsuMe65 wrote:

menu screen (the one with a blue BG and the osu! logo in the center.)

I don't see any stars around there owo, or did you mean in the actual background where small stars appear here and there?

ReddScorn wrote:

Thanks, glad to hear that and waiting for your skins. Maybe I start watching date a live after finishing up Guilty Crown. I watch animes irregulary and take them slow.

Also, small ninja update (see Changelog).

ReddScorn wrote:

Thanks, glad to hear that and waiting for your skins. Maybe I start watching date a live after finishing up Guilty Crown. I watch animes irregulary and take them slow.

Also, small ninja update (see Changelog).

ReddScorn wrote:

Gameplay aspects influenced by skin versions

or skinning tutorial V2 / continued?

[Introduction]

Hello to all you skinners,

This topic is for all those that look for more specific infos, like how or when certain elements work or small alignment help.
It may seem like nothing but it makes a very visibile difference that you can optimize for to make a skin more enjoyable or clean.

A reminder that this list is covers most of osu!-standard gameplay at 1366x768 (16:9) resolution.
Other modes are in need of research since I'm more of a standard player and play the other modes rarely or at a low level.

I won't offer general troubleshooting in this topic since there is a official topic for this with more knowledgable skinners that will help you out:
Skinning tutorial (+ skinning support)

This link here directs you to a list with all skin elements and audio files with some small annotations:
Skin Elements List Overview

This link redirects to a complete listing of all skin.ini-file lines including the mania command lines:
osu!Wiki: Skin.ini

In this topic I use "element" to refer to an image. Most images work together with other images for certain aspects like animations, cursor, scorebar or hitobjects. Therefore I see them as elements of a whole aspect.
Another word for colouring is tinting. I use "tinted" in this topic because tinting means adding a colours value to the existing colour.
Scaling data can be off at times since I use rounded numbers due to subpixels aswell at some anchorpoints. Concrete px indications are positions in l,h (length, heigth).
I also won't use file-endings to save space since all elements are ".png"-images or ".wav"-sounds.
V1 or V2/V2.X+ refers to certain skin versions.

[General skinning tips]

Keep the following dimensions in mind when skinning:

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

Images will be adjusted to fit the playfield when using other resolutions.
Most of them will be resized (e.g.: hitcircles on different CS) or repositioned (widescreen usage/ different aspect ratio) by the game itself.

Image files must be in PNG-format, other fileformats won't be displayed correctly due to (lack of) transparency.

The menu-background can only be seen by supporters.

Some elements face a certain direction. Try to design them facing the same direction as in the template skin (e.g. reversearrow facing right).

If there is no specific skinned element, osu! loads the default element from its template (faster, same for sounds).

osu! prioritizes WAV-files over other sound-formats.

[HD Skinning]

HD-images must be tagged with "@2x" at the end (e.g. "hitcircle@2x" and "followpoint-3@2x") and have a doubled resolution (hitcircle: 128x128; hitcircle@2x: 256x256).
HD-elements are resized to the standard element resolution ingame and will look much cleaner than their SD-counterparts on higher resolutions.

If you plan to skin for SD+HD, start working in an HD environment since upscaling lower resolutions looks muddier.

All skinnable elements can also be skinned in HD (including animations), but will take a lot of disk space since the canvas size is 4 times larger.

HD-elements will be displayed automatically when the resolution exceeds "x>999 times y>799" (1000x800 min).

When your skin contains HD-elements they will behave the following in each resolution mode:

1. HD-elements won't show on SD-mode and the default osu! template will be used in SD-mode (HD-only skin)
2. SD-elements will be used in HD-mode if HD-elements are not included (uncomplete HD-enhanced skin)
3. HD-elements are prioritized over SD-elements in HD-mode and vice versa (complete HD-enhanced skin)

The last fact can be used to make two seperate skins in one folder or altered elements / themes for the specific resolution mode.

[Beatmap skins]

Beatmap skins ignore skin versions on their own. osu! checks their content and sets the behaviour based on them.
This means if you use a spinner-background in your skin you should include the old-style set, if not the new-style set.
You can also assign SliderBorder and SliderTrackOverride colours by manually editing the ".osu" file under [Colours].

If you use a beatmap skin on your beatmap please bear in mind that any missing element will be loaded from ones set skin and not the default osu!-skin.

[General changes based on elements]

Changes

Cursor
The cursor elements are the highest layers. The cursor is below the cursormiddle and above the cursortrail.

When including only a cursor, no cursormiddle will be shown and the cursortrail won't create lots of afterimages.

A cursormiddle on its own won't show unless a new cursor is included. It causes the cursortrail to create a huge amount of afterimages (long trails).
A cursormiddle won't expand nor rotate.

A cursortrail on its own sees no changes to its behaviour. It produces a light amount of afterimages and won't expand.

Scorebar
The scorebar is mostly influenced by the scorebar-colour.

The scorebar-colour uses different positions than the background based on the use of scorebar-ki elements or a scorebar-marker.
The position for one with ki elements is at 5,16 while one with the marker is at 12,12.
You have to add or remove some pixels from the top and left of the scorebar-colour, depending on how you designed it.
If you include both, marker and ki, the marker will be preferably used.
If none of the ki or marker elements are included the anchor for the colour is that of the ki elements.

Numbers
The default numbers are scaled by 0,8. In V1 they appear on hitcircle hitbursts while in V2 hitbursts they won't show up at all.

The score at the top right of the playfield and total score on the ranking screen show 8 digits at default.
If the score exceeds 99.999.999 (long marathon/high combo maps) additional digits will be added.
The scorenumbers are scaled by 1,1 on the ranking screen except for the total score on V2+ (1,3).

When you have combo numbers assigned to your skin.ini they will be used and only show the numbers. the "x" won't show up this way.

Ingame the score has different scalings per function:

1. current score by 0,95
2. accuracy by 0,6
3. on spinner-rpm hint by 0,9
4. spinner bonus by 1,9 (not exact mininum)

Playfield
The playfield is only used when a beatmap has no background on its own. It shows up on song selection for V1 skins.
The menu-background shows up for supporters on the welcome screen on all versions and on song selection for V2+ skins.

Particles
If new hitbursts (hit300k, hit 50, etc.) are used, particles won't be displayed unless included.
Vice versa new particles won't be displayed without new hitscores.

Spinner
V1 uses the old-style spinner while V2 can use the old-/ or new-style spinner depending on including a spinner-background or not.
If included the old-style spinner will be used or if not included the new-style spinner is used.
Old-style spinner:

1. spinner-circle
2. spinner-background
3. spinner-approachcircle
4. spinner-metre

New-style spinner (also layer order):

1. spinner-middle
2. spinner-middle2
3. spinner-top
4. spinner-bottom
5. spinner-glow

spinner-middle2, -top, and -bottom rotate at different speeds.
New-style spinner elements expand on appearance.

The spinner-metre will only show up if included (only on old-style spinners).

The spinner-middle gets tinted red over time and indicates the end of a spinner. It is the substitute for the missing spinner-approachcircle on the default new-style spinner. It won't rotate.
The spinner-glow gets more visible over time and tinted in a light blue. It blinks everytime you get 1000 bonus points from spinning. It is the substitute for the missing spinner-metre on new-style spinners. It also won't rotate.

Sliderball
sliderpoint10 and sliderpoint30 are only used in V1 and work if included.

The default reversearrow sometimes gets coloured black if your combo colour or background is too bright to create a readable contrast.

The default sliderball uses three different layers to form the ball. This sliderball style is not skinnable!
First or the highest layer is the sliderball specular. It is the lighting layer that stays in a fixed position following the ball.
Second is the primary sliderball colour. It displays all frames while in motion and is tinted by the combo colour.
Last is the secondary colour. It sits under the sliderball and is a static layer that also rotates the same way. It is tinted black.

[Skin versions]

The default osu! skin always uses the latest skin version available on the current build (stable or cuttingedge).
If you change your skin to an other skin than the default skin, osu! will check the selected skins skin.ini-file and uses the supported version.

If your skin.ini-file has no set version, it will be set to "Version: 1".
This will mostly be seen on old skins (pre march 2013 update: introduction of new default skin).

If your skin has a misaligned ranking screen or uses the default old-style spinner, use "Version: 2" to have the screen aligned and enable the support for new-style spinners (pre may 2014 update: introduction of skin versioning/removal of "force new behaviour").
Some skinners simply just reminded people to use the forcing option and didn't include the version line.

If you don't know which version your skin supports or just edited some skin settings while using the default skin, use "Version: latest".
This line is intended for personal use and should not be used on skins for distribution (posting original skins on the forums).

If your skin has no skin.ini-file, the Version will be set to the latest version osu! supports.
This is intended for skins replacing some elements like cursor or hitcircles only without changing any skin settings.

If you decide to use a set version, bear in mind that all aspects get changed and not only one.

Versions and their changes

Version: 1 features the most basic elements and behaviours. All other versions change the behaviour from this version and include the changes from the previous ones.

Version: 2/2.0 changes a lot of the behaviours and supports new elements while deactivating other features.
Directly visible changes are present on the song selection screen. The bar with the mod selection, random selection or beatmap options are aligned directly to the bottom border of the screen. In V1 they were aligned 87px above that border.

Another visual change is on the ranking screen. The panel is positioned a bit lower aswell as all the counts. The most outstanding changes are the scaling of the total score and the buttons to the left.
Instead of ranking-retry and ranking-replay, the screen uses pause-retry and pause-replay instead.

If you play a map with a countdown before start, the counts 3, 2, and 1 are shown individually at the middle of the screen instead of building an image.

When you play with hitlighting you can notice a change between the expanding ratios. In V1 it can expand up to 2 times of its size, where as in V2 it expands to 1,2 times of its normal size.

On sliders the sliderpoint display is disabled.

In breaks the play-warningarrow will be tinted red insead of being fully in colour.

On spinners the spinner-osu hint that shows up after spinning is disabled. V2 also enables the use of the new-style spinner.

Version: 2.1 is the update for the new Taiko layout.
It changes the positioning of the taiko bar elements.
taiko-bar-right and taiko-bar-left are drawn below taiko-bar-left and the taiko-drum mirror axis is shifted 5px to the right.
Additionally taiko-drum-inner and taiko-drum-outer are now positioned at the top left corners of the taiko-bar-left and the mirror axis instead of fixed positions.

Version: 2.2 changes the layout of the beatmap selection panels.
The panel will show the main background of submitted beatmaps right next to the beatmap info when enabled in the options.
It changes the star rating display to an animation with different sized stars instead of partially displayed stars.

Version: 2.3 is the update for the fruit-catcher and comboburst elements in Catch the Beat.
CtB now uses its own combobursts aswell as a new catcher named Yuzu (the new CtB mascot).

This new catcher uses 3 different states; an fruit-catcher-idle for the idle state, fruit-catcher-kiai for the kiai state and a fruit-catcher-fail when missing a fruit.
Like the fruit-ryuuta they can also be animated.

Version: 2.4 changes the way mania skins are handled.
This version enables the usage of skinnable hold note tails by manually editing the skin.ini-file.
It also causes the column lines to be drawn on both sides of the coloumn.

[Animation]

General animation infos

osu! prioritizes animated over static images.
The ranking-panel uses the static hitbursts and, if included, the animated hitbursts for gameplay only, except for the osu!mania ranking screen.
In the mania ranking screen, the first frame of the animation will show up on the panel since they are super short animations.
Animations must start with frame "0", otherwise they won't start.
Animations are mostly looped (exceptions: hitbursts).

Animation speed can be set in the skin.ini-file using "AnimationFramerate: n"
The default framerate depends on the element itself. It tries to display all available frames in 1 second.
If you set a framerate it will display the set amount of frames in 1 second without skipping frames for almost all animations at once, except the sliderball.
For example; an animation has 10 frames and the framerate is set to 30, so it will display three times as fast in that one second.
Another example; an animation has 60 frames and the framerate is set to 30, so it will display all available 60 frames in 2 seconds or half as fast in one second.
Certain animations can't be influenced by this (e.g. sliderball which has its own animation rate line, hitbursts, or the hitcircleoverlays).

When using animated hitcircleoverlays, sliders use the static hitcircleoverlay for sliders and the animated overlays for the single hitcircles and the hitbursts.
To note is if you use "HitCircleOverlayAboveNumber: 1" the animated overlay will be drawn above the static overlay on the slider startcircle.

Naming of elements is "element-name" + "-n" without space (e.g. "followpoint-3") whereas "n" stands for the framenumber, starting at "0".
Naming must be consecutive from start till end of animation (0,1,2,...,n-1,n), else it will stop mid-animation.
The sliderball and pippidon follow a slightly altered naming criteria: "sliderb" + "n" without a "-" or space (e.g. "sliderb4").
The HD-suffix "@2x" is attached behind the framenumber (eg: "followpoint-3@2x").

Pippidon follows another animation pattern which is explained here:
Custom Taiko Characters

List of animated elements

1. followpoint
2. fruit-ryuuta
3. fruit-catcher (+"-idle/-fail/-kiai")
4. menu-back
5. play-skip
6. scorebar-colour
7. sliderfollowcircle
8. taiko mascot ("pippidon"+"clear/fail/idle/kiai")
9. taikocircleoverlay
10. taikobigcircleoverlay
11. hitbursts (hit0, hit50, hit100, hit100k, hit300, hit300k, hit300g)
12. mania hitbursts (mania-hit0, mania-hit50, mania-hit100, mania-hit200, mania-hit300, mania-hit300g; 5-frame animation max)
13. hitcircleoverlay
14. sliderb
15. lightingL
16. lightingN
17. mania-note#L (# = 1, 2 or S)
18. mania-stage-bottom
19. mania-stage-lighting

[Mania skinning]

Original visual guide
by
TouchFluffyTail
(a guide in screenshots, additional facts on the following text)

Additions to the visual guide

Since the V2.4 update, all the lines are put under the [Mania] section with the line "Keys: n" put after it and every key count gets a new [Mania] section, rendering the #K.ini-files functionless after merging, regardless of skin version.

The old function of "ColumnLine" and "ColumnLineWidth" are merged into a new "ColumnLineWidth". If set to "0" the line won't be displayed and if set to atleast "0.1" the line will be displayed. Decimal values can be used since the individual column values are seperated by a comma.

"BarlineWidth" is renamed to "BarlineHeight" to better indicate what really is changed.

"SpecialStyleLeft" is removed and "SpecialStyle" can now indicate on what side the special key is (0 = none, 1 = left, 2 = right)

The line "FontCombo" is removed and replaced by "ComboPrefix" under the [Fonts] section and also works with "ComboOverlap". It will also work for the other game modes' combo counters.

As an addition "ColumnSpacing" can be used to seperate columns by a set amount from the other columns. In V2.4 the column lines are drawn on both sides.

Hold note ends can be skinned using "NoteImage#T". By default they use the start of the hold note if not assigned. This starts working on V2.4

Out of all the lines, 3 will affect mania gameplay greatly and are rather player dependent:

1. HitPosition (timing)
2. SpecialStyle (only works for 2K, 6K, 8K, and 10K; note colour altering for one lane, "turntable" like lane; position left or right)
3. UpsideDown (horizontally mirrored reading / DDR style)

The other points affect readability by smaller margins.

The score numbers are used by default.

Keys are drawn over the notes. Behind the keys is a solid black bar.

mania-stage-left is shown left from the furthest left key while mania-stage-right is shown right from the furthest right key.
mania-stage-bottom will only be displayed when included and is positioned in the bottom middle of the mania playfield. It won't be stretched or resized.

3K, 5K, 7K, and 9K use the special key and note in the center by default to seperate the furthest left notes from the furthest right notes.
6K, 8K and 10K use the 2 normal keys and notes when not using SepcialStyle with keys ordered like in 4K.
When using SpecialStyle the furthest left or right lane will use the special key and note with the other keys ordered like in 5K with the normally special column using the first note and key set images.

You can use other naming methods for the note and key images and even put them in a seperate folder, but you will have to edit the [Mania] section in the .ini-file and include the path to the images (e.g.: NoteImage2H: mania/note/green) manually for every keycount.

If you don't want to make it a more complex section you can stick to the template files and leave the lines out.
The mania sections are generated automatically upon changing the mania keybindings in the options.

[Positioning]

Some infos on anchorpoints
Every element uses 1 of 3 types of anchorpoints.

The first type sees a corner of the element as its anchorpoint,
the second type sees the centre of the element as its anchorpoint,
and the third type sees the center of an edge of the element as its anchorpoint.

Most of the positions aren't affected by version differences and have a solid spot on the screen.


For some complex positioning problems I created some templates found below.

Redd's Template Pack

This pack contains image and PSD templates for:

1. inputoverlay
2. scorebar with ki elements
3. scorebar with marker element
4. mode-x-med segmented images
5. selection bar for V1 skins
6. selection bar for V2+ skins
7. ranking-panel + graph for V1 skins
8. ranking-panel + graph for V2+ skins
9. menu-button background for V1 skins (old without thumbnail support, up to V2.1)
10. menu-button background for V2.2+ skins (new with thumbnail support)
11. taiko drum elements for V1 skins (also for V2.0)
12. taiko drum elements for V2.1+ skins

accompanied by a small text file including some more detailed infos.

[Final words]

I hope that this helped you out a lot and makes your skins look more solid in the future.

Have fun and many cool ideas for skinning!!

_________________________________________________

Last update: 7 january 2015
Previous update: 26 october 2014

S A V E R Y wrote:

screenshot

[image]http://puu.sh/iiRdl/be480d5c04.png[/image]

Mistake...

ps. Why don't you add spinnerbackground in skin.ini section?

S A V E R Y wrote:

screenshot

[image]http://puu.sh/iiRdl/be480d5c04.png[/image]

Mistake...

ps. Why don't you add spinnerbackground in skin.ini section?

Haskorion wrote:

S A V E R Y wrote:

screenshot

[image]http://puu.sh/iiRdl/be480d5c04.png[/image]

Mistake...

ps. Why don't you add spinnerbackground in skin.ini section?

Can you tell me what the mistake is? A screenshot alone with the comment "Mistake..." doesn't give me any idea what you are talking about.

There is no line named "spinnerbackground" in the skin.ini or can you elaborate what it does? The only lines affecting the spinner are "SpinnerFrequencyModulate", SpinnerNoBlink", and "SpinnerFadePlayfield".
Also I don't know why the template still has "SpinnerApproachCircle" in the colour section since it does literally nothing anymore. The approachcircle stays the colour it is during spins or is it used in other gamemodes?

CursorEpxand → CursorExpand

Haskorion wrote:

(click this image to get redirected to a Google Doc with different sheets containing all currently skinnable images, audio files, and skin.ini lines with some detailed annotations)

This document focuses on changes present on the cuttingedge release stream and are therefore pending for change. The stable (fallback) release stream gets ignored since it is a bridge stream for those having problems with OpenGL. All elements were found in older and newer skins aswell through changelog announcements and checked ingame. The document is maintained by me. If you think something is missing just reply to this thread, send me a PM, or post a comment on the document and I will check it.

+ additional / more detailed stuff that doesn't fit into the list

Table of content

1. Introduction
2. General skinning tips
3. Skin versions
4. HD skinning
5. General changes based on elements
6. Animation
7. Mania skinning
8. Positioning
9. Final words

[Introduction]

This topic is for all those that look for more detailed infos, like how or when certain elements work or small alignment help.
This topic also covers stuff that is missing in the official tutorial topic linked below like HD skinning or skin versions.
It may seem like nothing but it makes a very visibile difference that you can optimize for to make a skin more enjoyable or clean.

I won't offer general troubleshooting in this topic since there is a official topic for this with more knowledgable skinners that will help you out:
Skinning tutorial (+ skinning support)

These links redirect to the skinning related Wiki pages:
osu!Wiki: Skinning
osu!Wiki: Skin.ini

Following is stuff that already got mentioned in the list but still needs more information to be fully understandable.

In this topic I use "element" to refer to an image or sprite. Most of them work together with other images for certain aspects like animations, cursor, scorebar, or hitobjects. Therefore I see them as elements of an whole aspect.
Another word for colouring is tinting. "Tinting" means adding a colours value to the existing colour.
Scaling data can be off at times due to subpixels forcing me to use rounded numbers. Concrete pixel (px) indications are positions in l,h (length, heigth).
I also won't write file-extenstions to save space since all elements are ".png"-images or ".wav"-sounds.
V1 or V2/V2.X refers to certain skin versions.
Also be reminded that I may mix up terminology sometimes since I don't rewrite the entire text for one small edit and learn new things everytime.

[General skinning tips]

SPOILER

Keep the following dimensions in mind when skinning:

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

Images will be adjusted to fit the playfield when using other resolutions.
Most of them will be rescaled (e.g.: hitcircles on same CS on different resolutions) or repositioned (widescreen usage/ different aspect ratio) by the game itself.

Image files must be in PNG-format, other fileformats won't be displayed correctly due to (lack of) transparency.

Trim/cut your images if possible. This will remove unneccesary data occupied by otherwise transparent pixels.

Compress your images. Compressing images removes unneccesary info for blank pixels and reduces their filesizes dramatically.

Custom menu-background.png, welcome_text.png, welcome.wav, and seeya.wav elements can only be loaded by supporters ingame.

Some elements face a certain direction. Try to design them facing the same direction as in the template skin (e.g. reversearrow or fruit-ryuuta facing right).

If there is no specific skinned element, osu! loads the default element from its template (faster, same for sounds).

osu! prioritizes WAV-files above other sound-formats. You can use .mp3- or .ogg-files for sounds that won't influence any timing (like applause or failsound).

[Skin versions]

Primer on skin version system

The default osu! skin always uses the latest skin version available on the current build.
If you change your skin to a different skin than the default skin, osu! will check the selected skins skin.ini-file and uses the supported version.

If your skin.ini-file has no set version, it will be set to "Version: 1".
This is mostly seen on very old skins (pre march 2013 update: introduction of new default skin).

If your skin has a misaligned ranking screen or uses the default old-style spinner instead of the new-style spinner, use "Version: 2" to have the screen aligned and enable the support for new-style spinners (pre may 2014 update: introduction of skin versions/removal of "force new behaviour").
Some skinners simply reminded people to use the forcing option and didn't include the version line.

If you just edited some skin settings llike colours or other stuff while using the default skin, use "Version: latest".
This line is intended for personal use and should not be used on skins for distribution (posting original skins on the forums).
If you use "latest", future updates may break your skin since your skin supports a certain version. Using a set version will prevent any damage future skin versions may inflict.
Additionally when you have a folder named "User", it will always force the latest version, regardless of the setting in the skin.ini-file.

If your skin has no skin.ini-file, the version will be set to the latest version osu! supports.
This is intended for skins replacing some elements like cursor, followpoint, or hitcircle (etc.) without changing any skin settings.

If you decide to use a set version, bear in mind that ALL ASPECTS get changed and not only one.

Version: 1

Features the most basic elements and behaviours. Some exclusive content for this version are a score display on sliderticks, or unique retry and replay button images for the ranking screen. All other versions change the behaviour from this version and include the changes from the previous ones.

Version: 2 / 2.0

Changes a lot of the behaviours and supports new elements while deactivating other features.

1. Indirectly visible changes are present on the song selection screen. The bar with the mod selection, random selection or beatmap options are aligned directly to the bottom border of the screen. In V1 they were aligned 87px above that border.
2. Another visual change is on the ranking screen. The panel is positioned a bit lower aswell as all the counts. The most outstanding changes are the scaling of the total score and the buttons to the right.
   Instead of ranking-retry and ranking-replay, the screen uses pause-retry and pause-replay.
3. If you play a map with a countdown before start, the counts 3, 2, and 1 are shown individually at the middle of the screen instead of building an image.
4. When you play with hitlighting you can notice a change between the expanding ratios. In V1 it can expand up to 2 times of its size, where as in V2 it expands to roughly 1.2 times of its normal size.
5. The score display on sliderticks is disabled (sliderpoint10, sliderpoint30).
6. In breaks the play-warningarrow will be tinted red.
7. On spinners the spinner-osu hint that shows up after spinning is disabled. V2 also enables the use of the new-style spinner.

Version: 2.1

Update for the new Taiko layout. It changes the positioning of the taiko bar elements.
taiko-bar-right and taiko-bar-right-glow are drawn below taiko-bar-left and the taiko-drum mirror axis is shifted 5px to the right.
Additionally taiko-drum-inner and taiko-drum-outer are now positioned at the top left corners of the taiko-bar-left and the mirror axis instead of fixed positions.

Version: 2.2

Changes the layout of the beatmap selection panels.
The panel will show the main background of submitted beatmaps right next to the beatmap info when enabled in the options.
It also changes the star rating display to slightly different sized stars instead of partially displayed stars based on the star difficulty.

Version: 2.3

Update for the fruit-catcher and comboburst elements in Catch the Beat.
CtB now uses its own combobursts aswell as a new catcher named Yuzu (the new CtB mascot).
This new catcher uses 3 different states; fruit-catcher-idle for the idle state, fruit-catcher-kiai for the kiai state and fruit-catcher-fail when missing a fruit. Like the fruit-ryuuta they can also be animated.

Version: 2.4

Update for the way mania skins are handled.
It also causes the column lines to be drawn on both sides of the column.

Version: 2.5

Update for better upscroll/Stepmania/DDR-styled mania skin support.
Notes and keys can be flipped or unflipped.
Note bodies can now be displayed in 3 styles.
The note lighting can now be scaled to fit the columns.

[HD Skinning]

SPOILER

HD-images must be tagged with "@2x" at the end (e.g. "hitcircle@2x" or "followpoint-3@2x") and have a doubled resolution (hitcircle: 128x128; hitcircle@2x: 256x256).
HD-elements get rescaled automatically ingame and will look sharper than their SD-counterparts on higher resolutions.

If you plan to skin for SD+HD, start working in an HD environment since upscaling lower resolutions looks muddier.

All skinnable elements can also be skinned in HD (including animations), but can take more disk space since the canvas size is 4 times larger in comparison to the SD-elements.

HD-elements will be displayed automatically when the resolution exceeds "x>999 times y>799" (1000x800 min).

There are essentially two resolution modes osu! is using. Each of them prefers one set of elements.
The first mode is LowResolution while the second mode is HighResolution.

1. LowResolution mode uses the SD elements and ignores the HD elements (SD-resolution skin)
2. HighResolution mode prefers HD elements and uses SD elements as a fallback if no HD element is available (HD-resolution skin)

[General changes based on elements]

Arrows

arrow-generic, arrow-pause, and arrow-warning will override play-warningarrow.
Additionally they won't be tinted by the game anymore. They keep their original colours.

arrow-generic has no known use at the moment (I tried during TAG but I still got the default skin's play-warningarrow tinted yellow, not sure if I reloaded my skin before it).

arrow-pause will replace the old arrow on the pause and fail screens. The old arrow is tinted blue, while the new arrow remains untinted.

arrow-warning will replace the old arrow at the end of breaks. On skins using V2 or higher, the old arrow is tinted red, while the new arrow remains untinted.

Cursor

The cursor elements are the highest positioned layers.
The cursor is below the cursormiddle and above the cursortrail.

When including only a cursor, no cursormiddle will be shown.
The default cursortrail won't create afterimages but still is visible.
The cursor rotation and expanding can be disabled via the skin.ini-file.

A cursortrail alone sees no changes to its behaviour.
If included with a new cursor, it is visible beneath the cursor and produces a moderate amount of afterimages on movement.
It won't expand on clicks. The cursortrail rotation can be disabled via the skin.ini-file.

A cursormiddle alone won't work unless a new cursor is included.
It hides the cursortrail and lets it create a huge amount of afterimages on movement (long trails).
A cursormiddle won't expand nor rotate.

Scorebar

The scorebar is mostly influenced by the scorebar-colour. Since the drain rate is based on percent, it has no defined length. So it can be 1px or 600px or as long as you want it to be but not too large since it will cover all other sprites except the cursor.

The default scorebar-ki sprites are transparent.
The default scorebar-colour uses the marker element.

When a custom scorebar-colour on its own is used, the marker element won't be used. Instead the ki elements are used.
If you include a marker, it will be prioritized over the ki elements.

The scorebar-colour uses different positions than the background based on the use of the scorebar-marker element.
The default position is at [5,16] while the position with the marker is at [12,12].
You have to add or remove some pixels from the top and left borders of the scorebar-colour, depending on how you designed your scorebar.

Numbers

Currently there are 6 sets of number sprites of which 4 can be customized and 3 that can even be put into a subfolder or use another naming scheme:

1. hitcircle number set: their default prefix is default.
   This set is used in osu!standard on the hitcircle for the colour combo order.
   One of the number sets that can be completely customized and put into a subfolder.
2. score number set: their default prefix is score.
   They are used for all larger score related displays, like current score, accuracy, spinner bonus, ranking screen counts.
   One of the number sets that can be completely customized and put into a subfolder.
3. combo counter number set: there aren't native number sprites, so they share their default prefix with the score numbers (this means if you change the prefix for score numbers, the default score images are used for the combo counter numbers).
   This set is used for the current combo counters in all game modes. In osu!standard you can additionally use a sprite for the multiplier.
   One of the number sets that can be completely customized and put into a subfolder.
4. scoreboard number set: their prefix is scoreentry.
   They are used on the scoreboards during gameplay. The combo count on the scoreboard is tinted cyan. The set is similar to the score numbers but in a very small scale (means there also are comma, dot, percent, and x for this set). Additionally they are also used on the inputoverlay display and can be tinted individually from the scoreboard using "InputOverlayText:" (tinted black by default) under the [Colours] section in the skin.ini-file.
   This number set can use custom sprites but must use the prefix to work.
5. frame latency numbers: their prefix is fps.
   The lower box of the FPS display. Simply put this number shows how long it takes to render a frame (overall FPS / 1000ms = frame latency).
   Can't be customized.
6. Frame limit numbers: their prefix is fpss.
   The upper box of the FPS display. Shows the current fps with the limited max amount or your monitor's refresh rate in Hz (VSync or Unlimited). If the refresh rate is displayed or you are fully capped at your fps without drops it will fade out after a few seconds.
   Can't be customized.

For 3 of these sets you can use custom named sprite sets by inlcuding the following lines in the skin.ini-file under the [Fonts] section and use their new respective prefix:

HitCirclePrefix:
ScorePrefix:
ComboPrefix:

The hiticircle numbers are scaled by 0.8 ingame.
In V1 they appear on hitbursts, while in V2 they won't show up on hitbursts.

Some countries and regions use a comma instead of a dot to display decimal values. So you should include both, score-dot, and score-comma to support all regions.

The score at the top right of the playfield and total score on the ranking screen show 8 digits at default (7 digits in osu!mania and ScoreV2 in multiplayer).
If the score exceeds 99.999.999 (long marathon/high combo maps) additional digits will be added.
The scorenumbers are scaled by 1.1 on the ranking screen except for the total score on V2 (1.3).

Ingame the score numbers have different scalings per function.

Countdown + soundfiles

Each sound corresponds to one of the images and is played on their appearance.

1. readys.wav to ready.png
2. count3s.wav to count3.png
3. count2s.wav to count2.png
4. count1s.wav to count1.png
5. gos.wav to go.png

You can also use count.wav instead of count#s.wav and gos.wav. It will only work if count3s.wav is not included.
count.wav will be played 4 times.

Particles

If new hitbursts (hit300k, hit 50, etc.) are used, particles won't be displayed unless included.
Vice versa new particles won't be displayed without new hitbursts.

Spinner

The old-style spinner can be used by all skin versions, while the new-style spinner is available for skins supporting V2 or higher.
The new-style spinner is used when no spinner-background is used.

Old-style spinner:

1. spinner-circle
2. spinner-background
3. spinner-approachcircle
4. spinner-metre

New-style spinner:

1. spinner-middle
2. spinner-middle2
3. spinner-top
4. spinner-bottom
5. spinner-glow

The default spinner-metre and spinner-background sprites are transparent and are only used by the old-style spinner.

The new-style spinner elements expand on appearance.
spinner-middle2/-top/-bottom rotate at different speeds.
The spinner-middle gets tinted red over time and indicates the end of a spinner. It is the substitute for the missing spinner-approachcircle on the default new-style spinner. It won't rotate.
The spinner-glow is tinted in a light blue and gets more visible over time. It blinks white everytime you get 1000 bonus points from spinning. It is the substitute for the missing spinner-metre on new-style spinners. It also won't rotate.

Sliders

sliderpoint10 and sliderpoint30 are only used in V1. The default sliderpoint sprites are transparent.

The default reversearrow sometimes gets coloured black if your combo colour or background is too bright to create a readable contrast.

The sliderstartcircle and sliderendcircle elements can override the hitcircle element on the start or end of sliders.
No overlays are drawn above them unless dedicated overlays (sliderstartcircleoverlay, sliderendcircleoverlay) are included.
Once a circle explodes it is no longer shown on the slider. When a slider contains one or more repeats, the sliderendcircle will replace the sliderstartcircle or will be redrawn after the explosion (not for the fallback release stream).

The sliderball can be tinted using "AllowSliderBallTint: 1" under the [General] section. It will be tinted by the current combo colour and also applies to all frames in an animation.
The default sliderball can also be tinted using SliderBall under the [Colours] section while "AllowSliderBallTint: 0" is used.

The default sliderball uses three different layers to form the ball. This sliderball style is not fully skinnable!

1. First or the highest layer is the sliderball specular (sliderb-spec). It is the lighting layer that stays in a fixed position, following the ball.
2. Second is the primary sliderball colour (sliderb). It displays all frames while in motion.
3. Last is the secondary colour (sliderb-nd). It sits under the sliderball and is a static layer that won't rotate. It is tinted black.

The specular and second colour can only be used when no custom sliderball is used.

[Animation]

Primer on animation

osu! prioritizes animated over static images.
Animations must start with frame "0", otherwise they won't start.
Animations are mostly looped (exceptions: hitbursts).

osu! runs its native animations at 60fps.
osu! displays each individual animation in 1 second.
For example:

1. Animation A has 10 frames, so the framerate for animation A is at 10fps
2. Animation B has 18 frames, so the framerate for animation B is at 18fps

The framerate depends on the animation itself. It tries to display all available frames in 1 second.
A global animation speed can be set in the skin.ini-file using AnimationFramerate.
If you set a global framerate it will display the set amount of frames in 1 second without skipping frames for almost all animations at once.
For example:

1. Animation A has 10 frames and the framerate is set to 30, so it will now run three times in one second.
2. Animation C has 60 frames and the framerate is set to 30, so it will run fully in 2 seconds or halfway in one second.

Certain animations aren't influenced by "AnimationFramerate" (e.g. sliderball which has its own animation rate line, hitbursts, or the hitcircleoverlays).

Naming of elements is "element-name" + "-n" without space (e.g. "followpoint-3") whereas "n" stands for the framenumber, starting at "0".
Naming must be consecutive from start till end of animation (0,1,2,...,n-1,n), else it will repeat from mid-animation instead of the end.
The sliderball and pippidon follow a slightly altered naming criteria: "element-name" + "n" without a "-" or space (e.g. "sliderb4").
The HD-suffix "@2x" is attached behind the framenumber (eg: "followpoint-3@2x").

Hitbursts have a fixed framerate of 60fps.
In osu!standard and Taiko, the last frame of the animation persists until it fades out, while the animation in osu!mania is looped.
The ranking screen uses the first (0th) frame of the animation.
Alternatively static hitburst images can be used for the ranking screens while the animated hitbursts are used for gameplay.

Pippidon follows another animation pattern which is explained here:
Custom Taiko Characters

The following link leads you a post from a osu!dev that experimented intensively with animations.
It gives far more details on how animations work and how certain elements are handled, aswell as a small list with the maximum frame count for global animation speed independent elements.
You have to scroll down a bit to a spoilerbox named "Small primer on animated elments for those who wish to try their hand on it".
RBRat3's element dump

List of some animatable elements

1. followpoint
2. fruit-ryuuta
3. fruit-catcher (+"-idle/-fail/-kiai")
4. menu-back
5. play-skip
6. scorebar-colour
7. sliderfollowcircle
8. taiko mascot ("pippidon"+"clear/fail/idle/kiai"+"n")
9. taikocircleoverlay
10. taikobigcircleoverlay
11. hitbursts (hit0, hit50, hit100, hit100k, hit300, hit300k, hit300g)
12. taiko hitbursts (taiko-hit0, taiko-hit100, taiko-hit100k, taiko-hit300, taiko-hit300k)
13. mania hitbursts (mania-hit0, mania-hit50, mania-hit100, mania-hit200, mania-hit300, mania-hit300g)
14. hitcircleoverlay
15. sliderstartcircleoverlay
16. sliderendcircleoverlay
17. sliderb (+"n")
18. mania: LightingL (lightingL)
19. mania: LightingN (lightingN)
20. mania: notes (all parts)
21. mania: StageBottom (mania-stage-bottom)
22. mania: StageLight (mania-stage-light)

[Mania skinning]

Primer on mania skinning and coding

A short explanation for the uses of # and n:

1. n is mostly referring to a key count
2. # is used to indicate a specific column
   
   1. (n-1) for # is used for all functions regarding settings for individual columns; the first column's value is 0 and the last column's value is one lower than the keycount
   2. n for # is used for colour settings on individual columns; the first column's value is 1 and the last column's value is equal to the keycount

The mania stage is coded around a 480px height, so each value assigned regarding sizes is based on it. That means all images related to the mania stage (except StageBottom) need to be 1.6 times larger than these values (768px height).
For example the default mania-key is 50x107px in dimensions. Translated into mania values we get "ColumnWidth: 30" (50 / 1,6 ≈ 30), and "LightPosition: 413" (480 - (107 / 1,6) ≈ 413).
Due to this some images should be designed with this scale in mind and the default ColumnWidth. This is critical for images like LighthingN, and LightingL due to their larger sizes or the StageBottom.

You can use other naming methods for the note and key images and even put them in a seperate folder, but you will have to edit the [Mania] sections in the .ini-file manually for every keycount, column, key state, and note part.
You can include a path to the images (e.g.; NoteImage2H: mania/note/green, or StageLeft: stage/8k/left), but only within that skins folder.

StageLeft is shown left from the furthest left column of a stage while StageRight is shown right from the furthest right column of a stage.
StageBottom is positioned in the bottom middle of the mania playfield above the keys. It won't be stretched or resized.

Keyorder
Odd keycounts (1K, 3K, 5K, 7K, and 9K) start with key1 from the outer lanes and change between key2 and key1 up to the centre and use the special key and note in the centre lane.
Even keycounts (2K, 4K, 6K, and 8K) start with key1 from the outer lanes and change between key2 and key1 untill all lanes are filled, when not using SepcialStyle.
When using SpecialStyle on even keycounts the furthest left or right lane will use the special key and note with the other keys ordered like in odd keycounts without the special key.
During co-op play the stages are split in two and are ordered like normal stages separately.

If you don't want to make it a more complex section you can stick to the template files and leave the lines out.
If not available, the mania sections are generated automatically upon changing the mania keybindings / layout in the options on the first time using a clean file.

Mania section lines

1. All lines are put under a [Mania] section followed by the line Keys: n after it. Every key count needs a new [Mania] section, rendering the #K.ini-files from older skins functionless after merging, regardless of skin version.
2. ColumnStart sets the distance between the furthest left column and the screenborder. With this you can shift your stage to the left or right.
3. ColumnRight sets the minimum distance of the furthest right column to the screenborder. This is more noticable on smaller aspect ratios or very high keycounts. If your stage gets too big it will be compressed to not cross this line.
4. ColumnWidth determines the thickness of the columns. Notes and keys are stretched in width to fit the columns. The number of values used should be equal to the keycount (n).
5. ColumnLineWidth determines the thickness of the individual lines seperating the columns. If a value is set to "0" the line won't be displayed and if set to atleast "0.1" the line will be displayed.
   In V2.4 column lines are drawn on both sides of a column when using ColumnSpacing; the value will affect the column's left border and the previous column's right border.
   Since the right stage border also uses a line to separate it from the background aside from the StageRight element, the number of values used should be one higher than the keycount (n+1).
6. ColumnSpacing can be used to seperate columns by a set amount from the other columns. The number of values used should be lower than the keycount (n-1).
7. BarlineHeight determines the thickness of the line that separates each 4 beats or tempo change to split patterns up into readable timing windows.
8. LightingNWidth scales the lighting effect used on single notes for each column. The number of values used should be equal to the keycount (n). Only works on V2.5+.
9. LightingLWidth scales the lighting effect used on hold notes for each column. The number of values used should be equal to the keycount (n). Only works on V2.5+.
10. LightFramesPerSecond sets the framerate of the stagelight.
11. WidthForNoteHeightScale can be used for scaling the height of a note to that of a specific columnwidth. If it is smaller than the currently used lowest ColumnWidth value it appears as a thin note.
12. JudgementLine can determine if a visible judgement line is drawn additionally to the stagehint or not.
13. HitPosition sets on which height the judgementline is drawn at. It is the position where you need to press the keys when the notes are about to pass it.
14. LightPosition sets on which height the stagelight should appear at.
15. ComboPosition sets on which height the combo counter appears at.
16. ScorePosition sets on which height the hitbursts appear at.
17. SpecialStyle indicates on what side the special key is for key counts supporting this function (0 = none, 1 = left, 2 = right).
18. SplitStages allows to split the mania playfield into two stages for better readability.
19. StageSeparation sets the spacing between the split stages.
20. UpsideDown changes between downscroll (0) and upscroll (1) of the notes.
21. With "KeysUnderNotes", notes can be displayed above the keys.
22. NoteBodyStyle determines how the note body is displayed between head and tail for all columns.
    It can be normally stretched, repeated from the tail on to the head, or from the head on to the tail (stretched = 0 / casacding from tail = 1 / cascading from head = 2).
    With NoteBodyStyle# you can set the style for specific columns individually. Only works on V2.5+. Older versions will just stretch the image.
23. KeyFlipWhenUpsideDown allows or prevents the flipping of the keys when "UpsideDown: 1" for all keys and states. Only works on V2.5+.
    For individual columns; KeyFlipWhenUpsideDown# can be used for keys in idle state, and KeyFlipWhenUpsideDown#D for keys in pressed state.
24. NoteFlipWhenUpsideDown allows or prevents the flipping of the notes when "UpsideDown:1" for all note parts. Only works on V2.5+.
    For individual columns; NoteFlipWhenUpsideDown# for single notes, NoteFlipWhenUpsideDown#H for hold note heads, NoteFlipWhenUpsideDown#L for hold note bodies, and NoteFlipWhenUpsideDown#T for hold note tails.
25. KeyImage# lets you set a key in its idle state to a specific column.
26. KeyImage#D lets you set a key in its pressed state to a specific column.
27. NoteImage# lets you set a single note to a specific column.
28. NoteImage#H lets you set the head of a hold note to a specific column.
29. NoteImage#L lets you set the body of a hold note to a specific column.
30. NoteImage#T lets you set the tail of a hold note to a specific column. By default the assigned hold note head is used if no tail is assigned.
31. Colour# changes the colour of the specific column. You can use RGBA to add transparency.
32. ColourLight# colours the stagelight of the specific column. You can use RGBA to add transparency.
33. ColourColumnLine changes the colour of the lines separating columns.
34. ColourBarline changes the colour of the barline separating 4 beats.
35. ColourJudgementLine changes the colour the the judgementline.
36. ColourKeyWarning changes the colour of the keybinding warning shown upon starting a chart.
37. ColourHold changes the colour of the combo counter during hold notes.
38. ColourBreak changes the colour of the combo counter when dropping combo.
39. StageLeft lets you set a custom image for the left stage border.
40. StageRight lets you set a custom image for the right stage border.
41. StageBottom lets you set a custom image for the bottom stage border.
42. StageHint lets you set a custom image for the stage hint.
43. StageLight lets you set a custom image for the stage light.
44. LightingN lets you set a custom image for the lighting used for single notes.
45. LightingL lets you set a custom image for the lighting used for hold notes.
46. WarningArrow lets you set a custom image for the warning arrow before the first notes are showing up.
47. Hit# lets you set a custom image for the individual hitbursts (0, 50, 100, 200, 300, 300g). However, they won't show up on the ranking screen.

[Positioning]

SPOILER

Some infos on anchorpoints
Every element uses 1 of 3 types of anchorpoints.

1. The first type sees a corner of the element as its anchorpoint,
2. the second type sees the centre of the element as its anchorpoint,
3. and the third type sees the centre of an edge of the element as its anchorpoint.

Most of the positions aren't affected by version differences and have a solid spot on the screen.

For some complex positioning problems I created some templates found below.
Redd's Template Pack

This pack contains image and PSD templates for:

1. inputoverlay
2. scorebar with ki elements
3. scorebar with marker element
4. mode-x-med segmented images
5. selection bar for V1 skins
6. selection bar for V2 skins
7. ranking-panel + graph for V1 skins
8. ranking-panel + graph for V2 skins
9. menu-button background for V1 skins (old without thumbnail support, up to V2.1)
10. menu-button background for V2.2 skins (new with thumbnail support)
11. taiko drum elements for V1 skins (also for V2.0)
12. taiko drum elements for V2.1 skins

accompanied by a small text file including some more detailed infos.

[Final words]

I originally intended to put way more stuff in this thread but I don't want to imitate the original skinning tutorial thread. Therefore I mainly focused on skin version and element differences.
Since there is no real elaborate info on animations, mania skinning, and HD elements in the opening there, I included them here.
Let's hope this thread helps you out a lot and makes your skins look more solid in the future.

Have fun and many cool ideas for skinning!!

Princess Jish wrote:

What about creating your own files?

Azzy Dreemurr wrote:

Where is supposed to play key-confirm? If I'm wrong it should play only when sending a message (Pressing enter) but it actually play on literally EVERYTHING I click and/or press enter on something, even when I'm not clicking anything it play.

Someone care to test that?

Haskorion wrote:

osu! won't subtract the colors or separate color channels. They are mostly blended mulitplicatively with the images. For example if you colour selection-tab.png cyan, it will appear purple ingame, not red.

Haskorion wrote:

I just added that column. Along with that I moved most of the remarks and notes about colours into that column as notes.

Feel free to correct me if I use the wrong terminology.

normal
+subtractive

normally, this is what it looks like
+this is what happens to it when it is coloured

Haskorion wrote:

On a side note: lighting.png is still used in osu!taiko during kiai time and can be used on beatmap skins. When I was experimenting with it I added a black background to my slider followcircle and used it as lighting. During osu!taiko it was really prominent due to its size. I never noticed it since the default lighting is just that glow and hidden behind all the notes and images on the hit position.

UO 073 wrote:

I guess so... They both do extremely similar things


(i did it to your image)

How it looks like in osu!

Normal image:
Rainbow image:

subtracted

multiplied

Galvit wrote:

they changed how taqiko works recently, hitcircles converted to greyscale by luminosity before multiplication (same for bar right (not tested) and bar left gets cut off after 220px to the right(SD))

Corne2Plum3 wrote:

What do the taiko font file?

Haskorion wrote:

Button scaling is a mess.
Make button-right 100x5 and see how it messes with button-middle.