Phaser.js tutorial for beginners: Learn Phaser and JavaScript

hello everyone uh welcome to this tutorial today we're going to be learning a bit about phaser and you know it's kind of an introduction to phaser the some of the basic concepts and how it works phaser is a framework for javascript javascript that allows you to make 2d animations um games just a bunch of fun stuff i really like it and i want you guys to like it too so today i'm gonna show you how to make this little animation right here [Music] [Music] pretty cool stuff and um let me close this that uses a bunch of cool um real like you know javascript concepts um loops how to iterate through arrays and how to use timeouts and intervals and a lot of cool stuff here so you know to to do this you don't need a whole lot of knowledge um all right so we're going to start off by making a new folder and we're just going to call it circles for now and that's good so you're going to open your code editor i use visual studio and now we're in this code editor we're going to find our folder so we're going to go to open folder and we're going to go to the desktop where we made it and we're going to just select the circles folder so boom now we're in the circles folder we're going to make a couple files here so we'll go index.html and we're going to make a stylesheet so style.css and we're going to make a javascript file we're just going to call it game.js easy enough alright so in the index file we're going to type an exclamation point and hit enter and if you're in vs code it should populate this for you if not you can just copy this and type it out so we'll put our script tag first down here in the body this is just going to link our javascript file to our html so script source gamejs in the head we're going to link our css file that's right there and one more thing we need to do is we need to link the uh um the phaser script file so basically we're going to go into google or whatever browser and type phaser cdn and you're just going to click this uh link right here and we're going to go down see where it says cdn we're going to copy this bottom script this is just the minimized version of the file it's just a little more efficient you could use either one of these it's really not going to matter that much our game's not going to be that big um so anyway so copy this bottom one here and we're gonna just put that right here in the head so now we have everything set up we have a link to our uh phaser file and our style sheet so in our style sheet we are going to just set a few things here i just like to do this um this will just uh ensure nothing weird happens with our canvas that gets made so we're going to set the height to 100 view height and the width to 100 view width and we're just going to set a text align to center that way it just automatically centers centers the canvas and that's it for the style sheet yep pretty straightforward and that's really it for our index file so okay here in the javascript file the first thing we're going to do is create an object uh this is going to be our config configuration object that we can pass to phaser um so we're going to say type phaser dot this is just going to tell phaser to run webgl if webgl is not available it's going to say to run canvas it defaults to canvas and this is where we're going to set our game field height which we want it to be the size of the window so we're going to say window dot inner height sorry about that okay in uh width we're going to set to window dot inner width because we want the width to be the width of the window um i'm gonna set our background color in here as well and we're just going to set it to one two three four five six it's just a hexadecimal color it's like a blue color i just like because it's one two three four five six i think it's funny um and the next thing we need is physics because we're going to be running some physics in here so we're going to pass some physics configuration physics is an object so it's going to take in the default physics engine which is going to be arcade we're going to use arcade physics for this and [Music] we just need to say we need to pass some uh some config to the arcade object which honestly we don't have to i'm just kind of showing you this to show you that you can you can set the gravity you can set a lot of things but this is uh this is what we're gonna i'm just gonna show you here so our gravity is gonna be zero basically and you'll see later on you could change this to higher values and everything in the game field is going to be uh put under some gravity and we can also say debug and we forgot our comma and we're going to set this to false and i'll show you what this does a little later um so that should be it we don't need a comma there we need a comma there the last thing we want to put here is our scene reference and we're actually going to do regular brackets we're going to be passing in a class we're going to call the class game scene so that's it for our config and then one more thing here we just need to make a game variable and pass it phaser dot game and then pass in your config object so that way oh sorry nope this needs to say new phaser.game very important okay so this is going to set up our game field and it's going to pass in our config object and use our configurations instead of the default configurations that phaser comes with so next thing i like to do is i just add a empty object i call it g you can call it whatever you want i just like to use the letter g because it's short easy to type be quick and you'll see why we do this in just a few minutes all right so now we have all that set up cool stuff so now um we can run this in the browser now because it's it's going to just show us a screen that's the inner width and height of the window and it's going to be this blue color that we passed in so if you're in vs code and you you need to install this live server extension you don't have to it just makes life a lot easier i have live server installed so we're going to go open with live server and you're gonna see that it doesn't work okay uh let me see why it doesn't work oh because we passed in game scene so actually let's just comment this out it should work now yep so there we go we don't have a game scene created yet so um okay so but you'll notice even though we've set in our height inner width it doesn't automatically resize the page so there is a couple ways to do this but for our purposes um let me just put these side by side um we are we're going to resize the page to a refresh because if you notice if i refresh this it'll you know it reloads the page so it resizes it so to do this automatically just to make life easy for us we're going to add an event listener to the window and we're going to listen for the resize event and we're going to just pass in this function for the second argument and we're going to say window dot location dot reload and what this function does is it just tells the window to to refresh so now if we you see it automatically refreshes and this is going to be important because you know if you you you want your window to refresh if you're using the inner heightener with um now there are you know whatever you're creating might not this might not be good for it but like i said for our purpose it'll be just fine just a easy little work around so we're going to uncomment scene and since we passed in game scene as a class it's expecting a class here we're going to create a class and we're just going to say class game scene extends phaser dot scene and we're going to type constructor and this is a function and we're going to type super this is just going to give our game c game scene a key word and just to reference it by um we're just going to give it the same name you could give it any name you want i just like to keep it the same just to avoid some confusion later on okay so phaser scenes take in most cases you'll just be using three functions you'll be using a preload function a create function and an update function okay this preload function is just going to help with load times it's gonna you know if you got a bunch of images and a bunch of stuff you need to load in before you create it you're going to want to do that before the page loads that way it creates it a lot faster so that's what this preload is we would add images and all sorts of stuff here we're not going to do that for this video for this video we're just going to be using the create function maybe maybe the update depends on how it goes um so for our purposes we just need this create function so the first thing we're going to do here is we're going to add a circle so we're just going to say g dot circle that way we're referencing this g object we're pushing in a circle name and we're giving it a value here of um we're just going to say this dot add dot circle and the first argument is the x coordinate and what we'll do is say config dot width divided by 2 that's going to center it because we're taking the width dividing by 2 that's where we want it on the x-axis for the y the next argument is the y-coordinate we're going to say the same thing but config.height divided by 2 and those two coordinates should center it on the screen the next argument let me uh word wrap this and i'm just going to make this a little let me make this a little smaller if i can nope it's as small as i can go we'll make this a little smaller um and okay so we have config width config height x y and the next argument is the radius of the circle we're just going to set it to 20 and next is the color of the circle and we're just going to make it white this string here means the color white so we should get a white circle which we do okay so now we have a just statically drawn circle we need to add it to the physics engine um to do that we just say this dot physics dot add dot existing g dot circle so now we'll be able to apply physics to the circle so if we call uh g dot circle dot body we have to call it on the body and we'll do set velocity this is a function you can use to set the velocity of a object we'll just set it to 200 we should get some movement so there you go move right off the screen to avoid it from moving off the screen we're gonna say g.circle dot body sorry about that let me just turn this off here okay okay uh g dot circle dot body dot set collide world balance to true and these next two arguments are going to create bounce so we want it to collide with the world bounds true we want it to bounce off the world bounds at a rate of one to one to the velocity so it's going to bounce and it's going to set the these two arguments are x and y it's going to set x negative 200 y negative 200 when it hits so let's refresh this and we should get a bouncing ball here so every time it bounces it's reversing the velocity and setting it equal to its velocity on the opposite spectrum if you were to change this to two it would multiply it by two every single time then your velocity would be reach insane speeds very very quickly which i can show you here so there's one bounce and then you can see things get a bit out of control there all right so one to one that way it's always 200 negative 200 positive x positive 2 positive y negative x negative y like kind of see what's happening there all right okay now that we have this we want to create a lot of circles so the first thing we want to do is create a variable here we're just going to call it g dot number it's actually a name push to the g object but for you know we'll just call it a variable uh g naught number equals um 10. so we got a number that equals 10. we're going to create a for loop to create a bunch of these circles so we're going to let i i'm going to let i equal zero and we're going to say if i is less than g dot number i plus plus so it's going to run this 10 times or we could change this number anytime we want and this will change the amount of times this for loop is going to run so in this for loop if you just say console this is just going to show us what it's doing so if we inspect this let me go to the console here you can see hey ran 10 times if i change this to 20 it's going to run 20 times so that's how the for loop works it just runs the same function as many times as you declare this i to be less than i mean there's a bunch of ways you can do this since i is less than 10 it's going to add to i it's going to run the function 10 times because of that we can make 10 circles because we can just say this 10 times but instead of typing it out 10 times we can just put it down here in here and it ran 10 times now you can't tell but there's 10 circles they're stacked on top of each other because they have the same width and height starting points and they have the same velocities so to change that we could pass in something here called math dot random and multiply that by config dot width so the x coordinate is going to be a random number between 0 and 1 times the width of the game field and we can do the same thing for height so we say math.random times config.hype so now they start off at random spots because it's returning a number between 0 and one not zero not one so let's say math.random returned 0.5 and let's say the width of this is 500 then this number is going to equal 250. on let's say the first run of this for loop it returned 250. the next run math.random is going to return you know 0.9 you multiply 0.9 times 500 and you get the you know 400 or whatever it equates out to be so that means the next circle is going to be placed on the x coordinate at 400 pixels so you get this kind of random addition of these circles um okay and so the well the next thing we want to do here is make these colors each color of each circle random as well so what we can do to do that is create a function outside of the class here we're just creating a function just like in javascript any other time and this function is going to be called a random color so to get a random color we're going to create a variable called um we'll just call it digits or actually let's just call it d let d equal and we're going to create a string here of all the possibilities of a hexadecimal color which is 0 through 9 in a through f a b c d e f okay and that's all the possible combinations of numbers and letters of a hexadecimal color and we're going to say let's see equal an empty string because we're going to add in to c here in a minute we're going to do another for loop for let i equal zero and now we only want to run this six times because hexadecimal colors are six stitches you know six characters long so we're gonna run this six times we're gonna say i plus plus and in this for loop what we want to happen is we want c to to [Music] to plus equal to um you'll see in a second so we're going to say d math dot floor this is going to round down math.random times 16. so basically this is going so this is indexed you know this is only 15 characters long but since we're calling math.floor we need to call it on 16 because it will never hit 16 it will return a number from 0 to 15 okay so what's happening here is math.random returns a number from zero to one so let's say it returns point five well let's say it returns point five five 0.55 times 16 let's see here oh yeah calculator 0.55 times 16. so after it does its multiplication it's going to round down so this is going to return an 8. so the highest that math.random can go let's say is 0.99 multiply that by 16 it's going to return 15 so you can never get 16. this is 15 characters long we're calling math.floor but we're multiplying math.random times 16 first so math.4 will always round down it will return a number between 0 and 15. remember that javascript starts indexes at zero so this would be 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 indexes okay now each time this for loop runs it's going to run six times it's going to add one of these indexes to the c variable so what we do is we return c but we can't just return c because we need to add in this 0x before that hexadecimal creation so because phaser wants 0x and then what color you want so to do that we're just going to say 0x plus c so it's going to return 0x and then 6 random indexes so it's going to say 0x 9 c b a e f you know whatever so it's going to return that so now that we have that so since this returns this exact string here just in random orders we can just call random color here and now all of our circles will always be different colors you know it'll call random color every time this for loop runs it's going to run 10 times it's going to call random color 10 times 1 for every circle random color is going to return a random string every single time and pass it here so that's how you get random colors pretty cool stuff all right okay so the next thing we want to do here is return random velocities as well that way they're not all starting at 200 bouncing to negative you know it's predictable we want it to be unpredictable so we're going to create another function and we'll just call it random velocity so to return a random velocity we're gonna need the computer to make a choice so we're gonna say let choice equal ah yep math dot random times well nope so windymath.floor math.floor math.random times one yes let me make sure i'm doing this right let's just see if i'm doing this right i'm not quite sure i feel like i am but so we're just gonna call random velocity we're gonna check the console to see what's returning so return to zero and let's just run this a few times it should return 0 or 1 but no it's not because i'm calling math.floor so i think if we get rid of math.floor that's not what we want either so we want times two so okay let me just delete this math.floor math dot random times two so i believe this should return a one or two i'm sorry a zero or a one because we're we're rounding down a lot of zeros let's say zero one zero one okay good perfect so return zero or one every time so so we want to make an if statement if choice equals one then we want to return a another uh math equation here math.random and we're just going to say [Music] 700. this is going to return a number between 0 and 700 and if we just add a little bit to there well we'll just add a hundred so it's going to return a number between 100 and 700 that way none of our circles are moving too slow um so if choice equals one then do that else meaning if choice equals zero we want to return same thing but negative so we're just going to say negative math.floor math.random times 700 and we want minus 100 so now it's going to return a number between negative 100 and negative 700 okay so with that set up we should be able to see this so let's just console log um random velocity okay there we got a positive number positive positive negative boom perfect negative so it's going to return a positive or negative number each time it's run that's exactly what we want so because of that we can just pass random velocity to the set velocity method right here so if we just say random velocity now they should kind of yeah see how they kind of but we we want to set it to uh okay so yes so using just set velocity and passing in random velocity as one argument passes it to the x and y velocities but actually we want it to run twice so we're gonna say random velocity we're going to do random velocity twice that way when it sets the x it's going to call random velocity when it sets the y it's going to call random velocity so it's going to call it twice so it kind of creates rather than once for both we're going to call it once for each x and y so that looks really good so now we have our circles they are created at random spots and they have random velocities so how do we create more circles um and you know we could always you know add circles um but what we want is to add circles at a timed interval so or um we want it to to add circles at certain times so for that we're just going to say set timeout this is a javascript function that takes two arguments the first argument is an anonymous function and the second argument is the time that you want it to happen in milliseconds so let's actually raise this so you can see what's happening if we console.log hey there so when i refresh this after two seconds it's going to say hey there see that refresh again one two so that's how set timeout works pretty cool stuff so because of that we could literally put this whole for loop yep this guy right here inside the timeout therefore it creates the circles after two seconds okay so you see where this is going you just you could just copy this whole thing down create another one and change it to four seconds so two seconds and then four seconds you're gonna get more and actually just so you can see this a little better we're gonna change the size of these guys so we're gonna make the first round of them five pixels that's how big the circle is going to be because this is the radius number so two seconds you got some little guys and then four seconds you got the big guys so we're actually just gonna make these 10 [Applause] and we can up this a little bit here to 20. we're gonna make one more timeout control c for six seconds and we're going to make these guys 15. so now after six seconds you're going to have 60 circles on the screen and you have the resize event so if you want it to full screen this it's going to start over you're going to have that cool effect here one more thing i want to show you is um there's another method so i want these colors to change constantly if you want the colors of the circles to change we could create pretty sure we could create just an array an empty array here and then with every for loop we are going to [Music] yes g dot array dot push g dot circle so every time it creates a circle it's going to push that circle into this array so if we let's see if we can console log it i don't know yeah we should be able to console log g dot array so after four seconds we should see there it is so the first 20 circles was pushed into our array so basically if we do the same thing here g dot array dot push cheat on circle same thing here g dot ray dot push g dot circle and um actually let's put this out of the timeout method or out of the for loop so it only logs it once g dot a r so now when it finally finishes the circles it should just log one array 60 look at that beautiful we have 60 circles in our array right there blank 60. so it starts at zero so it ends at 59. it's javascript okay so now that we have those pushed to our array we can do something else here we can say set interval and this takes a anonymous function as its first argument and it takes a timer or in milliseconds so every 500 milliseconds it's going to run this code instead of the timeout where it just runs the code once after a certain amount of time this is going to run the code consistently after a certain amount of time so every 500 milliseconds it's going to console log hey and actually let's get rid of this console log so you're going to notice every half second hey is being logged the interval is running every half second okay so what we want to do with this we'll get rid of this guy we're going to run a for loop for let i equal zero zero if i is less than g dot array dot length i plus plus so we want to run this for loop 60 times basically um oh wait i think i might be doing this wrong no so it's gonna it's gonna run it every 500 milliseconds and it's going to use array. like to run it so actually it might cause an error because no it shouldn't um because g dot circle's not going to exist so oh no no so g dot array i dot fill color equals random color i think this should be right so it's going through the array it's adding i so it's going to go g dot index 0 first it's going to change the fill color to a random color every 500 milliseconds and let's see if that actually works it does perfect so you can see if you look close all the circles are changing colors every 500 milliseconds it's because we pushed every circle into the array then we loop through the array and g dot array i means the same thing as 0 or 1 or 2 or 3 or 4. remember by the end of it we have 60 items in our array so this is going to return i is going to equal a number between 0 and 59. remember javascript the indexes start at 0. if it started at 1 it would it would return a number between 1 and 60 but that's not how javascript works so it's going to be a number between 0 and 59. so if i were to just pass 0 here it wouldn't work i don't think only one circle is going to be changing colors which is going to be very hard to tell um anyway no confusion there so i as this is running i equals the current index that it's on so it starts at zero and then eventually ends at 59 after six seconds because remember after two seconds the array is only going to be 20 long after four seconds this array right here is going to be 40 long 40 indexes long and so on so that's it so you got a bunch of circles they go in random orders random velocities and they change colors every 500 milliseconds to a random color and you can change the interval if you wanted to change colors faster or slower you can just change the milliseconds in which it changes so that's it so hope you guys enjoyed and i'll see you in the next one thank you

Channel: Myles Ritter

Views: 70

Keywords:

Id: UAdWDHb3zPQ

Length: 47min 45sec (2865 seconds)

Published: Mon Nov 22 2021