TapTo

A silly little idea…

Video games have been a life-long passion of mine. Going back to the original Atari VCS I had as a young child in the early 1980s. The contemporary games and consoles of each year are intimately tied to key moments of my life.

As my generation began our journey into middle age, we brought with us that same interest and love of the entertainment medium that grew up alongside us. Emulation has served as a convenient way to recapture the fun and feelings of that nostalgia for days past. The march of time has however removed a key element from the gaming experience we remember: the physical presence.

For a few years, I had been in the community of a project called MiSTer. An open-source project dedicated to the preservation of older computer and console hardware through FPGA. In the simplest terms: if you have the schematics for a Sega Genesis, you can translate those schematics to code the FPGA can execute, therefore turning the FPGA into an incredibly accurate hardware simulation of a Sega Genesis. It’s a remarkable feat of creative engineering executed and enjoyed by a large community of retro gaming and computing enthusiasts.

It was through a mutual friend in the MiSTer community that I was introduced to an Australian developer that goes by the name Wizzo. He had been creating popular scripts, tools, and other interesting features to enhance the overall user experience of the MiSTer. We hit it off immediately. We shared a passion for UX and building cool stuff for people, and agreed that we needed to work together on something. Wizzo had recently unveiled a tool that let you write a data string to an NFC token using the MiSTer. The concept was interesting. Rather than scroll through multiple menus to launch a game, simply tap an NFC token, and the game launches. It wasn’t writing the actual game to the object. Just a reference to where the game resides on storage. I was immediately intrigued.

We both envisioned this as a way to create a “virtual” console experience like the one we all grew up with. We imagined people creating entire collections of cards with printed labels. Having their kids choose a game and start it themselves without fumbling with menus. The convenience of digital meets the presence of physical. But why limit it to games on the MiSTer? What if we could make this into a cross-platform standard that was open and free to use? What if we could allow anyone to physically automate anything with a simple tap? The accessibility impacts alone excited us.

We agreed that we wanted to develop this further. First order of business: it needed to become a separate project. That way it could more easily exist outside the umbrella of Wizzo’s other projects. Second: it needed a new name. Although functional, “Wizzo’s NFC reader” didn’t have the lovable and memorable ring that we dreamed of. 😄

Gathering the pieces…

I immediately began jotting down ideas. I felt very strongly that it not only had to be fun to say, but it also had to be easy to say. Accessibility was a cornerstone of this project for us. Additionally it had to tell you exactly what it did in the name. “Tap” came in immediately. After that it became a question of what the other half was. I was shocked that TapTo didn’t seem to be the name of any products I could find. Sometimes you just get lucky, I guess.

As the only one between us with any tangible graphic design experience, I made a few passes on creating a logo. But I’m much more of a graphic and typography nerd than a logo designer. It was time to call in the professionals. We reached out to some design friends in the MiSTer community for help. A few days later, this arrived in our inbox:

TapTo

You know those moments where something feels just… perfect? Yeah.

Now that we had a “brand” in place, I began putting together label designs. An NFC “token” is really anything that can interface with an NFC reader. It could be your phone, a plastic disc, a Nintendo Amiibo (no really, we support those). But the format that stood out for me was the humble NFC card.

See: one of the coolest physical game console formats around when I was younger was the HuCard used by NEC’s PC Engine/TurboGrafx 16 (depending on where you grew up). Nintendo and Atari games came on chunky cartridges, but NEC’s console used little credit card sized games that slid into a slot on the console! Standard NFC cards were almost a perfect match! Plus: they were plentiful and inexpensive. It was decided: that would be our target medium.

The original TapTo template next to its inspiration.

In what I can only describe as the universe working in mysterious ways, Wizzo reached out to me to say he’d been contacted by someone working on a case for our NFC reader. As the NFC reader had been available previously as part of the original NFC Reader project, a few were already out in the world. One of them was in the hands of a person in England who arrived at the same conclusion I had; HuCard. Only they had knowledge of 3D modeling and printing, so they created a case that enclosed our reader in the bottom, and you simply slid the card into the slot. Incredible! We brought him into the project immediately and collaborated on how to adjust the software, case, and labels to work in perfect harmony together.

Within days we had a simulation of a game console. Not only could you insert a card to launch the game on the label, it also quit the game when it was removed. We’d just taken a huge step forward towards our original vision of a physical game collection.

The newly christened NFC Engine case with a TapTo card inserted.

During this time, Wizzo had managed to source inexpensive and readily available NFC readers from another MiSTer project contributor. Alright! The code was ready. We had a name and a logo. We had really cool card designs along with a case that worked like a real game console. Time for success, right? Well…

Since such a big part of the vision was people having entire libraries of NFC cards (we were dreaming of Pokemon style collections), I had created downloadable template files for people to create their own labels. They were totally free and open source, and in open formats that were compatible with every software package possible. We didn’t want someone not having access to costly design software being a barrier. However… that also assumes that your average TapTo user would be willing and able to navigate design files. Not to mention source game artwork and place it in said files. This was a huge problem…

Our friend from Italy…

…or would have been if a developer going by the name Asturur didn’t arrive on our Discord with an amazing solution in hand.

See: Asturur (or Andrea) has a tremendous amount of experience with the uploading and manipulation of images for print output. It just so happens that his day job is for one of the larger online photography websites, and he showed up one day in our Discord with a proof of concept application.

