Board index MAME Help Seraph's LaunchBox Frontend Theme

Seraph's LaunchBox Frontend Theme

MAME Gurus come to your aide to help you. Please use the search before adding a topic. This will help cut down on having multiple topics with the same subject.
Post April 2nd, 2017, 3:24 pm
Seraph Gold Skull member
Gold Skull member

Posts: 253
Location: Raccoon City

Now don’t panic! After we are done here, you will be able to modify your theme with relative ease for Launchbox/Bigbox at least to the level of detail I have. If you wish to change the layout of items in great detail in your views you will need the editor. You must have Big Box which does cost some money for a lifetime subscription to proceed. With that said, there is some coding required but again don’t panic. I will simplify everything and show you what to do to modify things using only notepad and no programming tools! The intro is somewhat long but essential I assure you but comment below if there is something I should add.

The initial post will also be modified over time with revisions below each updated version, to make this guide more complete as my knowledge evolves. We can discuss and comment below but always refer to the initial post. Only the following items were modified to get the custom theme that I wanted and the rest I left the same. Example: Custom/Images/Platform folders are left blank because I did not want to lose the flexibility of being able to modify image priorities. I labeled my drive with my frontend build X:/ to ensure no likeliness of drive conflicts with friend’s computers. Note: ensure any new computer running your build changes the drive letter to X prior to doing anything with this drive to prevent issues! Some folders will have the name Custom to distinguish selections within the System and Options menus. Once I finalize my theme in the coming weeks/months, all Custom folders will have a different name such as CityHunter.

Also, I used the CityHunter theme you can download via the Launchbox as a starting point. Unless you use the recommended programming tools mentioned in the Launchbox Tutorials on YouTube, you will want to select a theme as a starting point to use this guide. I want to credit the original creator of the framework for this theme @CriticalCid from the Launchbox community, and the creator of the current version of this theme @Keltoigael. I did not ask permission for use of their themes, but I won’t need to unless I’ve made enough revisions and learned enough from their coding to warrant submitting my theme for the community. Last disclaimer: I will be showing some images but I have avoided showing my build because it shows my games collection. This is done for obvious reasons haha! Enough ranting, let’s get your theme created!

I made a Launchbox/Fonts folder to keep record of the fonts I have added and in case I give my frontend build to a friend, they just need to double-click the desired fonts and install them. By default they appear in C:/Windows/Fonts for future reference. I would recommend only changing heading fonts and not body fonts since things such as game descriptions can be lengthy. You want the text to be easy on the eyes. I use Baskerville (changing not recommended) for body text and Helvetica for my default heading font. I have downloaded Diablo and Starcraft fonts as additional heading fonts. The reason I only recommend changing heading fonts is because you want body text to be as easy to read as possible. If you do change the body text font keep this in mind.

In LaunchBox/Images/Playlists, I just changed the images in the Clear Logo folder only for each of the playlists I created. I copy/Pasted the 4 folders in the LaunchBox/Images/Platforms/Arcade folder into the /Playlist/0 Arcade folder and did the same for each playlist. Then, I downloaded another Clear Logo Image Pack for different Platforms, and replaced the Clear Logo Image for a different Arcade Clear Logo titled 0 Arcade.png. I did that for the other 3 playlists.

I made a Launchbox/Sounds/Custom folder for the sounds I will primarily use. There are 4 sound files that this theme recognizes: Back (previous menu), Move (navigating the menu), Select (clicking an option), and Startup (clip heard when the BigBox Startup Video completes and BigBox is about to complete the launch process). I used Sci-Fi Set 4 by Clavius Startup file, and the rest are from StarCraft Theme 2 that can be downloaded on the LaunchBox downloads page. I am a StarCraft fan so I gravitated to those files plus I like the female robotic voice from the startup file. In the future, I may decide to use different Back, Move, and Select files, but for now I am happy with those. Change this through BigBox by going to System (press Esc), Options (press Esc again), go to Sounds, and select Sound Pack: Custom.

In Launchbox/Videos, if you scroll to the bottom, I put any videos I might want to play before the system completely boots up. Startup.mp4 is the file that’s used for that purpose, and every other .mp4 I have such as CallToArms.mp4 that I downloaded from the Forums page are present in case I want to quickly change things up. BigBoxLoad.mp4 is the file I use from the following link (clink show more below the video and go to the download link): https://www.youtube.com/watch?v=ZMjVzFm1qUs --Incito edit, added the YT vidoe BBC code. --




I also have that file listed in the .mp4 files and whenever I want to change the startup video, I just copy the file and rename it Startup.mp4. Note: Look at the desired Startup.mp4 video clip length, and startup BigBox, go to System (press Esc), go to Options (press Esc again), go to General, and change the Minimum Startup Video Duration: X Seconds.

In LaunchBox/Videos/you will notice 4 additional folders created for 4 playlists that I have created: 0 Arcade, 0 Nintendo Entertainment System, 0 Sega Genesis, and 0 Super Nintendo Entertainment System. Those folders are blank to make things more efficient as I use files from the various platform folders. This is to allow my Playlists I have created to be at the top of the platform selection inside BigBox. Most of my Platforms will only have games that I own, but the playlists have games that I prefer playing. The only platforms I have numerous games for are those platforms listed starting with 0 (Zero). Those playlists have games from my Top lists I have discussed on our forums here at MameAddicts. My top tier games are marked as favorite and 5 stars, my honorable mentions and extra games added are marked as favorite and 4 stars. The playlists were created by filtering those desired platforms and only including games that were favorites.

