Interface skinning 5l5w6b

See also: Interface 9224d

Interface skinning elements are used in multiple game modes or parts of the client's interface.

Main menu 5x2n1n

menu-background.jpg

Notes:

• osu!er required.
• This element is positioned in the centre and is set to cover (fill the entire width and height while keeping its aspect ratio, but crop anything that is outside the game window).
• By default, osu! has a set of background images that it will cycle through.

  • If this element is skinned and the has osu!er tag, this element will override this behaviour.
• This element is used as the playfield if beatmap does not have a background.
• The seasonal background option can affect the visibility of this element.

  • If it is set to Always the seasonal backgrounds will override this element.
  • If it is set to Sometimes the seasonal backgrounds will override this element while they are in active use.
• .jpg extension only.

  • If the image type is .png change the extension to .jpg.

    • If the background is transparent, the background colour will be black.
• The player can drag and drop an image to overwrite the skin's skinned image. This will replace the image in the skin's folder!

---

welcome_text.png

Notes:

• osu!er required.
• This element appears upon starting the client.
• This element folds out and expands, then fades out.

---

menu-snow.png

Notes:

• If not skinned, the current game mode's small icon will be used instead.
• Must be enabled in the options to see.

  • This option may forcibly be enabled during the holidays (Christmas).

Button 371s6h

button-left.png

Notes:

• Use same height as other button pieces.
• Tinting varies by button state.

---

button-middle.png

Notes:

• This element is stretched to fit the needed width.
• Use same height as other button pieces.
• Tinting varies by button state.

---

button-right.png

Notes:

• Use same height as other button pieces.
• Tinting varies by button state.

Cursor 4w2g2e

cursor.png

Notes:

• By default, this element will rotate and expand (on click).
• skin.ini commands:

  • To disable cursor expand (on click), set CursorExpand to 0.
  • To disable cursor rotate, set CursorRotate to 0.

---

cursormiddle.png

Notes:

• This element does not rotate nor expand (on click).
• This element is above the cursor.png element.

---

cursor-smoke.png

Notes:

• This element is used when the player presses the smoke key.

  • By default, the smoke key is bound to C.

---

cursortrail.png

Notes:

• This element is underneath the cursor.png element
• If cursormiddle.png is present, a longer trail is used.
• By default, this element does not rotate.
• skin.ini command:

  • To enable cursortrail rotate, set CursorTrailRotate to 1.

---

cursor-ripple.png

Notes:

• This element is used when the player presses the Left-Click key or Right-Click key on their keyboard or mouse.

  • By default, the Left-Click key is bound to Z.
  • By default, the Right-Click key is bound to X.

Mod icons 2g5ee

Main page: Game Modifiers

---

selection-mod-autoplay.png

---

selection-mod-cinema.png

Notes:

• Click the Auto mod icon to see this icon.

---

selection-mod-doubletime.png

---

selection-mod-easy.png

---

selection-mod-fadein.png

Notes:

• This element is osu!mania-specific.

---

selection-mod-flashlight.png

---

selection-mod-halftime.png

---

selection-mod-hardrock.png

---

selection-mod-hidden.png

Notes:

• For osu!mania, click the Fade In mod icon to see this icon.

---

selection-mod-key1.png

Notes:

• This element is osu!mania-specific.
• Cycle through the xK mods to view.

---

selection-mod-key2.png

Notes:

• This element is osu!mania-specific.
• Cycle through the xK mods to view.

---

selection-mod-key3.png

Notes:

• This element is osu!mania-specific.
• Cycle through the xK mods to view.

---

selection-mod-key4.png

Notes:

• This element is osu!mania-specific.

---

selection-mod-key5.png

Notes:

• This element is osu!mania-specific.
• Cycle through the xK mods to view.

---

selection-mod-key6.png

Notes:

• This element is osu!mania-specific.
• Cycle through the xK mods to view.

---

selection-mod-key7.png

Notes:

• This element is osu!mania-specific.
• Cycle through the xK mods to view.

---

selection-mod-key8.png

Notes:

• This element is osu!mania-specific.
• Cycle through the xK mods to view.

---

selection-mod-key9.png

Notes:

• This element is osu!mania-specific.
• Cycle through the xK mods to view.

---

selection-mod-keycoop.png

Notes:

• This element is osu!mania-specific.

---

selection-mod-mirror.png

Notes:

• This element is osu!mania-specific.

---

selection-mod-nightcore.png

