2D girl lover wrote:

I have read the Animation part, it really good idea for skinner....
i just like to ask hit0,hit50,hit100,hit100k,hit300 and hit300g also animation or not

hit0,hit50,hit100,hit100k,hit300 and hit300g also animation...

and also the lightingL and lightingN is animasion or not

lightingL and lightingN is animasion too....

all that is my hit animation Item,(i make it my self but the lighting it not from my skin)

ReddScorn wrote:

osu! prioritizes old behaviour over new behaviour if not forced.

Kyuunei wrote:

ReddScorn wrote:

osu! prioritizes old behaviour over new behaviour if not forced.

osu! will force new skin behavior if you added 'Version: 2' in skin .ini under general options. Just in case you didn't know.

Garygoh884 wrote:

I don't have any idea on how the alignment of the font sprites work and how they are positioned.

ReddScorn wrote:

Garygoh884 wrote:

I don't have any idea on how the alignment of the font sprites work and how they are positioned.

Like what sprites? The Score in the top right corner, the combo count at the bottom left? They seem rather self explainatory when checking their dimensions and the FontOverlap in the skin.ini file.
I will include anchorpoints for the first digit shown on the score, combo count, accuracy score, hitbursts, hitburstcounts and more related to the ranking panel in a later edit.

Garygoh884 wrote:

For my skin, I use font sprites each with fixed height and different widths. The combo counter on the bottom left of the screen and the hitcircle numbers worked perfectly with the defined Overlap value, but it appears overlapped for the score and accuracy on the top right of the screen. (Assuming that I used the same font prefix as defined in my skin.ini, for which both ScorePrefix and HitcirclePrefix have the same prefixes)

I seemed that I couldn't get the math of how the font sprites appear on the score located on the top right of the screen...

YayMii wrote:

Here's also something you missed: When the skin has particles, the matching hitnumbers will use a different fade-in animation and will appear behind the hitcircles (rather than in front).
I'm not sure if people are aware of this, and personally I think that it's significant enough that people who don't even use particles should have invisible particle#.png files in their skin anyway.

darkmiz wrote:

Anyone know what star3.png is?

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