To create a UI skin, access the resource pack editor and create a new resource pack, set the resource pack type to skin.

Optionally, you can copy the original skin from the game by pressing the checkbox.

This is the place where you manage your components and their draw order, this is divided in layers, currently a layer over and under the notes, which do exactly what their name indicate, all components that are children of each layer will be drawn over and under the game notes.

You can operate on each component by right clicking it, the options there are pretty self explanatory.


The component picker is the tool you use to select a UI component to create, you can have more than one UI component of the same type, so you are encouraged to experiment with it.

The Resource manager (shown on the left) is where you can add and remove resources of different types, such as fonts, textures or even animated textures.

Unlike other rhythm games, PH can adapt to different screen sizes, this is what makes this button a very important tool, it lets you test how your skin will react to a bunch of common aspect ratios, if it can react well to the three listed aspect ratios chances are it will work for everything else. Please test different aspect ratios so everyone can enjoy your screen!


The scene is where you place your components and set their anchors, the orange box represents the actual final position of your component (and moving it changes the margin) and the green arrows represent its anchor, you can learn more in the anchor system section of this guide. This is the magic bit that makes the UI work on different aspect ratios.


Currently you can only customize the in-game UI, but in the future the game might allow customization of other screens, so this is what you will use to change them if that time ever comes.


The inspector shows the different properties of the currently selected component, you can use this to customize your components, you can select textures, fonts, colors, style boxes (more on that later) and other funky things.

The key aspect to the skin system is the anchor system. Which tells the game where each of the corners of a component originate from.

The anchor system is how skins can adapt to different aspect ratios easily.

Each UI component has an anchor value per corner, this value is a percentage of the screeen, expressed as a value between 0.0 and 1.0, these values are visible visually as the green "arrows" pointing towards each corner.

Additionally, each component has a "margin" value that offsets each corner of it relative to the anchor
position. This margin value is visible as the orange rectangle that surrounds the component.


For example, if your anchors are set to the bottom right of the screen (by setting all anchor values to 1 in the inspector, or using the bottom left preset) and then you move the orange rectangle and increase its size, the margins will be automatically set for you, this means it will retain the size completely but will always come from the bottom right of the screen as illustrated above.


Another example, as illustrated above, is making a control that always takes up half the size of the screen horizontally, note that because margins are set in pixels and not percentages they will always take up a fixed number of pixels, regardless of the aspect ratio.

This all might seem slightly complicated, and it is, but don't be discouraged, through trial and error you should be able to learn how to make aspect ratio independent UIs in no time! Remember you can always use the default theme as a learning resource, or as a base to start from.

One of the building blocks of the PH UI are style boxes, which are used by different components throughout the UI and define a box that can be drawn dynamically by the UI.

There are two typed of styleboxes, tlat and texture-based


Flat styleboxes are drawn as meshes dynamically, they have the advantage that they look good at any screen resolution, they also allow setting things such as a border, shadow or anti aliasing.


Texture-based styleboxes use a texture for drawing, they don't have as many features as a flat stylebox.

The skin editor supports making any texture animated, with up to 256 frames per texture.

You can set the FPS of the animated texture, and add additional delays per-frame.

To create an animated texture, go to the resource editor and click click on "add animated texture"













After you've set your texture name, you can select multiple png files to use as the animated texture source by using shift + click or control + click.







Afterwards, you can change the order, FPS and delays inside the animated texture editor, which can be accessed by clicking the pencil-shaped "edit" icon in the resource manager.