Notes:

• Click the Double Time mod icon to see this icon.

---

selection-mod-nofail.png

---

selection-mod-perfect.png

Notes:

• Click the Sudden Death mod icon to see this icon.

---

selection-mod-random.png

Notes:

• This element is osu!mania-specific.

---

selection-mod-relax.png

Notes:

• This element is osu!, osu!taiko, and osu!catch-specific mod.

---

selection-mod-relax2.png

Notes:

• This element is osu!-specific mod.
• This mod will move the cursor for the player while the player just needs to tap or click.

---

selection-mod-scorev2.png

---

selection-mod-spunout.png

Notes:

• This element is osu!-specific mod.

---

selection-mod-suddendeath.png

---

selection-mod-target.png

• This mod is available in the cuttingedge stream only.
• This element is an osu!-specific mod.

---

selection-mod-freemodallowed.png

• This mod does not have an image in-game.
• This mod does not show up in the mod selection or leaderboards.
• Indicator for plays with certain mods and combinations.

  • Does not show up if only 'Score V2', 'Auto', 'Double Time', 'Nightcore', or 'Half Time' by itself is used, combinations with other mods including them will show the mod.

---

selection-mod-touchdevice.png

• This mod does not have an image in-game.
• This mod does not show up in the mod selection.
• Indicator for plays done using a touchscreen.

  • The client uses a background algorithm to calculate if a play is done with a touchscreen, if too many cursor warps occur it might be applied to a play.

Offset wizard 4o1rs

Main page: Offset Wizard

---

options-offset-tick.png

Notes:

• Tinting varies by tick state.

Playfield 6o371e

play-skip.png

Notes:

• Animation name: play-skip-{n}.png

---

play-unranked.png

Notes:

• This element is shown when using mods that disable score submission.

---

play-warningarrow.png

Notes:

• Beatmap skinnable status is suspected to be a bug.
• Tinting varies by version.

  • pause screen:

    • all versions: tinted blue
  • exiting breaks:

    • v1.0: tinted white
    • v2.0+: tinted red

---

arrow-pause.png

Notes:

• Beatmap skinnable status is suspected to be a bug.
• If skinned, this element overrides play-warningarrow.png.
• This element is used in the pause and fail screens.
• Not tinted.

---

arrow-warning.png

Notes:

• Beatmap skinnable status is suspected to be a bug.
• If skinned, this element overrides play-warningarrow.png.
• Used for the end break warning.
• Not tinted.

---

masking-border.png

Notes:

• Used when playing with 4:3 storyboards on widescreen.
• While beatmapping, disable Widescreen in song setup for this to appear.
• This element is stretched to fit the needed area.
• The right pillar is flipped horizontally.

---

multi-skipped.png

Notes:

• This element is used in multi games, seen next to the player's score (on the sides) when the player votes to skip the intro of a beatmap.

---

section-fail.png

Notes:

• This element is seen when the player has a low amount of HP, about less than 50%, during a long enough break.

---

section-.png

Notes:

• This element is seen when the player has a high amount of HP, about more than 50%, during a long enough break.

Countdown h4a1b

count1.png

Notes:

• This should either say "1" or "3".

---

count2.png

Notes:

• This should say "2".

---

count3.png

Notes:

• This should either say "3" or "1".

---

go.png

Notes:

• This should say "Go!".

---

ready.png

Notes:

• This should say "Are You Ready?" or "Ready?".

Hit bursts 5d5a5h

Main page: Skinning/FAQ § Ranking screen hierarchy

---

hit0.png

Notes:

• Animation name: hit0-{n}.png
• Animation rate is fixed to 60 FPS.
• If animation is used:

  • animation does not loop, but the last frame persists until it fades out.
  • single frame behaviour is not used.

---

hit50.png

Notes:

• Animation name: hit50-{n}.png
• Animation rate is fixed to 60 FPS.
• If animation is used:

  • animation does not loop, but the last frame persists until it fades out.
  • single frame behaviour is not used.

---

hit100.png

Notes:

• Animation name: hit100-{n}.png
• Animation rate is fixed to 60 FPS.
• If animation is used:

  • animation does not loop, but the last frame persists until it fades out.
  • single frame behaviour is not used.

---

hit100k.png

Notes:

• Animation name: hit100k-{n}.png
• Animation rate is fixed to 60 FPS.
• If animation is used:

  • animation does not loop, but the last frame persists until it fades out.
  • single frame behaviour is not used.

