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

      • How to Install Godot

        In this article, we'll cover how to install the standard edition of Godot - which is both free and open source. Before beginning, you may wish to review Godot's system requirements. Installing Godot In this section, we'll cover how to install Godot. ...

      • How to Install Python

        If you intend to use our Python courses with a code editor like Python's built-in IDLE editor, Visual Studio Code, Anaconda, Spyder, or something else, you will need to first install the Python runtime to your local computer. This short article will ...