User flow of an early version of the NFC Retro Printer.

It was called NFC Retro Printer. The concept was simple: drag an image to the browser window to upload it. Then choose your TapTo card template from our pre-made styles. Once you were satisfied, it generated an A4 size PDF of your images for you to cut out and stick to cards. It was incredible, and exactly what was missing to allow people to generate the vast TapTo card libraries we had envisioned.

The application was still incredibly rough from a UX standpoint, and Andrea asked if anyone had feedback or could help improve the experience. My hand shot up to volunteer immediately.

Andrea also just happened to be the keeper of the open source Fabric.js project, and had built the tool using it. Due to his greater experience as a front-end developer (and my zero experience with Fabric.js at that time) the most efficient path forward to was to use Figma to collaborate on designs. He could then implement them in the Fabric.js framework and could instantly push a build live through Netlify. It was a pretty snappy working setup.

Once I had familiarized myself with what Andrea has already built, I began looking at the little nudges I could make to improve the general usability. First up was giving the application a proper home state.

Again: what Andrea created was meant to be functional, not perfect. So to this point he created what he needed to effectively build a functionally complete tool. Everything you needed to make this work was there, along with a call to action. Little nudges. No need to tear the house down when a fresh coat of paint and some new cabinet hardware will do.

Even with this basic revision, the clarity and usability of the site had taken a major leap forward. Since the TapTo branding is open source, there was no reason to not integrate it directly into the design. This immediately communicates that it’s related to the project, and helps establish some connective trust. The call to actions are now presented in a much clearer fashion. The drag to upload functionality remains the same but now has a clear “drop area”, along with a ‘browse’ link that performs the same function as the “Add Files” button.

Another feature that was added during development was integration with game cover art search engine APIs. This allows you to use your own files, search for your games right in the software, or a mixture of both. The search functionality is still a WIP but getting better with every iteration! With all these great options, that drop down is getting a bit unwieldy already. 😅

The rest of the additions provide context as to what TapTo is, and helpful links to related to the project. There’s a quote from the legendary comic creator Stan Lee“Every comic is someone’s first” — and I hold that as true with websites and applications as well. Don’t assume a person knows everything they need to. Help them get up to speed!

On to the actual tool! Now that artwork is loaded, additional workflow controls for modifying the TapTo templates appear. The first step is choosing your preferred template from the Card Template drop down. We initially included the templates that I originally created, and the community quickly began to generate their own. We’ve invited submissions for templates through our Discord, but a submission form with the ability to upload files is something we’re considering for the future.

Next up in the workflow controls are the color palette options. Since all of the template designs that I created were SVG files, it allows the customization of colors by simply modifying the accompanying CSS for them. Want to color code each console? Perhaps a unique color scheme for a particular genre? Go for it! Andrea taught me a lot about the value of optimizing SVG files for export, and even how to do it right in the code. Which has already come in handy.

If having cards a bit more color matched per game is your preference, simply press on the image to get per-card controls. We feel the ability to customize your TapTo experience is one of the most important (and fun) things about this project.

Now that you have all these awesome TapTo cards designed, it’s time to print them! Understanding that many people don’t have access to a printer at home, the software generates a PDF for preset paper sizes. That way you can take it to your friend, the printer at work (we won’t tell), or save a copy for future use. We also support creating a zip file containing print-ready PNG files of each card. This is ideal for people using plotters like a Cricut to cut out their labels quickly. Other sizes have been suggested by the community, and are added when enough demand is there.

And there it is. We went from “oh no, this is a huge problem” to “we have the perfect solution” in less than a few weeks. To help our users out further, I spent a few days documenting some best practices and tips for printing and preparing your artwork for TapTo cards. Feedback from the community has been wonderful. This one made my day:

It’s a great tool! And it existing made the difference between me going “huh neat” and never bothering and me actually doing this. Thank you for the Designer!

Working with Andrea on the TapTo Designer software was one of the highlights of this project for me. We’re all incredibly grateful for his contributions and the incredible impacts he continues to make on this project.

Reflection time…

This road will never end. It probably goes all around the world.

Mike (River Phoenix) – My Own Private Idaho

TapTo was officially released on January 21st of 2024. The silly little idea was now out there. We thought it was pretty cool, and we hoped others did too.

People were talking about it. My long ignored Twitter account was suddenly packed with notifications. Photos of TapTo collections started pouring in from all over the globe. Binders packed full of colorful cards, just like we imagined. Only now it was real. People were doing it. They were loving it.

Not long after, FPGA gaming YouTube channels started talking about TapTo. Shortly after that, they were making TapTo part of their weekly coverage (like this one or this one). In late February, The Verge published an article about it. Although their story ends right after we launched TapTo. Then popular gaming site Time Extension published an article about the project. There’s now a MiSTer fork with TapTo support built-in. It’s such a great, and humbling, feeling seeing so many people enjoy our work. Turns out it wasn’t so silly after all.

So what’s next? As I type this in late March of 2024, TapTo has become part of my daily life. We’re always discussing new ideas and expanding features. Ryan (the designer of the NFC Engine case) has been busy making new cases, and even opened a shop to sell them. The NFC 1541 floppy drive case is especially cool. I even designed the label for that one. Andrea is still working diligently on the TapTo Designer software. I actually owe him some designs for some features we want to add. As for TapTo itself: we’re working on something that we think is pretty cool… again.

We hope you do too.