---

hit300.png

Notes:

• Animation name: hit300-{n}.png
• Animation rate is fixed to 60 FPS.
• If animation is used:

  • animation does not loop, but the last frame persists until it fades out.
  • single frame behaviour is not used.

---

hit300g.png

Notes:

• Animation name: hit300g-{n}.png
• Animation rate is fixed to 60 FPS.
• If animation is used:

  • animation does not loop, but the last frame persists until it fades out.
  • single frame behaviour is not used.

---

hit300k.png

Notes:

• Animation name: hit300k-{n}.png
• Animation rate is fixed to 60 FPS.
• If animation is used:

  • animation does not loop, but the last frame persists until it fades out.
  • single frame behaviour is not used.
• This element is not shown on the ranking screen.

Input overlay 1y5p2h

inputoverlay-background.png

Notes:

• This element is positioned at 320px height.
• Since the image is rotated, the origin on the image itself is Top Left.
• This element is used in osu! and osu!catch.
• This element is rotated 90 degrees clockwise and stretched by 1.05x in-game.
• Must be enabled in the options to see.

---

inputoverlay-key.png

Notes:

• This element is used in osu! and osu!catch.
• Positioning varies for each key:

  • 24px away from screenborder
  • K1/L: at 350px height
  • K2/R: at 398px height
  • M1/D: at 446px height
  • M2: at 492px height
• Toggleable in the options.
• Shrinks briefly when the keys are pressed.
• Tinting varies by button location and state:

  • White, if key is not pressed.
  • Yellow, if the key is pressed and located on the top half.
  • Purple, if the key is pressed and located on the bottom half.

Pause screen 13c72

pause-overlay.png

Notes:

• When the game is paused, the playfield will be dimmed and this file will overlay on top of it.
• This element will not stretch to fit.
• Full image height is 768px.
• Smaller images are shown with transparent borders while larger images are partially shown.
• This can also be a .jpg file (and can have the .jpg extension).

  • osu! prefers .png over .jpg.

---

fail-background.png

Notes:

• When the player has failed, the playfield will be dimmed and this file will overlay on top of it.
• This element will stretch to fit.
• This can also be a .jpg file (and can have the .jpg extension).

  • osu! prefers .png over .jpg.

---

pause-back.png

Notes:

• This element is positioned at 576px height.
• This element is seen in the fail and pause screens.

---

pause-continue.png

• This element is positioned at 224px height.
• This element is seen in the pause screen.

---

pause-replay.png

Notes:

• This element appears on the ranking screen (after finishing a map or viewing a score).
• This element is positioned at 672px height or at 576px height, if pause-retry.png is not available.

---

pause-retry.png

Notes:

• Positioning varies:

  • pause or fail screen:

    • Centre, positioned at 400px height
  • ranking screen:

    • Right, positioned at 576px height
• This element appears on the ranking screen after finishing a map and on the pause and fail screens.

Scorebar 2w575g

scorebar-bg.png

Notes:

• This element has no size restrictions.
• When used in osu!mania, this element is rotated 90 degrees anti-clockwise, scaled to 0.7x size, and placed at the bottom right of stage.

---

scorebar-colour.png

Notes:

• Animation name: scorebar-colour-{n}.png.
• Blend mode varies:

  • Multiplicative, if scorebar-marker.png is used.

    • Tinted black over time when near critical zone and tinted red in the critical zone.
  • Normal, otherwise.
• Positioning varies:

  • If a marker is used, positioned at (12,12).
  • Otherwise, positioned at (5,16).
• When used in osu!mania, this element is rotated 90 degrees anti-clockwise, scaled to 0.7x size, and placed at the bottom right of stage.

---

scorebar-ki.png

Notes:

• scorebar-marker.png has higher priority.
• This element represents the "ing" zone.
• This element is not used in osu!mania.
• Y-position at 16; x-position is placed at the end of the cropped scorebar-colour.png
• A scorebar-colour.png is required for this element to appear.

---

scorebar-kidanger.png

Notes:

• scorebar-marker.png has higher priority.
• this element represents the "warning" zone
• This element is not used in osu!mania
• Y-position at 16; x-position is placed at the end of the cropped scorebar-colour.png
• A scorebar-colour.png is required for this element to appear.

---

scorebar-kidanger2.png

Notes:

