Phaser

Creating a game with Phaser, an easy-to-use and popular platform with physics support, is an exciting project. Whether you want to distribute your game through the web or package it as a desktop or mobile app, Phaser, which is based on HTML5 technologies, has got you covered. In this tutorial, we will cover the basics of setting up a modern project using Phaser 3 and get you started on your journey to building your own JavaScript HTML5 game....

In this tutorial, we will be using Phaser.js to create a platform game. The objective of the game is for the player to move around, collect stars, and reach the end. Let’s get started! Setup the Project To begin, make sure you have an empty folder and run the following commands: npm init -y This will initialize a minimal package.json file for your project. Then, install Phaser by running: npm install phaser If you haven’t already, install Parcel (a bundler) by running:...

This blog post is part of a series on Phaser. If you haven’t read the first post yet, you can find it here. Unlike mouse events, which are fired on a GameObject, keyboard events are not directly linked to any specific GameObject. Instead, we listen for keyboard events on the this.input.keyboard object. To listen for keyboard events, we can use the following syntax: this.input.keyboard.on(<event>, function() { // event handler code }) The <event> parameter is a string that can be either keydown or keyup, which allows us to intercept all keys being pressed or released....

This post is part of a Phaser series. Click here to see the first post of the series. Phaser offers three different built-in physics engines: Arcade, Matter.js, and Impact (Impact.js compatible). In this post, we will focus on the Arcade physics engine. To enable the Arcade physics engine, add a physics property to the Phaser.Game initialization config object: const config = { //... physics: { default: 'arcade', arcade: { debug: false } } } You can add physics to a single GameObject by using the this....

Welcome to another post in the Phaser series. In this post, we will learn about playing sounds in Phaser and how to effectively use them in your games. Preloading Audio Files Before we can play an audio file in Phaser, we need to preload it and assign it to a label. To do this, we use the this.load.audio() method. Here’s an example: function preload() { this.load.audio('sound', 'sound.mp3'); } In the above code, we are preloading an audio file named “sound....

Phaser games utilize the HTML <canvas> element for rendering. If you’re unfamiliar with the Canvas API, I discuss it in detail in my Canvas API tutorial. When working with Phaser, we create a canvas with a specific width and height, and then draw on it. While CSS cannot be used to style elements within the canvas, Phaser (along with other canvas-based libraries) abstracts away many of the low-level details, allowing us to focus on the application code....