Build an Excalibur game: step by step tutorials

We are going to build a complete Excalibur Game

By following our step-by-step tutorials, we are going to build a fully-featured cross-platform game powered by Excalibur and CapacitorJS. Here's a preview of the topics covered in our game development tutorials:

• A React UI interface integrated with the Excalibur game
• Internationalization: let the game speak how many languages as you want with i18next
• Three scenes: a menu and two playable levels, one horizontal and one vertical
• Scene transitions
• Four different kinds of motion controllers for the game's main character: joystick, keyboard, device sensors and zingtouch
• Parallax effect, both horizontal and vertical
• Level logic developed with XState library
• Data persistence between scenes and between game sessions
• Twinery integration for characters dialogs
• Monetization on Android devices with AdMob integration
• Android deployment refinements (e.g. screen orientation and size)

Besides the game development per se, we will also have a look at:

• Deploying to Google Play Store: what else you need other than the game (privacy policies, feature graphics, opportunities as the Google Play Indie Corner...)
• Deploying to Huawei Store: how to adapt the package built with CapacitorJS for deployment on Huawei devices
• Deploying to Itch.io

Why an HTML5 game engine?

Web technologies have never been as thriving as they are now.

If you're a web developer interested in HTML5 game development now is the right time to get started, and this is the right place to learn how! And remember to check the source code of this open-source learning project on Github.

Why Excalibur?

On my day job, I am a web developer specializing in Single Page Applications. I work every day with tools like Typescript, Webpack, Angular, npmjs. While working on personal projects, I had already tried to develop a cross-platform app with CapacitorJS Social Bookmarks. Social Bookmarks is a simple bookmarks saver based on the concept of saving your favorite posts and content using the Share feature of Android devices. The app is built with Typescript, Angular, Angular Material and CapacitorJS.

I've learned a lot of things while coding Social Bookmarks, but that was quite near what I do every day while working. One day I just asked myself, why don't give game development a try?

I don't have a lot of free time, so I was interested in recycling as much as possible the knowledge I already have about web technologies, so I've looked since the beginning at HTML5 game engines. As a complete beginner, I didn't have any expectations or requirement on the tools (or knowledge about game development!), so I've just googled html5 game engines and choose the first that came in the list: PhaserJS.

A first try with PhaserJS

The very first result of my research was PhaserJS. One of the features that attracted me most were the plugin to deploy the game as a Facebook instant game. But, after a month of developing with PhaserJS, I just gave up. PhaserJS has a lot of features as it can be seen on their example gallery but...

• I had a lot of problems with typing. I love Typescript, so I want clear, understandable types that my IDE can work out by itself when resolving auto-imports. I went through some difficulties with PhaserJS.
• After a while, I wasn't sure if the right website where to look for documentation was phaser.io or phaserjs.com. Both of them have guides for beginners. Both of the domains have phaser in their names (by the way, the official site should be phaser.io).
• there are indeed a lot of examples. But examples, in my opinion, cannot and should not replace well-written documentation.
• There should be also a Phaser 4 release, but the last commit was some time ago, then I wasn't sure it's still under development or maintenance. Somewhere there are also the Phaser 4 examples, if I remember well but at a certain point I thought "ok, it's a mess here. Let's look for something else".
I've never tried to write unit or integration tests involving PhaserJS. But the thought of doing it was another reason that convinced me to look for other tools.

Let's look for another game engine

After having tried to develop with PhaserJS, I had a clearer mind on what I was looking for: an HTML5 game engine with clear and well-organized documentation, and full Typescript support. After some other googling around, I found two other alternatives: MelonJS and Excalibur. Both of them have nice websites and clear documentation. But one of Excalibur's statements is to be written in Typescript, and this is the reason why I've finally chosen Excalibur.

A second try: Excalibur

I began growing interest in game development in January 2022... a lot of time has passed since then. I've worked mainly with Excalibur and I'm happy to say that I'm still satisfied with the choice that I've made. Excalibur is simple but has everything that I needed to build the game as I had it in my mind. I've learned a lot of things while developing with Excalibur, both on web technologies and games. Excalibur made it simple and enjoyable. Now that I know something more on these topics, these are other reasons why I'm happy with Excalibur:

• It's a complete engine, meaning that it draws elements, and it also checks for collisions (it has a Physics engine). There are other tools that do not have them both (e.g. threejs or pixijs). They can be used to develop games, but you also need to integrate other libraries for Physics (for example matter.js).
• I was able to wrap Excalibur code to add some functionalities that I wanted (e.g., transitions between scenes), without going mad :)
• Excalibur documentation is quite useful. For example, I've read there about XState library.
• Excalibur gallery, which contains a link to the source code of games, was incredibly useful
• Since learning Excalibur wasn't too time-consuming, I had also the chance to try out React. At my day job, I am an Angular user and I wanted to do something different. I was able to learn them both at the same time, reaching fair results (although I'm not completely satisfied on the React side).

Did you like this article and wish there were more? Donate on Paypal so that I can write more!