Getting Started

There are two options for working through this workshop. You can either clone the source code from GitHub, or you can edit the code in your browser using StackBlitz. Each option has its pros and cons, so choose the one that works best for you.

StackBlitz is a great option if you want to get started quickly, but it does have some limitations. You do not have to set up your local environment and you can edit the code directly in your browser. The tradeoff is that you will not have access to the checkpoints that we have created for you in the form of git branches.

GitHub is a little more involved, but it does give you access to the checkpoints. You will need to set up your local environment, but you will be able to check your code against the checkpoints that we have created for you. You will also have great control over the editor that you want to use and how it is configured.

Inevitably, if you continue your programming journey, you will end up having to learn how to use GitHub but if you are not ready for that yet, StackBlitz is a great option.

The goal is to create something awesome and start having fun as soon as possible! Everything else will work itself out.

🎉 Important 🎉

You need a GitHub account regardless of the development option you choose. If you choose StackBlitz, you need a GitHub account to log in so you can save your work. If you do not have a GitHub account, go and create one right away.

Create a GitHub Account

The StackBlitz Option

It is really easy to get started with StackBlitz. Just click on the starter link and you will be taken to the project. We have gone ahead and created some of the basic files for you so you can get started right away.

Use this starter project and then fork it so it will be saved to your Stackblitz account.

Starter StackBlitz Project

If you want to check out the completed project, you can do so here:

Completed StackBlitz Project

The GitHub Option

To use GitHub, make sure you have Git and Node.js installed.

To see the full version of the game

1. Clone this repo

2. Open the project in your preferred IDE

3. Check your package.json file for these scripts:

   // Package.json
   
   {
       "scripts": {
           "start": "vite",
           "build": "tsc && vite build",
           "preview": "vite preview"
       },
   }

4. To run the current full version of the game, make sure to check out the main branch. This is helpful to get an idea of what you will be building and see the overall structure of the code you will be writing. Once you have checked out the main branch, you can run npm install and then npm start in your terminal. Then, in your browser, navigate to the URL in your console which should be http://localhost:8000.

To start the tutorial:

1. Check out the first branch 00-start
2. Run npm start in your terminal.
3. Run npm install.
4. In a browser, navigate to the URL in your console. This should http://localhost:8000/

Commands to clone, checkout, install, and start

git clone https://github.com/onehungrymind/phaser3-platform-jumper.git
cd phaser3-platform-jumper
npm install
npm start