Getting Started Setting Up Your Project Starting with the Folder Structure
Posted on 01 Jan 1970

Getting Started: Setting Up Your Project

Welcome to the beginning of your game development journey! In this lesson, we’ll explore the folder structure and prepare the foundational setup for our Spanish language quiz game. If you’d like to follow along, use the files in the 00-starting folder, which contain all the assets you’ll need. For this lesson, I’ll be coding in the 01 folder, which includes the finished files for reference. To practice, start from 00 and build the game alongside the tutorial.

Exploring the Folder Structure

The folder structure is simple and organized for ease of use:

  • index.html:

    • This file includes the Phaser library and the script for our game.

  • js folder:

    • Contains the Phaser library and JavaScript files for coding the game logic.

  • assets folder:

    • Images subfolder: Contains sprites for game visuals.
    • Audio subfolder: Contains sound effects and other audio files.

Setting Up the Game Configuration

In the game.js file, we start by defining a new scene named "Game" with the following basic methods:

  1. Init: Initializes the game.
  2. Preload: Loads assets.
  3. Create: Sets up the game environment.

Game Configuration:

We define key settings to control how the game behaves:

  • Game size: Specifies the dimensions of the game canvas.
  • Rendering type: Allows the browser to decide between Canvas or WebGL.
  • Title: Displays in the console for debugging.
  • Pixel art flag: Ensures the graphics render crisply for a retro look.

Loading Assets in the Preload Method

The preload method ensures all assets are loaded into memory before gameplay begins, preventing disruptions during play.

Loading Images

Use this.load.image to load images. Each image is given a key and a file path. Example:

javascript
this.load.image('background', 'assets/images/background.png');

Other images, such as background-city, building, car, house, and tree, follow the same pattern.

Adding a Background Sprite

In the create method, which is executed after all assets are loaded, we display the background sprite using:

javascript
this.add.sprite(x, y, 'background');

To position the sprite easily, we adjust its origin to the top-left corner:

javascript
setOrigin(0, 0);

Loading Audio Files

Audio files are loaded in a similar manner using this.load.audio. Assign each audio file a key and specify its location. Example:

javascript
this.load.audio('treeAudio', 'assets/audio/tree.mp3');

Other audio files, like car, house, building, correct, and wrong, are loaded the same way.

Understanding Audio Formats

When choosing audio formats, consider compatibility:

  • MP3:

    • Supported by all major browsers (except Opera Mini).
    • The MP3 patent expired in 2017, making it free to use.

  • AAC:

    • A modern format with better compression but lacks full support in Firefox.
    • Patent restrictions may limit its use in some applications.

For this project, MP3 is ideal due to its broad compatibility.

Finding Audio Files

For this project:

  • Spanish word audios: Manually recorded for accuracy.
  • Correct and incorrect answer sounds: Sourced from FreeSound for free, high-quality effects.