Want to build a new theme for PlayStation

[hansolo77]

I'm going to be building a new RetroPie system inside an old broken PlayStation. It's been done to death before, I know. But I want to do my own, because.. well ... you know. So while I gather up my hardware, I'm working on tweaking the system. The current theme I'm using is just the default Carbon which nobody really likes. I really like the layout of @TMNTturtlguy's Comic Book theme, so I was thinking about using that as a base on where to start. I figured it'd be easier to just edit that theme rather than try to create a new one from scratch.

So the first thing I have to do is ask permission, of course. I'd hate to go to all the trouble of hacking up his theme without being allowed to. Especially if, during my construction phase, other people catch on the idea and want it too. Then I'd have to release it, and all the mess that goes with that. So first things first... @TMNTturtlguy - can I use your theme? :)

The 2nd bit is going to be figuring out how I want to do this. Right now, my plans are to use a 4tb USB-powered WD My Passport hard drive and have it wired to the Pi. I've already got a complete USA romset on the drive (unscraped) and it works. I decided rather than have just a massive list inside the /roms/psx path, I'd create a new folder structure. So I've erased all the systems (since this is a strict PSX build) and created new folders... America, Asia, and Europe. Depending on how the scrape for videos goes, and the available remaining space, I may also include an Other folder for those games that are just beta, or Japanese games that have been translated to English, etc. I've also already made the necessary changes to the es.systems.cfg file to have it display (so far) the American folder as a PlayStation system. So now when I'm at the system screen, I can see "PLAYSTATION" which links to the /roms/America path, and "RETROPIE" which, of course, accesses all that stuff. The next set I'm currently moving (Asia) will go into /roms/Asia and show up on the system menu as well.

My plan is to have something like an American Flag type logo on the system screen, with a varied assortment of games in the "windows" of the Comic Book theme's background. Then a Japanese Flag logo for Asia, and a different assortment of games that are limited to Japanese release. Then a European flag for Europe, etc,.. etc. Once inside the system, I'll change out the background art to something a little more PSX inspired. I still want to keep the layout, and the working video previews with box art. At the top I'll change out the system logo with another rendition of the Flag motif. I'm not sure if I want to keep the loading sound, it's kind of loud and would get annoying after a while.

So that's my plans.. sound possible? Like I said, the first thing I want to do is get permission from @TMNTturtlguy before doing anything. Then I'll try and Photoshop up a mockup preview.

[TMNTturtlguy]

@hansolo77 Thank you for asking! Yes of course, please feel free to use whatever you would like. Please just give credit for what you use in the readme and the text in the main file similar to what I have done. Look forward to seeing what you come up with!

Also as a side note, carbon is my third favorite theme.....@ruckage nes theme is top notch, and I like my theme as well, I would suggest when @ruckage releases his neogeo theme that may break top 3! But after that is good old carbon, so I would disagree that no one likes it!

Again, have at it, let me know if you need any help and good luck!

[hansolo77]

Thanks for your blessing! I will definitely keep things updated as I progress, and will have your readme/etc files updated to show proper credits.

[mediamogul]

@TMNTturtlguy

carbon is my third favorite theme.

Carbon is like a classic black tuxedo. I use it mostly because it has support for the most systems, but I also love the way it looks.

[hansolo77]

Yeah I'm getting this feeling like maybe I shouldn't have said nobody likes Carbon. I appoligize for that. I should have just said "I" don't really like Carbon. I feel like it's too dark. Maybe if it was more white/silvery instead of black. Meh, everybody is open their opinions. :)

[mediamogul]

@hansolo77

Meh, everybody is open their opinions.

Certainly. Also, variety is the spice of life. The more choices, the better.

Maybe if it was more white/silvery instead of black.

@Rookervik is also responsible for the spiritual sister to 'Carbon', 'Luminous'.

[hansolo77]

Wow, nothing but respect for @TMNTturtlguy ... finding screenshots and then making a system background image takes a lot of work. I've been working on it since he said I could.. and 4 hours later, this is what I've come up with. Bear in mind, I did these examples in Photoshop, so the actual render with the system name (flags) would be better.. I just created a white field, set opacity to 75% and pasted them on. I don't know how to take screenshots from within ES, so this was all done on my PC.

Essentially, I found a website that listed region exclusives, and used that to create the images for the background. I cheated on a couple of them because many of the games weren't necessarily region locked, but had originated in that region.

I found a nice free site that hosts flag images, and picked the nifty 3D glossy ones. Also, without the comic-book inkdrop dithering going on, the images appear much crisper. Going to bed soon. Tomorrow I'll work on the game list background.

[mattrixk]

@hansolo77 looking good. Is that Faye Valentine in the bottom left of the Japan image? I had no idea there was a Cowboy Bebop game on playstation. Off to google I go.

[TMNTturtlguy]

@hansolo77 these are looking good. One thing I noticed is that you are cutting your images to the exact size of the black outline. Doing this is the easy method, but when this is done it often leaves a 1 pixel width line between the black outline and the image. If you look closely at most of your images you can see the checkered background bleeding through, especially on the bottom edge of the bottom row. What I did was create a separate outline layer that had an border line that was thin and located in the middle of the thick black outline. This way the thick black border overlaps the cut edges and you won't have any bleed.

As for the dither in the ComicBook theme. As you have noted it is very hard to find great images. Try finding good quality clear images of older systems, especially hand helps and very old computer based systems. They are often blurry and poor resolution. Also when trying to load 15+ systems the background images need to be 720p and less than 525kb in size. When compressing the backgrounds you loose a lot of clarity. By adding the comic dither it did 2 things for me: 1. It helps hide poor quality images for a lot of systems and 2: it helps hide any loss of quality when compressing from original size which is often 5+ MB to compressed size of about 500kb.