• scorebar-marker.png has higher priority.
• This element represents the "critical" zone.
• This element is not used in osu!mania
• Y-position at 16; x-position is placed at the end of the cropped scorebar-colour.png
• A scorebar-colour.png is required for this element to appear.

---

scorebar-marker.png

Notes:

• If skinned, this element overrides the scorebar-ki.png, scorebar-kidanger.png, and scorebar-kidanger2.png elements.
• The marker fades out if the player reaches the critical zone.
• This element is not used in osu!mania.
• Y-position at 16; x-position is placed at the end of the cropped scorebar-colour.png.

Score numbers 2cn5x

score-0.png

Notes:

• By default, this is also used for the combo numbers.
• Blend mode varies:

  • If used for combo counter:

    • In osu! and osu!catch, additive for the expanding after images.
    • Additionally in osu!catch, the after images are tinted using the combo colour of the fruit.
    • In osu!mania, multiplicative.

---

score-1.png

Notes:

• By default, this is also used for the combo numbers.
• Blend mode varies:

  • If used for combo counter:

    • In osu! and osu!catch, additive for the expanding after images.
    • Additionally in osu!catch, the after images are tinted using the combo colour of the fruit.
    • In osu!mania, multiplicative.

---

score-2.png

Notes:

• By default, this is also used for the combo numbers.
• Blend mode varies:

  • If used for combo counter:

    • In osu! and osu!catch, additive for the expanding after images.
    • Additionally in osu!catch, the after images are tinted using the combo colour of the fruit.
    • In osu!mania, multiplicative.

---

score-3.png

Notes:

• By default, this is also used for the combo numbers.
• Blend mode varies:

  • If used for combo counter:

    • In osu! and osu!catch, additive for the expanding after images.
    • Additionally in osu!catch, the after images are tinted using the combo colour of the fruit.
    • In osu!mania, multiplicative.

---

score-4.png

Notes:

• By default, this is also used for the combo numbers.
• Blend mode varies:

  • If used for combo counter:

    • In osu! and osu!catch, additive for the expanding after images.
    • Additionally in osu!catch, the after images are tinted using the combo colour of the fruit.
    • In osu!mania, multiplicative.

---

score-5.png

Notes:

• By default, this is also used for the combo numbers.
• Blend mode varies:

  • If used for combo counter:

    • In osu! and osu!catch, additive for the expanding after images.
    • Additionally in osu!catch, the after images are tinted using the combo colour of the fruit.
    • In osu!mania, multiplicative.

---

score-6.png

Notes:

• By default, this is also used for the combo numbers.
• Blend mode varies:

  • If used for combo counter:

    • In osu! and osu!catch, additive for the expanding after images.
    • Additionally in osu!catch, the after images are tinted using the combo colour of the fruit.
    • In osu!mania, multiplicative.

---

score-7.png

Notes:

• By default, this is also used for the combo numbers.
• Blend mode varies:

  • If used for combo counter:

    • In osu! and osu!catch, additive for the expanding after images.
    • Additionally in osu!catch, the after images are tinted using the combo colour of the fruit.
    • In osu!mania, multiplicative.

---

score-8.png

Notes:

• By default, this is also used for the combo numbers.
• Blend mode varies:

  • If used for combo counter:

    • In osu! and osu!catch, additive for the expanding after images.
    • Additionally in osu!catch, the after images are tinted using the combo colour of the fruit.
    • In osu!mania, multiplicative.

---

score-9.png

Notes:

• By default, this is also used for the combo numbers.
• Blend mode varies:

  • If used for combo counter:

    • In osu! and osu!catch, additive for the expanding after images.
    • Additionally in osu!catch, the after images are tinted using the combo colour of the fruit.
    • In osu!mania, multiplicative.

---

score-comma.png

Notes:

• By default, this is also used for the combo numbers.
• This element is for the accuracy.
• The usage is dependent on your selected language.

---

score-dot.png

Notes:

• By default, this is also used for the combo numbers.
• This element is for the accuracy.
• The usage is dependent on your selected language.

---

score-percent.png

Notes:

• This element is for the accuracy.

---

score-x.png

Notes:

• This element is for the combo, only used in osu!.
• Blend mode varies:

  • If used for combo counter:

    • Additive for the expanding after images.

Ranking grades 3b6w6i

ranking-XH.png

Notes:

• Positioning varies:

  • 192px away from right screenborder
  • v1.0: at 272px height
  • v2.0+: at 320px height

---

ranking-XH-small.png

Notes:

