Maintaining a Geolocation Specific Game Leaderboard with Phaser and MongoDB

When it comes to game development, an often forgotten component comes in the form of a database for storing gameplay information. The database can contribute to numerous roles, such as storing user profile information, game state, and so much more.

In fact, I created a previous tutorial titled Creating a Multiplayer Drawing Game with Phaser and MongoDB. In this drawing example, every brushstroke made was stored in MongoDB.

In this tutorial, we’re going to look at a different data component for a game. We’re going to explore leaderboards and some of the neat things you can do with them. Like my other tutorial, we’ll be using Phaser and JavaScript.

Add Music, Sounds, and Other Audio to a Phaser Game

If you’re building a game, you’re probably going to need audio such as sound effects and background music at some point in time. Without audio, the gameplay experience can feel quite boring, which no one wants their game to be labeled as.

I’ve recently written quite a few tutorials on the topic of game development with Phaser. We’ve seen everything from adding and animating sprites, to handling collisions between game objects.

In this tutorial, we’re going to see how to add audio to our Phaser 3.x game in the form of sound effects triggered by collisions.

Object Pooling Sprites in a Phaser Game for Performance Gains

Performance is everything when it comes to video games. Lag and stutter due to dropped frames can easily ruin your game. This means that you have to be considerate of how you manage your game resources to prevent unnecessary operations and stress on the client computer or mobile devices running the game.

If you’ve got a game with a lot of items, enemies, etc., creating and destroying these sprites as necessary is an expensive task. Instead, it makes sense to create an object pool with a predefined number of preloaded sprites that are used or hidden as necessary. This means that instead of creating a sprite when you need it, you pull the sprite from the pool. When you’re done with the sprite, instead of destroying it, you add it back to the pool. While this seems like a silly task, it can have huge performance gains within your game.

In this tutorial, we’re going to see how to create and use an object pool for our sprites in a Phaser 3.x game.

Accept Text Input from Users in a Phaser Game

When you create a game, you may find yourself needing to accept keyboard input from the user. I’m not talking about using the keyboard to control your player, but instead to accept text from the keyboard to be used as a username or for the in-game chat.

If you’ve been keeping up with the Phaser content releasing on the blog, you might remember the tutorial titled, Creating a Multiplayer Drawing Game with Phaser and MongoDB. This tutorial demonstrated taking user input to be used as the game information, but it did so with a bit of HTML hacking.

There are better ways!

In this tutorial we’re going to see how to take user keyboard input directly within a Phaser 3.x game using embedded HTML and JavaScript, rather than HTML layered on top of the game.

Switch Between Scenes in a Phaser Game

When you’re building a game, you’re probably going to have more than one screen. For example, you might have an initial menu screen, a main gameplay screen, and a game over screen. These screens can be thought of as scenes in a game, the same way you can think of scenes in film.

Every scene that you have in your game represents a clean slate, or a fresh starting point for that particular subsection of content.

In this tutorial, we’re going to see how to create multiple scenes, switch between them, and pass data between them, using Phaser 3.x and simple JavaScript.

Include Touch, Cursor, and Gesture Events in a Phaser Game

So you’re at a point in your game where you need to allow the player to interact with the game. While keyboard events are common in a lot of games, they aren’t the only way to interact, and they may not even be the best way to interact if you’re planning on taking your game into a mobile setting.

An alternative to using keystrokes to interact with your game is to use pointer events. Events that involve a pointer could include the clicking or movement of a mouse, a tapping of a finger, or a swiping gesture event with either.

In this tutorial, we’re going to see how to interact with a Phaser 3.x game, not with a keyboard, but with your finger on the screen or with your mouse.

Use Matter.js Physics for Sprite Collisions in a Phaser Game

I recently wrote about handling collisions in a Phaser 3.x game. In this previous tutorial titled, Handle Collisions Between Sprites in Phaser with Arcade Physics, the focus was around the arcade physics engine that Phaser integrates with.

While you should use the arcade physics engine whenever possible, due to its speed and efficiency, sometimes working with box and circle physics bodies isn’t enough.

This is where Matter.js comes in!

Matter.js is another supported physics engine in Phaser 3.x and while it offers quite a bit of functionality that arcade physics doesn’t offer, it also offers custom polygon physics bodies.

In this tutorial, we’re going to explore collisions once more in a Phaser game, but this time with Matter.js and more refined boundaries.