Want to build a new theme for PlayStation

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.

alt text

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.

alt text

hansolo77

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

alt text

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.

TMNTturtlguy

@hansolo77 look up raspi2png and install that. Is it a great and simple script that allows you to take nice screenshots of your pi.

hansolo77

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

@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.

I hear what your saying, and do see it as well. All I did was re-use the image @TMNTturtlguy had created, simply changing the background. When I have another free day, I'll see if I can tweak it some.

TMNTturtlguy

@hansolo77 You are correct, the spacing is not equal on my background. That is also on purpose as i was creating comic book cells, and the spacing differs along with the background and offsets different visual "categories" of the view. When all of them were equally spaced with the ComicBook backgrounds it felt to rigid and perfect, the spacing gave visual interest along with the content. I think it is fairly successful. I have attached a screenshot.

For your playstation theme, it might be good to actually see a screenshot, try raspi2png as suggested. Maybe with the cells populated it will look better? To @mattrixk point, when you are simply changing the colors of the same background, maybe having them equally spaced will look better. Another thought, if you are going to redo the spacing, you may want to straighten out the line work so they are boxes. I am not sure that the angled lines make a ton of sense since you are not trying to convey the comic book cells.

hansolo77

Meh, I dunno. I like the way it looks with the angles. I love the original theme so much, that's why I decided to use it as a starting point for mine. I wasn't too interested in changing out anything more than the various screenshots in the system menu, making region flags for the systems, and then making a more generic PlayStation'y feeling game select screen. When it comes right down to it, the original PSX didn't have that neat blue wave that the PS3 has.. it was a white screen with the Sony logo, then changed to a black screen with the PlayStation logo. So I could have done that.. a white system screen and a black game select screen. I like it the way it looks. And honestly, I never intended to release it as part of the official selection of themes. I'd be willing to share it, but there's going to be too much @TMNTturtlguy stuff in the code. I'm just swapping out his art and font.

About the raspi2png.. is that something that I can trigger like via SSH when the screen I want to see is up? Or is it something I'd have to go in and configure a keystroke for/etc. If it's a simple SSH command, that'd be awesome, and I can do that easily enough. I will give that a try on Wednesday (my next day off from work).

I might try tweaking the angles a bit and make them square. I dunno. I could even go round lol. It's just a pet project, work in progress. Only person I'm really out to please is myself anyway. :)

TMNTturtlguy

@hansolo77 raspi2png is an shh, super simple to use from putty. Once you install you just get the screen you want up on your pi and type: raspi2png -p name.png change out name to whatever you want the image to be named. super slick.

You are right, make it how you want to make it! it is for your use first and foremost.

mattrixk

@TMNTturtlguy: I see where you're coming from with that, and it really does just come down to personal preference. You're the mind behind the theme, so you can make it the way that you think looks best. I like structured and even lines, but not everyone is the same as me, and that's awesome because that's how we end up with so much great stuff!

@hansolo77: You do you mate. If you like the way it looks, then by all means keep it as is, it still looks great. There's no point making extra work for yourself just because some random yahoo on the net said they like something one way over another, especially if you are just making it for yourself.

hansolo77

HELP!!!
Perhaps I'm in over my head. I thought if I just added new folders inside the theme for each new folder I created for ROMS, that's all I would need for the theme to pick up the different art, but it's not working!!! Are there some specifics I need to do?

I changed the menu list art and font just fine.
Inside the ComicBook book theme I created a new folder \America
Inside THAT folder I copied over everything from the existing \psx folder
I then replaced all the art with the ones I created.
When that didn't work (just shows the regular PSX screens, I renamed \psx to \psx-temp
Now I have nothing.. and it looks f-ugly.

alt text

lilbud

@hansolo77 You need to add an entry to es_systems.cfg

Look here: https://github.com/RetroPie/RetroPie-Setup/wiki/Add-a-New-System-in-EmulationStation

hansolo77