[Tutorial] (ruckage's) NES Mini theme for 4:3

Hex

Problem 2 : How to convert an image ?

To convert images we need to get some details like what needs to be preserved, what is important part, and lastly are all images need the same modifications?? To get these answers we try converting one of the image for testing purposes.

Steps taken to manually convert:

1) Open image in GIMP

Imgur

2) Crop excess width

Imgur

3) Move the Upper and lower tabs

Imgur

4) Crop out the blank space

Imgur

5) Finally be content if the conversion looks correct

Imgur

Now returning to the plugin code we need to code these operations in python.

def nes_mini_process_image(filename):
     image = pdb.file_png_load(filename, filename)
    pdb.gimp_image_undo_group_start(image)

    # Select middle right region and delete it
    pdb.gimp_image_select_rectangle(image, 2, 360, 33, 120, 204)
    pdb.gimp_edit_clear(pdb.gimp_image_active_drawable(image))

    # Select top right region and move it
    pdb.gimp_image_select_rectangle(image, 2, 360, 0, 120, 33)
    pdb.gimp_edit_cut(pdb.gimp_image_active_drawable(image))
    pdb.gimp_selection_translate(image, -137, 0)
    pdb.gimp_edit_paste(pdb.gimp_image_active_drawable(image), True)
    pdb.gimp_floating_sel_anchor(pdb.gimp_image_active_drawable(image))

    # Select bottom right region and move it
    pdb.gimp_image_select_rectangle(image, 2, 360, 237, 120, 33)
    pdb.gimp_edit_cut(pdb.gimp_image_active_drawable(image))
    pdb.gimp_selection_translate(image, -137, 0)
    pdb.gimp_edit_paste(pdb.gimp_image_active_drawable(image), True)
    pdb.gimp_floating_sel_anchor(pdb.gimp_image_active_drawable(image))

    # # Run autocrop
    pdb.gimp_selection_clear(image)
    pdb.plug_in_autocrop(image, pdb.gimp_image_active_drawable(image))

    pdb.gimp_image_undo_group_end(image)

To run this on the image substitute the method nes_mini_process_image provided here into the previous code, save the file in ~/.gimp-2.8/plug-ins/, open GIMP once and close it to load plugin in database, and run it from the command line like this:

gimp -i -b '(python-fu-nes-mini-convert 0 "/home/USER/es-theme-nes-mini")' -b '(gimp-quit 0)'

Hex

Problem 3 : How to move components around ?

**** Reserved ****

cyperghost

@Hex IrfanView (4 windows) also allows batch conversion and converion via command line the you can crop the images out that's for windows users ;)

The ultimo ratio imho before using GIMP is to use ImageMagick - that package is available on all plattforms and it's very powerfull and works with batch scripts. There is a small tutorial available. Thank you very much for writing that tutorial ;)

ruckage

@Hex
It's good of you to write this tutorial. I will be adding 4x3 support officially (probably sooner than expected as recent ES changes have made it easier) but this will help people in the meantime and may encourage people to actually have a go at theme editing/creation themselves.

One note from reading your tutorial so far.

Image cropping should not be necessary at all now. The layout proposed here is basically what I mocked up in the main thread and you can achieve it through the XML itself. I'll give an example for the background:

	<image name="background" extra="true">
		<size>0 1</size>
		<pos>0 0.5</pos> 
		<origin>0 0.5</origin>
	</image>

I've changed <pos> and <origin>. The origin is now the left hand side of the image. And it's positioned at the left side of the screen. Size hasn't changed but the line is basically telling ES is to scale it to the full height of the screen while maintaining it's aspect ratio.
This will cause the background to overhang the right side of the screen but @jdrassa added fixes not so long ago which means this overhang won't be visible on the next system (before the systems would overlap).

This should work for all image elements, the origin and size will vary depending on the element but the principle is the same (remember if you set either height or width to 0 ES will interpret that as meaning to scale that axis proportionally).

