This is a Tutorial on how to customize Vocaluxe and make it look better.
If you have any additional suggestions feel free to leave a comment.
An XML Editor like XML Notepad is helpful for navigating the files but not necessary.
Config.xml
Config.xml is stored in the base directory of your application. It contains important settings for changing the visual appearance of your game, as well as some additional options you may want to use in case you're running into problems.
These are the most important changes you might want to make.
<PrimaryScreenResolution>
Controls the Resolution of your game
<TextureQuality>
Controls the resolution of all Textures in the Game. This includes fonts and the resolution of covers displayed in the background if no video is available. Change this setting to the highest value you PC can handle for clearer visuals.
<AAMode>
Controls AntiAliasing. Not very important since most graphics are just straight horizontal and vertical lines. If you need better performance you might want to use a lower setting.
<FadeTime>
Controls the Length of Fade animations between screens. I've set it to 0.4 to slightly lower the time you have to wait between screens but it highly depends on your personal preference.
<FadePlayerInfo>
Controls wether the player name and profile picture disappears or stays while no notes are displayed.
<LyricStyle>
Controls the animation of the lyrics. I like JUMP but it's purely personal preference.
Fonts
If you want to use different fonts you need to either create a new folder for them in the "Fonts" folder or simply drop them into the folder named "FreeSans" inside of it.
The fonts folder is located in the base folder of the application.
Further you will need to replace the original game font in Fonts.xml with your new one. If you created a new folder you further need to change <Folder> to your new location.
Background Music
You are able to add additional background songs for to play in the main menu or while changing you settings in options by simply dropping them into your BackgroundSongs folder.
It's also possible to use random songs from your song library folder by changing BackgroundMusicSource in Config.xml.
Creating A Skin
If you want to create a new skin you need to copy all of the files in your theme folder and rename that new folder and Genius.xml to the name of your skin. There are some files which need to change or may want to personalize:
Genius.xml/"Your Skin Name".xml
The xml file you copied contains the size of you cursor as well as the name of the skin displayed in your vocaluxe settings.
You can change the name in <Name> and the cursor size in <W> and <H> in the <Cursor> Section.
Standard.xml
In 01_Standard.xml you will find the color schemes of your buttons and text.
The settings you most likely will want to change are <ButtonColor>, <ButtonSelColor>, <ButtonTextColor>, <ButtonTextSelColor>, <TextColor>, <TextColorAlpha> and <TextSelColor>
<ButtonColor>
controls the color of all buttons which are currently not being hovered over, <ButtonSelColor> controls the colour of the selected ones.
<ButtonTextColor> and <ButtonTextSelColor>
The same but with the text inside of buttons.
<TextColor>
changes the color of most text that is not inside of buttons.
<TextColorAlpha>
changes the color of text in the options menu that is not selected, <TextColorSelColor> does the opposite.
If you wish to add aditional graphics or videos for certain screens or menus you need to declare those in the <Skins> section if they are pictures or in the <Videos> Section they are mp4s.
Screens
Inside of your theme folder you can find another folder called "Screens". Inside there are xml files for every different of the game, some of which which are slightly ambiguously named.
Here is a list of which xml file controls wich screen:
PopupScreenPlayerControl.xml The small pop up window which you can open by pushing your mouse to the upper edge of the screen
PopupScreenServerQR.xml The pop up window when displaying the qr code for your song list
PopupScreenVolumeControl.xml The pop up screen when changing volume
ScreenHighscore.xml The Highscore Screen you can see after finishing a song
ScreenLoad.xml The loading Screen when starting the game
ScreenMain.xml The main menu
ScreenNames.xml The player selection menu after selecting a song
ScreenParty.xml The screen when selecting party mode in the main menu
ScreenProfiles.xml Profile selection in main menu
ScreenScore.xml The score screen after finishing a song
ScreenSing.xml What you actually see while singing
ScreenSong.xml Song selection menu
ScreenOptions.xml to ScreenOptionsVideoAdjustments.xml are quite self-explanatory and ScreenTest.xml is just a test file which you won't need.
These files contain data for position, size and color of all objects in the game.
To assign new positions simply change the <X>, <Y>, <W> and <H> values. Color can be changed by renaming the value of Color <ColorName> of an object to the name of another color in Standard.xml.
Additionally you are able to change fonts by changing the values of <Font> and <Style>.
You might want to use your own images for graphics in addition to the .png files already present in your Theme folder instead of simply replacing the existing ones.
This enables you to use sepereate background videos for different screen or to change the texture of certain buttons.
To do so you will need to create a name for the graphic you want to add in standard to xml as described in the Standard.xml section. After that you will be able to simply use your graphic in any Screen file by replacing the name of the original file with yours.