NeoActive, RetroActive and Systematic Theme Support and Feedback

RetroArch Additions Themes
#12

@CafeteroCordoba Working out from an existing icon is a great place to start. But with the XEGS, you picked a difficult icon to start with. So let me teach by showing my quick rendition and give you some quick tips that might help out.

When I design an icon, I like to start by looking up the console dimensions online and make the outer box proportional, but rounded to the nearest grid point. I begin drawing with black, white and gray in 5% increments. Make sure you do your best to make sure all the points on the shape align to the grid. For the XEGS, the diagonals make this impossible for all the points on the cartridge slot and character lines to align, so you just have to live with with it and know you did your best. Lastly, feel free to play with the grayscale to simulate highlights and shadow, even when they don’t really necessarily appear that way on the console.

After that, I add colors only from the palette. I realize the palette is fairly limited and does not have pastels, which once again makes the XEGS a challenge. But it brings uniformity to the set. As you create other icons in the system family, do your best to coordinate the colors so they look like they go together.

There are more tips over on the Guide to Making Themes post. I had intended to contribute to existing themes, but I kept making more and more icons and it eventually became a standalone theme! If you want to contribute to an existing theme, that’s great too. The FlatUI and Pixel themes are missing icons and could use some more contributions to “complete the set” if you’re interested.

#13

There need to be an icon for renaming an item! Also, I feel like the gear icon looks kinda odd IMO.

I don’t know what it is but something about the borders feel off on the gear icon… it’s just my opinion, you can do whatever you want!

#14

The last version of the rename icon was added to GitHub on August 29. I actually submitted them earlier but an issue was found and corrected. Like I said, you have to wait until the next version is released to actually see it in the theme.

https://github.com/libretro/retroarch-assets/blob/master/xmb/systematic/png/rename.png https://github.com/libretro/retroarch-assets/blob/master/xmb/retroactive/png/rename.png https://github.com/libretro/retroarch-assets/blob/master/xmb/neoactive/png/rename.png

As for the Gear icon, I see what you mean. Perhaps I should lighten the gray for both of them to give it a bit more contrast. Maybe I’ll even try an outline to give them a bit more depth. Thanks for the tip!

1 Like
#15

WOW, amazing job, a lot better that my contributions. I’ll try and do my best for the other sets you mentioned. Thanx again.

#16

@CafeteroCordoba Don’t sell yourself short. My first Libretro icons began as modifications of existing icons from the FlatUI set, so you’re on the right track. It’s taken a long time and a lot of mistakes along the way to get where I’m at. And I also still have a long way to go!

I did notice that your icons had a lot of rough, pixelated edges. Are you using PhotoShop, GIMP or some other raster-based application? If so, I would highly encourage you to use Inkscape, Illustrator or some other vector-based drawing application. Grab the SVG files off of GitHub and experiment with them to get the hang of things.

Be patient and persevere. I’ll never forget having RetroActive fairly complete, submitting it to GitHub and getting @Kivutar’s critiques. I had to modify every single icon in the set to implement his changes, but I’m glad I did because I learned so much and it made me a better artist. Don’t get discouraged. Keep your chin up and keep moving forward!!!

#17

@baxysquare why does the SVG files have bitmaps in them? i opened some with Inkscape and found embedded images, they should be vector graphics

i like your themes, made a mix of retroactive marked with the hexagons from systemactive, and some extras for genre-based playlists. Uploaded to github and called it retrosystem

#18

@alfrix The issues with the SVGs have to do with the fact that they are exported from the Illustrator PDF files via the ImageMagick Mogrify command. For my monochrome contributions, I had to use Inkscape to open an individual PDF, resize the canvas and icon, center it on the canvas and then save out as an Inkscape SVG and export the PNG. When you’re contributing a dozen or so icons, the time commitment is manageable. But my full themes have hundreds of icons in each set and I don’t have the time to convert them one-by-one.

If anyone knows of a better way to batch convert Illustrator PDF to SVG with results that don’t contain bitmaps, I’m open to suggestions.

I’m glad to hear you like my themes and it inspired you to mix it up.

#19

