Skip to content

Custom Fonts & Skins - Rewording #76

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Custom Fonts & Skins - Rewording #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2e81c40
Custom Fonts & Skins - Rewording (PART 1/?)
NightScript370 Oct 12, 2022
14b72ab
Restructure of the Sound Page
NightScript370 Nov 4, 2022
fb82bdb
Commit suggestion #1
NightScript370 Nov 7, 2022
48bbd93
Multi-line examples
NightScript370 Nov 7, 2022
dd7a961
Capitalization suggest for header
NightScript370 Nov 7, 2022
fa4c7cf
Actually use the batch suggestion feature
NightScript370 Nov 7, 2022
7b2be77
Update pages/_en-US/twilightmenu/custom-dsi-3ds-skins.md
lifehackerhansol Nov 17, 2022
b8c51e4
Use WAV
NightScript370 Mar 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 13 additions & 14 deletions pages/_en-US/twilightmenu/custom-dsi-3ds-sfx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@ title: DSi/3DS Skins - Custom SFX
description: How to use custom background music and sound effects in DSi and 3DS skins for TWiLight Menu++
---

TWiLight Menu++ supports custom sound files in themes. Place your sound files under the `sound` subdirectory in your theme folder, for example for the `white` theme, you would place the files at `themes/white/sound/sfx.bin` and `themes/white/sound/bgm.pcm.raw` respectively. Both files are optional, if `bmg.pcm.raw` is missing, the default music will be used. The same thing would happen with the sound effects if `sfx.bin` is missing as well.

