In this tutorial, we're going to be creating a simple endless runner game using the Phaser 3 game framework with the help of Ourcade's Phaser 3 Vite Template.

Before we start, please ensure you have Node.js installed in your system. If not, download and install Node.js.

Step 1: Clone the Vite Template

First, we need to clone the Phaser 3 Vite Template from GitHub. Open your terminal, navigate to the directory where you want to clone the repository and run:

git clone https://github.com/ourcade/phaser3-vite-template.git endless-runner

Step 2: Install Dependencies

Next, navigate into the newly created directory:

cd endless-runner

Now, install the necessary dependencies:

npm install

Step 3: Start the Development Server

After successfully installing the dependencies, start your local development server:

npm start

You should now be able to see the template running at http://localhost:8000 in your browser.

Step 4: Understanding the Template Structure

Let's briefly go over the main parts of the template:

    .
    ├── dist
    ├── node_modules
    ├── public
    ├── src
    │   ├── HelloWorldScene.js
    │   ├── main.js
	├── index.html
    ├── package.json

• index.html: The main HTML file. Phaser will render the game in the 'app' div.
• src/main.js: The entry point for our game. This is where we create an instance of Phaser's 'Game' object and specify configuration options.

Step 5: Creating a New Scene

We are going to create a new folder under src called scenes/ and inside that, we'll create a new file Game.js

import Phaser from 'phaser'
export default class Game extends Phaser.Scene {
    constructor()
    {
        super("game")
    }
    preload(){
        //load assets here
    }
    create(){
        //setup your scene here
    }
    update(t,dt){
        
    }
}

After creating the Game.js file, we need to update the main.js file as follows:

import Phaser from 'phaser'

- import HelloWorldScene from './HelloWorldScene'
+ import Game from './scenes/Game'

const config = {
	type: Phaser.AUTO,
	parent: 'app',
-   width: 800,
-   height: 600,
+   width: 1280,
+   height: 720,
	physics: {
-   default: 'arcade',
+   default: 'matter',
+   matter : {
+       gravity: { y: 0.5 },
+       debug:{
+               showBody: true,
+               showStaticBody: true,
+               showAngleIndicator: true,
+               showCollisions: true,
+           }
+       },
+   },
+   fps:{
+       target: 60,
+       forceSetTimeOut: true,
+   },
-   scene: [HelloWorldScene],
+   scene: [Game]
}

In this modification to the main.js file, we've replaced the initial HelloWorldScene with our Game scene entry. This means that when the game starts, it will directly load the Game scene. We've also changed the physics system from arcade to matter and adjusted its configuration settings. This includes setting the gravity and enabling debug parameters. Additionally, we've specified a target of 60 frames per second for the game's performance.

Conclusion

We've now laid the groundwork for our endless runner game. The structure of the project should look like this:

    .
    ├── dist
    ├── node_modules
    ├── public
    ├── src
    │   ├── scenes
    │   │     ├─ Game.js
    │   ├── main.js
	├── index.html
    ├── package.json

This concludes the first part of our tutorial. We are now ready to dive into the next part, which you can find in part 2. In the upcoming section, we will demonstrate how to set up a parallax effect for the background of our game.