[Theme] Art Book

[alphatoanant]

Thank you for your feedback everyone

Updates 07/24/2017:

• I refactored my theme xml to make adding new systems easier
• and added the following systems: psx, atari2600, atari5200, atari7800, n64, sega32x, gb, gbc, gba, fds, virtualboy, retropie, ports, ngp, ngpc, gamegear, arcade, mame, fba

Download latest: https://github.com/anthonycaccese/es-theme-art-book

---

Notes:

Over the last few days I have been refactoring my theme xml to make adding new systems a bit easier. Basically... from the research I have been doing it looks boxart sizes seem to fit into 3 types - portrait, landscape and square.

So I created a template for each type and started categorizing each system against which boxart type it fit best.

For example:
Landscape for snes & n64
Portrait for nes, genesis
Square for gameboy, psx

Then I updated each system's theme file to reference is corresponding layout

Getting this sorted allowed me to add the following systems tonight:
psx, atari2600, atari5200, atari7800, n64, sega32x, gb, gbc, gba, fds, virtualboy, ports, ngp, ngpc, gamegear, arcade, mame, fba, retropie << heads up @HurricaneFan

Examples:

Video View (Gameboy - Square Layout)

Detailed View (Gameboy - Square Layout)

Video View (Atari2600 - Portrait Layout)

Detailed View (Atari2600 - Portrait Layout)

Whats Next:

• Continuing to add systems (i'll try to post a status list soon)
• Better documentation on recommend sizes to scrape for boxart (for now a box of 540x540 should do the trick)
• Once all that is complete I am aiming to do another run through of each to see if any system needs more direct customization (I can see maybe needing to manually tweak mame for example)

Hope this sounds good and looking forward to your feedback.

[HurricaneFan]

@alphatoanant Awesome Work! I'll test this in the morning. Your refactoring makes total sense and should help with new systems going forward.

[lilbud]

Now, this isn't a problem with your theme in particular, but I've noticed this with several themes. Do you know why this happens? @alphatoanant

[HurricaneFan]

@lilbud What build of EmulationStation are you using?

[lilbud]

@hurricanefan I'm using @pjft's Custom Collections build, but this also happens on normal ES.

[herb_fargus]

@alphatoanant another thing that you could consider is some people use screenshots which may be squares or may be the native resolution of the original game, so I don't know if there's any way to make it perfect, but its all looking good so far

[pjft]

@lilbud yeah that happens with some fonts and there are a few comments about it in the past.

I think someone had dug a bit into that but I can't recall much about it... @jdrassa Was it you who had dug into this and explained why this happens in these fonts (it's similar if not the same as in carbon)? Was it a memory thing? Resolution? I can't quite recall...

If I find something I'll post it here.

Great job - I'll try it out as well!

[HurricaneFan]

@alphatoanant I noticed when I was testing the Game Collections feature that the video gamelist looks different for the Collections than it does on the normal NES, SNES system pages.

Are you using the new DEFAULT theme feature? It would be awesome if unthemed systems look the same as your theme systems, minus the logo of the system of course. Is this possible?

https://github.com/RetroPie/RetroPie-Setup/wiki/EmulationStation-Advanced-Theming

NES Themed

Collection Un-themed

[JuL1Xxx]

Is possible put a screenshot instead of a video?

[alphatoanant]

@hurricanefan I am not sure if the recent, all, favs, custom-col systems support the fallback to a specific system theme on a game by game basis (as you scroll). Thinking about it now it would be awesome; but not sure if it works that way. I'll run the idea/question by @pjft in his thread. Thank you for helping test!

@JuL1Xxx One thing I could do is add in the marquee tag to display behind the video on view views. With that setup the marquee(screenshot) would show for any game that doesn't have a video scraped. That said you would need to make sure you scrape screenshots for the marquee tag. There might be other workarounds but thats the first thing that comes to mind. I will play around with it.

@herb_fargus for sure I need to think about that. A quick and dirty way would be to make a separate version made specifically for scraping screenshots =). For now I made the default the square layout (which doesn't help for systems I setup for portrait and landscape view). More to think about.

---

Also starting to look at Arcade/MAME/FBA in earnest. I am not totally happy with the look for those so far and need to spend more time with the different scrapers and what type of artwork they can pull in. My preference for an "art book" style would be flyers but I don't know of a non-command line way to make that the default with any of the major scrapers. Onward to research...

[KampfVerein]

Hey, just downloaded the theme from GitHub, transferred it over...and I'm getting no graphics whatsoever! Just the default "theme didn't work" setup...you know the one, all white, simple black text...what happened?

[alphatoanant]

@kampfverein checking it now. Can you let me know are you on the latest version of retropie/es (e.g. updated through the setup script)?

[KampfVerein]

@alphatoanant Ah, that did it! It's a fresh install, so EmulationStation wasn't updated. Sorry! Thanks for your hard work.

[alphatoanant]

@kampfverein all good! I tried adding some backwards compatibility checks but still working on it. Glad the update to ES worked well. Please let me know if you find anything else.

[HurricaneFan]

@alphatoanant Where did you get your gb videos? Mine don't use the whole gray box apparently.

[pjft]

For the videos, you may want to use "size" rather than maxSize, to force them to adhere to a specific region and stretch if needed - such as the case here in the GameBoy theme.

An alternative is to center the elements (rather than align them to the top/left) and perhaps use a fake image in the background to delineate the region, with a dark-grey background, kind of like letterbox, in case some artwork isn't exactly the size you expect. I can imagine for Arcade at least that that may be a problem with different resolutions and such.

I'll reply to your comment in the other thread - haven't had the time to actually draft a proper response :)

