The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Setting Up Your Development Environment

Next ►
►

Before you can start building games with Phaser, you need to set up a development environment that allows you to write, run, and test your code efficiently. This section will guide you through the process step by step, ensuring you have all the necessary tools to begin your journey in game development with JavaScript and Phaser.

  1. Key Concepts

  • Text Editor/IDE: A program where you write and edit your code.
  • Web Browser: Where you run and test your games.
  • Local Web Server: Required to serve your game files, as some features (like loading images) need a server environment.
  • Phaser Library: The JavaScript framework you'll use to build your games.

  1. Tools You Need

Tool Recommended Options Purpose
Text Editor/IDE VS Code, Sublime Text, Atom Writing and editing code
Web Browser Chrome, Firefox, Edge Running and testing your game
Local Web Server Live Server (VS Code), http-server (Node.js), Python's SimpleHTTPServer Serving files locally
Phaser Library Phaser 3 (latest version) Game development framework

  1. Step-by-Step Setup

Step 1: Install a Text Editor

Recommended: Visual Studio Code (VS Code)

  • Download and install VS Code from the official website.
  • Alternative editors: Sublime Text, Atom, or any editor you prefer.

Step 2: Install a Web Browser

  • Make sure you have a modern browser like Chrome, Firefox, or Edge installed.
  • These browsers have excellent developer tools for debugging.

Step 3: Set Up a Local Web Server

Some Phaser features (like loading images or audio) require your files to be served over HTTP, not just opened directly from your file system.

Option A: Using VS Code Extension (Live Server)

  1. Open VS Code.
  2. Go to the Extensions view (Ctrl+Shift+X).
  3. Search for Live Server and install it.
  4. Open your project folder in VS Code.
  5. Right-click on your index.html file and select "Open with Live Server".

Option B: Using Node.js http-server

  1. Install Node.js if you haven't already.
  2. Open your terminal/command prompt.
  3. Install http-server globally: 
    npm install -g http-server
  4. Navigate to your project folder: 
    cd path/to/your/project
  5. Start the server: 
    http-server
  6. Open the provided URL (usually http://localhost:8080) in your browser.

Option C: Using Python (if you have Python installed)

  • For Python 3: 
    python -m http.server
  • For Python 2: 
    python -m SimpleHTTPServer

Step 4: Download and Add Phaser

You can use Phaser via a CDN (Content Delivery Network) or by downloading the library.

Option A: Using CDN

Add the following line to your index.html inside the <head> or just before the closing </body> tag:

<script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.js"></script>

Option B: Downloading Phaser

  1. Go to the Phaser Download Page.
  2. Download the latest Phaser 3 build.
  3. Place the phaser.js file in your project directory (e.g., in a libs folder).
  4. Reference it in your index.html: 
    <script src="libs/phaser.js"></script>

  1. Creating Your Project Structure

A simple project structure might look like this:

my-phaser-game/
│
├── index.html
├── main.js
└── assets/
    ├── images/
    └── audio/
  • index.html: The main HTML file.
  • main.js: Your JavaScript game code.
  • assets/: Folder for images, audio, and other resources.

  1. Example: Minimal index.html

Here’s a basic index.html to get you started:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Phaser Game</title>
  <script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.js"></script>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

Explanation:

  • The Phaser library is loaded from a CDN.
  • Your game code will go in main.js, which is loaded after Phaser.

  1. Exercise: Set Up Your First Phaser Project

Task:

  1. Create a new folder for your project.
  2. Add an index.html file as shown above.
  3. Add an empty main.js file.
  4. Start a local web server in your project folder.
  5. Open your browser and navigate to http://localhost:PORT (replace PORT with the port number shown by your server).

Solution:

  • If you see a blank page with no errors in the browser console, your environment is ready!
  • In the next lesson, you’ll add your first Phaser code.

Common Mistakes & Tips:

  • Mistake: Opening index.html directly in the browser (file:// URL) instead of using a local server.
    • Tip: Always use a local server to avoid issues with loading assets.
  • Mistake: Forgetting to include the Phaser script in index.html.
    • Tip: Double-check your <script> tags and file paths.

  1. Summary

You have now set up a complete development environment for Phaser game development:

  • Installed a code editor and browser.
  • Set up a local web server.
  • Added the Phaser library to your project.
  • Created a basic project structure.

Next Steps:
In the next section, you’ll create your first Phaser project and see how to display something on the screen!

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved