Game Development

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:...

A few months ago, I purchased a book called Code the Classics from Raspberry Pi Press. This fantastic book explores various classic games like Sensible Soccer and Centipede. Moreover, it guides readers on how to develop Python clones of these games. In total, the book covers five games. You can freely download the book from the provided link and access the game source code on GitHub at https://github.com/Wireframe-Magazine/Code-the-Classics. Unfortunately, the book does not provide detailed instructions on how to build these games....

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....