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.

Continuous Side Scrolling in a Phaser Game with Tile Sprites

In 2D games, it is not uncommon to want animated backgrounds. Having static images in your levels doesn’t necessarily add to the game-play experience, so a little bit of motion can go a long way.

So how can you do this without having to manage these background images like you would a typical sprite?

Rather than worrying about creating, destroying, and managing sprites to represent components of your background, it might make sense to use a tile sprite, sometimes referred to as a tilemap. With a tile sprite you are grabbing tiles from an image and using them wherever you might need them. This approach is common for game backgrounds or levels that have a lot of asset repetition because it takes less resources and will leave you with a higher performance game.

In this tutorial, we’re going to see how to use a tile sprite in a Phaser 3.x game to add an infinite scrolling effect to the background in our game.

Handle Collisions Between Sprites in Phaser with Arcade Physics

When it comes to game development, a lot of games will require interaction between the player and the environment or the player and another player. For example, you’d probably want to prevent your player from falling through floors or make them lose health every time an opponent collides with them.

There are numerous strategies towards handling collisions in your game. You could identify the position and bounding boxes for every sprite in your game, something I don’t recommend, or you could make use of the physics engine that’s available with your game development framework.

The past few tutorials have focused on Phaser, so we’re going to proceed with developing a game using that framework.

In this tutorial, we’re going to look at using arcade physics, one of several physics engines available in Phaser 3.x, and we’re going to see how to handle collisions.

Building an Autocomplete Form Element with Atlas Search and JavaScript

When you’re developing a web application, a quality user experience can make or break your application. A common application feature is to allow users to enter text into a search bar to find a specific piece of information. Rather than having the user enter information and hope it’s valid, you can help your users find what they are looking for by offering autocomplete suggestions as they type.

So what could go wrong?

If your users are like me, they’ll make multiple spelling mistakes for every one word of text. If you’re creating an autocomplete field using regular expressions on your data, programming to account for misspellings and fat fingers is tough!

In this tutorial, we’re going to see how to create a simple web application that surfaces autocomplete suggestions to the user. These suggestions can be easily created using the full-text search features available in Atlas Search.

Animate a Compressed Sprite Atlas in a Phaser Game

You might recall that I recently wrote a tutorial titled Animate Spritesheets in a Phaser Game where I created two different sprite animations from a single spritesheet. The process was quite simple, but not very optimized. In this previous tutorial, the spritesheet had each frame being composed of the same resolution image. This allowed us to iterate over the frames kind of like an array. However, because each frame in the spritesheet was the same size, we had a lot of empty space padded between each of the frames. Wasted space in an image means we’re now working with a larger image in resolution and in file size.

We can improve upon this process with what’s known as a sprite atlas.

A sprite atlas is still a spritesheet. We have numerous frames in a single image file, the difference being that all of the padded white-space has been removed. Since the images are of different sizes and positions, we can no longer iterate over them like we did in the previous example because we don’t know where one frame ends and another begins. To know the information of each frame, we need an atlas which is like a map.

In this tutorial we’re going to see how to take a sprite atlas, composed of a compressed spritesheet and map information, and animate it within a Phaser 3.x game.

Creating a Multiplayer Drawing Game with Phaser and MongoDB

When it comes to MongoDB, an often overlooked industry that it works amazingly well in is gaming. It works great in gaming because of its performance, but more importantly its ability to store whatever complex data the game throws at it.

Let’s say you wanted to create a drawing game like Pictionary. I know what you’re thinking: why would I ever want to create a Pictionary game with MongoDB integration? Well, what if you wanted to be able to play with friends remotely? In this scenario, you could store your brushstrokes in MongoDB and load those brushstrokes on your friend’s device. These brushstrokes can be pretty much anything. They could be images, vector data, or something else entirely.

A drawing game is just one of many possible games that would pair well with MongoDB.

In this tutorial, we’re going to create a drawing game using Phaser. The data will be stored and synced with MongoDB and be visible on everyone else’s device whether that is desktop or mobile.

Animate Spritesheets in a Phaser Game

When it comes to 2D game development, sprite animations are going to be a critical part of the game experience. No one wants to play a game with a static unappealing image that moves around on the screen. They are going to want vibrant animations that add a certain realism to the game-play experience, even with it being 2D.

There are a few ways to accomplish animations in game development. You could develop complex logic that swaps images on a sprite every time the render function updates, or you could work from a single spritesheet and iterate over the frames in that spritesheet.

One of the main benefits to spritesheets, beyond them being easy to animate in modern game development frameworks, is they are easy on the computing resources. Loading one image file is less resource intensive than loading several image files, and when it comes to smooth performance in games, how you manage your resources can make or break your game.

In this tutorial, we’re going to see how to animate 2D sprites in a Phaser 3.x game using simple spritesheets with JavaScript.