How to Install Phaser to Your Project

How to Install Phaser to Your Project

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

Downloading Phaser

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 website at http://phaser.io/

3. From the top menu, hit "Download" to head to the downloads page.




4. On the downloads page, hit the "Download Phaser from GitHub" button to continue.



5. Download the appropriate file. We highly recommend choosing min.js if you intend to make your game available on the internet. However, you can use the regular js option as well.




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



7. 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.js"></script>
  9. </body>
  10. </html>


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


You will also see that there is an indication in the Console window that Phaser is indeed working.




    • 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 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 SFML for Windows

      In this article, we'll cover how to install the Simple and Fast Multimedia Library (SFML) for C++ projects for Windows. If you'd like to SFML for Mac, please see this article instead: How to Install SFML for Mac Installing SFML 1. Navigate to the ...

    • How to Install Android Studio on Mac

      This article will cover how to install Android Studio for macOS. For installation on Windows, we recommend checking out this article instead: How to Install Android Studio on Windows Download Android Studio 1. Head to the Android developers website ...

    • How to Install SFML for Mac

      In this article, we'll cover how to install the Simple and Fast Multimedia Library (SFML) for C++ projects for Mac. If you'd like to SFML for Windows, please see this article instead: How to Install SFML for Windows Installing SFML 1. Navigate to the ...