Made a powershell script to properly convert Ai pdfs to svg, the resultant svg is grouped and for some reason my machine needs the ungroup button to be clicked twice, but works.

Needs inkscape installed

Updated: add/remove/edit paths at the bottom to your liking, no spaces allowed.

Update 2: fix canvas sizes

Update 3: this script is pretty slow, if anyone wants more speed checkout the multi-threaded version: PDFtoSVG_MT in my github repo (you also need PDFtoSVG_MT_Worker)

# Alfrix 2017
# Batch Convert Ai PDF to SVG

cd "$env:programfiles\Inkscape"

echo ""
Write-Host "Converting Ai PDFs to SVG" -ForegroundColor Green
echo ""

function pdftosvg
{
	param([string]$pdf_path, [string]$svg_path)
	$pdfs = Get-ChildItem $pdf_path\* -Include *.pdf
	for ($i=0; $i -lt $pdfs.Count; $i++) {
		$pdf_fullname=$pdfs[$i].fullname
		$pdf_name=$pdfs[$i].basename
		Write-Host "Processing ",$pdf_path,$pdf_name -ForegroundColor Yellow
		.\inkscape.com -f "$pdf_fullname" -D -z -l="$svg_path\$pdf_name.svg"
		#alternative to inkscape
		#.\pdf2svg.exe "$pdf_fullname" "$svg_path\$pdf_name.svg"
		
		# the next bit is here to fix baxys pdfs which are in points
		$fix =  Get-Content "$svg_path\$pdf_name.svg"
		$fix=$fix -Replace 'width="341.33334"', 'width="256"'
		$fix=$fix -Replace 'height="341.33334"', 'height="256"'
		#$fix=$fix -Replace '256pt', '256' #for https://github.com/dawbarton/pdf2svg
		Set-Content -Path "$svg_path\$pdf_name.svg" -Value $fix
	}
}

# pdftosvg "input_path" "output_path"
# both paths must exist

$mainfolder="D:\Downloads\baxy-retroarch-themes-master"
pdftosvg "$mainfolder\retroactive\pdf" "$mainfolder\retroactive\svg"
pdftosvg "$mainfolder\retroactive\pdf_marked" "$mainfolder\retroactive\svg_marked"
pdftosvg "$mainfolder\systematic\pdf" "$mainfolder\systematic\svg"
pdftosvg "$mainfolder\baxy-retroarch-themes-master\monochrome_contributions\pdf" "$mainfolder\monochrome_contributions\svg"
pdftosvg "$mainfolder\baxy-retroarch-themes-master\neoactive\pdf" "$mainfolder\neoactive\svg"

pause
1 Like
#20

WOW! I’ll have to give this a shot next time I’m on a Windows computer. With Inkscape I’ve run into issues in the past with what I assume to be DPI differences between Illustrator and Inkscape. When I manually open a PDF icon source file in Inkscape, the 256x256 canvas opens at 320x320. Additionally, I have to resize the icon height or width to what I had it set in Illustrator (usually 248 in height or width). I’m not sure if your script accommodates for this issue, but I will look into it when I have a chance to give it a try.

I hate to even ask this, but how difficult would it be to adapt this as a command line script for Linux or macOS? All my themes were developed on a Mac and I use the X11 version of Inkscape for that platform. It’s clear I’m

#21

Is there any reason why you don’t use an virtual machine?

#22

My Mac that I consider to be my daily driver only has a 250GB SSD so I have to be very selective about what I install. Additionally, I can generally do everything I need and want to do using macOS so I have no real dependence on Windows.

My main apps for theme development are Adobe Illlustrator, Inkscape and ImageMagick. I’ve tried them in Windows and I prefer to use them on the Mac. With Inkscape, I actually prefer it on Linux, but the convenience of having it on the Mac makes me tolerate its quirks.

1 Like
#23

i realize now the problem with the dpi, the canvas exports to 341.33334 this is a major problem that i didn’t foresee, I’ll see if i can do something about it, then fix all the modified icons of my theme facepalm.

i’m familiar with bash scripting, so i can make one for Linux distros, but i have no idea on how to do it on Mac

#24

