Grid position numbers and pixels

phrazelle

So I'm not sure how many people get this, but there is an easy way to design in a photo editing program and transfer your theme into Emulationstation with proper coordinate placement without much hassle, as long as you know the pixel dimensions of your elements.

I see a lot of tuts telling people to trial and error until stuff fits - which works just fine - but you can get it exact if you do some quick, easy math.

Let's say you have a box that houses md_description. The actual text has a margin within that box in Photoshop (or whatever program you used to design.) If you crop the actual text area to the margin and write down the pixel dimensions (I'll use 200x300px in this scenario) you can quickly find the coordinates of it by dividing by the full width/height of your canvas.

So... If you are designing for a 1920x1080 screen, and you have a game description text block (md_description) that you want to fit perfectly into the layout you made, crop that box (again, let's say it comes out at 200x300 in this scenario,) then look at the pixel dimensions of your canvas. Divide the width by the full width of your canvas (200/1920=0.104) and then divide the height by the full height of your canvas (300/1080=0.277.)

So... your <pos> coordinates for the md_description box would be

Easy peasy. It took an amazing amount of trial-and-error out of my theme designing (when I actually followed it) but requires creating grids and cropping incessantly to find all elements.

FWIW

phrazelle

Let me fix that a smidge...

If you have a text block that is md_description, you need to measure how far it is from the edges to get the <pos>.

I.e., if your canvas is 1920 wide, and your md_description fits 200px from the left edge, then your first number in your <pos> coordinate is (200/1920=0.104) so 0.104.

You have to grid out the whole thing and account for the negative space before your elements start.

Derp.

phrazelle

I'm going to step away and rewrite this later. This is correct...and changed the way I make themes...but I think I wrote the explanation like a dingus.

herb_fargus

@phrazelle rook made a tool that does just that.

phrazelle

@herb_fargus Sweet! Can you post a link?

herb_fargus

@phrazelle https://retropie.org.uk/forum/topic/768/pixel-theme/51

phrazelle

This post is deleted!

phrazelle

@herb_fargus That sucks that it's just Windows. Great idea and implementation though!

herb_fargus

@phrazelle no reason why you cant come up with something similar for linux

mattrixk

I just set up a photoshop document set to percentage instead of pixels, and set a grid line at every percent. Snap to grid and all is good.