While Sketch is a powerful tool for designing user interfaces, we’re always amazed by the different uses people find for it. So when we saw a Reddit post about King Rabbit — a game designed entirely in the Mac app — we were intrigued.
To find out more about the creation process for King Rabbit, we spoke to Brian Oppenlander, co-founder of RareSloth and designer on the title. Here’s the story of how he came to use Sketch to create every asset in the game.
Can you tell us a bit about your design history?
I have an MS in human-computer interaction & design from Indiana University, and after I graduated I worked for two years as an interaction designer on the user experience team at a massive healthcare software company. I never really envisioned myself making games.
I made a friend, Austin, who’s a programmer — and he later became my business partner. We decided to make a mobile game, and it took us a year to complete it. After that we started on another game and eventually planned the transition to bootstrapping RareSloth and making games full-time.
At the healthcare software company we used Adobe Fireworks and then later transitioned to using Sketch. So I have at least five years of experience using Sketch for UI design and games.
It’s fair to say that the majority of game designers don’t use Sketch to create their assets. What made you choose Sketch as your tool?
Using Sketch is definitely unconventional! I’ve never met another person using Sketch for game development. But as you can see, it can be done — and I’m still enjoying it!
For my first game I used Photoshop and a tablet to paint all the assets. That’s definitely more of a ‘normal’ tool for game art. But I still don’t consider myself a very good illustrator or painter, so I’m a lot more comfortable creating minimal vector art.
Sketch was flexible enough for me to create my own ‘Character Creator’ system using Symbols.
On our second game I wanted to use a simple art style so I could be more consistent, faster, and be able to work more within my abilities. I started by making vector art with Illustrator, but then transitioned to Sketch.
For puzzle games like King Rabbit, I think it’s imperative to make the art very clean and readable. A heavily-stylized puzzle game can quickly become visually distracting, which takes away from the puzzle experience and can potentially become overwhelming or frustrating.
How did the process of designing in Sketch compare to using Illustrator, which you used for previous games?
Illustrator felt bloated, and the exporting process was convoluted and slow, which was a huge pain point for me. We have to export assets very frequently.
Artboard and export management is superior in Sketch — it’s really important to be able to manage and export assets quickly and efficiently. Illustrator would also crash randomly, which I have rarely experienced with Sketch.
I found the asset management and export flow with Sketch to be far better than Adobe’s products. Sketch always felt so much lighter to work with, and that made work so much more enjoyable and efficient.
Having the whole art pipeline contained within Sketch really streamlined things. There was less context-switching, and less time fumbling with multiple programs.
How simple was it to translate your Sketch designs into a working game?
I think Sketch can be a great solution for 2D games. It was flexible enough for me to create my own ‘Character Creator’ system using Symbols. These individual body part pieces are Symbols that show a preview of the character in all the different perspectives that our game supports. In our case we wanted to create a lot of skins for King Rabbit, so we needed to re-use the animations. By using a template and previewing within Sketch, we can make sure everything already lines up perfectly before we export it to the animation software. In fact we don’t even have to open our animation software anymore — if the skin looks good in Sketch, it’s production ready.
Naming the Artboards with the export path makes it really quick to update assets in the game project.
I also created a tileset creator system. Tilesets are a common requirement for top-down 2D games like King Rabbit. It was easy to set up a tileset template in Sketch that also shows a real-time preview to ensure everything is pixel perfect. We use our tileset template for the grounds, walls and paths.
You can also use Sketch to design and preview your own repeating textures using a 9x9 grid of symbols. Here’s an example of a texture used for a dirt/stone wall.
While there may be other tools that can do these things, having the whole art pipeline contained within one piece of software really streamlined things. There was less context-switching, and less time fumbling with multiple programs. Having everything (Colors, Styles, Symbols, UI elements and so on) in one place is so convenient.
And did you hit any issues? How did you overcome them?
When files started getting big with lots of Symbols, things started to slow down a little. I think this was caused by using a ton of Symbols, and this seems to have been improved with Sketch 67. To overcome the issue and reduce memory demands, I split assets up into separate pages or files — UI, characters, tilesets, items, and so on.
What are your plans for the future of King Rabbit (and RareSloth)? Will Sketch be a part of them?
Big plans! King Rabbit is a community-driven experience, where you can participate in shaping the experience for other players. Our players have built roughly 150,000 King Rabbit levels already, providing an almost infinite stream of content for free.
In the next major update we’ll be adding the Rabbit Market, which lets players buy and sell rabbits directly from other players. Our skins are different from most games because they are limited to 100! We think making skins scarce is good for players because they retain their value. If you get tired of a skin, you can sell it for premium currency and buy a new one. This creates a dynamic end-game experience where players can compete to collect rabbits and show off their collection. Flipping rabbits for a profit is another meta-game for players to participate in. It will be interesting to see how it plays out.
We don’t even have to open our animation software anymore — if the skin looks good in Sketch, it’s production ready.
Another thing we’re testing is letting designers and artists submit their own vector assets using Sketch. For example you could create a custom rabbit skin or tileset. Not only will designers get compensation for their contributions, they’ll also get recognition from the community.
If designers are interested, they can sign up on our website to get the character and tileset templates, which they can also use for their own projects.
We do plan on making more games, but we want King Rabbit to continue to be a living game that we’re always improving and adding new content to. It’s a sandbox experience with a lot of potential to scale and evolve.
Personally, I plan to continue using Sketch for our games. We have a nice library of assets that can be re-used or repurposed for future games, which will really help speed up development time.
Do you have any tricks or advice that you’d share with other designers considering using Sketch to design a game?
Start small and iterate! Scope is a skill to manage…
I follow an expansion and contraction process. In the expansion stage, you allow yourself to be loose and creative. It’s usually a little chaotic. Then in contraction, you go back and get organized again, tighten things up. Repeat.
If you’re always in a contraction mode, you might be over optimizing and being too much of a perfectionist. There’s a lot of pressure on designers to create pixel-perfect work. Over optimization is a trap I fell into with some of the game art — trying to make everything pixel perfect and consistent can really slow you down and limit you. This depends on what kind of work you’re doing and your constraints, of course.
I think one of the traps indie game devs fall into is going too high-fidelity, to the point where everything takes too long and the game never gets finished. It’s important to be efficient with time, and Sketch helped me keep things simple.
You can download King Rabbit for free on iOS, Android and Steam _to see the #MadeWithSketch artwork in all its animated, interactive glory. It’s great fun.
Have you used Sketch to draw detailed architectural blueprints? To create an animated cartoon series? Or something even more impressive? Let us know on Twitter — we’d love to tell your story.
