[Feature Request] Cartridge embedded in PNG export for easy sharing

[ElfEars]

The ability to create a png with a .tic cartridge embedded and the game's f7 cover image displayed (and also subsequently easily being able to load it) would be extremely useful.
A png image is much easier to share than a .tic file as nearly every website accepts .pngs (provided no compression is done) with very few accepting indeterminate file types.
It also adds a visual element helping tic cartridges naturally stand out on webpages and in filesystem thumbnails and being able to easily distinguish between them.

Several similar fantasy consoles also have this feature and it is a very popular way to share creations.

[nesbox]

It can be done with LSB based image steganography I think.
Let's try :)

[zenith391]

why not use the tEXt PNG chunk ? Althought it says it should not contains null characters, since it isn't meant for display this shouldn't matter much as the text string is not null-terminated.

However with this method, data will be lost if converting from PNG to any other image format.
But it has the added benefit of being way easier to implement.

[joshgoebel]

why not use the tEXt PNG chunk ?

Some sites will strip this data as it's not relevant for display.

[nesbox]

I did some experiments with embedding a cart to png image on png-test branch.

Original 256x256 image (9 877 bytes):

With embedded BALMUNG cart (80 663 bytes):

Very pleased with the result, almost no difference is visible.
Also, we have to design a 256x256 cartridge template with a cover and game info now...

[SDMelipone]

Looks like an opportunity for a design contest. Having a simple, recognizable, and striking design could be an important part of TIC-80's visibility.

[nesbox]

Welcome if you have ideas :)

[Anrock]

Is there any specific requirements like size of the image, dimensions, some ares dedicated for user to draw on like redshift disks have?

[nesbox]

I think 256x256 with 240x136 cover inside is the main requirement.

[nesbox]

How the cartridge could look (WIP)

[joshgoebel]

Could we put the cartridge "size" on the outside maybe? Some calculation of # of banks used + code size, etc...

[borbware]

i like this idea very much! the wip cartridge has already a nice look.

some thoughts & questions:

• text "TIC-80" should be present somewhere
• maybe the TIC-80 mascot, too!
• pins at bottom instead of top?
• it would be nice to be able to decide the color of the cartridge, famicom style
• could one fit pro cartridges in 256*256 images as well?

[nesbox]

Some progress:

Thank you for the thoughts :)
Pro carts fit 256x256 without any problems.

[RobLoach]

Looks great! Personally, I like the dark one (the first) the most. Keeping with the Sweetie-16 color palette and feel is important.

[nesbox]

Me too :)

[joshgoebel]

Looking pretty sweet... 0.02:

• Do we really need to explain it's a cartridge?
• TIC-80, logo, and tic80.com... do we need ALL the above?
• Giving "TIC-80 cartridge" more prominence (by space) than the title and author name feels wrong to me
• I can't read "by Sintel" it's way too dark (accessibility contrast ratio is really bad)
• What about "embossing" the logo onto the cartridge itself (top left or right)?

Could we do more of a 3d treatment on the pins or something? Most cartridges I'm familiar with the pins are on the inside (hidden inside the cartridge)... so is this more of a cartridge or more of an SD card thingy?

Keeping with the Sweetie-16 color palette and feel is important.

I actually don't think this matters at all for the cartridge really. I mean 16-bit rainbow colors would be "out of character" but I think as long as they are "nice and subtle" the palette doesn't matter. For example we may need a better selection of grays for accessibility reasons, etc.

[RobLoach]

In regards to top versus bottom text, I actually enjoy the loader at the top most 😉 First one from #755 (comment) .

mean 16-bit rainbow colors would be "out of character" but I think as long as they are "nice and subtle" the palette doesn't matter. For example we may need a better selection of grays for accessibility reasons, etc.

If TIC-80 switched its default palette to 16-bit rainbow colors, then using 16-bit rainbow would make sense 😉 .... I think what's important is keeping the same palette as what's used as the default palette. It's part of the TIC-80 brand at this point.... We could tweak the greys, but we should also apply that to the rest of the default palette too.

[joshgoebel]

Ok maybe I shouldn't have said "doesn't matter"... but I think there is a lot of leeway here in "keeping with the brand" vs "must match the exact hex codes used elsewhere". :-) We can keep with the brand without matching the colors 100%. I'd say the hues and "getting close" is enough to preserve the brand.

