CxD Archive
Video Game Project
Video Game Project
  • Project Introduction
  • Project Challenge
  • Project Outline
    • 1-1 Determine Gamer Motivation Profile
    • 1-2 Analyze External Motivations in Games
    • 1-3 Analyze Internal Motivations in Games
    • 1-4 Analyze Game Design Elements
    • 1-5 Phaser Practice 1: Matching Game
      • P1: Steps 1-5
      • P1: Steps 6-10
    • 1-6 Phaser Practice 2: Top-Down Game
      • P2: Steps 1-5
      • P2: Steps 6-10
      • P2: Steps 11-15
    • 1-7 Phaser Practice 3: Side-Scrolling Game
      • P3: Steps 1-5
      • P3: Steps 6-10
      • P3: Steps 11-15
    • 2-1 Form Project Teams
    • 2-2 Create Persona for Target Players
    • 2-3 Generate Game Ideas
    • 2-4 Refine Ideas to Create Game Treatments
    • 2-5 Evaluate Game Treatments
    • 3-1 Draft Game Design Document
    • 3-2 Create Paper Prototype of Game
    • 3-3 Playtest Paper Prototype
    • 3-4 Present Game Proposal
    • 4-1 Create Development Plan
    • 4-2 Code Game in Iterative Stages
    • 4-3 Create Art and Sound for Game
    • 4-4 Create Marketing Website
    • 5-1 Evaluate Game With Playtesters
    • 5-2 Evaluate Marketing Website
    • 5-3 Analyze Evaluation Data to Improve Solution
    • 6-1 Create Project Poster
    • 6-2 Present Project to Public
    • 6-3 Write Personal Reflection
  • Project References
    • Phaser Introduction
    • Phaser Game Template
    • Visual Assets
    • Audio Assets
    • Phaser Coding
      • Game Display
      • Game World
      • Game Camera
      • Text
      • Images
      • Sprites, Animations, and Health
      • Group of Sprites
      • Tilesprite Scrolling
      • Audio
      • Input
      • Physics and Collisions
      • Weapon
      • Particles
      • Tweens
      • Timers
      • Random Numbers
      • Enemy Behavior
      • Misc Game Features
  • Notes for Teachers
Powered by GitBook
On this page
  • PREP STEPS
  • CODING STEPS
  • Step 1: Add Player Sprite and Physics
  • Step 2: Add Player Input and Movement
  • Step 3: Resize Game World and Add Background
  • Step 4: Add Platforms and Walls
  • Step 5: Add Coins and Score
  • Step 6: Add Enemy and Health Bar
  • Step 7: Add Power-Up with Timer
  • Step 8: Add Countdown Timer for Game Over
  • Step 9: Create Your Own Design for Rest of Level
  • Step 10: Add Rest of Platforms and Walls
  • Step 11: Add Obstacle to Hinder Player
  • Step 12: Add Resource to Help Player
  • Step 13: Create and Add Sound Effects
  • Step 14: Create and Add Animated Sprite
  • Step 15: Playtest and Improve Your Game
Export as PDF
  1. Project Outline

1-7 Phaser Practice 3: Side-Scrolling Game

PreviousP2: Steps 11-15NextP3: Steps 1-5

Last updated 6 years ago

In this third practice, you're going to create a side-scrolling game that follows the player's character as it moves through an extended game world. The instructions will help you make a partial game, which you'll need to finish designing and creating yourself. You'll also create some of your own custom assets (sound effects and an animated sprite) to add to your game. This practice will allow you to apply your existing knowledge of Phaser, plus show you a few more new features.

PREP STEPS

CODING STEPS

This third practice game will be coded in 15 steps. Most of the steps will involve coding that's similar to things you did previously. However, some of the steps will introduce and explain new Phaser features.

As a reminder, all your game coding is done in your JS file (code.js).

The steps are outlined below. The instructions for Steps 1-5 start on the next page.

Step 1: Add Player Sprite and Physics

Step 2: Add Player Input and Movement

Step 3: Resize Game World and Add Background

Step 4: Add Platforms and Walls

Step 5: Add Coins and Score

Step 6: Add Enemy and Health Bar

Step 7: Add Power-Up with Timer

Step 8: Add Countdown Timer for Game Over

Step 9: Create Your Own Design for Rest of Level

Step 10: Add Rest of Platforms and Walls

Step 11: Add Obstacle to Hinder Player

Step 12: Add Resource to Help Player

Step 13: Create and Add Sound Effects

Step 14: Create and Add Animated Sprite

Step 15: Playtest and Improve Your Game

PREVIEW VIDEO:

Prepare a new . Be sure to place a copy of phaser.min.js into the same folder that has your HTML, CSS, and JS files.

Download this file, and extract the file contents, which will be a folder named assets that has two subfolders containing 30 images and 2 sounds. Place the assets folder into your game template folder. (For this game, you won't necessarily use all the provided images. It will be up to you to decide whether to use some of them.)

Test your Phaser game template by previewing the HTML file online. If everything's ready to go, you should see a solid black box (your blank game canvas) on your webpage. (If you don't get the solid black box, consult the Troubleshooting tips at the end of the page.)

Demo of Totally Awesome Untitled Game
Phaser Game Template
assets.zip
Phaser Game Template