Creating Skins

Introduction

Skins let you customize the appearance of notes. In this guide, you will learn how to create a custom skin. By the end, you'll understand the concepts of skin creation, and you'll be able to make a skin yourself.

Prerequisites

• A computer with an operating system capable of creating folders and editing files.
• A code editor like Zed or Visual Studio Code.
• Image files to be used as note textures. You can make some using paint.net, GIMP, Canva, Affinity, or any other image editing software.
• A little knowledge about how JSON works. You can learn more through a video like this: Learn JSON in 10 Minutes

Step 1 - Defining a Skin

Create a folder on your computer. This folder will contain files for your custom skin, and we'll eventually package this folder to be used by AstroDX.

Inside this folder, create a file and name it skin.json. This file contains information to specify how the skin should be loaded.

Open skin.json and write down the following text:

{
    "name": "My First Skin",
    "designer": "Your name here"
}

This file lets the game describe the skin as My First Skin, and the designer as Your name here.

Step 2 - Adding Textures

AstroDX allows a number of game elements to have custom skins. View the skin manifest documentation for everything you can customize:

As an example, let's customize the texture of a normal tap note. Find the tap note section in the manifest documentation:

The default path says "tap.png". This means that the game looks for a file named tap.png and replaces the tap note texture in-game with the file.

Put an image file named tap.png inside the skin folder. Your folder should now look like this:

Step 3 – Compressing the Folder

This is identical to installing levels. AstroDX is able to identify that you're installing a skin instead of a level.

Compress the folder like this:

Then, rename the .zip file into an .adx file to let AstroDX recognize the file.

If you're on a mobile device, in your file browser, long press on the .zip file, and find the Rename option to rename the file:

Your file is fully prepared. In the next step, we'll install the file into AstroDX.

Step 4 – Opening the .adx File

On your mobile device, tap on the .adx file, a menu should pop up prompting you what app you want to open the file with. Select AstroDX.

If AstroDX isn't an option, press and hold on the .adx file to share the file. In the share menu, select AstroDX.

AstroDX should now open up and show you a progress bar. Once the progress bar finishes, you can find the skin in Settings -> Theme.

Conclusion

You've successfully completed the skin creation guide! You can learn more about the manifest in the skin manifest documentation.