• Origin varies:

  • Break: Centre
  • Song Select : Left
  • scores: Centre

---

ranking-X.png

Notes:

• Positioning varies:

  • 192px away from right screenborder
  • v1.0: at 272px height
  • v2.0+: at 320px height

---

ranking-X-small.png

Notes:

• Origin varies:

  • Break: Centre
  • Song Select : Left
  • scores: Centre

---

ranking-SH.png

Notes:

• Positioning varies:

  • 192px away from right screen border
  • v1.0: at 272px height
  • v2.0+: at 320px height

---

ranking-SH-small.png

Notes:

• Origin varies:

  • Break: Centre
  • Song Select : Left
  • scores: Centre

---

ranking-S.png

Notes:

• Positioning varies:

  • 192px away from right screen border
  • v1.0: at 272px height
  • v2.0+: at 320px height

---

ranking-S-small.png

Notes:

• Origin varies:

  • Break: Centre
  • Song Select : Left
  • scores: Centre

---

ranking-A.png

Notes:

• Positioning varies:

  • 192px away from right screen border
  • v1.0: at 272px height
  • v2.0+: at 320px height

---

ranking-A-small.png

Notes:

• Origin varies:

  • Break: Centre
  • Song Select : Left
  • scores: Centre

---

ranking-B.png

Notes:

• Positioning varies:

  • 192px away from right screen border
  • v1.0: at 272px height
  • v2.0+: at 320px height

---

ranking-B-small.png

Notes:

• Origin varies:

  • Break: Centre
  • Song Select : Left
  • scores: Centre

---

ranking-C.png

Notes:

• Positioning varies:

  • 192px away from right screen border
  • v1.0: at 272px height
  • v2.0+: at 320px height

---

ranking-C-small.png

Notes:

• Origin varies:

  • Break: Centre
  • Song Select : Left
  • scores: Centre

---

ranking-D.png

Notes:

• Positioning varies:

  • 192px away from right screen border
  • v1.0: at 272px height
  • v2.0+: at 320px height

---

ranking-D-small.png

Notes:

• Origin varies:

  • Break: Centre
  • Song Select : Left
  • scores: Centre

Ranking screen 363a19

ranking-accuracy.png

Notes:

• Can be animated, but only the zeroth frame will be used.

  • Animation name: ranking-accuracy-{n}.png
• Positioning varies:

  • v1.0: (291,500)
  • v2.0+: (291,480)

---

ranking-graph.png

Notes:

• Positioning varies:

  • v1.0: (256,576)
  • v2.0+: (256,608)
• The box itself is 301x141.
• The first 7 pixels at the top and at the left should be transparent.

  • In v1 it's shifted down by 8px.

---

ranking-maxcombo.png

Notes:

• Can be animated, but only the zeroth frame will be used.

  • Animation name: ranking-maxcombo-{n}.png
• Positioning varies:

  • v1.0: (8,500)
  • v2.0+: (8,480)

---

ranking-.png

Notes:

• Positioning varies:

  • v1.0: (0,74)
  • v2.0+: (0,102)

---

ranking-perfect.png

Notes:

• Can be animated, but only the zeroth frame will be used.

  • Animation name: ranking-perfect-{n}.png
• Positioning varies:

  • v1.0: (320,688)
  • v2.0+: (416,688)

---

ranking-title.png

Notes:

• x-position 32px away from the right side

---

ranking-replay.png

Notes:

• Position varies:

  • at 672px height.
  • at 576px height, if retry is not available.

---

ranking-retry.png

Notes:

• Positioned at 576px height.
• If skinned, this element overrides pause-retry.png.

---

ranking-winner.png

Notes:

• This element is used in multi only.

Score entry 25271b

scoreentry-0.png

Notes:

• This element is used for the in-game leaderboards and input overlay.

  • For input overlay, the initial button labels are not skinnable.
• Tinting depends on use:

  • Score: white
  • Combo: cyan
  • Input overlay: use InputOverlayText value from skin.ini or black, if not defined
• Origin varies on use:

  • Score: Top Left
  • Combo: Top Right
  • Rank: Top Right
  • Input overlay: Top

---

scoreentry-1.png

Notes:

• This element is used for the in-game leaderboards and input overlay.

  • For input overlay, the initial button labels are not skinnable.
• Tinting depends on use:

  • Score: white
  • Combo: cyan
  • Input overlay: use InputOverlayText value from skin.ini or black, if not defined
