osu!(lazer)'s skinning adds a nice new feature, where you can now put HUD components, like the accuracy counter, anywhere you want. No more skinning an extra-long percentage texture to center the accuracy or other hacks!

There are a few new concepts though that should be known, as it is very easy to get a messed up layout without a grasp of them Fortunately peppy is trying to improve the workflow, so stay tuned!

Anchor and Origin

With the correct configuration, layouts can easily scale to any aspect ratio you play on, and the key to this is anchor and origin.



Within the layout editor, you can see two red dots connected by a red line when you select a component. The lighter dot is the anchor of another object, like the screen or the playfield, and the darker dot is the origin of the component itself. osu! ensures that the anchor and the origin stays at the same relative position respective to UI scale, no matter the screen size or aspect ratio.

Because the skin editor's editing interface puts the play screen at a different aspect ratio than normal, it is pretty easy to tell if you have messed up with your anchors/origins. As of 2024.412.1, the anchor is now automatically set to the closest corner by default, while work on the origin is ongoing.

Layers

If you are an osu!taiko or osu!mania player, you may want to put some HUD close to the playing area. Maybe you want to put the HP bar at its old position in osu!mania, for example.

If you work in the HUD layers, as the layout editor defaults to, you are at the wrong place. In the HUD layers, the anchors are at the screen corners and midpoints; the option to position something relative to the play area is simply not here. If you try to place some counter close to the play area in the HUD layers, it is very easy to get it wrong, and even if not, it won't scale, especially if you play multiple key modes in osu!mania.



To accomplish that, you can switch the current working layer to the playfield. In the playfield layer, instead of positioning relative to the whole screen everything is relative to the playing area. This way, you can have your score counter or the song progress bar always to the left of the osu!mania playfield, regardless of the keymode you play on.

Stable skins

Layout also works with skins from stable. If you don't like the layout from stable, you can also move it anywhere you want. You can even replace the stable components with elements from Argon (the new lazer default) or Triangle (the old lazer default).