Setting Up and Installing Tools for Phaser

ACCESS the FULL COURSE here: https://academy.zenva.com/product/intro-to-rpg-development-with-phaser/

TRANSCRIPT

Before we can jump into the code, there are a few setup tasks we have to do in order to run our game. The first thing we have to do is, we need to have a local web server running on our machine. The reason for this is that it has to do with browser security. So we can create an index HTML page and we can view it in our browser by using the file local path to view that file. However, once it comes time to load in external assets using the file path, the browser will block this for security reasons. So in order to not be hindered by the browser security, we need to be able to host our assets over HTTP and that's where our web server will come in. So there are many options available to you. Some are OS specific, other ones can be tied to the browser you're currently using. So on the Phaser 3 site you'll see some examples like you can use WAMP or XAMPP, Mongoose. You can use MAMP if you're on Mac OS. You can also use things like grunt, Python, http-server for node.js you can do php built-in web server. So, for this course we will be going another route and we'll be using a Chrome browser extension and I'll be showing how we can set that up to serve our web server. You are welcome to use another one, however that is out of scope for this course. So to get the chrome extension if you go ahead and do a search for web server for chrome, you should see it as the first result. So it is a very simple chrome extension where you just point it to a local folder where you want to host files and then it will spin up your server for you. So to use it we just need to click the Add to Chrome button. Click Add App and then you'll see on your chrome apps you'll have a new app added. So to use the chrome extension, you just go ahead and click on the app, a new window will open. So you just need to click on Choose Folder to where you should serve your files from and then what will happen is any assets in that folder will start being, will be made available and if you click this link here, you'll see a list of the current assets in that directory. So currently this directory is empty, so that's why it's showing this. So the second tool you're going to need is an Editor. So there are many Editors out there, each with their pros and cons, just to list a few of them, there is Sublime Text, Atom, VS Code, Brackets, WebStorm. You could use Notepad, Notepad++. So for this course I'm going to show you. So for this course I will be using VS Code and you're welcome to also use VS Code, however if you have a personal preference, you are welcome to use any code editor that you would like to use. So to get VS Code, if you come down here, you click on this link, and you shou ... https://www.youtube.com/watch?v=egMK1P8aGWA