We use this repo to learn how to code projects with https://phaser.io JavaScript library.
Go to https://git-scm.com/ , download and install the git client. You will use this to "save" projects to the cloud.
Go to https://code.visualstudio.com/ , download and install VisualStudio Code. You will use this to edit your projects.
You will download a copy of these examples to use and change locally. Because we are using git we will have the ability to "undo" unwanted changes. Eventually you will learn how to upload to your own GitHub account, where you can share your projects with the world.
- Open VS Code
- On the View menu, choose "Command Palette"
- Type
git clone
, and then hit the Enter key - Paste in the URL to this repostitory: https://github.com/mieslep/enniscoderdojo-phaser , and then hit the Enter key
- Choose a local directory (folder) you want to save these files into.
- You should now see this repository (project) on the left with a folder named
enniscoderdojo-phaser
and a little triangle that is either pointing to the right or down. If you expand it (click so it points down) you will see different folders likesetup
andgetting-started
.
The Live Server Extension will allow you to run a miniature webserver on your machine, so you can view your project in a web browser.
- On the View menu, choose "Command Palette"
- Type
install extensions
and selectExtensions: Install Extensions
- Over on the left side will be a box you can type in that has the words "Search Extensions in Marketplace". In that box, type
Live Server
- A list of extensions with the words "Live Server" will appear, you want to click on the one from Ritwick Dey, and in the main window you will see a box that says
Install
. Click that to install. - Verify the extension is working. On the project folders, expand
setup
and you will see a fileindex.html
. Right click on theindex.html
file and chooseOpen with Live Server
. You will know this is working because a new browser tab will open, pointing to a website named something like http://127.0.0.1:5500/tutorials/setup/index.html , and you will see a Phaser logo bouncing around!
This repository pulls together a number of tutorials and associated assets into a single place. You do not need to download the files as instructed by the tutorials (but if the examples on the website don't match what is in the repository, it means things have gotten out of sync and I need to fix it, so do let me know if this happens please!)
Project Number | Project Subfolder | What is it? | Tutorial Instructions | Demo |
---|---|---|---|---|
1 | getting-started | Making your first Phaser 3 Game | Start with Part 1 | Final Version |
2 | platformer | Basic Platformer with some scrolling | Full tutorial in a single page here | Final Version |