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.

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.