@baxysquare the canvas exports to 256pt (points) maybe something wrong in Ai?

luckily for me most things can be fixed by scripts

$fix =  Get-Content "$svg_path\$svg_name.svg"
$fix=$fix -Replace 'width="341.33334"', 'width="256"'
$fix=$fix -Replace 'height="341.33334"', 'height="256"'
Set-Content -Path "$svg_path\$svg_name.svg" -Value $fix

i will update the above script with the fix

#25

@alfrix I theorized there was a fundamental difference in DPI functionality, where Illustrator (or the macOS) treats screen DPI as 72 while Inkscape in X11/XQuartz uses 96. As part of Inkscape’s conversion of any Illustrator PDF, it proportionally upscales the canvas and the artwork for some reason.

Incidentally, when you open an Inkscape SVG in Illustrator, similar weirdness seems to occur, but it’s been so long since I tried to do that, I can’t remember exactly what that weirdness is. Perhaps it’s time to experiment again, just for enlightenment on the issue.

The Mac has a command line that is very similar that of Linux, because they both have roots in Unix. Thanks so much for all your work on the script thus far!

#26

Bash script for Linux distros (using inkscape)

#!/bin/bash
# Alfrix 2017
# Batch convert Ai PDFs to SVG

pdftosvg () {
pdf_path=$1
svg_path=$2
for pdfs in $pdf_path
do
	pdf_name=$(basename "$pdfs")
	pdf_name="${pdf_name%.*}"
	echo "Processing "$pdf_name
	inkscape -z -f "$pdfs" -D -l="$svg_path/$pdf_name.svg"
	#pdftosvg "$pdfs" "$svg_path/$pdf_name.svg"

	#fix baxys pdfs
	sed -i -e 's/width="341.33334"/width="256"/g' "$svg_path/$pdf_name.svg"
	sed -i -e 's/height="341.33334"/height="256"/g' "$svg_path/$pdf_name.svg"

	#sed -i -e 's/256pt/256/g' "$svg_path/$pdf_name.svg"
done
}
#pdftosvg pdf_path svg_path

pdftosvg "/home/alfre/pdf/*.pdf" "/home/alfre/svg"
#27

As i researched a bit, i noticed that the bash script may work on mac providing an extension after sed -i for example

sed -i .bak -e 's/width="341.33334"/width="256"/g' "$svg_path/$pdf_name.svg"

or just delete the “-i” argument

but i don’t have any way of testing it

#28

I went ahead and ran the BASH script and created new SVG files for the repository. I also added the XEGS and a new setting icon for each of the themes, based on the feedback in this thread. I’ll be adding the PNG additions to the main Libretro repository shortly.

#29

@baxysquare you may want to check the alignment of the pointer and battery icons, they shouldn’t be centered

#30

OK, I will take a look, relative to Monochrome. I’ve had them that way for years so I’m not sure why someone hasn’t noticed sooner.

UPDATE: I took a look at the battery in Monochrome and confirmed that the battery centers on a 64 pixel canvas at 31.5px by 28.75px. The bigger issue I ran into is that the battery icon technically goes off grid with it’s design elements a lot. To illustrate, I made a slightly smaller battery, with all the elements aligned to grid. That changes the Y axis center point to 28.5px. I had similar issues with the pointer, but it’s actually on a 16 pixel canvas. Since I work on a 256 pixel canvas, I upscaled and placed the icons as close as I possibly could. I will add the new battery and pointer files in an upcoming PR.

50 AM

#31

I just submitted a pull request with fixed battery and pointer icons for Systematic. I’ll catch them for RetroActive and NeoActive in the next PR.

For Systematic, I also added PC Engine LT, Super CD-ROM2, Famicom Twin, Panasonic Q, New 2DS XL colors, iQue, 3DO Alive II and Mega CD/Sega CD Model 1 with open disc tray, for those who are looking for them. If there are any systems you’ve would like to see added, let me know and I’ll add them to the to-do list.

I’m curious if anyone out there actually uses NeoActive. At this point I have little interest in supporting this theme, as I believe most people prefer using Systematic or RetroActive. But if my impressions are incorrect, please let me know and I’ll reconsider my stance.