Thanks!

[alphatoanant]

Thank you @pjft, great advice. Will look at that this evening (likely will go with origin changes so I can keep maxSize for proper scaling to keep things like arcade looking good). Regarding my comment in the other thread, not urgent at all - I know you are busy.

@HurricaneFan, I am using videos from emumovies.com. That said i'll plan to update how I have origin set that should help to center videos that arent' 320 width. Should be able to do that tonight.

[HurricaneFan]

@alphatoanant Hmmm, I used videos from that site too. Wonder why mine look so much smaller than your screenshot.

[pjft]

Ok, so a few more comments here then :)

First of all, this is an extremely elegant theme. I wholeheartedly love it, and plan on using it in a build I have, for sure! Thanks for putting it together :)

The main 4 systems I'm personally missing are:

• Daphne
• Dreamcast
• Game and Watch
• PC

but I believe they are in your backlog, so all in due time :)

A few comments on the sizes then:

• Indeed what I was suggesting you to do for the images is actually what you're already doing for the videos! My videos show centered (though only with OMX Player -- with VLC they show exactly like @HurricaneFan 's ones... weird). Your GB videos probably show centered as it seems you actually have the black borders as part of the videos - at least in your screenshot there are black borders around the videos, which I don't have. But your "grey" background box does exactly what I expected, and my video shows centered.
• For images, then, definitely centering them and using a similar grey box to delineate the expected area might help, for systems whose boxes or images aren't always the same size. And you could have the same 3-5px border surrounding them, should they have the exact size you expect them to :) For instance, in the arcade system right now, since I have screenshots as images, the images show aligned to the top, and with a large empty space underneath, which feels suboptimal.
• A question: does maxSize scale an image up, if it's smaller than the maxSize we specify? I know it scales down, but I'm curious.
• For the custom collections/favorites/all/last played, my recommendation is that you follow the same suggestions as the previous two items, and pick a layout that you feel would be the most common across the systems you use. Truth be told, I wonder if the "getting the layout from the system for the game you're showing" would be visually cohesive, as the metadata text would jump around depending on the system, but I get where you were coming from and it would likely be a more elegant overall experience. Alas, in ES, the hierarchy (in simplistic terms) is:
  • Each system has a theme
  • Each system has a view
  • The view gets themed with the system's view, and is populated with the games from the system

What you are proposing would be quite hacky to implement in the current architecture, because what you'd be requesting is, for each new game selected, to see what system it belongs to and dynamically move things around as needed to reflect... the theme for that particular game's system, given that we are effectively restricted to the current system's view.

It's not that it's not "feasible", but I'm not certain that that is something we want to pursue, given that it'd change the rendering pipeline in a significant manner. At least for the short term.

I am sorry, and I do hope you understand, and I appreciate your detailed explanation over video - it was extremely easy to follow! :)

Hopefully you can design a consistent "generic" layout for these collections that can work reasonably well for all.

Thank you very much for the hard work here!

[alphatoanant]

Thank you @pjft & @HurricaneFan here a few more updates over lunch

System theme status

• I organized a quick roadmap to see what I have open to complete: https://docs.google.com/spreadsheets/d/1gzaP0klzaBaE5_oB1_hQwr46qOmQnacSvSU3o-p5Q7U/edit#gid=0
• With this it should hopefully be straightforward to knock the rest out soon. (@pjft I have Daphne, Dreamcast, Game & Watch and PC included as systems to finish)

Video Size and Centering
2 things were going on here

• l had my origin set to "0 0" for videos and because I was using OMX player I didn't notice that they weren't being centered when using VLC (it looks like OMX may auto center the video based on the size provided and VLC does not?).
  So over lunch I updated the video origin to be "0.5 0.5" which should fix the VLC use case.
  That change is up on Github now
  I'll need to check what that does to OMX player when I get home tonight - fingers crossed it works the same there =)

• For the black background - I had simply missed that commit to Github. Its something I had added for my testing but hadn't yet added it to my master branch yet. I fixed that and its up on Github now as well. Essentially its a black box that sits directly behind the video and will show up if the video doesn't span to fit the 320x240 space I have allotted for.

The All Games, Last Played and Favorites Use Case

• Totally understood on this and your explanation makes perfect sense.
• I will work on the default square layout more to clean things up and really like your idea of having say a gray box placeholder that an image can sit centered inside. If the image fills the space thats best case if it doesn't then it still might look clean.
• Considering your arcade screenshot use case I am thinking having the square layout as default would work best for those cases - considering you are running into this on the Arcade system it helps confirm something I was running into last night when working on mame. I would still like to keep the portrait and landscape layouts for systems like nes and snes so I'll continue to tweak.
• Also this point is solid "I wonder if the getting the layout from the system for the game you're showing would be visually cohesive". I was thinking about that this morning and having things jump around on a given view could be odd.

Adding a gray box background behind images

• I mentioned this above but wanted to call it out separately... this is an awesome idea! Thank you. I try out a few options and post back results.

RE: does maxSize scale an image up

• you know I thought it didn't but it looks like it does scale it up.
• I just did a quick test with one of my boxarts and it is definitely sizing it up to the fit the width of the maxSize I set