These instructions assume you have devkitPro installed with mmutil. You can get devkitPro at the [devkitPro website](https://devkitpro.org/wiki/Getting_Started).
Beyond the global music option (`DSi/3DS Theme Music`), TWiLight Menu++ supports skin overrides for music. To set it up, you'll need to follow [devkitPro's Getting Started guide](https://devkitpro.org/wiki/Getting_Started), which will install mmutil for you. If these skin overrides are not used, the default sounds will be used instead.

## Sound Effect Bank
The sound effect bank (`sfx.bin`) contains sound effects such as the icon select sound, etc.
Expand Down Expand Up @@ -39,17 +37,16 @@ If your file is in Stereo, you should also go to **Tracks > Mix > Mix Stereo dow

You must set `PlayStartupJingle=1` in your `theme.ini` for the startup jingle to play.


## Menu BGM
Menu BGM needs to be a **16-bit 16 kHz Mono** raw PCM file. Below are two methods for converting audio files into that format.

Unlike sfx.bin, *bgm.pcm.raw* can be arbitrarily large.
Unlike sfx.bin, there is no size limit to `bgm.pcm.raw`.

### ffmpeg
### ffmpeg (Terminal)
The simplest way to convert music for use in TWiLight Menu++ is to run this [ffmpeg](https://ffmpeg.org) command in a terminal:

```bash
ffmpeg -i [input file] -f s16le -acodec pcm_s16le -ac 1 -ar 16k bgm.pcm.raw
ffmpeg -i [input file] -acodec adpcm_ima_wav bgm.wav
```

Replace `[input file]` with the name of the file you want to convert. You can usually do this by simply dragging the file onto the terminal window with the cursor in the correct location.
Expand All @@ -63,13 +60,15 @@ To convert the audio:
1. Change the `Project Rate (Hz)` in the bottom left to `16000`

To export in the correct format:
1. Select `File` > `Export` > `Export Audio...`
1. Set `File Type` to `Other uncompressed files`
1. Set `Header` to `RAW (header-less)`
1. Set `Encoding` to `Signed 16-bit PCM`
1. Set the output name to `bgm.pcm.raw` and click `Save`
1. Select `File` > `Export` > `Export as WAV`
1. Set `Encoding` to `IMA ADPCM`
1. Set the output name to `bgm.wav` and click `Save`
1. Click `OK` to the metadata editing

Now you have a `bgm.pcm.raw` file that can be copied to the `sound` subfolder in your theme folder.
---

Once both of these files are ready to be used, place them in the `sound` subfolder for the skin. For example:
- `sd:/_nds/TWiLightMenu/dsimenu/themes/[theme name]/sound/sfx.bin`
- `sd:/_nds/TWiLightMenu/dsimenu/themes/[theme name]/sound/bgm.pcm.raw`

You should then set the `DSi/3DS Theme Music` option in TWiLight Menu++ settings to "Theme" for your custom BGM to play on the menu.
Be sure to now set the `DSi/3DS Theme Music` option in TWiLight Menu++ settings to "Theme" for the custom sounds to play.
34 changes: 16 additions & 18 deletions pages/_en-US/twilightmenu/custom-dsi-3ds-skins.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,17 @@ title: How to Create DSi/3DS Skins
description: How to make custom DSi and 3DS skins for TWiLight Menu++
---

To make a TWiLight Menu++ skin, you will need an image editor capable of exporting `.png` files, 16 <abbr title="Bits Per Pixel">BPP</abbr> `.bmp` files or `.png` files, and 4 BPP `.bmp` files. Ideally, it should also be able to manually rearrange image palettes. [GIMP](https://www.gimp.org) is recommended and will be used for this guide, as it's capable of everything needed.
Making skins for TWiLight Menu++ requires an image editor capable of exporting `.png` files, 16 <abbr title="Bits Per Pixel">BPP</abbr> `.bmp`/`.png` files, and 4 BPP `.bmp` files. Ideally, it should also be able to manually rearrange image palettes.
[GIMP](https://www.gimp.org) is recommended and will be used for this guide, but any editor with these capabilities should work. For paletted images, GIMP has a toggleable Colormap Dialog window. Enable it via `Windows` -> `Dockable Dialogs` -> `Colormap`.

## Part 1: Download the examples
The first thing you should do is download the [example skins](/assets/files/skin-examples.zip). These can be used as a base for your skin and are already in the correct format, so if you have issues later on, you can compare with these.

## Part 2: Editing images
Download and install [GIMP](https://www.gimp.org)
- Other image editors such as Photoshop may work, but GIMP is what will be used in this guide

Once installed, open GIMP and select `Windows` -> `Dockable Dialogs` -> `Colormap`. This opens the colormap dialog, which will be helpful when editing paletted images.

You can now open whichever image you want to edit in GIMP and continue to the section below based on which folder it's in. Note that TWiLight Menu++ is picky about the exact format of the images and it varies by which folder they're in, so make sure to export as the section says.
With the image editor described above, you are now ready to edit any image based from a TWiLight Menu++ skin, as long as the format remains the same from the source specification. They are categorized by folders, each of them being located on the skin root folder.
Comment on lines 16 to +17
Copy link
Member

@Epicpkmn11 Epicpkmn11 Nov 5, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This section is honestly kinda useless with the changes you made above. I'd either remove this section entirely or restore it more or less to how it was. Could mention that this section is only for GIMP, which is recommended but not strictly required.


### Background textures (`background` folder)
These can be PNG files or 16-bit (`A1 R5 G5 B5` or `X1 R5 G5 B5`) BMP files.
These can be either PNG or 16-bit (`A1 R5 G5 B5` or `X1 R5 G5 B5`) BMP files.
- If using BMP files, you can set them to 16-bit under Advanced Options while exporting. You may need to do this each time you export as BMP

| Texture | Description |
Expand Down Expand Up @@ -57,17 +53,19 @@ These must be PNG files. Transparency is supported, however only 100% transparen
| batterylow | Used when in DS mode |

### Paletted textures (`grf` folder)
These must be 4 BPP (16 color) BMP files files.
These must be 4 BPP (16 color) BMP files.

To edit these in GIMP, select `Image` -> `Mode` -> `RGB` to allow changing colors, then when done changing colors, select `Image` -> `Mode` -> `Indexed...` to convert back to paletted. When switching to indexed, ensure that `Generate optimum palette` is checked and `Maximum number of colors` is set to `16`.
Editing these in GIMP requires the image to be set in "RGB" mode, toggleable via the setting in `Image` -> `Mode` -> `RGB`. When done, select `Image` -> `Mode` -> `Indexed...` to convert back to paletted.

**Note:** Some images in the DSi theme have their palettes overridden based on the user's profile color. If editing the colors of these ensure that the `UserPalette` option for it in the `theme.ini` is set to `0`.
Indexed Images requires an exact count of 16 colors, with the first of which (#0) being transparent (#FF00FF).
- To set the transparent color as the first entry in the colormap, right click the colormap and select `Rearrange Colormap...`. Then, simply move the transparent color to the slot and select `OK`
- If there are over 16 colors, set `Maximum number of colors` to 16
Copy link
Member

@Epicpkmn11 Epicpkmn11 Nov 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking it over again you should probably mention that this is when converting to Indexed mode, the others of these bullets are talking about the colormap dialog. Maybe just add this to line 58 above since there's no reason not to set the max colors to 16.

- If there are fewer than 16 colors, press the `+` button at the bottom of the colormap dialog as many times as needed

After converting to indexed, go to the colormap dialog and ensure the transparent color (#FF00FF) is color #0 in the colormap. If it isn't, right click in the colormap and select `Rearrange Colormap...` then move the transparent color to be the first color in the colormap and select `OK`.

If there are fewer than 16 colors in your final colormap, press the `+` button at the bottom of the colormap dialog until you have 16 colors.
**Note:** Some images in the DSi theme have their palettes overridden based on the user's profile color. If editing the colors of these ensure that the `UserPalette` option for it in the `theme.ini` is set to `0`.

When exporting, it's recommended to check the `Do not write color space information` box under the `Compatibility Options` dropdown.
- When switching to indexed, ensure that `Generate optimum palette` is checked
- When exporting, it's recommended to check the `Do not write color space information` box under the `Compatibility Options` dropdown

| Texture | Description |
| ------------- | ----------------------------------------------------------------------------------------------- |
Expand Down Expand Up @@ -132,7 +130,7 @@ These must be PNG files. Transparency is supported, however only 100% transparen
| Rshoulder_greyed | The right shoulder when there are no pages to the right |

### Video texture (`video` folder)
Only used for the 3DS theme, `3dsRotatingCubes.rvid` is a Rocket Video file. For more information on converting videos to rvid, read [Converting a video to .rvid](https://github.com/RocketRobz/Vid2RVID/wiki/Converting-a-video-to-.rvid) on the Vid2RVID wiki. If you don't want this to be drawn you can simply delete it.
The `3dsRotatingCubes.rvid` file is an animated video in the Rocket Video format, used exclusively on the Nintendo 3DS theme. The default purpose is to recreate the top screen boxes animation, but can be disabled by simply deleting the file. For more information, please read the "[Converting a video to .rvid](https://github.com/RocketRobz/Vid2RVID/wiki/Converting-a-video-to-.rvid)" page on the Vid2RVID wiki.

### Volume textures (`volume` folder)
Volume textures are only displayed in DSi Mode.
Expand Down Expand Up @@ -221,10 +219,10 @@ You may configure various options on how the theme is drawn in the `theme.ini` t
You may add specific override options to `theme.ini` for use in Macro Mode. To do this, add `[MACRO]` to a blank line at the bottom of the configuration file, then add any specified configurations below it.

## Custom background music and sound effects
The DSi and 3DS themes also support custom music. See [DSi/3DS skins - Custom SFX](custom-dsi-3ds-sfx) for more details.
Skins can [use custom music and sound effects](custom-dsi-3ds-sfx) for the Nintendo DSi & Nintendo 3DS themes.

## Custom fonts
You may put [Custom Fonts](custom-fonts) in the `font` folder for use in the skin. You can also add override fonts for the date & time using `date_time.nftr`, and the console username with `username.nftr`.
Custom fonts can be loaded from skins, whether globally or specific sections (`date_time.nftr`/`username.nftr`). Place them in `ui` -> `font`, according to the selection specified in the "[Custom Fonts](custom-fonts)" page.
Copy link
Member

@Epicpkmn11 Epicpkmn11 Nov 5, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer the old version of this paragraph. Also they don't go in a ui folder, just font in the skin folder.

Copy link
Member Author

@NightScript370 NightScript370 Nov 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Huh, I forgot where I read that you should use the ui folder. I'll do this as a manual commit.


## Part 3: Adding to TWiLight Menu++
Once you've edited some graphics and would like to test your skin, simply copy your skin folder (the folder containing the `background`, `battery`, etc folders) to `sd:/_nds/TWiLightMenu/3dsmenu/themes/` or `sd:/_nds/TWiLightMenu/dsimenu/themes/` for 3DS and DSi theme skins respectively.
Expand Down
8 changes: 4 additions & 4 deletions pages/_en-US/twilightmenu/custom-fonts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ Custom fonts are loaded from `sd:/_nds/TWiLightMenu/extras/fonts/[font name]/[fo

The `-ds` and `-dsi` files have higher priority than the normal one and if found will be used when TWiLight Menu++ is running in DS or DSi Mode respectively.

### Skin fonts
You may add fonts to [custom DSi/3DS theme skins](custom-dsi-3ds-skins), which will override whatever is set in TWiLight Menu++ settings. These fonts go in the `font` folder, in the skin's root folder.

Custom skins can additionally use override fonts for the date & time using `date_time.nftr`, and the console username with `username.nftr`.
### Skin-dependent fonts
[Custom skins](custom-dsi-3ds-skins) for the Nintendo DSi/Nintendo 3DS themes can override the font setting for the general UI. These overrides are to be placed within the skin's `font` folder.
- Specific elements could have their font overridden, by titling the file as specificied by the page above
- Delete the files within the skin in order to restore the font to whatever was specified in TWiLight Menu++ settings

### Generating custom fonts
You can make your own fonts using a utility such as Pk11's [nftr-editor](https://pk11.us/nftr-editor/). To regenerate one of TWiLight Menu++'s existing fonts using it:
Expand Down