Changing the game. Literally.
Let’s face it, everyone knows HTML games are limited at best but almost everyone has become complacent about using them. So, on request from a client, we looked at including 4 HTML games into an already amazing app experience for National Geographic Kids. As expected, we ran into memory, performance and sound issues on the first day.
After investigating, we discovered that javascript was leaking memory causing the app to eventually crash. In fact, the performance of these HTML games was so poor, it actually took a number of lower end devices off the list.
That was the last straw.
With our You.i Engine One SDK, a full fledged 3D rendering engine, at our disposal, we’ve always known that running minigames as part of a full blown app experience was possible. We’ve toyed around with this notion in the past — it’s been one of our biggest motivations during hackathons to explore how we might change that dynamic.
With our Engine One SDK capable and HTML not working in our favour, we decided to build a simple game engine and created our own games so our clients can control the quality, performance and design.
Over the next few days, the team built a small prototype to de-risk the engine and prove it could be done. We had a chance to innovate and do something completely different than what our SDK provided: a minimalistic Component System integrated with Adobe After Effects (AE) directly. We started with a custom preview tool that we integrated into the AE exporter plugin as usual to allow the production artists to iterate quickly in AE without having to load the full application.
The first game, Fruit Harvest, was created shortly thereafter.
Augmenting the SDK: The Game Engine
It was simple to augment our Engine One SDK using this new Component System. We know that designers that are familiar with AE will hit the ground running, and we know that we needed to build on our existing workflow, even if the WYSIWYG aspect was not quite there. The preview tool closed the gap and we managed to ship beautiful games with it.
So what is this mini component system? The root of the Game Engine built on top of the SDK is composed of 2 major pieces: The Game Engine Core and the Component System. The Core is responsible for hosting Game Instances with associated Game Views. The sole purpose of the Core is to iterate over all game instances and pulse them (often called a Tick) to cause an update. Then a cascade of updates propagates throughout the Game Components.
The unique thing about the Component System is that we did not use After Effects comments to configure the components and properties. Instead, we used compositions and layers. To add a component simply create a composition and name it accordingly.
For example, if the designers wants to emit objects at regular interval, he would use new composition called: (component)GameSceneNodeEmitterComponent. The Game Component can then be configured using specially named layers. For example, the time between emission would be configured using a layer called (property)timebetweenemission:2300. The time used here is 2300 milliseconds or 2.3 seconds.
Another example of component is (component)AudioSourceComponent. The audio source can be queried to find the name of the audio clip via (property)audioclip and the name of the timeline that would trigger this audio clip via (property)timelinename.
All these properties can be done using AE Null objects. They are easier to configure and copy than comments. The AE properties panel was not required, allowing to easily extend the properties and components without having to update the panel’s UI.
The Game Components are registered using the SDK’s runtime information (RTTI) system, so components can be instantiated using a simple literal. Adding components does not require you to make changes to the engine or component views hence reducing maintenance cost and complexity. These components can be added to the preview tool and a new preview provided to the artists. This requires very little engineering effort reducing cost and speeding up game production.
The end result were games with vibrant colours, smooth animations, and an exciting new opportunity to expand the capabilities of our engine. Take a look…
Fruit Harvest
Space Cadet
Memory Master
Flattery will get you everywhere
The best part about this entire experience? Being asked, “Did you guys use Unity to do this?”
There is nothing like being compared to the market leading game framework to put a smile on your face. I expect this will not be the last time you will see us push the bounds of what this small game engine can do. As we always say at You.i TV…
Thanks for reading! If you like what you saw here, make sure to follow You.i TV. We’re building the future of TV and learning a lot along the way.