We could tweak the greys, but we should also apply that to the rest of the default palette too.

A palette designed for images on a website and proper accessibility is not necessarily the same palette you'd want in game.

I'm working on a quick mockup.

[nesbox]

Do we really need to explain it's a cartridge?

I think yes, especially for people who sees it for the first time

TIC-80, logo, and tic80.com... do we need ALL the above?

I think yes, it's increasing recognizability

Giving "TIC-80 cartridge" more prominence (by space) than the title and author name feels wrong to me

Yes, we could call it TIC-80 disk here for example

I can't read "by Sintel" it's way too dark (accessibility contrast ratio is really bad)

Agreed

What about "embossing" the logo onto the cartridge itself (top left or right)?

I tried, but without success

It's just a fantasy cartridge for fantasy computer, we can imagine what we want :)

[joshgoebel]

@nesbox Is the actual underlying data using the entire 256x256 area?

[joshgoebel]

Yes, we could call it TIC-80 disk here for example

That's nice... but I think a smaller font would also help with my actual issue of the prominence.

[RobLoach]

Yes, we could call it TIC-80 disk here for example

Note that TIC-80 applications are mostly refered to as "cartridges" elsewhere, like "download cartridge" on the cart page, and even in the URL: https://tic80.com/play?cart=1625

[nesbox]

@nesbox Is the actual underlying data using the entire 256x256 area?

yes, each pixel has 4 RGBA channels, so each pixel is a 4-byte value and I'm using 2-3 low bytes to encode cart data

[joshgoebel]

So someone altering their own cartridge later would be sort of difficult without destroying the data. :)

[nesbox]

Cart icon

[joshgoebel]

Ignore the exact details (like my attempt at the "cart" font) and try to focus on the bigger picture. See if you think there is anything to like here. I'm not a graphics persons but I tried to make a quick pass at a more 3D bottom. The 3d part could probably be a few pixels taller, allowing you to see more pins, etc. Maybe add a 3D edge to the right side as well?

I actually really like the tiny treatment I gave the top arrow. (makes it look more 3d)

more more 3d edges:

Alt layout:

[nesbox]

Looks good, I like it, thanks :)

[joshgoebel]

@nesbox What would be nice is if the cartridge "template" was just a PNG file inside of the project that the "label" (title, author, etc) and title graphic is overlaid on top of... then it'd be easy for anyone to experiment with this later just by updating that PNG and recompiling.

[joshgoebel]

Or what if cartridges were shaped like TIC-80 itself? :-) I rushed it, but if someone carried it to it's creative conclusion might be really neat and distinctive as well.

I'm only trying to offer up some good ideas (that someone more graphics inclined might push to the finish line) - not say what should or shouldn't be the canonical format. :)

[joshgoebel]

I like the cartridge (spelled out but subtle thanks to font and color) and website links on top best here: (thin font)

[RobLoach]

I appreciate the idea of having it look like the logo, but out of all of them I like Alt Layout from #755 (comment) the most so far. Keep It Simple Stupid 😉

[joshgoebel]

Ok, I need to stop. LOL.

[nesbox]

Let's choose between these two, card and cartridge:

[borbware]

I'd leave the description text out, it would break with longer descriptions.

I've been bouncing between top and down pins, but finally, the subtle 3d effect sold me on the bottom pins. Any case, i like the word "cartridge" more than a "card" - it's been in use for the tic cartridges before after all.

The monochrome tic logo is very classy! The arrow could be smaller, tho, it's making the lower part of the cartridge a bit too busy imo, at least in the bottom pins version.

[Anrock]

Aye for bottom-pinned version and cartridge. Btw, I think cartridge template shouldn't dictate screenshot and title areas and it's better to leave them blank (and withouth separator) so authors can be more creative with fonts and title position.

[joshgoebel]

The embossed logo rocks!

@nesbox Is there a reason you lost the shadow on the pins? It doesn't look quite right without that... the top of the pins would be in shadow from the cartridge housing...

(Re: "Tic-80 cartridge") Personally I find the shadowed text much harder to read than non-shadowed.

[nesbox]

Is there a reason you lost the shadow on the pins? It doesn't look quite right without that... the top of the pins would be in shadow from the cartridge housing...

