Behind the Feature: Cat Codex
One of the best parts about creating a decentralized game is that we’re often building very publically. Features launch, have bugs, and get fixed under the watchful eye of the community. That’s both incredible and terrifying!
Despite how open we are about our process, some parts of it remain behind closed doors. Not because it’s sensitive or we need to keep it occluded, but simply because it’s the nuts and bolts of our day-to-day work.
We decided that, like Take Your Child To Work Day, it would be fun to bring our community to work with us and talk about how we come up with new features. We’re going to do that using a newer feature, the Cat Codex, as an example. We’ll be diving into some technical details, so put your thinking glasses on.
Once upon a Gene Sheet
If you read our feature release update, you know that the Cat Codex wasn’t always called that. But did you know it was originally envisioned as a completely different feature?
The Gene Sheet was intended as an avenue for players to create sets of their cats that they wanted to show off: sort of a build-your-own codex. If you wanted to showcase your cats with the best traits, you could add them to a Gene Sheet and then share those sheets with your friends.
We did some initial product and design exploration, and we were really keen to get started on it, when something unexpected happened: we launched Family Jewels.
Obviously, it wasn’t unexpected that the feature launched; rather, we hadn’t anticipated how much Family Jewels would impact the Gene Sheet concept. We realized that Family Jewels were showcasing people’s cats, bringing a Kitty’s jewels front and center. That was the whole point of giving out a diamond jewel. These distinctions were computational rather than subjective, but they served the same purpose. They let players say, “Look how cool this Kitty is! It’s rocking eight diamonds.” That said, there was no way to look at your collection and pick those jewels or traits out.
Since one aspect of the Gene Sheet was already covered (which cats were coolest), we changed focus to look harder at organizing those cats. The Cat Codex automatically creates a list of every cat you have in every trait category, and orders them by Mewtation jewel ranking or discovery ranking. A Diamond Mewtation jewel is rank one, Gilded is two-10, Amethyst is 11–100, and Lapis is 101–500. After that, we don’t give out jewels, but the code still ranks the cats in order of discovery, which is how the Cat Codex organizes your Kitties. Your top ranking cat is always the thumbnail at the top of the pile, and when you open the modal your cats are displayed in the same order every time.
The second thing we wanted to do was give players an easier way to see what they were missing. This spoke to the collectibility aspect of CryptoKitties, and it’s something we’re still working on expanding! But we’ve started down the path thanks to progress bars that track how many of each Cattribute you have, and how many you need in order to have one of each.
Family Jewels to the rescue
The Family Jewels made the evolution from Gene Sheet to Cat Codex easy and natural.
Building it was mainly up to the design and front-end teams, because thanks to the back-end work that had been done on Family Jewels, it was now just a different representation of data that already existed. From an engineering standpoint, that made it very easy. The Codex was representing data that had already been added to the cats through the Family Jewels. We couldn’t have done the Codex the way we wanted to without the Jewels, because the only way to organize the cats would have been by generation or ID number.
The technical challenge was generating each Codex. It’s computationally intensive, especially when users get into the realms of thousands of cats. It involves organizing by category, by Kitty, and of course by Jewel — that’s a lot of different sections that all have to interact. That format of data isn’t queryable from the API, so the app had to do it internally. In order to maintain excellent performance and user experience, we ran the scripts in Web Worker, and once the results were back we used them for the layout.
Now that we successfully leapt that hurdle, we were ready to release the Codex! We were thrilled to see how well-received it was — it was only a matter of hours before users had bought or bred the cats they needed to fill out their codexes! We know we’ll be adding new features like it in the coming months.
Let us know if you have any other questions about what goes on behind the scenes at the CryptoKitties den, and we’ll do our best to provide some insight!