In LaunchBox/Themes/Custom start in Images/Theme (skip Platforms for reasons I mentioned in the start). There are only 4 .png files in this folder at this time: options_bg ( _ as in hold Shift and press – or dash button), options_logo, system_bg, and system_logo. The _bg and _logo files can be seen in their pages by hitting Esc once (System) or twice (Options). I named them that to make them easier to find in the coding pages. _bg files are background images and _logo files are logo images. The logos were optional replacements from the CityHunter theme. The system background is an HD wallpaper of various video game characters I found using my resolution. My options background is an HD wallpaper of various Marvel characters I found using my resolution.

In LaunchBox/Themes/Custom/Styles files with the name BoxStyle (not ItemBoxStyle) will reference fonts. I have replaced Calibri for Garamond but you can use another font. This is a font that can be seen in either the top-left or top-right in the CoverFlow game views when you are inside each platform. I still need to do some playing with the transitions in the options menu.

In LaunchBox/Themes/Custom/Videos/BackgroundVideo I have any .mp4 files I may use for the background video seen everywhere except System and Options menu. Background.mp4 is the file the system will use and play in a loop.


In LaunchBox/Themes/Custom/Views most of the code you will play with happens here in these 45 files! Note: I will simplify this by only mentioning files I have edited. When you open the first .XAML file have Notepad be the default program to open these file types. At least for the font you will know that Helvetica is for heading text and Baskerville is for body text. It just works out that way for solid readable text but should help with knowing which is which.


  • Open CoverFlowGamesView, search fontfamily, replace all Streamster going forward for Helvetica or other header font.
  • CoverFlowWithDetailsGamesView, going forward if you see Streamster that is your heading text, I use Helvetica. If you see Arcade that is your body text, I use Baskerville.
  • FIlterDetailsView, Streamster to Helvetica.
  • GameDetailsView, Helvetica and Baskerville.
  • HorizontalWheel1GamesView, going forward replace CityHunter for Custom or other Themes folder name you choose.
  • HorizontalWheel2GamesView, CityHunter to Custom.
  • HorizontalWheel3GamesView, replace Streamster for Helvetica and Arcade for Baskerville.
  • OptionsView, replace CityHunter to Custom, search Images/Theme replace the first to options_bg.png and next to options_logo.png.
  • PlatformWheel4FiltersView, replace CityHunter to Custom
  • SystemView, replace CityHunter to Custom, search Images/Theme replace the first to system_bg.png and next to system_logo.png.
  • Wheel2GamesView, replace CityHunter to Custom, and replace Streamster for Helvetica and Arcade for Baskerville.

In the Options menu Views, I use Games List View: Horizantal Wheel View 3 and Platforms List View: Platform Wheel 4 to demonstrate the different items that can be displayed and can be viewed in the coding prior to going through the programming tutorials on the LaunchBox channel in YoutTube. In the options menu Images, I use Game Image Type: 3D Boxes.

If only I could attach my Custom Theme .zip file. See below for screenshots of the modified theme and should be self explanatory (Loading1, Loading2, Console, Game, Menu, Options)!

Image
Image
Image
Image
Image
Image

• Lesson learned: Open Launchbox, Tools, Refresh All Images or logo changes won’t take effect!

More to come later as I begin to dig into the programming side...
Last edited by Seraph on May 7th, 2017, 11:08 pm, edited 4 times in total.
I have come here to chew bubblegum and kick butt... and I'm all out of bubblegum. - George Nada (They Live)

Post April 22nd, 2017, 7:36 pm
Seraph Gold Skull member
Gold Skull member

Posts: 253
Location: Raccoon City

Everyone, I added screenshots! Sorry it took a while to upload them.
I have come here to chew bubblegum and kick butt... and I'm all out of bubblegum. - George Nada (They Live)

Post May 3rd, 2017, 10:41 am
Incito User avatar
Founder
Founder

Posts: 2041
Location: Metro City

Excellent post Sereph! I made this topic a sticky and added the BBC to your YouTube link. This way they can watch the video from out site too. :wistle:

Post May 3rd, 2017, 2:34 pm
Seraph Gold Skull member
Gold Skull member

Posts: 253
Location: Raccoon City

Thanks Incito! I am running out of different things I know or can figure out that might be sticky worthy. I need enough time to get into the Theme coding before I can make an advanced section at the bottom of the original post. I likely won't be making a cabinet for a while unfortunately, but maybe I'll post my dream cabinet and how I play for now (not sticky worthy). Gonna drop to game reviews not made yet from my top list while I work on a 1CC. I will try to decide on my 1CC game this weekend.
I have come here to chew bubblegum and kick butt... and I'm all out of bubblegum. - George Nada (They Live)

Post May 7th, 2017, 11:09 pm
Seraph Gold Skull member
Gold Skull member

Posts: 253
Location: Raccoon City

I added a lesson learned and will continue to add them as I evolve my theme. Not enough time to give Trog a try this weekend unfortunately. Next weekend I will try to block a day and hope I won't need it. I used to be awesome at that game.
I have come here to chew bubblegum and kick butt... and I'm all out of bubblegum. - George Nada (They Live)


Return to MAME Help

Google+