osu!
Personal tools
Namespaces
Variants
Actions
Please be aware that the osu!wiki will be moving to GitHub.
You won't be able to edit articles soon so make sure to learn how to use GitHub.
Go to the new home of the osu!wiki

Skinning Tutorial (Standard)

From osu!wiki
Jump to: navigation, search


Other Languages


Work.png
Page in progress. Jump in the bandwagon if you can improve the page.


Osu!sys os.png

Skinning Skin.ini
Tutorial » Interface Standard Taiko Catch the Beat Mania Sounds
Skin elements » Interface Standard Taiko Catch the Beat Mania Sounds


Contents


Standard Elements

The main point of skinning. It’s good to keep the image sizes the same as on the originals, but this is not a rule. I will present and explain every part of standard skin elements.

Default numbers

Default numbers - These numbers are used on hitcircles, as counter for actual circle combo. Kinda misleading naming, don't you think? Be aware of using something else than arabic numbers. Might be a little complicated with combo 10 and up (Roman numbers for example, it's impossible to make 10 as X, 11 as XI etc.).

ST 026.jpg

If you feel like your numbers are too far apart or too cramped you can use HitCircleOverlap in the skin.ini under the [Fonts] section.

Positive integers will move the numbers nearer to each other while negative values will add more space between numbers.


Another function in the skin.ini is HitCirclePrefix. It can be used to derivate in the naming scheme of the numbers.

  • Example: Using "HitCirclePrefix: character" lets osu! search for images containing "character-#" in your skin's folder and load these instead of the images containing "default-#" for the hitcircle numbers.
    • This can be combined with pathing: "HitCirclePrefix: numbers/character" lets osu! search for the folder "numbers" in your skin's root folder and searches for images containing "character-#" in this folder. If found osu! will load the images from there instead of the images containing "default-#" from the root folder for the hitcircle numbers.

Hitobject

Hitcircle and Hitcircleoverlay

The Hitcircle and Hitcircleoverlay are one of the key parts of standard skinning. Together with the default-numbers, they create the standard hit note:

ST 035.jpg

While making the hitcircle remember about it being colored by combos. Avoid using too much dark colours since they can become unreadable on darker backgrounds or at full background dim. Some people like when the hitcircle is semi-transparent, it helps them with reading streams, overlaps, etc.

Hitcircleoverlay - used to make your hitcircle more visible! It isn't affected by combo colours so you can make them in whatever way/colour you want. Remember to make it slightly larger than the hitcircle and transparent in the middle to show the hitcircle.

Examples

ST 036.jpg ST 037.jpg ST 038.jpg ST 039.jpg


Hitcircleselect

Hitcircleselect is a sprite for the "selected object" in beatmap editor. It's a blue glow on the picture.

ST 040.jpg


Approachcircle

The Approachcircle is an important part of gameplay. It is a circle that tells you when you need to hit a circle. Approachcircles get coloured to the same colours as the hitcircles so try to make it grey-scaled or preferably, white. While using "Hidden" mod, approachcircles are no longer shown except for the first object of the map (can be enabled or disabled in the options).

ST 005.jpg

It's recommended to keep them in the same shape as the hitcircle, since players may get confused if other shapes are used.

Examples

ST 006.jpg ST 007.jpg

Follow-point

A special element that directs you to another hitcircle/slider of the same combo chain. Appears only at longer distance between notes. They can also be animated.

ST 111.jpg ST 112.jpg


Lighting

Lighting is part of the hitcircle explosion. It appears behind the hitcircle after hitting it. You can also see it behind the hitcircle during kiai time in a beatmap. Please, try to avoid making it very large, since it's expanding after being hit. If you want it to be visible behind the hitcircle during kiai time, simply make it a little larger than the hitcircle.
If you find it too distracting you can disable it in the options.

In the default skin it's just a glow:

ST 041.jpg

Examples

ST 043.jpg ST 044.jpg

Sliders

