[Theme] Art Book Next

alphatoanant

Its been a little over 5 years since I created the Art Book theme and made a post about it on this forum.

Since then there have been a few forks of EmulationStation released (e.g. Batocera, ES-DE) and I have been meaning to build a simple foundation to create a theme that works consistently across all while also enabling me to easily add customizations that are tailored to each.

So this post is about that foundation which I am calling Art Book Next - naming is not one of my strong suits :)

As is the standard for me; its a minimal theme - meant to be easy to navigate and simple to look at.

And the version discussed in this post works out of the box on Retropie (which is where I started theme making all those years ago)

Here is what it looks like...

Preview

System View	Gamelist View

Configuration Options

The theme has a simple set of options that can be changed directly in the root theme.xml
- Options:
- <aspectRatio></aspectRatio>- sets the aspect ratio the theme will render at. If needed, this should be changed to match the aspect ratio of your screen.
- <gameListStyle></gameListStyle>- sets the layout used for the gamelist view when media & metadata are scraped for your games
- <colorScheme></colorScheme>- sets the color scheme that is used for the overall theme on all views
16:9, 16:10 and 4:3 aspect ratios are currently supported
there are 2 gamelist layouts to choose from (metadata-on & metadata-off)
and 4 pre-built color schemes are currently available with the option of creating your own customized color scheme through a simple XML file (details below)

Preview of the Aspect Ratio & Layout Variants

Aspect Ratio	Gamelist - Metadata On	Gamelist - Metadata Off
16:9
16:10
4:3

Preview of the pre-built Color Schemes

Color	Preview
Art Book Next
Art Book (based on my original theme from 2017)
Steam OS (being used as the default for RetroDeck)
SNES (simply made for fun as the SNES was my first console)

User Customizations

When using the theme on RetroPie you can make the following changes in the root theme.xml to tailor the look to your setup

Aspect Ratio:

Change the value in <aspectRatio> to match your screen aspect ratio (default is 16-9)

<!-- 
Apsect Ratio Options:
16:10 = 16-10
16:9 = 16-9
 4:3 = 4-3
-->
<aspectRatio>16-9</aspectRatio>

Gamelist Style:

Change the value in < gameListStyle > to match your preferred gamelist layout (default is metadata-on)

<!-- 
Gamelist Style Options:
metadata-off
metadata-on
-->
<gameListStyle>metadata-on</gameListStyle>

Color Scheme:

Change the value in < colorScheme > to match your preferred color scheme (default is art-book-next)

<!-- 
Color Scheme Options:
art-book-next
art-book
snes
steam-deck
custom
-->
<colorScheme>art-book-next</colorScheme>

If you change the color scheme option to custom then you can change values in the color-scheme-custom.xml file to match the colors you prefer. I am happy to add additional colors to the pre-built list too; so if you create one that you are comfortable with sharing please share it in the comments below.

Example:

As a quick example if you have a screen with a 16:10 aspect ratio, don't want to display metadata and like snes colors then this is what you would change in the theme.xml

<!-- 
Apsect Ratio Options:
16:10 = 16-10
16:9 = 16-9
4:3 = 4-3
-->
<aspectRatio>4-3</aspectRatio>
<!-- 
Gamelist Style Options:
metadata-off
metadata-on
-->
<gameListStyle>metadata-off</gameListStyle>
<!-- 
Color Scheme Options:
art-book-next
art-book
snes
steam-deck
custom
-->
<colorScheme>snes</colorScheme>

Please let me know if you have any questions on the above in the comments below - I am glad to help.

To-Do

(quick list of items I am looking to add over time)

Add 3:2 & 5:3 Aspect Ratios
Create and add any missing background art
Add the ability to provide custom background art

Additional Notes

Scraping:

To create the layout in the metadata-on variation i rely on the md_thumbnail, md_video and md_marquee tags. So to get the same look these are my recommended scrape settings:
- md_image = screenshot
- md_marquee = wheel (the transparent wheel art)
- md_thumbnail = 2D boxart
- md_video = video (though this is optional as the theme also works with just md_image)

Versions for other ES forks:

If you use ES-DE... then the version of the theme listed under "Download" below will work out of the box with that distribution. When used with ES-DE the theme comes with additional support for navigation sound sets. I'm also working on a version to support the 2.0 theme engine that the ES-DE team is working on and will post that here when available.
If you use Batocera... then check out the version here. The Batocera version has all the same base features but simply makes them available to change through Batocera's menu UI (i.e. you don't need to touch the XML as discussed above). It also adds some additional features such as the theming of the menu and the ability to toggle on/off the display of different media elements directly through the menu ui as well.

Acknowledgments

Most system logos were sourced and modified from the excellent work done by Dan Patrick here. I modified each to be compatible with EmulationStation's current SVG support
ChangaOne font is by Eduardo Tunni
Oxygen font is by Vernon Adams