I tried but I can't find a proper color for the shadow of the pins in the sweetie16 palette :)

[nesbox]

With fixed shadowed text

[joshgoebel]

And this is where being obsessed with the palette vs the hues (which preserves the same feel/branding) really does you in... because you really need a hue shifted yellow for the shadow. :-) It's 100% better in shadow IMHO.

Dither?

With fixed shadowed text

What did you change?

[nesbox]

What did you change?

I made game text lighter, but now I got that you mean the shadowed text near the logo :)

Dither works as a variant, thank you.

[joshgoebel]

but not I got that you mean the shadowed text near the logo

Yes the font I used is much easier to read than the tinier one you picked... (shadowed or not)... is it meant to be read or purely decorative? :-)

[nesbox]

This is the tiny font we are using in TIC80. I'm always trying to use the default font and default sweetie16 palette colors to design such things.

[joshgoebel]

Even if the end result is worse [in that overall legibility suffers]? Did you try a variant with "cartridge" in caps?

You are keeping in mind not everyone is going to ZOOM these cartridges to read what it written on them...? If the text is illegible when the image is shown at a small size then it's really just decoration... For example as embedded here on Github I find it quite hard to read the text even if I'm squinting (font plus tiny size plus low contrast)...

I've always placed a high value on usability/accessibility.

[borbware]

I'd go with the smaller font even for the game title & game creator names!

You wouldn't need to have that long titles to overflow with the current design. Besides, if the game creator wants, they can feature the game title (and their name) more prominently in the cover image.

That would be more in line with actual game cartridges (and comparable to game banner images in online marketplaces), for that matter.

[joshgoebel]

Besides, if the game creator wants, they can feature the game title (and their name) more prominently in the cover image.

I did have this thought earlier as well... most video game cartridges have a single sticker and that serves multiple purposes for logo/branding/name/etc... I think really what would be cool here is if the cartridge was really more of a "physical good"... and if someone wanted to make a special cartridge they could design it however they wanted. Make it blue. Have a larger graphic. Add decorative molding... just so long as it still had the correct "shape" and "pinout". :-) [of course those things are largely irrelevant also technically speaking]

I plan on doing RetroJam in the next week or so so if I have time I might see if our artist would want to try their hand at making a custom spiffy cartridge PNG. :-)

@nesbox Do you have any issue with people doing custom carts on their own - ie if the community makes some tools to make that super easy to do would you fight that by making the official binary start inspecting the images for the official template or something along those lines? Or just os long as the binary data was encoded properly it would work, period?

[nesbox]

Do you have any issue...

I'd like we have one common cart template with TIC logo and URL and allow the user to design the "sticker" he wants, with labels and other things.
The current design could be provided by default but technically, it doesn't matter for TIC how the cart looks, it just tries to decode the image, and the user allowed to encode the cart to any 256x256 png he wants.

[joshgoebel]

I'd like we have one common cart template with TIC logo and URL and allow the user to design the "sticker" he wants, with labels and other things.

I generally have no problem with the logo and URL, only the font - I'm talking more bigger picture design elements, plastic color, molding, etc. Not sure if we're talking past one another or not. I definitely see the need/desire for a "brand" of cartridge that everyone gets by default - for use as a marketing tool. I don't think everyone will do their own, it would just be nice if it was a thing that remains doable. :-)

And generally if they did it "tastefully" I'd hope it would still look like a "special edition" TIC-80 cartridge, not "something else". Gameboy cartridges are still quite recognizable regardless of plastic molding color, because they have a distinctive size and shape, etc... and speaking of Gameboy...

For example right now I'm looking at doing a Gameboy Color game for RetroJam (letterboxed on TIC-80)... and if all you do is decode the data then I could make a 256x256 that looked more like an actual Gameboy cartridge - in keeping with the Jam theme - but still could just drag and drop if all you cared about what the raw data. :)

That's more of an exception case though, but still neat if possible.

but technically, it doesn't matter for TIC how the cart looks, it just tries to decode the image

Very good news.

[nesbox]

Added PNG cart saving/loading here 335d795
Use save name.png command to check.

Example cart, just drag it to tic80.exe:

[ChildishGiant]

These should be available to download from the tic.computer website along with the standard cart

[nesbox]

@ChildishGiant sure, will be added

[shinkarom]

What is the maximum cartridge size for saving to png?