How to Create a Phaser Project

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

TRANSCRIPT

To begin, we are gonna start setting up our project structure. In the course links below, you will see a link to our assets. So, if you go ahead and download the asset folder and you extract it, you will see two folders inside. One will be audio and one will be images. Our audio has a few sound effects that we'll be using for our game throughout our courses. Some of these include, like, an item pickup, when the player attacks, when the player takes damage. In the images folder, you'll see a few sprite sheets. One of 'em will be characters and the other will be items. So, this will be a few different assets we'll be using throughout our game. You'll also see a test spawner image. And you also have a ui folder that has a few UI buttons inside it. So to start setting up our project structure, we're gonna go ahead and create a new folder called zenva_mmorpg. We're gonna go ahead and take our assets folder and place it inside this folder. So now in here, we'll have assets. And let's go ahead and make another folder and we'll call it js. This will be used to keep track of all our JavaScript files that we'll use in our game. And let's go ahead and make a new subfolder called lib. The lib folder will be used to keep track of any external libraries that we wanna use for our game. We'll of course will have Phaser inside here. For the time being, we'll include both the Phaser and the Phaser minified file. One other folder we wanna go ahead and make over in here is we'll make a css folder. We'll use this to keep track of all any external CSS files that we create while making our game. So now that we have our basic structure for our project in place, let's go ahead and open up the folder inside your code editor. One way to do this in VS Code is when you open up VS Code without any folders selected, you can go ahead and click on the File icon here and then choose Open Folder. We'll go navigate to the folder we just created. This will go ahead and reload the code editor and you'll see that we have our assets in here. Next, we're gonna go ahead and start up our web server for hosting our files. We're gonna go ahead and come into Chrome, go click on Apps, click on Web Server. And we're gonna go ahead and Choose Folder and we're gonna go ahead and choose the folder we just created, and that will be the root of our project. So now, when we click on the link, you'll see the localhost 8887 is now hosting our static files. In this, we have our assets folder, we'll have our images. So you'll see, that's serving up that file through HTTP. So we're gonna go ahead and go back. And then let's switch back to our code editor. So, the first thing we need to do is crea ... https://www.youtube.com/watch?v=0rGMxKxAwz4