Download

For Retropie and ES-DE v1.x - https://github.com/anthonycaccese/art-book-next-retropie/archive/master.zip

Thank you for taking a look at this and looking forward to your feedback.

HurricaneFan

@alphatoanant Love your themes! Can't wait to try this.

WeirdH

@alphatoanant said in [Theme] Art Book Next:

[...] 4:3 aspect ratios are currently supported

Thank you for this!

esteban.canales

one of the best themes for retropie! I have a doubt, with the latest version of the theme in RetroPie 4.8 (rpi3), choosing the gamelist style in "metadata-on-miximage" duplicates the artwork. The screenshot appears 2 times, and I have:

<thumbnail>./boxart/Aero Blasters (USA).png</thumbnail>
<marquee>./wheel/Aero Blasters (USA).png</marquee>
<video>./snap/Aero Blasters (USA).mp4</video>
<image>./screenshot/Aero Blasters (USA).png</image>

Any additional settings that I'm overlooking?

2.jpg

greetings!!

alphatoanant

@esteban-canales I am looking into this. When you open the menu can you let me know which version or EmulationStation is displayed at the bottom of the menu? For reference mine shows v2.10.3RP

StonedEdge

@alphatoanant Great themes! I wanted to ask how simple you think it is/if there is a guide to getting started porting themes from other platforms? For example, I really like the Modern-DE theme that is used on EmulationStation desktop, but I'd love to be able to use it for RetroPie. Would love to help add more themes to a repostiory somewhere as well.

I noticed you had ported a few other themes on your GitHub. Keep up the great work! Here's a couple of pictures of running the Art Book next theme and also the NX-Retropie theme. Unfortunately my screen is 5:3 so it doesn't look too good at 16:9, but I still really love it.

https://i.imgur.com/unEJeLu
https://imgur.com/CzPy8A4

esteban.canales

@alphatoanant

I just updated from binary and from source and it remains at V2.10.1RP.

alphatoanant

@StonedEdge I have been looking to create a guide for porting between RetroPie, ES-DE and Batocera. I have a good amount of notes to start with so I just need to make the time to put pen to paper so to speak =).

I will likely start with ES-DE to RetroPie as they are most close in structure. I'll post a link here when I have something up. Setting expectations it will likely be closer to December as work is really busy currently.

@esteban-canales I was able to replicate this but unfortunately have not found a way to address it. I'll continue to dig.

flaviometal

WOW! This is the most gorgeous and perfect theme to use with my crt, thanks! Your themes are very cool, Anthony.

Question: I don't know why, but the "Retropie Settings" on this theme doesn't appears to be working for me (it gives me just a black screen with blue letters and ugly font). I'm using the most recent version of Retropie (4.8), with Emustation 2.10.1RP, 4:3 AR, and Steam-OS color scheme. Anyone knows what's the problem? Thanks!

alphatoanant

@flaviometal hmm i may have the name for that system wrong in the theme itself. i’ll need to look at that.

ExcitedTech

EDIT: I totally messed up and mixed up themes. I went down a rabbit hole lol. I apologize for pinging you!

Gonso

@flaviometal IHI Friend, first of all i want to say that this is the best theme i have ever tried. Im really loving it. Thanks to @alphatoanant for his always awesome themes.

Responding your question, you only have to delete completely the retropie folder that is inside the Art book next theme, and all works like a charm!!!

flaviometal

@Gonso , thanks for the aswer. I'll give it a try, man!

EDIT: THANKS, MAN! It worked like a charm! Just renamed Retropie folder, reboot, and voilá!

fpgamesretro

@alphatoanant Hello,

Your theme is magnificent. Congratulations on your talent! 👏👏👏👏👏

I would like to feel that same joy from you, unfortunately I am having difficulty making my theme available.

I'm limited in using Github, not the slightest idea how to create a fork to make my theme available. Would you be able to clarify my ideas?

Sorry for my communication, I'm Brazilian and I don't speak English so well, I needed the help of Google translator.

alphatoanant

@fpgamesretro, if I can, I am glad to help answer any questions you have. Just let me know.

SP

@alphatoanant Your theme was always my favorite when I used to use the old emulationstation years back.

A couple of days ago I decided to try out ES 2.0 on my pc along with your Art Book Next theme and I really love it. I was wondering if you were planning on adding more colors to it. The Famicom color is my favorite, btw.

Keep up the great work.

alphatoanant

Thank you @SP! I don't have any other colors current planned but I am open to ideas as well.

SP

@alphatoanant Is there a way to remove the darkening filter on the screenshot when using the list (no metadata) variant?

Screenshot (33).png

SP

Nevermind. I figured it out.

Remote

@alphatoanant Looks amazing! I'm new to retropie and doing some research on images. Does your theme work with all images?