PICO-8: Retroarch lr-retro8 core installation script

theofficialgman

you can disable the retroarch image viewer in order to allow retroarch to load the .p8.png files

in retropie, this looks like a retroarch.cfg like this

# Settings made here will only override settings in the global retroarch.cfg if placed above the #include line

builtin_imageviewer_enable = "false"

#include "/opt/retropie/configs/all/retroarch.cfg"

BenMcLean

Wow! It looks like great minds think alike! I have been trying to implement a nicer experience of playing pico8 on retropie too!

I have made a logo for the default EmulationStation skin for pico8:
p8logo_best[1].png

It comes from this post. I used Aseprite to put a 1 pixel black border around the white version so that the logo will show no matter what color the background is. It would be nice for someone to also make one of those red outline graphics for it too.

The Retro8 core for RetroArch will run many pico8 games but not all. It'd be nice to give people the option to choose between the Retro8 core or the official Pico8 binary if they've placed it on their system just like how people can choose between the ppsspp official binary or the ppsspp retroarch core by holding the "A" button after they select a game in EmulationStation to get that little menu. I'm still not entirely clear on how that all works.

In my opinion:

We need to figure out how to set RetroArch to run the games correctly whether they're .p8 or .p8.png or just .png.. Those are all correct pico8 cart filenames.

Also, always display the cart itself as the image for the cart in the EmulationStation menu. Even if the cart is .p8 -- it should display it as a png image anyway.

My thought was that I'd have a little python script that runs every time you exit Splore which updates the gamelist.xml with whatever new games you added so they'll show in the EmulationStation menu with their little cartridge pictures. I was even trying to make it use picotool to scrape the metadata from the code inside the cartridge but I couldn't get that to work right.

BenMcLean

Here's the little Python script I wrote to make a gamelist.xml for pico8 carts:

import argparse, io, os, lxml
from lxml.etree import ElementTree
from lxml.etree import Element
from lxml.etree import SubElement
from glob import glob
parser = argparse.ArgumentParser(description='Input XML file')
parser.add_argument('file', metavar='file', type=str, nargs='+', help='Input XML file')
filename = parser.parse_args().file[0]
path = os.path.dirname(os.path.abspath(filename))
et = ElementTree.parse(filename).getroot() if os.path.exists(filename) else ElementTree(Element('gameList'))
files = glob(os.path.join(path, '*.png')) + glob(os.path.join(path, '*.p8')) + glob(os.path.join(path, '*.p8.png'))
for file in files:
    relativeFile = os.path.join('.', os.path.basename(file))
    foundit = False
    for game in et.getroot().iter('game'):
        if (game.find('path').text == relativeFile):
            foundit = True
            break
    if (not foundit):
        game = SubElement(et.getroot(), 'game')
        gamePath = SubElement(game, 'path')
        gamePath.text = relativeFile
        gameName = SubElement(game, 'name')
        gameName.text = os.path.basename(file).removesuffix('.png').removesuffix('.p8')
        gameImage = SubElement(game, 'image')
        gameImage.text = relativeFile
lxml.etree.indent(et.getroot(), space='\t')
with io.open(filename, "w", encoding="utf-8") as f:
    f.write(lxml.etree.tostring(et, encoding='unicode', pretty_print=True))

It requires lxml.

A known issue: I should make the file extensions case insensitive somehow.

There are probably cleaner and faster ways to do this. I'm not real experienced with Python.

Folly

Hi guy's we are in the middle of a pull request.
Hopefully we can merge pico-8 this week ;-)

@theofficialgman @BenMcLean
When I can I will try both your input.
Really great !

BenMcLean

@folly said in PICO-8: Retroarch lr-retro8 core installation script:

Hi guy's we are in the middle of a pull request.
Hopefully we can merge pico-8 this week ;-)

@theofficialgman @BenMcLean
When I can I will try both your input.
Really great !

The question for me is: should I be continuing to try to work on this, perhaps in some capacity to help with what you're doing or have you got this and I should just wait for your version?

Folly

@benmclean said in PICO-8: Retroarch lr-retro8 core installation script:

@folly said in PICO-8: Retroarch lr-retro8 core installation script:

Hi guy's we are in the middle of a pull request.
Hopefully we can merge pico-8 this week ;-)

@theofficialgman @BenMcLean
When I can I will try both your input.
Really great !

