Why Ionic Framework and Phaser as a Powerful Combination?
If you’re reading this article, you are likely a web developer looking to use your awesome Angular skills to build mobile games. If you have been a software engineer for a while, you likely already know that javascript based game development environments are relatively new in the industry. As web technologies grew, mobile game development with javascript based technologies became a real possibility using Ionic and Phaser; however, while both frameworks are amazing at their speciality – they have limitations in Mobile Game Development unless of they are combined!
In this guide we’ll talk about the benefits of using Ionic and Phaser for Mobile Game Development.
So with that said, let’s start by taking a quick minute to talk about both frameworks.
Benefits of Phaser.js
Phaser has a fantastic history in game design, and the phaser team has spent a ton of time building a fully capable mobile app platform. The framework already handles animations, graphics, rendering, physics, collisions, etc. You name it – they have it – and one could pretty accurately state that Phaser allows a developer to build out anything that would be necessary for a mobile app based video game….
From a high level, Phaser provides the following benefits:
- Utilizes Typescript (Javascript) – A Web Dev’s dream!
- Free and open-source – no more expensive unity licenses!
- Support for 2D graphics, animations, sprites, and more.
- Full physics engine (velocity, gravity, friction, etc)
- Full collection detection capabilities
Well, that’s great you may be thinking – but if Phaser supports all of this, why would we want to utilize Ionic Framework as well?
Benefits of Ionic Framework
Ionic on the other hand is focused on the business side of mobile applications. They provide an amazing mobile UI framework that’s open-source for mobile applications world wide. We have been using Ionic Framework for nearly 8 years, and have had tremendous success building mobile applications of all different sizes in record time.
High level benefits of Ionic include:
- Free and open-source!
- A single codebase for iOS, Android, PWA’s, and desktop
- Adaptive Styling
- Angular, React, or Vue.js support
And more! Obviously, anyone reading this article can go to Ionic’s Website to learn about the framework in depth… we’re not here to talk about their capabilities.
Instead, we’re here to talk about the advantages of using Ionic with Phaser.
Why utilize Ionic and Phaser Together?
When you’ve built mobile applications for as long as we have, you’ll soon find that MANY of the requirements in mobile applications are the same across iOS and Android, no matter what type of app you are building.
For instance, any mobile application (whether a game or business app) will likely contain the following features:
- Authentication
- Apple Sign-in
- Social Sign-in
- Settings
- User Profile
- In App Purchases
- Push Notifications
- … (eternally long list goes here)
Each of these features is critical to the application as they provide the essential business logic. But you’ll notice that it’s just that… business logic.. Nothing about those features has anything to do with game development specifically.
Limitations of Phaser in Mobile App Development
Phaser is AMAZING at game development! This is their speciality; however, it also provides a limitation. Let’s illustrate with an example and let’s say we want to build a Authentication flow for our mobile app.
In Ionic, building an Authentication page that seamlessly (and adaptively) styles to iPhone 13, iPhone 10, iPhone SE, Samsung Note 2, LG, etc… even supporting all of those devices it could only take 8 hours or less, and most of that will be your custom logic.
In Phaser however; building the same page could possibly take 40 hours plus. You’d have to provide a background, style all the components, and heavily test between all device sides. All for a simple login page.
Obviously, that’s not efficient at all. So what about Ionic?
Limitations of Ionic in Game Development
Now let’s examine the other side of the coin. If Phaser has limitations in Mobile App development, What are the limitations of Ionic in Game Development?
Well… there are many. Matter of fact, I’d argue that it would nearly be so inefficient as to be nearly impossible to build a Mobile Game with Ionic framework. In Phaser, creating simple as simple as a single character walking (aka ‘sprite’) could take only 2-4 hours… however, in Ionic, you’d be looking at days. And performance? Forget about it.
Now take that multiple, and consider more complicated pages…
- Character Assets
- Animations & Effects
- Game World/Maps
- Etc
How to use Ionic and Phaser for Maximum Architecture Benefits
If you haven’t already seen it, we recently gave at Ionic that highlights how to use Ionic and Phaser together from a practical and architectural perspective.
We’ll link to that talk on our Youtube Channel shortly, but in the mean time here’s the jist of it.
- If you…
- Use Ionic to handle all your Business Logic.
- Use Phaser to handle all your Game Logic.
- Then you will…
- Save months/years of development time.
We’ve taken some considerable time creating a Template Github Repository for everyone to use and share.
In this repository labeled “Ionic Phaser Game Template” you’ll find that we’ve setup the following for you:
- Monorepo using NRWL’s NX
- Integration of Ionic and Phaser with Angular
- OpenForge’s latest process enforcements and linting standards
https://github.com/openforge/ionic-phaser-game-template
Please remember to Star the repository if you like it and please share this article as well to any of your colleagues or friends who may be considering mobile game development.
As always, please contact us with any questions comments or concerns.
Good luck mobile developers!
