mieslep / enniscoderdojo-phaser

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Ennis CoderDojo Phaser Resources

We use this repo to learn how to code projects with https://phaser.io JavaScript library.

Getting Started

Download and Install Software

Git

Go to https://git-scm.com/ , download and install the git client. You will use this to "save" projects to the cloud.

Microsoft VS Code

Go to https://code.visualstudio.com/ , download and install VisualStudio Code. You will use this to edit your projects.

Configure the Software

Clone this repository

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.

  1. Open VS Code
  2. On the View menu, choose "Command Palette"
  3. Type git clone, and then hit the Enter key
  4. Paste in the URL to this repostitory: https://github.com/mieslep/enniscoderdojo-phaser , and then hit the Enter key
  5. Choose a local directory (folder) you want to save these files into.
  6. 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 like setup and getting-started.

Install the Live Server Extension

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.

  1. On the View menu, choose "Command Palette"
  2. Type install extensions and select Extensions: Install Extensions
  3. 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
  4. 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.
  5. Verify the extension is working. On the project folders, expand setup and you will see a file index.html. Right click on the index.html file and choose Open 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!

Start Learning

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

About


Languages

Language:JavaScript 99.7%Language:HTML 0.3%