Animal Crossing Pattern Tool

Official Website • GitHub

An application that edits Nintendo's Animal Crossing New Leaf and Animal Crossing New Horizons pattern files, capable of encoding to and decoding from QR codes. Meant to be used in tandem with Animal Crossing New Leaf (3DS) or Animal Crossing New Horizons (Switch) and the Nintendo Switch Online mobile application.

Collaborators

Recognitions

A couple museums around the world, social media personas, and news outlets have mentioned us!

Background

In 2012, Nintendo released Animal Crossing New Leaf (ACNL) for their latest portable console – the 3DS. This was the first of the Animal Crossing series games to feature QR codes with a means of sharing in-game apparel designs over the internet by uploading in-game screenshots of the QR code. While ACNL continued to gain steam in popularity, so did the number of pattern designers and QR codes. Spanning dedicated ACNL forums, Tumblr blogs posts, Tweets, and Google Images, the method of discovering and sharing pattern designs was decentralized and painful. Another problem noticed was plagiarism, a common complaint from the Japanese ACNL community. Designers had been taking patterns from the Japanese community passing them off as their own.

The first of people to begin scratching these problems was Thulinma, a developer in the Netherlands, who created an early version of the pattern editor. At the time it only handled ACNL patterns and couldn't show a 3D model preview of the apparel that the pattern would be projected to in game. I reached out to him about his application in 2018 trying to understand the underlying pattern format encoded by the QR to prepare for the next anticipated Animal Crossing game (and what I anticipated to be the next QR code format). With the pieces assembled I eventually began making design mockups and experimental performance tests for a centralized, searchable database of patterns.

Thulinma later extended an invitation to me to join him and Myumi, a developer in New York, in making the next generation of the application, We made uncommitted plans to develop a new application from scratch and decided to stay in touch with each other. A majority of this time was spent idle, waiting for Nintendo to make some mention of patterns in their announcements or gameplay previews. In Feb 2020 Nintendo finally showcased patterns in their Nintendo Direct for Animal Crossing New Horizons (ACNH) while also setting the release date a week or two right after.

Approaching Launch

With 1-2 weeks of available development time, we hurriedly began brainstorming ideas. Very quickly, we set up a Discord server to help us, who were all residing in different parts of the world, to communicate and support our future users. We decided to deploy a web application on our own servers and domains with the potential to release an offline version. The app would include the pattern editor which would allow you to edit via a GUI, include the ability to import and export QR codes and include backwards compatibility for ACNL patterns. We also floated the idea of including the ability to convert regular images to ACNL patterns as a bonus feature.

During initial development, the ACNH pattern format was not publicly available. So, Thulinma took care of our pattern format librarry, backend API, and infrastructure. I instead redirected a majority of my efforts to the frontend UI and Myumi worked on improving QR code generation and support. Since no one had access to ACNH just yet, we made plans to reverse-engineer and add this in a future update (which we did).

We also wanted to include an account system, but with two weeks left, there wasn't enough time and resources to securely and properly add authentication and authorization. The benefits of an account system wouldn't solve plagiarism and would also require us to setup more internal human infrastructure. Based on our timeline, an account system was out of question.

As Frontend Developer

As an experienced front-end developer, I advised my team on our potential technology stack, helping us decide on a build strategy to provide both online and offline versions of the application. A combination of prior performance tests alongside wanting to include everyone in the development process eventually led us to settle on Vue.js – a component framework similar to utilizing plain HTML, CSS, JS – easy to use for developers on the team unfamilar with working in a component system and ES modules.

Becoming responsible for our setup included setting up custom tooling involving bundling, compression, and dependency structures was the easy part. One of the unique problems we ran into included needing to link a fork of the QR Code library we needed to extend from the source code directly because it didn't support encoding binary data and was written in TypeScript, a different language from the what were using which was JavaScript. This was handled with git submodules at my suggestion so we could modify the original source, compile it back to JavaScript and then reference it from our main project.

I also ended up spearheading a large amount of our UI programming involving setting up our initial routing, pages, portal managers, data stores, client-side caching systems, api libraries, and integrating internationalization features.

As UI/UX Designer

With a prior background in UI and UX, I also led the design efforts in making responsive HD mockups of our UI for multiple screen sizes, determining general art direction, design language, and color schemes. Paired with my background in development, I also advised other team members on the viability of specific UI features.

Before the project kicked off, I had already been working on the UI/UX design for the application for a long time. While I did have a design in mind modeled after online apparel shops, we rejected many of my initial designs as a team because we wanted the UI to feel playful and match the upcoming game's design language and make it feel less commercialy oriented. Animal Crossing had a reputation for being a game where people could relax and take it slow. We wanted the UI to reflect that same mood. We continued with an another prototype of mine playing off the same soft colors that Animal Crossing had used. Looking back, I'm incredibly glad we made that decision.

Early home page concepts:

At Launch

Pressed by lack of time, we focused solely on implementing features. The UI update which was in the works would be queued up for a later time. Thanks to this, we were able to include the ability to convert images into the ACNL format and export the result as a QR code. Lucky for us, the image conversion feature, which was originally a bonus feature, ended up becoming our biggest engagement driver.

Successes

