NewGen theme?

FlyingTomahawk

I see...
I am currently going through the "create your theme" tutorial from the wiki page and it looks pretty straight forward.
I liked the layout of that theme it had/has a couple of good ideas implemented. Not sure it would be right to replicate though even though a very tempting thought. I don't want to step on anyone's toes here, copyright-wise. What if he suddenly appears again and releases his theme or makes it a commercial thing.

FlyingTomahawk

Here a screenshot of what I have done thus far. My Photoshop skills are not very good and I have a hard time to get the frame edges smooth(er).
And I am not really sure if this is what I will be going for but it is a good practice to get used to this whole ES theme making stuff.
Please don't pay any attention to the images they were just randomly chosen for testing.
Btw. using the debug mode helps a lot with the theme making. Instead of switching themes all the time you can just refresh ES by clicking ctrl+r

Edit: image removed

mattrixk

@FlyingTomahawk It's looking good. Keep an eye on the description text though, it's a little difficult to read (at least to me). Maybe cut the glow back a bit, or dull the brightness of the purple lines in the background or something.

The Newgen theme was actually a big inspiration for me when I created the MetaPixel theme by updating Rook's original Pixel theme to show metadata.

I didn't want to just make a straight rip-off of Pixel, so I looked around for ideas from other themes and I found Newgen. You may be able to notice some slight similarities:

MetaPixel System View

FlyingTomahawk

@mattrixk

Thanks for the input.
Yeah, the glow around the letters is just experimental. The reason why I used it is I just can't get the font to look nice sharp and clean. It always gets kinda pixalated.
I will have too take a closer look at your theme, I am sure I can get more inspiration from it.

Regarding that NewGen theme, did anyone ever see it working? A video maybe?

lilbud

@FlyingTomahawk No, all we got was some low-quality screenshots, no video/release

blackshadow

@FlyingTomahawk

thats looking nice so far was looking forward to this skin being released before and was let down to see it not released will be keeping an eye on this :D

FlyingTomahawk

Can someone clarify 2 things for me.

1.)
In the .md file of the ES github it explains the available views like "system", "basic", "details" and "grid". Did I miss something? Is grid available inside RetroPie?

2.)
When would someone use the <origin> tag? The example in the .md file doesn't make it clear to me. Can someone explain it for me?

Oh and btw. a HAPPY NEW YEAR!

herb_fargus

@FlyingTomahawk grid was never finished but jacobfk20 has made an experimental build of emualtionstation that includes it

FlyingTomahawk

@herb_fargus

Thank you herb_fargus. So this is something I won't have to worry about right now when building a new theme.

mattrixk

@FlyingTomahawk said in NewGen theme?:

When would someone use the <origin> tag?

The <origin> tag tells the system where the 0,0 point of the element is. For example, if you have an image that is <size>0.5 0.5</size> it means the image is 50% of the screen wide and 50% of the screen high. Origin is set to <origin>0 0</origin> by default, so if you set <pos>0 0</pos>, it means the origin point of the image will sit at the top-left of the screen.

If you set <origin>0.5 0.5</origin>, it means the <pos> tag will set the center of the element. So you can set:

<size>0.5 0.5</size>
<pos>0.5 0.5</pos>
<origin>0.5 0.5</origin>

and you will have a 50% width/height image that sits in the middle of the screen because <origin> is telling <pos> to start from the center, and <pos> is telling ES to position the origin in the center.

I don't think I explained that very well, but I'm in a hurry, sorry.

FlyingTomahawk

@mattrixk

Thanks for the explanation. I could follow you half way then lost you with the code sample.
Wouldn't it be enough to set only <size> and <pos> to 0.5 0.5 to get the image centered? Or does the code sample mean you want the image in the middle of the screen/TV and center aligned? If yes then the <pos> tag does the alignment of the element?

FlyingTomahawk

I trashed the old design and restarted. Currently looking like this.
Edit: image removed

Things might change again like background for example. But I start to like this and will see how it looks in the basic and detailed view mode.

FlyingTomahawk

Progress has been slow. Photoshop is really not my forte.
I finished the "basic" view layout today and played around with various backgrounds and images.
I took the nice console icons from the Metapixel theme and the carbon fiber background from the carbon theme. And here some images to keep you guys entertained.

Edit: images removed

Stay tuned for more to come...

mattrixk

@FlyingTomahawk Sorry, I started replying the other day, but real life got in the way.

I've made some visual aides. In these images, the small green square represents the Origin Point.

With a default Origin point of 0 0 and Position of 0 0, the image is placed in the Top-Left of the screen:
pos0_origin0

If we change the Position to 0.5 0.5, it moves the Origin Point to the middle of the screen:
pos05_origin0

Instead, if we kept the Position at 0 0 and moved the Origin Point to 0.5 0.5, it keeps the Position of the Origin Point at the Top-Left of the screen, but it moves the Origin Point to the middle of the image:
pos0_origin05

So, knowing that, we can set the Origin Point to 0.5 0.5 to move it to the middle of the image, and set the Position to 0.5 0.5 to move the Origin Point to the middle of the screen:
pos05_origin05

I hope this has explained things a little more clearly.

Also, regarding your designs, I really like the lines, design and the layout, but I'm still unsure about the amount of bloom. It just kind of overwhelms everything else. That's probably just a personal preference, but I thought I'd point it out.

FlyingTomahawk

@mattrixk

Thank you SO MUCH for this fantastic explanation. The visual aid did it for me.
Now it is very clear to me what the <origin> tags are for.

With "amount of bloom" I guess you mean the glow effect around the lines?
I could reduce it once and see how that looks. I just thought plain lines look just too simple.
I will start with the detailed view layout today and then I'll do the details on the fonts and glow.

Thanks again for the help. Very appreciated.

FlyingTomahawk

Just as a general information, due to new copyrights rule in the Pixel theme and out of respect to the creator I will remove the console icons from this theme before the official release. They are currently used to set the right position and serve exclusively as visual help.　The same goes for the carbon fiber background.

mattrixk

@FlyingTomahawk I'm glad the images helped.

I was talking about the glow effect, but I didn't mean to remove it entirely, just kind of tone it down a bit. Maybe reduce the spread (how far it reaches) or the strength/opacity so the glow isn't so bright. Maybe even reduce the brightness of the lines themselves to 75% or so. Once again, that's just a personal preference (I like design elements to be more muted to allow the content to pop out more), so you can do whatever it is you think looks good.

Regarding the console images, you can have a look at ScreenScraper.fr. They have lots of images for most systems, including consoles, logos, controllers, and sometimes even cartridges. Have a look at the SNES page for an example. I think I'm going to use these for the next theme I make. A couple of downsides though: the site takes a while to load each page (at least for me) and it can be a hassle to access the images outside of the api.

FlyingTomahawk

@mattrixk

Thanks again for your valuable input and help.

Just out of curiosity, what is your next theme gonna look like? Any layout plans already?

mattrixk

@FlyingTomahawk I've started playing around with the Universal XML Scraper and I really like the idea of having full screen fanart, box art and screenshot for each game. So my theme will have to work in conjunction with a special MIX profile for the scraper. I have the basic design worked out, but before I can go any further I need to learn how to make my own MIX profile. I'll get there, I just don't have much free time in which to do it.

FlyingTomahawk

@mattrixk said in NewGen theme?:

it can be a hassle to access the images outside of the api

I took a look around that site and they have really a good selection of pics. I made an account but cannot figure out how to get the images in their original file size.
You can see the smaller thumbs which would be enough I guess but every image has the resolution written on the bottom-left and that is the resolution I would like to get if possible. If you know any trick to get the images please enlighten me.