• Origin varies on use:

  • Score: Top Left
  • Combo: Top Right
  • Rank: Top Right
  • Input overlay: Top

---

scoreentry-2.png

Notes:

• This element is used for the in-game leaderboards and input overlay.

  • For input overlay, the initial button labels are not skinnable.
• Tinting depends on use:

  • Score: white
  • Combo: cyan
  • Input overlay: use InputOverlayText value from skin.ini or black, if not defined
• Origin varies on use:

  • Score: Top Left
  • Combo: Top Right
  • Rank: Top Right
  • Input overlay: Top

---

scoreentry-3.png

Notes:

• This element is used for the in-game leaderboards and input overlay.

  • For input overlay, the initial button labels are not skinnable.
• Tinting depends on use:

  • Score: white
  • Combo: cyan
  • Input overlay: use InputOverlayText value from skin.ini or black, if not defined
• Origin varies on use:

  • Score: Top Left
  • Combo: Top Right
  • Rank: Top Right
  • Input overlay: Top

---

scoreentry-4.png

Notes:

• This element is used for the in-game leaderboards and input overlay.

  • For input overlay, the initial button labels are not skinnable.
• Tinting depends on use:

  • Score: white
  • Combo: cyan
  • Input overlay: use InputOverlayText value from skin.ini or black, if not defined
• Origin varies on use:

  • Score: Top Left
  • Combo: Top Right
  • Rank: Top Right
  • Input overlay: Top

---

scoreentry-5.png

Notes:

• This element is used for the in-game leaderboards and input overlay.

  • For input overlay, the initial button labels are not skinnable.
• Tinting depends on use:

  • Score: white
  • Combo: cyan
  • Input overlay: use InputOverlayText value from skin.ini or black, if not defined
• Origin varies on use:

  • Score: Top Left
  • Combo: Top Right
  • Rank: Top Right
  • Input overlay: Top

---

scoreentry-6.png

Notes:

• This element is used for the in-game leaderboards and input overlay.

  • For input overlay, the initial button labels are not skinnable.
• Tinting depends on use:

  • Score: white
  • Combo: cyan
  • Input overlay: use InputOverlayText value from skin.ini or black, if not defined
• Origin varies on use:

  • Score: Top Left
  • Combo: Top Right
  • Rank: Top Right
  • Input overlay: Top

---

scoreentry-7.png

Notes:

• This element is used for the in-game leaderboards and input overlay.

  • For input overlay, the initial button labels are not skinnable.
• Tinting depends on use:

  • Score: white
  • Combo: cyan
  • Input overlay: use InputOverlayText value from skin.ini or black, if not defined
• Origin varies on use:

  • Score: Top Left
  • Combo: Top Right
  • Rank: Top Right
  • Input overlay: Top

---

scoreentry-8.png

Notes:

• This element is used for the in-game leaderboards and input overlay.

  • For input overlay, the initial button labels are not skinnable.
• Tinting depends on use:

  • Score: white
  • Combo: cyan
  • Input overlay: use InputOverlayText value from skin.ini or black, if not defined
• Origin varies on use:

  • Score: Top Left
  • Combo: Top Right
  • Rank: Top Right
  • Input overlay: Top

---

scoreentry-9.png

Notes:

• This element is used for the in-game leaderboards and input overlay.

  • For input overlay, the initial button labels are not skinnable.
• Tinting depends on use:

  • Score: white
  • Combo: cyan
  • Input overlay: use InputOverlayText value from skin.ini or black, if not defined
• Origin varies on use:

  • Score: Top Left
  • Combo: Top Right
  • Rank: Top Right
  • Input overlay: Top

---

scoreentry-comma.png

Notes:

• This element is used for the in-game leaderboards.
• This element is used as the decimal separator.

  • Usage depends on your selected language.
• Tinting depends on use:

  • Score: white
  • Combo: cyan
• Origin varies on use:

  • Score: Top Left
  • Combo: Top Right

---

scoreentry-dot.png

Notes:

• This element is used for the in-game leaderboards.
• This element is used as the decimal separator.

  • Usage depends on your selected language.
• Tinted white.

---

scoreentry-percent.png

Notes:

• This element is used for the in-game leaderboards.
• This element is used in Multi games when the win condition is set to Accuracy.
• Tinted white.

---

scoreentry-x.png

Notes:

• This element is used for the in-game leaderboards.
• This element is used as the multiplier symbol.
• Tinted cyan.