Let's begin with list of parts that are related to the slider.

  • Sliderb - While making it, avoid making it larger than the slider. The sliderball can be animated but its naming scheme is a little different that other animations - sliderb0, sliderb1, sliderb2, sliderb3 etc.
  • Sliderfollowcircle - When you are going to make it, try to keep it's size and shape, since it shows the holding area of the sliderball, changing it might confuse players. It can also be animated.
  • Reversearrow - An arrow that bounces the slider ball back the same way it came from. If you are going to use something else than arrow, remember to make it visible as possible, facing to the right and not larger than the hitcircle. Depending on the sliders' path, it gets rotated and mirrored to face the direction it gets bounced back to.
  • Sliderscorepoint - A minor slider tick icon that appears on sliders.
  • Sliderpoint10 - A number of points that appears when you catch a slider tick with the sliderball. This only works for skin version 1.
  • Sliderpoint30 - A number of points that appears when you hit start of slider correctly and when slider ball hit reverse arrow. This only works for skin version 1.
  • SliderStyle - Allows you to change inner part of slider. Check the skin.ini page for more info. The cuttingedge release stream forces the new sliderstyle (2).

ST 100.jpg

Examples

ST 101.jpg ST 102.jpg ST 103.jpg ST 104.jpg

Slidercircles

You can skin the slidercircles individually. Normally the hitcircle will be used, but they will override the hitcircle on the sliderstart or sliderend along with the overlays.

  • Sliderstartcircle - overrides the hitcircle on the sliderstart. It gets colored to the current combo colour.
  • Sliderstartcircleoverlay - adds an additional new overlay above the sliderstartcircle. It behaves like the normal hitcircleoverlay.
  • Sliderendcircle - overrides the hitcircle on the sliderend. It gets colored to the current combo colour.
  • Sliderendcircleoverlay - adds an additional new overlay above the sliderendcircle. It behaves like the normal hitcircleoverlay.



Addimage.png
It has been requested that image(s) be uploaded and added to this page or section.

Please remove this template once the image(s) have been uploaded and applied.


Hitbursts

Hitbursts are "explosions" that appear in front of correctly clicked circles, sliders, or spinners. In other words - 300,100,50 and miss. This is very important part of standard mode skinning. It can really how you read a map. NEVER make them larger than template hitbursts. They stay for up to a second and can cover other objects, especially on higher difficulties with higher note density, stacked notes, or hitcircles hidden beneath a slider.

ST 032.jpg ST 032n.jpg

Let's begin with a small gameplay explanation when you are getting 300k or 300g. 300.png - you are getting this one for correctly hitting a note or finish a full slider. 300k.png/100k.png - "Katu" is for a correct hit at the last note of a combo chain but you got at least one 100 sometime during the combo (green katu is for hitting last note incorrectly). 300g.png - "Geki" is for a correctly finished combo chain (you have gained 300s on every note and slider in combo chain)

People have different preferences. Making small or blank hitbursts makes reading kinda easy but making something creative but still not that distractive might be a little harder. I will show few examples:

ST 033.jpg ST 034.jpg

Hitbursts can be animated, simply like other animations - hit300-0.png, hit300-1.png,hit300-2 etc. but remember that animation will be fast and is not affected by "Animation Frame Rate" from skin.ini.
Additionally the ranking screen will use the first frame (-0) of the animation. On osu!standard, the ranking screen allows for non-animated images to be used for the ranking screen, while the animated hitburst is used for gameplay only.

Particle

Particles can be used in addition to Hitbursts when the Hitcircle is clicked. Particles use small images (only a couple of pixels wide), that will "explode" in an animation generated by the game. There are three particle images: particle50.png, particle100.png and particle300.png. Each will be used corresponding with the accuracy of the hit. Particles give a nice visual effect, but are uncommon in skins since they can be distracting. Some skins may also use star2.png as another small particle that displays on the selected Beatmap in the menu, is used alongside Combobursts and falls from the cursor during Kiai time.

PART.jpg

Combobursts

Combobursts are characters that appears at specific combo from left or right side of screen. Recommended size is 768x500px but you can do it wider. Remember to make the comboburst characters (or whatever it is) appearing from left side while in the folder. Also adding any text to combobursts does not work well as osu! mirrors the images when they appear from the right side. To add several combobursts follow this naming rule: comboburst-0, combourst-1, combobursts-2, etc.

I have noticed one thing, many people simply don't know how to correctly crop a character out of picture and they are just using magic wand tool and delete selected area… please don't do that! It often leave many white parts or even removes something from your character… If you don't know how to cut your character out of picture, please check these 2 small tutorials:

