Introduction
Our proposal to build a GCSE revision app, as described in my previous post, was accepted by the client. The team settled on an art style for the app’s avatars and began compiling content. Work has also begun on building the app itself. Following technical research into the feasability of using a game engine for this project, the team decided to proceed with a different platform and I will discuss this decision in this post.
Unity 3D
Initially, the team was keen to use the Unity 3D game engine for this project. The main factor for this was that each member of the team has at least some experience using Unity. A further influence was that during the earlier stages of our team meetings we were orienting toward a video game style app with animated characters. However, as I discussed in my previous post, the market research for the character design was inconclusive and the relatively short timeframe available for the project meant that we must propose an alternative solution to the client. The result of our team discussions is a more classic style mobile app with gamification mechanics , some flashy avatar designs and a mock social media stream.
Material UI
While considering Unity as the choice platform to develop our mobile app I researched what tools are currently available for developers to create native style mobile apps within Unity. The reason for this research is because Unity’s built in UI components are few and very basic and not optimised for mobile.
During the research, I found a great looking third party commercial asset called MaterialUI which claimed to allow you to “easily utilize the bold and modern components of Google’s Material Design“. Material Design is an open source design system created by Google. It works well on both Android and iOS so this appeared to be a great asset for our project. But, upon closer examination, it became clear that the asset has not been updated for a long time. It has a stream of very poor reviews on the official Asset Store due to lack of support and updates; Indeed, the asset will not work on any recent versions of Unity.
UIWidgets
After the disapointment of Material UI for Unity, I decided to check out the main Unity Technologies Github Repositories to see if there were any Unity built assets that we could use. I was cheered up when I came across UIWidgets an asset built by the Unity team for creating cross platform UI for mobile apps. The component is mainly derived from Google’s Flutter mobile development framework and therefore inlcudes support for Material Design. Unlike Material UI this asset is free and as it’s maintained by the Unity Team we could be more confident about support for new versions of Unity;
I installed the compent on a test project and begain to put together some sample screens. The asset is almost entire code based; whereas a major attraction of MaterialUI was that it claimed to be fully integrated with the visual editor with drag and drop Material Inputs. UIWidgets requires every UI input to be coded which kind of defeats the object of using a visual editor tool like Unity. Furthermore, there was almost no documentation available. Just a getting started readme file and some demo’s to work from. Although the project is open source and we could help improve the asset through contributing code; we don’t have enough time to do that for use in our current project.
IUIWidgets is still tagged as a preview and this would explain the lack of documentation. Otherwise, it looks like a potentially great component; especially if there are plans to integrate the UI components into the visual side of the Unity editor. However, for our project, this asset is still too premature. We can’t risk using a lightly documented preview release asset for our project anymore than a well documented but ill-maintained asset.
Flutter
It became clear to me that while Unity is a great tool for creating mobile games and bespoke app designs with animations and 3D graphical content, it isn’t the ideal choice for building a cross platform mobile app with a consistent UI design system.
I shared my findings with the team and suggested that we work with a more suitable framework for building a mobile app with a UI design framework. We settled with Flutter because it natively implements Material Design, is cross platform, well documented and open-source. While Flutter will involve a steeper learning curve for the team, it’s a skill that is highly reusable for mobile development. I would also like to note that while researching which mobile framework to use, it was very difficult to seperate Google’s Flutter and Facebook’s React Native. While these are two distinct frameworks, each offers exactly what we neede for our project and we opted for Flutter because unless React, which uses native UI components, Flutter renders all UI itself meaning that it is not dependant on the version of the system it’s run on.
Development
Here are a few screenshots of the development, so far, using Flutter.
