Building a game in Principle (and the things you learn along the way)
In no way is Daniel Hooper’s app for animating interfaces meant to build games, none the less, that’s what happened anyway. Hopefully there’s something to be gained from it. Here’s a couple of things picked up on the way.
Using Illustrator over Sketch
Here’s the thing about sketch. A lot of people use Sketch to effortlessly import interfaces into Principle, but at least in this case, no conventional interface was being built. Illustrator was never that great at interface design but it didn’t matter because when it comes to what it was actually being used for, it remains the undisputed champion of creating, manipulating, and distributing artwork with ungodly speed and accuracy.
That being said, it’s still pretty darn easy to import graphics into Sketch from Illustrator. It’s simply a matter of copy and pasting artwork from Illustrator straight to Principle. It converts it to a png file but it’s tiny. My whole Principle file is 1.3mb 😳
There wasn’t even a problem with updating artwork. If you replace the media for any image, Principle asks you if you want to replace all instances of that image. It’s not as automated as when using Sketch but still quite powerful.
Tip: while principle does support custom fonts, it does not embed them into the file itself. If you decide to use a system font, you can expect that your text wont appear as you had hoped it would on another device.
Using artboards for puzzle solving
Let’s move on to the meat and potatoes. This one’s simple, so it’s a good place to start. Principle does a great job at inferring what you want to animate and then, animates it for you. If two layers with the same name appear on different artboards, Principle will automatically notice the difference between them and animate those properties.
Most of the time you’ll see this used to switch between screens, for example, a nav bar coming in and out of view. Usually, it’ll be part of something that helps the user achieve a task. In this example however, it’s about the challenge and satisfaction of solving a puzzle.
Clip groups to stop interactions being blocked by artwork
One thing that threw this project about was the effect artwork had on interactions. Take for example the animation in the previous section, the skin around the mouth is actually a png that sits on top of all other layers. There’s a transparent area in the middle to create a mask for the teeth which sit underneath. Unfortunately, if there are any buttons under this top layer (which there were) then they cannot be interacted with 😓
As a bandaid solution, any interaction with the artboard would progress the user. In retrospect however, there was a little trick that would’ve been a whole lot better…
Instead of masking content by adding a layer on top of everything else, group the content and turn on ‘Clip Sublayers’. This creates a mask that doesn’t block other buttons. In fact, this ended up being the solution for the hero image animation of this very post.
Tip: Choosing to clip sublayers means that anything that falls outside of the group bounds will be hidden. In this case, a radius could have also been applied to give the mask a mouth-like shape.
Using components to loop animations
Not too long ago Principle introduced components which are essentially nested artboards. They can be used to create interactions and animations within a single screen. Super helpful for when there’s a lot of micro-interactions as it cuts down on the total amount of artboards in a big way. It’s been used to animate the width of a coin to give a spinning illusion.
Tip: If you create a component, try to leave all the animation in the component. Animating both the component and the contents within may yield some shaky results.
Animating a bucket-load of layers
Animating multiple properties of multiple layers can become unwieldy to say the least. While no silver bullet was ever found, there were some ways to make this task slightly more manageable.
The difficulty here was maintaining a somewhat natural movement while using a somewhat structured method. This was done by having all the layers starting and finishing at the same X axis. This means that only distribution along the Y axis needed to be accounted for.
Tip: There is no ‘click-though layers’ concept in Principle which makes it hard to select content. A work around for this is to group content together by their perceived z-axis and toggle their visibility (⇧⌘+H) to avoid erroneously selecting layers.
By duplicating the artboard and moving all the coins below the duplicate, principle had automatically created animations for each coin but they were all firing at the same time. To combat this, some manual work was needed. By using the timeline, it was possible to shift over the each layer animation slightly to create the illusion that these objects have fallen from different heights.
Thankfully, this was a one-take solution. No extra tweaking was necessary. Here’s the result:
Mashing it all together to make a toothbrush
This is a more powerful yet more challenging version of using artboards for puzzle solving, so hang onto your panties, it gets a bit wild.
A combination of these features were used to make it all possible. Here’s what they are, what they’re normally used for and then… what they were actually used for 🤓
Paging: Interacting with the brush
Paging works by swiping to snap between ‘pages’ of content within a group. This’s not unlike what you would see for a common in-app onboarding experience. Usually there’d be multiple pages, but here there’s only one page, the toothbrush, so it can only ever snap back to that.
Drivers: Animating the bristles
Drivers are a bit of a difficult concept to grasp in theory but in practice, it becomes much easier to comprehend. Firstly, you need something like the above paging group already set up, once you have that you can then set controls for the properties of any other layers. A typical example you’d see is when a user swipes through some slides and the page dots highlight one-by-one as you go along. In this case, drivers have been used to create the ‘bristles’ of the toothbrush that move in parallax to the actual brush.
Touch Events: Progression to the next stage
Touch up in one of the twelve events that can trigger the user through to another artboard. It’s used so you can interact with an object on the screen for as long as you need to without the event being triggered until let go of that object. For this scene, The user needed to be able to brush continuously, without anything being triggered until they let go of the brush. Once the user did let go, it would progress them to the next stage of the game.
Making it a game
A unique feature of Principle is that you can actually package up any document as an actual app file. This means you can make silly little games like this, or what ever you want really, and send it on to your friends.
Tip: You might need to get your buddies to change their system preferences to allow apps from any source. They’ll also need to be on a Mac, of course.
But there you go, making an game with a prototyping tool. Who’da thunk!