Cropping Image Tutorials

Examples

ST 014.jpg ST 015.jpg ST 016.jpg ST 017.jpg

Spinner

Old style spinner

ST 106.jpg

Old style spinners can be used by all skin versions.

  • Spinner-approachcircle - Works in similar way as the approachcircle, but this one tells you how long you have to spin.
  • Spinner-background - Background that is shown during a spinner. It is centered on the same position as the spinner-circle. On skins using skin version 2 or higher, a background will force osu! to use the old style spinner
  • Spinner-circle - Another main part of spinner. Please be careful while making it, because you can make it wobbly which is a bad thing.
  • Spinner-clear - Text that appears whenever you have spinned long/fast enough to pass spinner.
  • Spinner-metre - Progress bar of every spinner. You need raise it to certain point to pass a spinner. Since it was implemented before the widescreen support it is positioned differently than the background. It has its anchor at the top left of the image and is positioned 512 pixel to the left of the spinner-circle centre. The ideal size for the metre is 1024x692.
  • Spinner-osu - Appears after clearing spinner. This image only shows up on skin version 1.
  • Spinner-rpm - Area with "Spin per Minute" text on it.
  • Spinner-spin - Text that simply tells you to spin through spinner.
  • Various options in skin.ini - Check out Skin.ini.

Examples

ST 107.jpg ST 108.jpg ST 109.jpg ST 110.jpg

New style spinner

The new style spinner is supported by skin version 2+. When no spinner-background is included this style gets used.
The images are layered on top of each other

  1. Spinner-middle - this is the part that gets colored red over time. This will not rotate. It is the equivalent of the spinner-approachcircle
  2. Spinner-middle2 - this is the center of the spinner and rotates the fastest.
  3. Spinner-top - this is the second rotating layer. It rotates a bit slower.
  4. Spinner-bottom - this is the third rotating layer. It rotates the slowest of the three.
  5. Spinner-glow - this is the lowest layer. It is tinted blue and blinks white everytime you get 1000 bonus points. It is the equivalent of the spinner-metre.
  • Spinner-approachcircle - Works in similar way as the approachcircle, but this one tells you how long you have to spin. Can be used as an additional indicator for the length of a spinner.
  • Spinner-clear - Text that appears whenever you have spinned long/fast enough to pass spinner.
  • Spinner-rpm - Area with "Spin per Minute" text on it.
  • Spinner-spin - Text that simply tells you to spin through spinner.

Additionally all the spinner layers expand a bit during spinning.



Addimage.png
It has been requested that image(s) be uploaded and added to this page or section.

Please remove this template once the image(s) have been uploaded and applied.


List of Guides in osu!
FAQ/Ranking Guidelines
General Mapping Guides What is a beatmap? How do I beatmap? How do beatmaps get ranked? Difficulty appropriate gameplay elements How to time songs Song Setup Mapping Taiko Difficulties Fitting the Size-limit
Modding Aides AIBat
Mapping Techniques Mapping Techniques Making Good Sliders How to do 15° Patterns
Modding Info How do I mod?
Skinning/Hitsound Guides

Cropping with Complex Backgrounds Cropping with Simple Backgrounds Making Properly Centered Spinners What are Custom Sample Overrides? Custom Hitsound Library Adding custom hitsounds

Storyboarding Guides Storyboard Scripting Storyboard Scripting (Cheat Sheet) SGL Tool Reducing SB Load
Audio Editing Guides Audio editing Basic MP3 modifications Getting songs from Video Games
Video Editing Guides Compressing Videos Videos from YouTube
Gameplay Guides Play Styles How to increase your rank Making nice recording for Youtube Live streaming osu! How do I use the Chat Console?
Common Mistakes Changing the Map's Artist or Title
osu!forums Guides BBCode Starting a Beatmap Project How to not Embarrass Yourself in the Projects Subforum How to not Embarrass Yourself in the Modding Queues Subforum
Miscellaneous BanchoBot Changing Title Text Music Theory Setting the Offset on the Correct Beat Collab Information Shortcut Key Reference GL Support Issues What is Internet Relay Chat? How to Run osu! on Your Mac without using Boot Camp



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

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

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