Now you may ask what about the black tab decoration on the background? Well the easiest way to add this back is to actually create 2 more image elements just of those black tabs and position them over the background separately.

spruce_m00se

This is cool, I have a 3d printed mini nes for my RP. I may well look into this a little further down the road.

Hex

@ruckage A few questions I need answers for :

Can I publish the theme once I am done?
How did you manage the border of Game Name in "gbc" system. I cant reproduce it.
Does this scale the background or crop it? (I dont want to just crop on one side)
How do you calculate the values for size/pos etc because a lot of your values are repeating decimal numbers. (I would suggest to fit them on a grid with pixel multiplier of 4 or 8 so you have nicer fractions)

My main goal was to help out Theme makers who would want to do batch processing of their background images so that they can work on 16:9 and quickly convert all images to 4:3. Saving them precious time to work on other things.

Note : Just changing the resolution makes the theme wonkers.

Imgur

ruckage

@Hex said in [Tutorial] (ruckage's) NES Mini theme for 4:3:

@ruckage A few questions I need answers for :

Can I publish the theme once I am done?

Sorry, but no. As I've said in the past I want to retain full control over the theme and I do have a 4x3 version in the works. I'm more than happy for you to continue with this tutorial though as it will be helpful for others.

How did you manage the border of Game Name in "gbc" system. I cant reproduce it.

Not exactly sure what you mean by that, could you clarify?

Does this scale the background or crop it? (I dont want to just crop on one side)

Not sure I'm following as you appear to be cropping in your tutorial. The code I posted won't scale the whole background to fit a 4x3 display, it will essentially crop it so the right side of the screen is actually off screen. Scaling to fit wouldn't be a good idea as you would squash the images.

How do you calculate the values for size/pos etc because a lot of your values are repeating decimal numbers. (I would suggest to fit them on a grid with pixel multiplier of 4 or 8 so you have nicer fractions)

The positions and sizes are calculated to be exact, I'm not sure you understand how positions/sizes work in ES. Basically the coordinate system in ES is based on values of 0-1 , e.g top of the screen is 0, bottom of the screen is 1, so the middle would be 0.5. To calculate a Y coordinate you take the Y coordinate in pixels and divide it by the height in pixels.

For example, my theme is based around a screen size of 480x270 (chosen as it divides evenly on a 1080p display) , say I wanted to position an item at:

X = 48
Y= 48

To calculate the X coordinate we do 48/480 = 0.1
To calculate the Y coordinate we do 48/270=0.1777777777777778

Sizes work in exactly the same way. Admittedly my figure are probably far more accurate than necessary but I at least know things are positioned exactly as I intend and its easy to just do the calculation and then paste it into the XML.

My main goal was to help out Theme makers who would want to do batch processing of their background images so that they can work on 16:9 and quickly convert all images to 4:3. Saving them precious time to work on other things.

I'm sure many will find it useful, but you can often just use the same assets as I said and use the XML to make them appear as needed.

Note : Just changing the resolution makes the theme wonkers.

Yes, It will, because the theme was only ever designed to work on a widescreen at 1080p. This is why I need to work on adding support for other resolutions and in particular 4x3 resolutions - something that was very difficult in the past as my theme relies on exact positioning of the gamelist in particular, this has now been made easier though due to several fixes @jdrassa made to ES.

Hex

@ruckage I understand why you wouldn't want me to share the theme.

As regarding "gbc" I mean how did you achieve the small border (1Px) around the black region for the game name in "gbc". The border is nearly the same colour but some sort of neon variant. I am unable to reproduce it properly.

alt text

Hex

Problem 2 is now updated

ss213

@ruckage hey!! Have you been able to finish the 4:3 version?? Are you still working on it?? The nes 16:9 theme version is my favorite theme, you made an awesome job and I would love to have it on my 4:3 screen

ruckage

@ss213
Sorry for the late reply. I've actually ported the nes theme over to my snes mini theme and that supports a 4:3 mode in the config file. More info here: https://retropie.org.uk/forum/topic/12583/snes-mini-theme/708