NewGen theme?

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

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]

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

[mattrixk]

@FlyingTomahawk You can right-click on an image and open in new tab. The URL of the image has a string of characters on then end that gives a max width and height. You can change those numbers to the ones you want and hit enter. Like I said, it's a bit of a hassle, but it's doable.

[FlyingTomahawk]

Opened a new topic for my theme here