The question for me is: should I be continuing to try to work on this, perhaps in some capacity to help with what you're doing or have you got this and I should just wait for your version?

I have asked @buzz if he can finish the merging in the pull request of pico-8, because there are things that become too difficult for me.
Btw. : This work is focussed on the module-script.

Your part is something different and it's not something that can be included into the module-script, I think.
So please continue.

The theme for carbon that is something that should be worked on. Preferably the "system" picture should be a vector image. (.svg)
Is that something you can do ?

BenMcLean

@folly said in PICO-8: Retroarch lr-retro8 core installation script:

The theme for carbon that is something that should be worked on. Preferably the "system" picture should be a vector image. (.svg)
Is that something you can do ?

Yes, I am familiar with InkScape for SVGs and can definitely come up with something.
It might be just a vector outline of that same pico8 logo but I figure that should be close enough, right?
I'll look at what the SVGs for the other systems are like for reference.

BenMcLean

I believe blocky is the program I need to convert the pico8 logo (which is indexed png pixel art) to SVG. I should report back with results after I get that working.

BenMcLean

blocky is pretty awful: making a gazillion little rectangles in the SVG instead of merging the same color together in contiguous areas like such a program should. I could click on every single rectangle and try to merge them by hand but I expect there's got to be a better script out there which does this properly.

BenMcLean

It turned out that the right script to use is actually Jirinrin/pixel2svg-outlines.

I don't know whether the scaling might need to be adjusted for EmulationStation to match the other systems or not so for now, I'm just going to upload the raw untouched output from pixel2svg-outlines. However, it is clear that the shapes are correct from examining it in InkScape, plus the file size being appropriately tiny.

BenMcLean

Apparently that source image I was working from is actually a little bit distorted in its dimensions. It makes the diamond symbol of the colors a little bit taller than it should be. So there's probably going to be some more revisions before the final version.

BenMcLean

OK, I went back to the original pico8 site to get my source image, I forced it into being an indexed pico8 palette, I used the drop shadow from the web site plus the 1 pixel border together and I made the border use the dark blue pico8 color instead of the generic black, then I ran that through pixel2svg-outlines. Here's the result:

One remaining imperfection is rather subjective: the drop shadows don't include the 1 pixel border. I could make another version which makes the drop shadows bigger to include the border but I think it looks good as is. Any thoughts?

BenMcLean

Here's a version which keeps the 1 pixel border (using the pico8 dark blue color) but omits the drop shadow for comparison:

Sorry for the many replies.

BenMcLean

Here's one where the size of the drop shadow is expanded to match the 1 pixel border.

So there's three choices:

system.svg with the small drop shadow.
system2.svg with the big drop shadow.
pico81px.svg with no drop shadow.

Which one's best? :)

At the moment, I'm leaning slightly towards the small drop shadow.

Unknown

@benmclean I vote system2

BenMcLean

@unknown said in PICO-8: Retroarch lr-retro8 core installation script:

@benmclean I vote system2

Yeah, on looking at them all again, that might be the best one after all.

AFAIK, there is no official controller for pico8 so here's my idea of what to do for controller.svg:

Another possibility for controller.svg would be to create some kind of outline based on the imaginary controller or system depicted here:

BenMcLean

I tried it with this thing:

It is definitely arguable whether the resulting outline is recognizable as a controller or not and has more iconic association with pico8 design-wise than the diamond shape that was my first idea.

BenMcLean

OK two more options:
system3.svg:

system4.svg:

I'm thinking system3.svg

Folly

@benmclean

Quite some work you did ! ;-)
For now, I also vote for system2.
If you prefer system3 that is also fine, as 2,3 and 4 look quite the same to me ;-)

Folly

@benmclean

Perhaps you can use parts of this picture for the controller.svg.
I used it for the cygnus-blue-flames, which can already be installed in the RetroPie-Setup (DTEAM-1 - cygnus-blue-flames)
https://raw.githubusercontent.com/FollyMaddy/cygnus-blue-flames/master/pico8/system.png

I think you know but if you don't, with inkscape you can select and trace bitmap and do edge detection.
Afterwards you can color the lines dark red just like the other controller.svg from carbon.
Here is the first step :

Btw:
Gimp has also edge detection, sometimes you get better results with doing it first on gimp and transferring that image to inkscape.

Hopefully it's some useful information for you.