Since you are only loading 3 or 4 backgrounds i hope you do not need to compress. Keep up the good work. Looking forward to seeing what you do with the gamelist view.

[hansolo77]

@mattrixk said in Want to build a new theme for PlayStation:

@hansolo77 looking good. Is that Faye Valentine in the bottom left of the Japan image? I had no idea there was a Cowboy Bebop game on playstation. Off to google I go.

Yup! I was never really able to play it on my modchipped PlayStation. I think it's completely in Japanese. Most of the game was like a shooter if I recall.

@TMNTturtlguy said in Want to build a new theme for PlayStation:

@hansolo77 these are looking good. One thing I noticed is that you are cutting your images to the exact size of the black outline. Doing this is the easy method, but when this is done it often leaves a 1 pixel width line between the black outline and the image. If you look closely at most of your images you can see the checkered background bleeding through, especially on the bottom edge of the bottom row. What I did was create a separate outline layer that had an border line that was thin and located in the middle of the thick black outline. This way the thick black border overlaps the cut edges and you won't have any bleed.

I noticed this as well. I didn't really know how to do the image editing on this particular design. The black border element was in the/art folder, and I discovered it was in 1080 res. The comic.png background was in 720 res. So in order to create the mockup, I had to enlarge the completed image to 1080 before overlaying the black boarder layer. I think the enlargement created the extra pixels. The other thing that could have created it was the way I actually made the image. I used the Magic Wand tool to select the gray frame, then did an Inverse Selection to select everything else (the windows) and deleted them. That gave me the clear windows to plug in the new screenshots. Then I placed them into the background layer (so the gray frames were on top) and used the Eraser tool to remove the bits exposed inside the other windows. It's probably not the best way to do it. The Magic Wand tool is probably where my fault was, since the tolerance setting is tricky to get right so you only select the frame and not any matching color from the individual screenshots. You wouldn't happen to have a gray frame by itself would you? :)

[TMNTturtlguy]

@hansolo77 I am traveling for the next 8-10 hours but will be home after that and can get a download link to the base files. It's hard to do quotes on my phone, so here are my responses to you post less quotes!

The outline file must be at 1080 and must be a separate file. If you scale it to 720 or you flatten it to the background the black outline will become very jagged, especially on large tv and 4K displays.

Running the backgrounds at 1080 is nice, but it is terrible for performance on the pi. I would recommend the backgrounds at 780.

As I stated in my earlier post, the only way to avoid the lost pixel line in the images is to create a thin black outline that sits centered in the middle of the thick black border. Using the magic wand and inverse selection is exactly how I do it, it is just that the images bleed under the black border file so they overlap.

[hansolo77]

I was half asleep when I did those last night... I decided to re-do the American one as a test... First off, I started doing the same Magic Wand on the frame, but then grew the selection an additional 2 pixels. I then pasted it to a new image, and did a Flood Fill of the color. That helped tremendously on refining the edges. Lastly I resized the image to 1080 (will reduce to 720 when complete). When I started layering in the screenshot images, I did it a different way. I completely forgot about the Paste Special -> Paste Into option... so I copied the screenshot to the clipboard and then Magic Wand tool on the white void window, and pasted it into that. No more need to use the Eraser tool, as it creates a Layer Mask. Now I'm free to move the screenshot around inside the mas, and get it the way I like it, without having to re-erase/etc. So this is the end result, adding the black boarder frame, a white layer with 75% opacity, and a new Flag system image. I decided to re-create the system image, reducing the size of the flag a little so I could get the full shadow rather than the one previously that cropped it.

Remember, this is just a mockup... I didn't add the other systems to the image. I also decided to change to the logo rather than the controller.

[hansolo77]

Updated Asia background using the new method. I also changed out 3x3 Eyes for Lunar Silver Star Story.. I loved that game, and just had to include it. I also swapped the Super Robot Wars and Resident Evil (Biohazzard) games, since SRW wasn't nearly as recognizable.

[hansolo77]

Here's Europe's. I changed the images a bit, but the games are the same.

[hansolo77]

Here's what I came up for as the game list menu background... I tested it by replacing the image in my pre-existing setup, and it looks great! I even swapped out the font. I simply renamed the existing font Shaka_Pow.bak and named mine Shaka_Pow.ttf. Simple cosmetic changes.. no changes to code.

I wish I knew how to take a screenshot of ES from my Pi. Then I could show you the fonts. I found (on the free dafont website) a font for PlayStation, and it looks great. So far, all my backgrounds are in 1080p. Once I get a full system scrape with videos, I might have to reduce down to 720p. It takes a couple seconds for the artwork to buffer in memory, even when I load up a 20-game list.

[TMNTturtlguy]

@hansolo77 I assume you no longer need the template? Looks like you have it figured out.

[hansolo77]

Yeah I think I got this.. quick question.. does the system.png file need to be in those specific dimensions? The top corner of my flags are right at the topmost pixel. When they render in the game list, there's no spacing between the top of the flag and the black outline. If I could say, add 5 pixels of dead void to the canvas for the system file, that would clean up the edges better. Otherwise, I'll have to go back and create new images with the flags a little smaller.

[TMNTturtlguy]

@hansolo77 system.png can be made any size you want. Adjust in very small incraments.

[hansolo77]

Cool, I'll work on this more soon. Bad headache came on.. taking a nap before dinner.

[mattrixk]

@hansolo77 I like your Detailed View background, but can I make a suggestion? Try to keep all the spacing between the boxes the same. It looks a bit weird having some spacing quite large (at the top) while others are really narrow (the bottom-right).

I think if all the spacing was the same the whole thing would look a lot cleaner.