Users greatly loved the image conversion and QR code preview features, using it put pictures of memes, art, and loved ones into their games. Mentioned in the Nintendo Direct, by scanning the QR codes that encoded ACNL patterns with Nintendo's mobile application, users were able to add these patterns to their game after connecting with their Nintendo Account. Our image conversion feature allowed for memes, art, and pictures of loved ones to be added into the game as designs that users could project onto in-game apparel, furniture and decor, and even 1x1 tiles on landscapes. We received heartfelt messages and support from the Animal Crossing community on our platform and collaborated with other similar free platforms like Nooknet to continue getting the word out.

With the resounding positive feedback from the community, we expanded the image conversion feature to include the ability to split the image into a grid of multiple patterns to create in-game mosaics. You can find more examples of how people have come up with ways to use our tool under our recognitions.

Large Consistent Userbase

With the financial resources I had at the time, I could not even remotely afford the infrastructure required to even support such a large userbase. Given our stats for April 2020, we did amazing on release!

By May our numbers began to slack a bit, but it was expected because the popularity and visibility of the game began to fizzle. Players began to understand that this Animal Crossing entry not centered around villager interaction like previous entries but around customization instead. Many of us Animal Crossing fans were feeling burnout from the game. Despite the lack of Nintendo's new updates excluding meaningful additions to the base game, we continued to have millions of unique monthly global users.

Social Media

We made it into popular culture! Over the first few COVID months, you could see us all over social media channels. Our patterns and QR codes were included in the posts of popular Facebook groups such as "Subtle Asian Traits", on Instagram, and on Twitter by pixel art arists. Even popular Youtube gaming channel GameXplain made a video about our application and a tutorial of how to use the old version of it!

We gained enough traction to even be featured in news articles of well-established digital news outlets such as Wall Street Journal, Polygon.

Museums like the Getty built on our codebase an opportunity to engage new audiences by making their own art collections available as QR codes. This motivated me to make a separate publicly available library for developers who want to automate the process or make similar applications.

Other companies were also using our platform as a way to advertise and engage with their customers. This tweet by KFC Phillipines includes patterns that were converted using our tool using the mosaic image creating feature demonstrating how wide-reaching our platform had become over social media. A similar marketing strategy was also used by the President Joe Biden Campaign.

Post Launch Challenges

While the initial development phase was short and sweet, we still had a long way to go in supporting and maintaining the application.

Time Allocation

Over the initial phases of the project, I realized we had split too much of my time between my two roles as developer and designer, that we ran into bottlenecks. Even after the initial release, I found myself having to spend too much time on the HD mockups to help move development forward. Despite being a unicorn, I found our pace of development to be a bit frustrating.

After our initial release, we encountered many offers of other community members volunteering to help. We eventually vetted and brought on Tero, an icon/brand designer from Germany, who did an amazing job creating graphics and branding for us to use, freeing up more of my time for development. With Tero's help we were able to design the UI we have today. Below are a couple of the assets Tero made for us!

Overlooked Infrastructure

Within the first week of releasing our application in late March, we received a DDOS attack from a disgruntled Discord member we had banned for harassing other community members. The application was down for approximately half a day while we scrambled to set up a reverse proxy to deal with the high load of requests as well as malicious ones. We also began adding rules of conduct to our Discord server upon a user joining and became more active in responding to similar incidents.

Nintendo's Legal Team

Nintendo at some point sent us a legal notice, pleasantly worded, that we take down the website in its entirety, citing us for copyright infringement despite the fact that the ability to scan QR codes containing patterns at all was Nintendo's decision. We agreed that we needed a way to moderate the patterns, but not with the copyright infringement. Even if our application did not exist, users could still create copyright infringing content in-game without our application ever existing. This was the one point in their legal challenge that we decided to ignore.

We resolved the other legal qualms by temporarily disabling the browsing system, setting up NSFW filters, and worked on a moderating system the day we got the notice. We removed all references to Nintendo. Nintendo then de-escalated the legal threat and left us somewhat confused about their intentions, despite us not taking away the ability to convert images to patterns and then to QR Codes.

Nintendo later showed up again in a news article when asked by the Wall Street Journal about their thoughts on our application. Their response:

“very happy” that the game is able to “facilitate the creative and social activities of people around the world.”

User-Generated Content

During the initial week of release, we had already received complaints about inappropriate content in our pattern database. This content included racism, sexism, genderism, porn, gore, etc – clearly not content meant for kids or those playing Animal Crossing for relaxation purposes, which really was on entire userbase. We were even featured on Eurogamer for this blunder. This led us to build a NSFW section that needed confirmation.

This was a problem we clearly lacked support for as we had not originally anticipated this to be an issue prior to launch. When we had to develop a moderating system to handle Nintendo's legal challenges, we were not able to spend as much time as we should have recruiting a network of volunteer moderators. Even if we did, we would be lacking a proper set of of moderating tools (and the time to make them) and so it made this an incredibly difficult problem (even more so for a small team) that we still have not addressed as of today. The lack of time due to life prioritiies began to take precendence for our team, eventually bringing new searchable pattern publications to a standstill.

Final Thoughts

Developing, designing, and maintaining the application has helped me familiarize myself with the challenges in a product's lifecycle as well as helped me understand the concept of product ownership. It meant providing support to users (both non-developers and developers), responding to feature requests, reviewing code, managing contributions, and coordinating with team members. We deployed a tool for others to meaningfully engage over social media and games and we were recogized for it.

I'm proud that our work had a positive impact and hope to continue developing open source applications much like this!