Song selection 2y1m3b

menu-back.png

Notes:

• Animation name: menu-back-{n}.png.
• The native back button is not skinnable.

  • If this element is skinned, it will override the new one everywhere, except for the options.

---

menu-button-background.png

Notes:

• Skin versions 2.2+ can thumbnails (must be enabled in the options) for song selection

  • Thumbnails get positioned 9px away from the left image border
  • Thumbnail size is 115x85
• This element is used in various places:

  • scoreboards in song selection
  • button for the beatmap difficulty in song selection
  • scoreboards on the left while playing
  • button that shows the selected beatmap while waiting in a room in multiplayer
• Tinting varies by button state.

---

rank-forum.png

Notes:

• Any pixels outside of the 25x25 square will be cut off.

---

selection-mode.png

Notes:

• In v1.0, positioning is 87px away from the bottom.

---

selection-mode-over.png

Notes:

• Hover over selection-mode.png to see.
• In v1.0, positioning is 87px away from the bottom.

---

selection-mods.png

Notes:

• In v1.0, positioning is 87px away from the bottom.

---

selection-mods-over.png

Notes:

• Hover over selection-mods.png to see.
• In v1.0, positioning is 87px away from the bottom.

---

selection-random.png

Notes:

• In v1.0, positioning is 87px away from the bottom.

---

selection-random-over.png

Notes:

• Hover over selection-random.png to see.
• In v1.0, positioning is 87px away from the bottom.

---

selection-options.png

Notes:

• In v1.0, positioning is 87px away from the bottom.

---

selection-options-over.png

Notes:

• Hover over selection-options.png to see.
• In v1.0, positioning is 87px away from the bottom.

---

selection-tab.png

Notes:

• Depending on the client's window size, 4 to 5 tabs will be displayed.

---

songselect-bottom.png

Notes:

• Stretches to 100% of screen width.
• Making this element too tall will prevent mouse clicks from interacting with elements below it.

---

songselect-top.png

Notes:

• Rightmost few pixels repeat from a certain point

  • Repetitions are layered below the initial asset
  • Their starting point varies depending on 's in-game resolution

---

star.png

Notes:

• This element is used for difficulty star ratings (seen in song selection).

  • v2.2+ will scale down the last star, if necessary
  • v2.1- will crop the last star, if necessary
• Tinting depends on the state of menu-button-background.png

---

star2.png

Notes:

• This element is used for song selection (the stars that fly from right to left), cursor, kiai time, combobursts.

Mode select 4q5o70

mode-osu.png

Notes:

• This element flashes in the centre of the song select screen in respect of the song's BPM.
• Select osu! for this to be visible.

---

mode-taiko.png

Notes:

• This element flashes in the centre of the song select screen in respect of the song's BPM.
• Select osu!taiko for this to be visible.

---

mode-fruits.png

Notes:

• This element flashes in the centre of the song select screen in respect of the song's BPM.
• Select osu!catch for this to be visible.

---

mode-mania.png

Notes:

• This element flashes in the centre of the song select screen in respect of the song's BPM.
• Select osu!mania for this to be visible.

---

mode-osu-med.png

Notes:

• This element is used inside the game mode selection dropdown menu.
• Click on selection-mode.png to see.

---

mode-taiko-med.png

Notes:

• This element is used inside the game mode selection dropdown menu.
• Click on selection-mode.png to see.

---

mode-fruits-med.png

Notes:

• This element is used inside the game mode selection dropdown menu.
• Click on selection-mode.png to see.

---

mode-mania-med.png

Notes:

• This element is used inside the game mode selection dropdown menu.
• Click on selection-mode.png to see.

---

mode-osu-small.png

Notes:

• This element is on top of the selection-mode.png element.
• Select osu! for this to be visible.
• If the menu-snow.png element is not skinned, this element will be used if it is selected.

---

mode-taiko-small.png

Notes:

• This element is on top of the selection-mode.png element.
• Select osu!taiko for this to be visible.
• If the menu-snow.png element is not skinned, this element will be used if it is selected.

---

mode-fruits-small.png

Notes:

• This element is on top of the selection-mode.png element.
• Select osu!catch for this to be visible.
• If the menu-snow.png element is not skinned, this element will be used if it is selected.

---

mode-mania-small.png

Notes:

• This element is on top of the selection-mode.png element.
• Select osu!mania for this to be visible.
• If the menu-snow.png element is not skinned, this element will be used if it is selected.