Short Link to This Page: bit.ly/db-jp
- Grades 6–12 (Accelerated learners in earlier grades are welcome with instructor approval)
- Logical thinking and math skills
- Facility with computers
Some things we will learn:
- Moving a character using the keyboard
- Having enemy characters
- Having multiple game levels
- Detecting collisions between characters
- Playing music and sound effects
- Realistic motion according to laws of physics
- Phaser 3 Documentation
- Phaser 3 Examples
- Piskel Sprite Editor
- Krita painting program (for installing on your own computer)
- OpenGameArt free game art
- Freesound database of Creative Commons–licensed sounds
- Dave’s phaser-learning Github repository
- Dave’s YouTube Channel
- More about Dave’s teaching
- Dave’s email
- Lafayette Library and Learning Center’s event calendar
- Understand and be able to modify some simple Phaser programs
- Be able to create small games of your own design
Your Teacher and Assistants
Getting to Know You
Let’s look at your names, ages, what grades you’re in, and your programming experience.
Our classes consist of:
- Exercises, where you explore and modify programs
- Low-key, interactive quizzes (not for a grade)
- Creative project work, where you apply what you’ve learned in your own way
- Show and tell, where you, the assistants and the instructor share interesting creations
- A five-minute break near the middle
Take 60 seconds and skim the Wikipedia article at the link above to find out about it.
Take 60 seconds and skim the Phaser web page to get a feel for what it is and what it can do.
Quick demo of “Platform” and “Classify or Lose”
These Phaser programs are examples of what we are working towards.
Many of the following links take you to a software development site called repl.it. If you log in with Google or create an account you can save your work there. All of your “repls” are visible to the public (if they know where to look and care to). When you click on one of these links and then change any of the files, repl.it makes a copy of the repl (a “fork”), which then belongs to you.
Lectures and Exercises
I demonstrate solutions in a YouTube playlist.
This short example shows the code required to run Phaser from an HTML page, and present the greeting, “Hello, World”. (Read about the tradition if you like.) Change:
- the greeting
- the text size and color
- the background color
Instead of using text to display “Hello, World”, this example displays a rotating sprite containing the text.
- Make the sprite rotate faster
- Reverse the rotation direction
This program has a pretty eagle flying in a blue sky. It’s programmed to move right when you press the right arrow.
- Make the character move in all four directions
- Change the movement speed
- Experiment with different drag values
This game is about a cat and a monkey that collect diamonds. Only the monkey moves in all four directions and shows a score.
- Let the cat move all four ways
- Have the cat play its sound when it collects a diamond
- Show the cat’s score
- (Optional) Have pieces of coal, or some other enemy sprite randomly appear and take points away when collected by one of the characters
A tennis ball drops and bounces and rolls somewhat realistically, using the “Arcade” physics engine of Phaser.
- Experiment with different values for gravity, drag and bounce
- Replace the graphic with one that you draw or find, considering appropriate use
- Consider using Creative Commons Search
Multiple tennis balls drop and interact with each other. Eventually, each one fades away and disappears.
- Change the ball-generation rate
- Change the ball spawn position
- Change the range of random X axis velocities
- Change the fade-out time (look for “alpha”)
- Change the number of balls that can exist
- Change the way the balls spin (angular velocity)
- Have the ball sizes be random
- Change how high the character jumps
- Add another platform
- Let the character leave the screen
- Allow jumping even when the character is not on a surface
This game, which has you save animals by classifying them as monkeys, birds or cats, is written in such a way that the theme can be changed by bringing in new graphics and sounds.
- Change the theme (to a happy one?)
Here is a very simple animation example.
This program lets you play with acceleration, drag and velocity. And sound created with an oscillator.
Plays a sound. From this example, you should be able to add sounds to your own programs.
Make Your Own Game
You now have examples for doing many things with a Phaser game. Now it’s time to make your own game. Follow these steps, if you like.
- Think of a theme
- Add a background
- Make the player character
- Find an existing spritesheet or make your own (perhaps with Piskel [see above])
- Make your character appear in the game
- Have it move around with cursor or WASD keys, if you like
- Give it an animation (jumping, perhaps)