diff --git a/pages/_en-US/twilightmenu/custom-dsi-3ds-sfx.md b/pages/_en-US/twilightmenu/custom-dsi-3ds-sfx.md index 76d2d57f..0172fb94 100644 --- a/pages/_en-US/twilightmenu/custom-dsi-3ds-sfx.md +++ b/pages/_en-US/twilightmenu/custom-dsi-3ds-sfx.md @@ -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. @@ -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. @@ -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. diff --git a/pages/_en-US/twilightmenu/custom-dsi-3ds-skins.md b/pages/_en-US/twilightmenu/custom-dsi-3ds-skins.md index 1ce94fac..f30b3013 100644 --- a/pages/_en-US/twilightmenu/custom-dsi-3ds-skins.md +++ b/pages/_en-US/twilightmenu/custom-dsi-3ds-skins.md @@ -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 BPP `.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 BPP `.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. ### 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 | @@ -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 +- 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 | | ------------- | ----------------------------------------------------------------------------------------------- | @@ -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. @@ -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. ## 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. diff --git a/pages/_en-US/twilightmenu/custom-fonts.md b/pages/_en-US/twilightmenu/custom-fonts.md index e07e71ab..62ce33a1 100644 --- a/pages/_en-US/twilightmenu/custom-fonts.md +++ b/pages/_en-US/twilightmenu/custom-fonts.md @@ -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: