NewGen theme?

FlyingTomahawk · 27 Dec 2016, 07:55

Looking for a new theme I found this old archived topic here.

What happened to it? It got never released right?

Rookervik · 27 Dec 2016, 14:55

I'm not sure he ever released this. I do remember it, though. He was using 1080p backgrounds which would cause a raspberry pi to white-screen after you load up more than 5-10 systems. It could be re-created fairly easily though. You could use the pixel theme xml and change the backgrounds to reflect his.

FlyingTomahawk · 27 Dec 2016, 15:02

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 · 1 May 2017, 13:25

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 · 30 Dec 2016, 10:46

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

FlyingTomahawk · 30 Dec 2016, 11:38

@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 · 30 Dec 2016, 15:34

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

blackshadow · 30 Dec 2016, 17:35

@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 · 1 Jan 2017, 05:18

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 · 1 Jan 2017, 05:21

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

FlyingTomahawk · 1 Jan 2017, 06:19

@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 · 1 Jan 2017, 08:05

@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 · 1 Jan 2017, 08:30

@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 · 1 May 2017, 13:25

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 · 1 May 2017, 13:26

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 · 3 Jan 2017, 00:10

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

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

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:

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:

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 · 1 Mar 2017, 02:28

@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 · 1 Mar 2017, 02:48

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 · 3 Jan 2017, 03:03

@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 · 1 Mar 2017, 04:33

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