2nd Aug 2022

Introduction to HTML5 Game Development with Phaser3 and Phaser Editor2D

Game Development

Written By, Ajinkya Gadankush

Overview

Game Development is most trending branch of Software Development. When thinking of creating games, we always use an application to install and play it on our devices and consoles. The HTML5 Specifications introduced numerous APIs to enable Game Development of the Web, allows our games to reach as many users of different computing devices. Phaser is a popular Game Framework that quickly enables us to build games for the web.

In this Series of Blogs, we will be covering the Development of HTML5 Games in Phaser3 and PhaserEditor2D. Let’s Start!

What is Phaser3?

Phaser3

Phaser is a game framework for making 2d HTML5 games for desktop and also mobile. Phaser is free of cost and easy to understand. Phaser 3 is the latest version of the Phaser Framework.

Why use Phaser?

Phaser is very useful game engines for the Web games using JavaScript. Phaser is a free framework. Phaser allows to render game across different platforms. Phaser is powerful and easy to use if you want to start your own game.

What is PhaserEditor2D?

PhaserEditor2D

Phaser Editor is IDE to develop HTML5 2d games. This is third-party project of Richard Davey at Photon-Storm. Phaser Editor is easy to understand and use.

Phaser Editor has great Phaser documentation and offline Phaser and Editor documentation. There are so many project template in phaser editor. Phaser Editor provide friendly and complete texture atlas packer, audio sprites builder.

By using Phaser Editor we can develop clean and reusable code structure, Phaser Editor provide some feature like Prefabs, Asset Manager and also animation editor.

Installation of PhaserEditor2D

For Installation, Go to the following Link https://phasereditor2d.com/downloads/

Installation of PhaserEditor2D

There are 2 Types of PhaserEditor2D Options available:

  1. PhaserEditor2D Core
    • Provides a Basic Code Editor
    • There are Online Project Templates available
  2. PhaserEditor2D All-in-One
    • Provides Advanced JavaScript Code Editor
    • There are different Offline Project Templates available

After downloading zip file, unzip the folder and open that folder. In folder there is one application “PhaserEditor2D-AllInOne” by name, right click on that and select pin to taskbar option. After selecting that option you can see phaser editor logo on task bar. Now, its ready for use.

That’s it folks

So that’s it folks that was a brief introduction about Phaser3 and Phaser Editor 2D. We gather as many details as possible to understand the workflow of the platform. Yes there are several high level game development platforms but choosing the right one is in your hand. Looking at the current market segment there are various upgrades taking place, consequently technologies like AR/VR, Artificial intelligence and high end gaming platforms in game development will help the industry to discover noteworthy potential leading to great accomplishments.

Phaser3 is light, smooth and easy going in terms of learning aspects. In this first tutorial we understood all basic details about PhaserEditor2D. In the next blog we will start work on PhaserEditor2D. Till then make the right choice and Happy developing.

Written By,

HTML5 Game Developer at Yudiz Solutions Pvt. Ltd