How to Create HTML5 Games with Phaser 3 - Project Set Up

ACCESS THE FULL COURSE HERE: https://academy.zenva.com/product/html5-game-phaser-mini-degree/?zva_src=youtube-html5md

TRANSCRIPT

Hello, everyone. In this lesson we are going to start by setting up our project and creating a main.js file. Back in Phaser 2, you could set up your project by starting a local web server to run your game. You can now do the same with Phaser 3, but if you want to use the most of JavaScript ES6 features, you can set up a Node.js server to run your game, and that's what you are going to do here. Fortunately, there's already a template we can use to setup our Node.js server. So you don't really need to learn about Node.js to do so. I'm just going to show the files you need to change for your project. So, the template you're going to use is in this repository here, phaser3-es6-webpack.

So start by cloning this repository into your computer. I have alerady cloned it here, so these are the files from the repository. And this template already contains a platform game, so let's delete their game files. What you need to do here is deleting everything inside the Source folder here, except the index.html and the main.js files. So let's delete the helpers folder, the scenes folder, and the sprites folder. We are going to use Create other folders our game later, in the next lesson. Also, you can remove this rawAssets folder here and we can delete all the assets from the platform game. So an easy way to do this is deleting the assets folder and creating a new one, empty. So a new folder, assets. Okay, that's it. Now I'm going to remove all code from the main.js file because we are going to write it ourselves. Also, we need to change the index.html file here. Currently it is showing title message with Phaser3 ES6 Webpack. I'm going to change it here to Phaser3 RPG Course. And here we don't need this stuff here, showing the Phaser 3 Generic Platformer, show/hide touch controls. So we're going to remove it here. I'm only going to leave the background-color: black. You can also see another index.html file here, but this will be updated once we run our game. So we only need to change this one here inside the source folder.

Now, before creating our main.js file, let me explain the directory structure used in this course. In the root directory, we have all the necessary Node.js files, so all those files here are for Node.js. Also, there will be two directories, source and assets. The assets directory will contain all assets used in your game, such as images, fonts, maps, and even json files we are going to need during the course. The source directory, by its term, will contain the game code. In this lesson, we are only going to have the index.html file and the main.js. In the next lessons, we are going to create others of directories to ... https://www.youtube.com/watch?v=mO5cwzSaQ0o