Devices and apps have got a lot better thanks to a lot of hard work and tricks designed to hide away that devices are still computers and apps are just software. But despite all the advances there is still many problems that drive me mad and one of these is loading screens. You download a fun new game, launch it and then there might be a long wait with a progress dialog that fills up. Then you finally get in and you start a level only to be hit with another wait and a big Loading... screen. It does not have to be this way!
For Berry Forest we decided we were going to have a loading screen free application with no obvious trickery. First of all lets have a look at a video of Berry Forest running. I recorded this right off an iPad Mini.
Please note that although Berry Forest runs at 60 frames per second this video runs at 30.
This shows the app startup, a walking berry and the different parts of the app such as the underground camera studio, the puzzles atop a magic beanstalk and a bird game at the far end of the forest. Now most people probably saw nothing technically amazing. But if you are an app developer you might be scratching your head. There is no way round certain issues. No trick can get around the time it takes to load all the images the toy is made up from. Then they all need to be rendered. So what did we do?
1. We created a toy design where the parts of the world that are loading and unloading are always off screen so no one is ever the wiser to them popping in and out of existence.
2. A game render engine that is capable of a smooth 60 frames per second and does not stutter, freeze, or glitch while the new parts of the world are loaded and then rendered.
Berry Forest appears to be one seamless world. But it isn't'! Lets pull back the curtain and give you some visual clues to what is really going on by zooming out.
When you tap the Berry Forest icon on your iPad or iPhone a static image is instantly shown to you. We then load in the cloud and logo images that match this image perfectly. This just takes a second and then we start the key turn animation. So no long waits to see something start to move.
While the key turns we then load the main parts of the forest. Then the game pans down to the 3 logs and on walk the 3 berries. This area also works as the start screen where you can toggle the music and sound effects and see the credits screen. If while playing the game you want to turn off the music then you are forced to walk all the way back to the logs. It is not the most efficient solution but it does preserve a single seamless world.
Then we select a berry and just by holding your finger down on the screen the berry will walk in that direction. Here you can find the special tree that acts as an entrance to the underground lair. When you tap the tree we immediately start loading the underground. While the Berry travels down in the lift the rest of the underground graphics are loaded and rendered. Look to the right and you can see the chairs and tables pop into existence.
Now as the Berry walks over to the camera studio there is something that is not as planned. Originally the plan was the wall would split apart and reveal the camera view finder instantly. To do this the camera was turned on while the Berry walked. But after much trial and error it seems to be impossible to start the camera on iOS and not have it cause the UI to stutter. Once the berry reaches the crack in the wall the camera is started and you just don't see any missing frames as so little in the scene is moving. It does sadly add a noticeable pause in an otherwise fluid animation.
The berry returns up to the forest and you will see the beanstalk pops into existence as its loading is triggered once you get near. The same goes for the bird game at the far end of the forest.
Each area had its own technical problems to be solved to avoid any skipping in the toy. In some cases the design of the toy, such as with the underground camera had to be designed around issues that would cause frame skips.
Looking back there were two other big issues that are constant recurring themes with this kind of work. The first is that a lot of teams just don't care about the performance of the UI. That is hitting and maintaining a silky smooth 60 frames per second experience. It can be really hard to debate this as sadly few people consider performance a feature. "Does it really matter if the UI skips a bit. You can still do everything in the toy". "Would you really want me to spend time solving this glitch instead of adding some other cool functionality?". But without the silky smooth UI the whole trick of hiding the loading would not work. And without that trick the fact this is software running on a computer would start to show its face. The toy would become secondary to the underlying technology. More on this in some later posts.
The second issue is that having this seamless world caused a lot of debate in the team. Angry debate. Was this worth doing? What counts as a fair trick, could we cross fade from one screen to another? After all films do this all the time. At one point instead of a beanstalk we had a house. How could the berry get into the house without something like a cross fade? In the 1948 film, Rope, by Alfred Hitchcock was released. It appears the whole film is a single take. But of course you could never film a 2 hour movie in a single take. So a number of tricks are employed. Some as simple as having cast member walk across and block the camera to disguise a cut. Now these are ticks, but fair tricks. Was there really a cut when someone walked past the camera, or was it actually part of a longer cut? If it still leaves the audience guessing then the trick is fair. So cross fades got the boot as the wrong kind of trick. Once this was agreed innovation such as the magic beanstalk were invented instead to solve the issue of where the puzzles should live. Some research showed up Disney's multi-plane camera technology used in many of their cartoons and used by us when the berry walks to the bird game at the end of the forest.
Again high standards lead to innovation. Achieving this seamless world was a lot of work, but also a lot of fun. I hope you enjoyed seeing behind the curtain.
Support this blog by purchasing Berry Forest from the App Store here.