Innovation in Orientation

Berry Forest is a kids toy. You can create your own Berry while exploring a forest handcrafted out of modeling clay that is full of animals and mini games. You need to be aged between 2 and 6 to get the most from it. But I want to touch on an aspect that is more of interest to general application designers. Berry Forest has something that if not unique - I have not checked all 800,000 apps on the App Store - is certainly rare. That being a sophisticated app specific orientation change animation.

 

Orientation change what what?

The video above shows the standard iOS orientation animation. Orientation is the way a device is oriented, that is the way round you hold it. Portrait orientation is where the home button is at the top or bottom. While landscape is when the home button is at the left or right. As you turn the device round the current application animates to show itself in the new orientation. On iOS a number of Apple's own apps have interesting orientation change animations. Open the Stocks app on the iPhone an move your phone between landscape and portrait to see the stock graph animate about beautifully.

The video above shows the orientation change animation in Berry Forest. It kicks of with me showing the real app on an iPad Mini, just to prove no cheating is involved. Then the first stock rotation is shown. Nothing new here. Then after that is the special forest specific animation. 

The power of Zing™

Start Berry Forest and you should be struck by the ultra smooth 60 frames per second interface, even on older devices such as the iPhone 4. When we started out to make Berry Forest we knew we would be developing our own engine to build the app with. Building your own engine and tools is cool,  too many of the existing frameworks are difficult to work with and finally they don't offer the kinds of graphics and animation abilities we need. So Berry Forest was co-developed with this new engine that we call Zing. The more involved rotation animation is also something having our own engine made possible.

 

iOS system UI

iOS system UI

Smoke and mirrors

Understanding how this animation was done also gives some insight into why so far this potential rich area for some fun animation has not yet been mined.  First of all we disabled the standard app rotation in iOS. In reality the app is always running in the default landscape orientation you see when the home button is on the left hand side of the screen. 

So inside Berry Forest we just rotate the scene and run that upside down if you flip over your device. Would there be any clues to how we do this? iOS has a system UI that shows a variety of menus and popovers. In the above screen shots you can see the volume indicator, the notification drop down and the recent apps bar. There are also items such as the low battery warning dialog. All of these would be upside down. Luckily iOS has an API where we can tell the device which way up any system UI should be shown. This just leaves one issue left. When showing the notification drop down or recent apps list we have no way to rotate the screen. iOS is in control here, not our app. So for now if these two parts of the system UI are showing you turning your device to a new orientation does nothing till you go back to the app or close it. It is a bit disappointing that this clue exists, but at least for now iOS offers no way that we are aware of to also us to do the detailed orientation animation we want and allow the standard system animation to be used when the system UI is showing.

Improvements

Unlike most iOS applications we don't stop any of the other parts of the app animating or disable touch. At the end of the video above you can see that the berry carries on walking to the logs and the camera keeps on panning, all while the separate layers of the forest spin round. There are also no dropped frames so the experience is smooth and fluid.

The in-forest animation works by rotating each of the six main layers that make up the forest one after the other. To add a bit of variety when you rotate the device one direction the layers rotate with the front layer starting first and then it works its way back. While in the other direction it starts with the back layer and works its way forward. 

All the layers still rotate in the same direction and with almost the same amount of easing as the stock iOS rotation animation, so it still has a subtle designed for iOS feel.  

Closing thoughts

First of all this animation serves no real purpose. But then again neither does Berry Forest because at its root it is a toy. If it has a purpose it is to entertain. It has creative aspects such as the ability to build a berry. The animation and responsive UI reward exploration. The puzzles may help the development on hand eye coordination and stretch your thinking. But no more or less than many other toys. Toys should be fun and encourage play. They also should sometimes have a bit of hidden fun. I wanted to have a cool orientation animation and the aim was to make it playful. At least on those two points it hits the mark. If there had been more time it would have been good to have created animations for other areas of the toy such as the underground Berry Builder. There was also a plan that after spinning the layers of the forest the berry would have been left all alone in the air. Then gravity would kick in and it would have fallen to the newly rotated floor. Again time got in the way of making this a reality. But there seems to be a rich array of possibilities for the future and now we solved the big issues to allow these kind of app specific orientation animations you can expect some even more fun ones from us in the future.

 

If you want to support this blog and the creation of more articles like this consider getting a copy of Berry Forest from the App Store. It is universal for iPad and iPhone and currently on sale for just 99 cents.