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.

Announcing, Blogging with WordPress for Beginners, an Online Course

I’m pleased to announce that the course, Blogging with WordPress for Beginners, has been released to The Polyglot Developer courses portal.

So what does this course attempt to accomplish?

If you’re interested in starting a blog to represent your brand and grow your audience, you’ll see how to do this using WordPress, a popular content management system (CMS), and a strong search engine optimization (SEO) strategy.

Create a Stream Deck Plugin to Interact with Webhooks

I recently jumped on the hype train when it comes to streaming and picked up an Elgato Stream Deck. If you’re unfamiliar, these devices are essentially hotkey peripherals with LCD adjustable keys that allow you to quickly perform certain tasks. Could a keyboard shortcut get the job done? For a lot of tasks, definitely, but the Stream Deck software is where the magic comes in.

The Stream Deck software allows you to connect certain services or multi-stage shortcuts to a specific key, something a standard keyboard shortcut probably won’t do well. In addition, you’re able to design your own actions using simple JavaScript and HTML.

In this tutorial, we’re going to see how to create a Stream Deck action, one that sends HTTP requests to remote webhook services, using JavaScript.