forum

Skinnable Files List

posted
Total Posts
85
show more
Topic Starter
Haskorion

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?
Luel Roseline

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?


About spinnerbackground
p/2925069
Topic Starter
Haskorion
About SpinnerBackground: I might have skipped a few pages or never actually really paid attention to all posts, since at that time several new pages came together rather quickly. I never saw it in any skins I downloaded since then, so that's another reason it was not in the list. This is also something that is easily replaceable with a blank image rather than adding a line in comfort for personal mixing.
Topic Starter
Haskorion
Update


I made some small changes to the order of the paragraphs and changed the topic title again to improve my intention with this topic

This update of the title should put more focus onto my skin element list that also ist linked in the skinning related wiki articles, as well on skin version differences like my previous title did.
That's also why the skin version section is the second main section after the general tips. All stuff after that is for more interested people.

The list

The llist is separated into 3 sheets, each focusing on one aspect (images, audio, skin.ini), so if you haven't checked it out already you better get yourself some time and check it out.
softhusky
Thank you~






This is really helpful to beginning skinners like me!
Azzy Dreemurr_old
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?
OsuMe65
comboburst-mania(@2x).png

Works in CE build, not sure in other builds.

:idea: Mania comboburst that appears at the right side of the mania stage. osu!mania exclusive element.
The element will be flipped in-game. By default, the element should face left.
eg. If element is facing left, it will face right in-game, and vice versa.
jinmuyan SAMA

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
What about creating your own files?
Topic Starter
Haskorion

Princess Jish wrote:

What about creating your own files?
I don't get your question.

This is just a simple info thread and not a tutorial that has to be strictly followed.
It lists all currently skinnable image or sound files, that can be loaded.
Files with other names won't be loaded.

If you ask about how to create images you can use image or photo editing programs like Photoshop, GIMP, paint.NET that support transparency.
FoxCat
Just saying but match-confirm sound file is also used when someone is receiving host.
And as stated, match-start is used when receiving a PM or getting HL'ed in chat.

Would be better if these are separated files but well, let see when peppy decide that :D

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?
This, actually happen and is pretty annoying if you have a loud file :<
Topic Starter
Haskorion
Ty for the input, added to the list.
-yuo-
Hey,

