How to Install Phaser 3 to Your Project

How to Install Phaser 3 to Your Project

In this article, we'll cover how to download and install Phaser 3 to your HTML5 projects.

Downloading Phaser 3

1. Create a new folder to house your project. Then, inside that folder, create a folder titled "js" and an index.html file. You can also add assets or anything else you might need to your project directory.



2. Head to the Phaser 3 download page on the Phaser website at https://phaser.io/download/phaser3

3. On the Phaser 3 download page, click the version link for the most appropriate download option. We recommend getting the latest stable release or the framework version the course recommends.



4. On the version information page, scroll down to the Download section. Then, click one of the download options. We highly recommend choosing phaser.min.js if you intend to make your game available on the internet. However, you can also choose phaser.js if you would prefer.




5. Once downloaded, place your new .js file into the js folder in your project.



6. The last step is to include the library as part of your project. To do so, open your index.html file in the code editor of your choosing and add the following code to make your project recognize the Phaser library:

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Phaser Project</title>
  6. </head>
  7. <body>
  8.     <script src="js/phaser.min.js"></script>
  9. </body>
  10. </html>

Make sure the src in the script tag matches the name of the file you downloaded. For example, if you downloaded the non-minified version, the correct src would be "js/phaser.js".


Creating Your First Phaser File

This section will briefly demonstrate how to create files for your Phaser project and include them in your project. This step is also good if you'd like to verify Phaser is installed correctly.

1. In the js folder from the previous section. create a new .js file called game.js.
2. In your index.html file, alter the code to include this new script:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Phaser Project</title>
  6. </head>
  7. <body>
  8.     <script src="js/phaser.js"></script>
  9.     <script src="js/game.js"></script>
  10. </body>
  11. </html>


3. Let's head back to game.js. If this is the initial file of your game, there are three things that need to happen. We need to create a new scene, set the configuration of the game (height, width, etc), and create the new game while passing the configuration to it. The code below does all three, which you can add to your new .js file.
  1. // create a new scene
  2. let gameScene = new Phaser.Scene('Game');

  4. // set the configuration of the game
  5. let config = {
  6.   type: Phaser.AUTO, // Phaser will use WebGL if available, if not it will use Canvas
  7.   width: 640,
  8.   height: 360,
  9.   scene: gameScene
  10. };

  12. // create a new game, pass the configuration
  13. let game = new Phaser.Game(config);

4. Verify the project works by opening index.html in any modern web browser. Upon opening, you should see a blank, black screen. By opening the Inspector (or using other development tools, you should also be able to see an indication in the console that Phaser is running.


    • Related Articles

    • How to Install Rust

      This article will briefly cover how to set up Rust for Rust-based projects. Installing Rust 1. Head to the Rust installation page at https://www.rust-lang.org/tools/install 2. The page should automatically detect your operating system and present you ...

    • How to Install MonoGame

      This article will cover how to set up the MonoGame framework for game development. MonoGame recommends using Visual Studio Community for development - the setup of which is covered in this article. You can, however, use other code editors like Visual ...

    • How to Install Unity

      This article will cover both how to install Unity for the first time, and how to install new versions of Unity for pre-existing installations. Before installation you may wish to review Unity's system requirements. First Time Installation Only - ...

    • How to Install GameMaker

      This article will cover how to install the GameMaker engine. Before installation, you may wish to review GameMaker's system requirements. Downloading and Installing GameMaker 1. Head to the GameMaker download page at https://gamemaker.io/en/download ...

    • How to Install Roblox Studio

      In this article, we'll discuss how to install Roblox Studio, the required platform to make Roblox games. Before beginning, you may wish to review the system requirements for Roblox Studio. Installing Roblox Studio 1. Head to the Roblox Studio website ...