I don't know if anyones suggested this or not, but i suggest you add a 'Blending Mode' or 'Shader' column to the image tables, since some items aren't rendered normally. (e.g. mode-#-small, and mania-lighting-L, which use linear dodge (add) [i think] )

Also you can put in this column how things like the 'selection-tab' and 'menu-button-background' are coloured.
I know selection-tab is coloured by subtracting opposite colours, so the green and blue channels are taken away.
But the menu-button-background is coloured differently... i think it uses an overlay that osu generates and sticks it onto the image... i don't really know

This is more for the out-of-the-box skinners... not really for beginners though... it's a bit complicated but useful....

sorry if i bothered you

anyway apart from this, this resource is really good i use it all the time! (and i didn't know some of these items could be skinned!!) good work!
Topic Starter
Haskorion
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.

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.

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 sliderfollowcircle and used it as lighting. During osu!taiko it was really prominent due to its size. I never noticed it since lighting is hidden behind the bar images on the hit position. I also blanked out the taiko-bar-right images. This may be a layer order mistake when the new taiko skin was included.

EDIT: clarified how I found lighting for taiko.
-yuo-

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.
?↓?↓?


i'm pretty sure osu colours it using subtractive... otherwise i would get purple tabs...

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.
Thanks! that was great work! but i would suggest a few things...
make something like...

normal
+subtractive

for coloured items. this means:

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.
sorry for this i kinda got lost... what do you mean?

(sorry if this was criticising)
Topic Starter
Haskorion


Well, not pure cyan (at full saturation). It doesn't get multiplied with a pure red either (220,21,61).


I said none of the colours are seperated into channels or subtracted. If you multiply a colour with pure white it will simply be the colour as if it never got multiplied ( x,x,x * 1,1,1 = x,x,x).
To add subtractive doesn't fit when it is not the right term.

What is subtractive blending?
Subtractive blending just subtracts the colour from the image and mostly leaves the remaining colours.
For example: An image with rainbow gradient gets subtracted by pure red. All colours that contain any red values get subtracted leaving only blue or green colours and making red colours black (1,0.5,0.3 - 1,0,0 = 0,0.5,0.3)

:arrow:

Don't care about the side note. It was just a finding when I checked taiko-glow.png being multiplicative or additve while leaving my lighting as that giant ring.
-yuo-
I guess so... They both do extremely similar things


(i did it to your image)
Topic Starter
Haskorion

UO 073 wrote:

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


(i did it to your image)
You subtracted cyan from the image, not red. Of course it would look like it was multiplied by red.
But osu! does not subtract any colours. osu! multiplies the colours. It even is coded like this in the game. I saw one of peppy's streams where he was working on reworking the menu-button-background tinting. And he used the direct colour, not the opposite one.
Using multiplicative blending is far more logical if you want you tint something in a specific colour. So why would you want to define subtracting the opposite colour if there is a easier way by defining it directly?
If you want another proof just remember that you can change some colours via the skin.ini. You define a colour and it is displayed in that colour, not the opposite one. So why should this principle not apply to any other game intern tinting processes as well?
How it looks like in osu!
Normal image:
Rainbow image:

Just stop spreading more confusion.
-yuo-
sorry about that...

what i meant by my comment was 'i agree'

sorry
HappyRocket88
This is the most useful thread I've seen by far regarding skinning! THANK YOUUUU FOR MAKING THIS! >w<
h3oCharles
Topic Starter
Haskorion
Adding that does not seem logical if it happens only on one occasion (direct replay of autofail). I saved that replay and after watching it again it was a regular D.
MatthewRobo


Hey man why's downloading/printing/copying disabled on the sheet? Even as just a viewer I can't copy stuff and that can be annoying when I want to show a certain section of the sheet to someone else.
Topic Starter
Haskorion

MatthewRobo wrote:



Hey man why's downloading/printing/copying disabled on the sheet? Even as just a viewer I can't copy stuff and that can be annoying when I want to show a certain section of the sheet to someone else.

It's disabled for the following reason:

To prevent redistributing manipulated and/or outdated versions/copies with wrong facts,
while offering a centralised source with correct facts!


I have put a lot of time into this listing and research, I simply don't want others just to claim it as their own findings and change it to their likings for distribution. If something so simple can prevent that, why not use it?

I even have this on the table:

There are three links on this tab:
  1. link to a simple downloadable list (filenames only)
  2. link to this thread
  3. shortcut for writing a forum PM without needing to visit this thread or my profile

So, I'm sorry for keeping it like that, but I don't trust in how poeple would handle a local copy.
-yuo-
Hi, I've just noticed something with menu-background.jpg.


Maybe it'll be good to update the notes for this:

- Make sure that this is a jpg
- this image should not have an '@2x' alternative. The "standard res" is always used and scaled to fill screen.
- because @2x is not used and the original is made to fill screen, it will be very pixelated if the original is not a HD file. It should be recommended that the one and only menu-background is HD, even though it does not have @2x.
h3oCharles
what just yuo said, and also drag and drop on main menu makes SD only
JankoGoo
Haskorion, Das "Osu!Supporter" PNG ist nicht mehr vorhanden. Nur damit du bescheid weißt. <3

Grüße aus NRW. :D
Matix99
Hey, can you put this list somewhere that I can access? Google doesn't let me see anything even when I disable everything like adblock, umatrix and so on. It's not only my problem either, here's some guy on VNDB having that issue with a different google doc three months ago: https://vndb.org/t12603#1
The assumption is that if you've blocked their trackers for long enough, then even if you unblock them they will still hold content hostage and not let you see it(but that also means there's no reason to unblock them ever since it'll never work anyway).
Galvit
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))
Topic Starter
Haskorion

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))

Can you tell me which build this was changed in?
I never tested for the cuttoff and neither did I test with coloured circles before.

Added.
Galvit
That's what annoys me, it's not in changelog

Also it's converted to greyscale by luminance not just disaturation (there is a difference), also bar-right gets greyscaled same way.
Topic Starter
Haskorion
After tinkering a bit in PS I see what you mean.
Added a "converted" entry for the blend modes.

Do you know if more stuff got changed to convert to a grayscale?
Galvit
I noticed changes only when i was skinning taiko
Charles said those changes were made to nerf taiko-mania skins
DragonmonGaming
Whats the file type for fonts that can be used in a osu! skin?
Topic Starter
Haskorion
osu! does not let you change any hardcoded font (like in the menus or chat).

All those old skins with the taiko font-file were used in older versions (I presume pre 2013) and I currently do not see them being used anywhere.
So asking for the file type is a bit redundant.
Corne2Plum3
What do the taiko font file?
RockRoller

Corne2Plum3 wrote:

What do the taiko font file?
taiko uses the same numbers as the other game modes, aka score
Galvit
I'm working on mods selection template now, and I've got some info about button-left/middle/right. All elements are scaled to be 64px in height, button-middle is stretched to fill in middle part, duh, and the total width oh a button is 736px at any aspect ratio.
Topic Starter
Haskorion
Button scaling is a mess.
Make button-right 100x5 and see how it messes with button-middle.

Edited some fields for button image.
Galvit

Haskorion wrote:

Button scaling is a mess.
Make button-right 100x5 and see how it messes with button-middle.
It brakes if you make all elements wider than 736px in sum.
show more
Please sign in to reply.

New reply