So before we start coding, I think it's important to know the keyboard shortcuts because they greatly improve your efficiency. So eventually we're going to be using the brackets text editor, and I'll be using these shortcuts and brackets pretty frequently. So the first shortcut is to save a file. And in brackets, you know your file is unsaved if there's a dot next to the file name. So right here and right here.  Another helpful shortcut is copy and paste. So first what you got to do is highlight what you want to copy and then to copy you use command C and then go to where you want to paste whatever you copied and to paste all you have to do is command V. You can also cut lines of code by highlighting what you want to cut and then use command X and then go to wherever you want to paste that code and just do command V. And you can also paste what you just cut or copied in other files. Now you'll notice that we have two unsaved files. So instead of using command S in each file, you can save all the files at the same time with command option S. So now you'll notice that there isn't the dot next to the file names. Another helpful shortcut is searching your file. So let's say I had a really big file with a lot of code in it. To search that file, I could use the shortcut command F and search whatever I want to find and it will highlight it for me. And if there's multiples, you can see that I can go through every occurrence of whatever I want to search. Another helpful shortcut is to replace words or characters and that shortcut is command option F and it will give me what I want to replace and it will let me search up anything just like command F and then I could replace it with whatever. So I could replace every occurrence of the number seven with that and then just go through each one and it replaces every seven with three As you can also replace things that aren't necessarily in the file that you're editing. So if I wanted to replace the four here in file one and and the fours in file two, I could use command option shift F and I can replace four with hello. Then it will show me every occurrence of four in what files and then I could check which ones I want to keep and which ones I don't and then I could just click replace and there you go. And then it replaces every four with hello. Another helpful shortcut is if you have a really long line and you're kind of lazy to just use your mouse to do that, a much faster way to go to the ends of the lines is to just use command and then the arrow keys, which is helpful if you have a really small font size. So it's kind of hard to pinpoint the end of a line. So using command and then the arrow keys is pretty helpful. And the last shortcut that I sometimes use is highlighting lines without using my mouse and all you have to do is use shift and then you use the up or down arrow keys and that comes in handy every now and then oh and some more shortcuts would be to increase the font size with command and then the plus sign or you can't really tell here because it doesn't show the plus sign but that's where the plus sign is. So I could increase the font size or decrease it with minus. Okay and this is the last shortcut and sometimes I use it but not really but it's just helpful to know and that is to write on multiple lines. So let's say I wanted to write two lines that were exactly the same or pretty similar. I can write on both lines by pressing command and then I could click on wherever I want to type. So now I could type on two different lines. So those are just the few shortcuts that I use every now and then or pretty often and I think they're going to be really helpful and make you a more efficient coder. Okay let's start coding. The first thing you want to do is open up an internet browser. I recommend using Chrome and then you want to go to Replet and when you first open up Replet you'll see a page that looks similar to this. You want to select JavaScript because that's language that Phaser uses. Now for our first line of code let's start off with console.log. Console.log is primarily used for debugging so you'll find it very useful when you get stuck writing code. Now between the parentheses let's just say hello world. Run the code and it prints hello world to our console. Now the shortcut that I just did instead of clicking run was command enter. So with console.log you can print out anything as long as it's in quotes. You can also type in numbers false of course true null and undefined. We'll be getting into these terms later in the course but for now congratulations believe it or not you just wrote your first line of code. Now let's learn about comments. Let's say we have some code and let's say we're having some trouble figuring out what this code does. We can add a comment like this. Comments are just comments that you write on your code to make your code easier to understand so notice to make a comment you start off with two forward slashes but this is only for one line. To make a multi-line comment you would use this syntax forward slash asterisks asterisks forward slash and then write your comments between the two asterisks like so and now you have a multi-line comment without having to constantly write the double forward slashes like this so don't do this. Right now commenting might seem useless because we've only learned console.log but as your code becomes more complex you'll find commenting to be very useful. It's especially useful when working in a team environment or if you haven't looked at your code in a while and you're trying to figure out what your code does commenting helps you understand your code quicker and easier so get in the habit of commenting your code. Okay before we go on I'd like to point out something that might confuse a lot of beginners and that's spacing in JavaScript. So right now you don't have to know what all of this means we'll get into all of this in later videos. The point I wanted to illustrate was that spacing does not matter as long as you're not dealing with reserved words and by reserved words I mean words like var or function and I just wanted to point out when I run the code that all of our variables work perfectly fine same with our functions however let's remove the space between our reserved word and our function name we can see that we already get an error and the error that we're getting here missing semicolon before a statement doesn't really tell us what's wrong because this is just the wrong syntax for making a function there has to be a space between a reserved word and the name the same goes for a variable if we remove that space we can see that the colors changed the javascript engine doesn't know that num5 is a variable so we need to have a space here but you can see here the space doesn't matter on the sides of equal signs or math functions or math operators but let's not get too ahead because we're going to be learning all about these in future videos so I just wanted to point out that spacing only matters when you're dealing with reserved words like function or var and there are a few other reserved words but function and var are the two most common now let's learn about math in javascript for this video we're just going to focus on our console and replete so in javascript you can compute math equations with different operators so for addition you would just use the plus sign subtraction the minus sign multiplication with the asterisk division with a forward slash and these are your four main math operators there's also modulus which is the percent sign and modulus gives you the remainder of one value being divided by another value for for example nine modulus two gives you one because two goes into nine four times giving you eight and that gives you a remainder of one you can also use parentheses to do math inside the parentheses before doing the math outside of the parentheses for example so math in javascript just follows the math order of operations you can also add words with other words or words with numbers for example so you can see here if we add a word as long as it's in quotes and add it with a number javascript will add the number to the word and of course you can add words with other words however you can't subtract words or multiply words you can only add words which is called concatenation so now you know how to use the math operators in javascript now we're going to learn about the comparison operators comparison operators return either true or false and usually you would use comparison operators in conjunction with while loops if statements else if statements and a few other things but for now we'll just focus on the operators themselves so for example equals equals is a comparison operator and it checks for sameness so one equals one that's true one is greater than one one is less than one it's false you can also do one is less than or equal to one that's true there's also greater than or greater than or equal to there's also not equals so nine equals nine that's true but nine not equals nine which is the exclamation mark with a equal sign that's false and this will return false only if the left side of the operator is equal to the right side of the operator we can also compare words so that makes sense right there's also another operator which looks like this which is three equal signs instead of two equal signs and the only difference here is that this is the strict version of equals two so for example one equals one that's true however if we put one of the ones in quotes and one one not in quotes it returns false because the strict version of equals two checks for data type and what that means is well for this example this one is a number but this one is a string and a string is like a word and words don't equal numbers in javascript it's kind of confusing right now but we'll learn about data types in a later video but for now congratulations you just learned seven different comparison operators now let's learn about variables you can think of variables as people and these people only have one job and that job is to remember the last thing they were told it's kind of hard to conceptualize at first but it'll just make sense the more you practice so to make a variable you start off with var and then the variable name and then the value and then you end your line with a semicolon now a semicolon is just like a period at the end of a sentence in javascript semicolons are not necessary but they make your code easier to read so i recommend using them as often as you can so your variable can have any name as long as it doesn't start with a number believe it or not one of the hardest parts of javascript is naming your variables so here variable name is not a good name for our variable because it doesn't give us a good representation of what our variable means i think num makes more sense so this variable is a number type its data type is a number it can also have decimal points and it can also be negative as well the next kind of variable is the boolean and that can either be true or false booleans can be used for things like if statements while loops and a few other things which we'll get into a later video the last kind of variable we're going to learn is the string type and a string is anything that's in quotes a string can be empty like so and of course it could have words in it can have spaces it can have sentences it's just anything that's in quotes and javascript just looks at this like a sentence so if we run our code nothing happens because we're not console dot logging anything now in our console we don't have to write console dot log our console does it for us so if we want to console dot log num we just type in num and we could see here it equals negative 123.0123 boole equals false and we can see here it equals false and string equals whatever this says we can also add variables with other variables so we can add string with num and we could see here that javascript just concatenates our number variable to our string we can also reassign variables so right now this is what num equals we can reassign num to equal something else like that and now we can see num equals 345 same thing with boolean variables and of course strings now there's two more types of variables i'd like to teach you and that would be null and undefined so null and undefined mean kind of the same thing basically null and undefined mean their value is nothing the only difference is when a variable is set to null we are assigning it a value that is a value that does not exist and you could see here we're getting a warning because this is redundant an undefined variable is a variable that is just declared like that so once again a null variable is explicitly set to equal nothing an undefined variable is just a variable that hasn't been defined now let's learn about arrays and objects an array is like an empty folder and this is what they look like so this is our empty folder and with arrays we can hold lists of information and we separate each element with the comma and it's good to space things out so here you see we have an array which has a length of five or it has five elements and arrays are useful because you can use them like lists that hold similar elements so what if we only want to get one element from our array we would use something called bracket notation and that looks like this so here we are using brackets to get the first element of our array and that returns one so when you want to get an element at a specific index in an array you would start from zero so let's say we want the fifth element since we start at zero we know that the fifth element is at index four so zero one two three four and we could see here we get five we can also have arrays that have different data types like so and that's just because javascript is a very flexible language and languages like java you would only have arrays or array lists that can only have a single data type but in javascript you could see here that we can have different data types in the same array and of course we could also have variables in our array and objects so this is an empty object objects are very similar to arrays except there are a few differences one being it uses the curly brackets instead of square brackets and when we put stuff in objects we give each element a property name so objects have properties like so and the properties have values so let's make a human object with me and you could see here that it's very similar to an array the elements are separated with commas but you can see that we're using curly brackets where we have to name each element with a property name or another way you could think of this is that objects have properties and properties have values let's just run the code and to get a specific property of an object we would use something called dot notation instead of bracket notation so we can get human dot name and we could see it's equal to michael age 18 so you can see the similarities between objects and arrays but you can think of objects as as things like objects and these objects have different properties and so with that in mind you can see that objects can be useful for for storing character information because with property names it's easier to know which value is assigned to what whereas in an array each value is selected by its index now let's learn about if else if and else statements this is where booleans and comparison operators come in handy so this is the skeleton of an if statement between these parentheses we put in a boolean value or something that returns a boolean value and between these brackets is what our if statement does so for now let's just have our if statement console dot log something and let's make a variable called boolean and set it to true and then we can put boole in here run the code and we could see here that something is printed out that's because boole is true and because boole is true our if statement runs the code between its brackets if boole were false and we ran the code nothing would happen because an if statement will only run its code between its brackets if this boolean is true we can also use our comparison operators and because one does equal one this returns true and so our line of code is ran and let's make this equal false nothing happens so let's say our boolean value is false we could use something called an else if statement which looks like this and this is just an if statement which the previous if statement defaults to if this if statement was false so here this won't run because boole is false and then we'll check for something else so we could just say if for is greater than one it's true and have this else of statement do something run the code and we can see here this line of code is ran because this was false so this if statement went on to the next else of statement and because this is true it runs this line of code now let's say this was false we can use an else statement which is the default statement for all if and else if statements so this else statement will run no matter what unless one of these if or else if statements are true so let's have this do something run the code prints out six because both this if statement and this else of statement are false so just defaults to the else statement so one thing to know is that if else if and else statements should be ordered in specificity and what I mean by that can be better illustrated by this example so we have a variable called num and it's equal to 10 and let's change these if and else if statements and run the code and we can see here that only something is printed out to our console but we wanted this to print out because num is greater than six this is what I meant by ordering your if and else of statements in specificity so let's change the order of these if and else of statements and change our num variable to something else and run the code but let's change this so it's easier to understand we can see here that num is not greater than six so it defaults to this else of statement and it prints out something to do instead of something to do even though num is greater than one so that's just something to keep in mind when making your if else if and else statements now you know how if else if and else statements work now let's go over while and for loops I'm first going to go over what for loops are because they will make while loops easier to understand so to make a for loop we start off with for and then parentheses and between the parentheses we start by declaring a variable usually it's I and set it to something and then we'll set a limit for when to stop looping so in this case we'll have i is less than 10 and then we'll have something that increments our variable which can be something like i plus plus and let's just have console.log in our loop and run the code so what just happened well we first defined a variable i and then we console.logged it so that's why zero is printed out because i starts off as zero and then it loops again but right after you finish one loop you increment your variable and so that's why when this for loop loops a second time i has been incremented by one so that's why one is printed out and then so on now you don't have to always increment by one you could also increment by two like so and one thing to point out is that it will stop looping when i is less than 10 so once i is equal to eight it's incremented by two and at that point i is equal to 10 so it's not less than 10 so it doesn't print out 10 so you just saw me use i plus plus i plus plus is the same thing as i equals i plus one is there an i plus plus version for incrementing by two no but you can do i plus equals two and that's the same thing as what we just had so let's run the code and it does the same thing because i plus equals two is the same thing as i equals i plus two so that's how a for loop works now for a while loop the syntax is this and we'll just have our while loop do something for each time it loops and for this example we'll have a variable called i instead of zero so this is very similar to our for loop when we run the code we get the same output as our as the first time we ran our for loop first we're defining a variable i and setting it to zero and while i is less than 10 it will run this code so first i is equal to zero i is less than 10 so it console dot logs i which is zero and then it increments it by one so that's how we get zero through nine because once i is equal to nine it's incremented by one so then it equals 10 which is not less than 10 and so it just stops at nine so why would you want to use a while loop well a while loop is useful for when you don't know how many times you're going to be looping for example if you had something random so let's change things up so math dot random produces a number between zero and one including zero but not including one so it will go from zero to zero point nine nine nine nine et cetera and each time we loop we're reassigning i to another random value so when we first run our code it looped four times let's run our code again it looped one time again three times so you can see that a while loop is useful for when you don't know how many times you're going to be looping and that's how while and for loops work now let's learn about iterating through arrays and objects so here we have an array variable and an object variable let's iterate through the array variable first so we can just use a for loop so one thing to note is that all arrays have a property called length and length is just the amount of elements in the array so let's run the code and it prints out each element of our array we can also use a for each loop which looks something like this and we get the same effect now a for each loop is a little complicated because it uses something called a callback function and what the for each loop does for an array is it takes each element and we're assigning it to i and then we are console dot logging i in our case and of course you could do a bunch of other things like incrementing i by one but we'll learn more about functions in a later video now to iterate through an object we can't use a for loop because if we try to you'll notice that we'll get stuck and just writing it out you can already tell that we cannot get an index zero of object because we don't have indexes in objects we only have properties so instead of a for loop to iterate through an object we would use a for in loop like this we can see that it prints out each property name of our object now what if we want to print out the property values well we would just take our variable and use bracket notation and put an i and run the code and we could see that each property value is being printed out so one thing that i didn't mention in my arrays and objects video is that you could use bracket notation to get the property value of an object so just to clear things up we have an object variable called obj and here are its properties and values we can use bracket notation but we have to put the property name in quotes so p1 and that gives us one however if it's not in quotes we'll get an error so make sure if you want to use bracket notation when getting the property values of objects that you put in the property names in quotes but i prefer just using dot notation because it takes up less space so that's how you iterate through arrays and objects now let's learn about functions and methods a function is basically a block of code that does something so to make a function we start off by typing in function and then function name parentheses and then curly brackets so instead of function name let's call our function add and between the two parentheses is where you put in the arguments for your function so let's have a and b be our add functions arguments and then our function will just return the sum of a plus b so when we run our code nothing happens because we haven't called our function yet to call our function we can either just do it in our console like so or we could assign it to a variable and we could see here that num is equal to 16 so what's happening here well when we call our function which is when we type in our function name followed by parentheses we are saying let's use the add function which takes two arguments and then in this case our add function just returns the sum of our two arguments so eight and eight will be the equivalent of a and b in our add function and our add function just returns 16 now if we don't have the correct amount of arguments and we run the code we get not a number because we only have one argument and our add function is looking for a second argument called b but you could see here we only have one same thing would happen if we have no arguments where our add function is looking for argument a and argument b but here we haven't defined them now if we don't have parentheses we are just saying that num is the function so when we run our code we could see that num is a function and we can call num like so let's make a more complex function first let's make an array and let's have a function called iterate and it takes an array argument and then it will console.log before and after and what we are going to do with this array is change each value and let's call our function down here and run our code to make things more clear let's just rename this variable bob and run our code so we have a variable called bob which is an array and then we are calling the iterate function on bob so our first argument will be referred to as array or ar in our iterate function so at first console.log's array which in our case is just our bob variable and then it iterates through each value from our bob array and adds 10 to each element and then after it's changed each value in our array it will just console.log after and our array after we've changed it so function arguments can be confusing because of the names of the arguments the names of the arguments are just for the function to handle we don't need to have a variable called array so that we can call our iterate function you can see here that we just have a variable called bob and then once we call the iterate function the iterate function will just refer to this argument as array and then so this function will just do whatever it does with array now a method is just a function of an object so let's make an object and let's give it a run property which is a function and this function inside of our human object just console.log's running run our code and we could see that human.run is a function and when we call human.run it prints out running so a method is just a function that's part of an object and that's how functions and methods work here's one thing that I'd like to point out about functions so let's say we have a function called hello and it takes a number and it has a bunch of if statements like this let's run our code and then call our hello function and we can see here we're only getting one return value and that's just num even though we are also returning or we should be returning num times two and num times three because all of these if statements are true so the point that I'm trying to illustrate here is that once you return something in your function your function stops executing so here we can see num is greater than 10 so it will return just num and the function will stop executing all of this code does not matter once something has been returned let's make another function called greater than and this function takes two variables let's add in some if statements let's run our code and let's just check to make sure if our two arguments are equal we get equal if our first argument is greater than the second argument we get true and we get false if it's the other way around so first let me point out that if your if statement only has one line then the curly brackets are not necessary so this if statement right here is the same as this but I'd also like to focus on this else statement this else statement is unnecessary because we already know that if a is less than b then we should be returning false so we can just remove this else statement run our code and we get the same results one last thing I'd like to talk about functions and methods is scope and you can think of scope as as where a variable can be used so to demonstrate scope let's make a function called hello and inside our function we're going to be declaring a variable called num and setting it to a number and then let's console.log num and run our code let's call our function hello so we can see here that it just prints out the value of num however in this case because we declared num with var inside our hello function we can only use num inside the hello function so if we try to print out num num is not defined if we define a variable called num and run our code we can see that here num is equal to six if we call our function their num is equal to two three four but if we print out num again we can see that it's still equal to six that's because num inside of hello is a local variable and if we declare a variable outside of our function it's a global variable so we have a global variable called num but that num is different from this num scope is just something to keep in mind when you're making variables and functions so now you know how to use functions and methods but you also know how to stop functions from executing using return and also about scope now we're going to be learning about the developer tools or dev tools so on chrome to open up your dev tools right click and then click inspect you can also just use command option i and we could see here we have a bunch of tabs that tell us everything about our internet browser and the web page that we're on but we'll just focus on console console does the exact same thing as replete the only difference is is that you don't need an internet connection to use our dev tools console but also we don't have the split screen that replete has which i like but it does the exact same thing that replete does however if you want to return to a new line we can't click enter we have to do shift enter so when we are debugging our code we won't be using replete we'll be using our dev tools now we're going to be learning about regular expressions for this make sure you're on rubular.com it says ruby regular expressions right here but it also works for javascript regular expressions are used for searching a string for a specific pattern so for example let's type in a string here and in our regular expression you can type in a word that we're looking for so here we can see that michael is being returned and at the bottom we can see all the different regex selectors so let's say i wanted to search a string for three consecutive numbers so let's just type in a bunch of stuff and for our regular expression we would put backslash d and we can already see that we're getting every digit in our string and if we want exactly three in a row we would just do something like that that's the gist of regular expressions as you can see there are a lot of options for regular expressions but this is essentially how regular expressions work so let's translate this over to javascript let's make a variable string and just put in a bunch of stuff and run our code to use regular expressions in javascript the two most commonly used methods are match and test so to use test we start off with a regular expression and then put a dot and then recalling our test method and between the parentheses let's put our string run our code and we could see that we get true so test returns a Boolean and it returns true because we have a jk in our string we can also use match except instead of putting the regular expression or regex first we would put in the string dot and then match and then in the parentheses we would put our regex so something like that run our code and we could see here that we have jk in our string right here as well as the index or the location of it and the input that we invoked the match method on now what if we have multiple jks in our string run our code and run the same function we can see here that we're only getting one jk what if we want to get all of the jks in our string well we can just add a g outside of the two forward slashes run the code and you could see that we got a list of every jk in our string now what the g stands for is global so it will search everywhere in the string the g is what you would refer to as a modifier now there's a bunch of other modifiers but i find that g is the most commonly used so another good website for regular expressions is regex 101.com and this is similar to rubular except you can see that the interface is a little more complex but it gives you a list of all of the modifiers that you can use and that's how regular expressions work now let's learn about map reduce and filter map reduce and filter are used for modifying arrays let's start off with learning how to use map first we need to make an array now that we have our array let's call the map method on it the argument we're going to put in for our map function will be an anonymous function and what an anonymous function is is just a function without a name like so in this case this function is also called a callback function because we are using this map method on our array and what map does is it uses this function which we are about to make and it will invoke this function on each element in our array so for our function we'll have one argument and in this case this argument will be the value of an element in our array and what map does is it changes each value in an array so we have to return something in our case let's return i or the value in our array plus five and run our function and we could see that our map method returns a different array which is the same thing as our array except each element is incremented by five but if we print out array we can see that it's still what it was before we called the map so to reassign the array value we would just do something like this where we are saying array is now equal to array with the map method invoked on it so let's run our code and we could see now that array has been changed now let's learn about the reduce method so let's just switch out map for reduce now the anonymous function in our reduce method often takes two arguments and those are a and b so a is the current value and b is the next value that you're going to add on to a so let's just return a plus b run our code and we can see that array has been reduced to 28 because if you add all of these numbers it will equal 28 lastly let's learn about filter so let's replace reduce with filter and for our anonymous function we'll go back to just having one argument and we will be returning a boolean so if we return true we will keep the value in the array and if it's false we will not include it in the new array so let's just say if i is greater than five and run filter so we can see here that array has been filtered so that only elements greater than five are included and those were the basics of using map reduce and filter now let's learn about the this keyword and what this can be used for so this is a very tricky concept this refers to the current context of where we're writing this so right now if we just type in this we get the window object however you cannot assign the this keyword to anything this simply refers to the context that it's in so let's make an object and let's give it a function called high and high we'll just return this let's run our code and call the object dot high function and and it returns the object obj so to better illustrate this point let's add some more properties run our code and let's call the same function so you can see here that when we call the high function this refers to the object that this is in and this is in the object variable i think a more practical use for this would be to make a constructor function and a constructor function just makes an object so here we have a constructor function and it creates a new object and to make a new object we can just set it to a variable we would use new and then call the function let's run our code and we could see that bob is now equal to an object now it's very important that we use the new keyword because that lets javascript know that we are trying to make a new instance of an object so without using new bob is still undefined because our human function doesn't return anything so again the new keyword is important so that it lets javascript know that we're trying to make a new instance of an object now i'm going to go over some tips and tricks in javascript which you might find pretty useful in certain situations the first thing i want to talk about is using quotes within quotes so let's say i have a string and we're not getting any errors so that's good but what if i want to say i'm going to the park and you could see already that we get an error because to javascript this doesn't make sense because it's like we have our own string right here due to the single quotes here and here so there are two ways to fix this problem the first way is to use the backslash and the backslash is known as the escape character because it allows you to use a single quote between two other single quotes and when we run our code we don't get any errors and the backslash quote is just a representation for one quote another way you can fix this problem is to use double quotes and to just have a single quote inside and when we run our code we get the same output and so with that in mind you could also use a double quote inside single quotes like so the next trick is the ternary operator so let's make a variable called number and then you want to have a boolean or something that returns a boolean and then a question mark and then the value if the boolean is true colon and then a value if the boolean is false and we could see that number is equal to one two three because this returns true because it's true we are setting number to one two three if this were false it's now five six seven because this is false and so our ternary operator defaults to the second value that we state let's go back to the string that I had at first so we know we can get the length of an array like so but we can also get the length of a string and that returns the amount of characters in a string and that includes quotes and spaces another cool thing you could do with strings is bracket notation so if I wanted to get the first letter I could use bracket zero and the second character I could just use bracket one so it behaves very similarly to an array and the last two tricks I'm going to talk about are related to objects so let's just make a object so here we have a variable called human and it has a property called name and its value is alex property called age and its value is 23 and it has a property of sports and it's an array of three different sports golf basketball and football so one cool thing you could do in javascript is add properties to an object without having to do them while you declare the object so you don't have to do something like this we can actually just use our object variable so human and then the property that we want to add and then we could set it a value like so and when we print out human we can see that we just added the property called property and its values 123 without having to add it here the last trick is related to constructors so let's make a constructor and create a new instance of human you can see here that we have a new variable called bob and it's an object with two properties now what if we want to add another property to our constructor without having to modify the constructor here we can use the prototype object so for example human dot prototype dot run and we could make a new function or new method and now we have a run function as a property for our human constructor so now bob has a run method and when we run it we can see that run is actually a method of human so these are just a few tricks and tips in javascript there are a lot more so these are just a few to get you started after you've checked out code wars coder byte and free code camp and you have a good understanding of how javascript works you can start learning how to make games with phaser so the first thing you want to do is download a text editor and the one that we're going to be using is brackets so just go to brackets.io and just follow the instructions for downloading it next you want to go to phaser.io download download phaser from github even though it doesn't actually bring you to github and download the min.js file the phaser.min.js file includes everything that you'll need to create a phaser game but the file's been minified so it's smaller next you want to create a folder and let's just call it phaser demo and in that folder you want to create another folder called phaser and then you want to drag your phaser.min.js file into that phaser folder that we just made next you want to open up brackets and it will first show you this code of how brackets works the main reason why i like brackets is because of the live preview button it creates a local server and it shows the updates from your code in real time but it only updates html and css in real time so because we're going to be making games with javascript we're going to have to reload the page every time we save our code but the local server is what we really want next you want to open up a folder and open up the phaser demo folder and in our folder we want to create a index.html file and we have to create the skeleton of a basic webpage and this is what it looks like we can click our live preview button and it will show us the webpage that we just made which is empty right now we can add elements to our webpage by adding tags so this is a header tag and i could add content to the tag but most of the tags we'll be using are just script tags so other tags are out of the scope of this lesson next you want to create a main.js file and in that file type var game equals new phaser.game parentheses and then the width of our game the height of our game and the renderer for our game which is either webgl or canvas but you can just put down phaser.auto which picks the renderer for you next create a state1.js file and this file will be the file that represents the first state of our game a game state is like a scene in your game it could be menu state or or high score state or game over state or game state but let's just call this state state1 so in our first state we have to create a object variable and just name that object the name of your game so in our case let's just name it demo and set it to an empty object next we want to add a state1 property to our demo object and make it a function and then finally we want to type demo dot state1 dot prototype and set it to an object that has three functions inside of it and those functions are preload make sure to separate them with commas create and update let's go back to our main.js file and add a state to our game and we do that by typing game dot state dot add parentheses the name of our state or the key to our state and then the name of the property in our demo object so we've just added a state to our game now we have to start the state and this will be the first state that will be ran when our game first loads so let's type game dot state dot start parentheses and the key of our state which is state1 let's go back to our index dot html file and now we have to add script tags which basically load scripts into your web page so to add a script tag we just say script and we add a source attribute to our script tag and for our first script tag we'll load the phaser dot min dot js file because we put phaser dot min dot js in our phaser folder we have to say the name of the folder first and then phaser dot min dot js this is the path of where our phaser dot min dot js file is so this is what our script tags will look like we start off with an opening tag and a closing tag make sure phaser dot min dot js is the first script that you load into your web page next we'll add another script tag and set the source to our state one file and finally in our body tags we'll load our main dot js file and then save everything you can do so with command s which saves the file that you're currently editing or command option s which saves all the files and you can see here that we have a black screen this is a screen for our game if we open up our developer tools which you can do so with command option i or right click and inspect you can see that our black screen is a canvas element what you just wrote was the boilerplate for any phaser game and as of right now our game is just a blank screen right now our code is saved locally on our computer but what if our computer breaks or we want to work on our code on a different computer we can save our code online and the most popular way to do so is through github so go to github.com and make a github account after you've made an account click new repository a repository is like a cabinet that holds all the files to a certain project so let's just name our repository phaser demo and create repository next we have to open up our terminal you can do so by using the shortcut command space bar and just type in terminal you can also use iterm iterm and terminal do the same thing so it doesn't matter which so it doesn't matter which one you use so to save our code we have to go to the correct directory if we want to know which directory we're in we use the command pwd or print working directory you can think of directories as locations in your computer so right now i'm at my root directory but i want to be in the phaser demo directory we can do so by using the cd command or change directory desktop phaser demo and capitalization doesn't matter and now when we print out our working directory you can see that we are in the correct directory now we have to link our directory to our repository on github and we can do so with the following commands git init git add dash dash all this will add all of our files to our commit our commit is made on the next command which is git commit dash m and just say first commit a commit is like a screenshot git add dash dash all adds all of our files to this screenshot and then we can push our screenshot to github so run this command and then copy this command on github which sets the origin for our remote and then use this command to push all of our to push our commit to our repository your terminal might prompt you for your github username and password so just enter those and you should be able to push your commit to our github repository so now if we go back to github and we refresh the page you can see that our code has successfully been pushed to our repository okay before we start writing more code it's important to understand how phaser games work so if you go to phaser.io click examples and it will give you a list of pretty much everything you can do with phaser so let's just go down to input let's check out uh this example so in this example i can move right or left depending on which arrow key i press and below you can see the source code to the example so because the author of this code only has one game state the author doesn't have to say game dot state dot add game dot state dot start this is the equivalent of those two lines but what i want to focus on are the preload create and update functions there's also a render function but that does roughly about the same thing as the update function so we won't be using that for this lesson so let's go back to the preload function the preload function is primarily used for loading images so so here we can see the author's loading a ground image a river image sky image etc a sprite sheet is a collection of images and it's used for animation we'll get into what all this stuff means in a later video because i just want to focus on the preload create and update functions so the preload function is only called once and that's at the beginning of your game state and it's primarily used for loading images the create function is similar to the preload function except the create function is used for setting the initial values for everything in your game state so here we can see the author is adding the background images and because you only have to add the background images once you put it in your create function and here we're adding more images and this line right here has the game camera follow the ufo sprite but again we'll get into what all this code means in later videos the update function updates the frame of your game it updates the frame of your game roughly 60 times a second depending on the performance of your code so going back to the example our update function is being called right now and my right or left arrow keys aren't pressed down as soon as i press down an arrow key the update function will check that yes the right arrow key is being pressed down and it will invoke these properties on the ufo sprite so each frame so each frame in the game is a still image so for example this could be frame one frame two frame three frame four frame five and when you run those frames 60 times a second it creates the illusion of motion that is essentially how phaser games work now that we have one state let's add multiple states we can start by making another js file let's call it state 2.js and we can copy all this code except for var demo equals an empty object because we only have to make a game object once and just paste it into state 2.js and now we have to replace state one with state two but instead of replacing one with two manually by just typing it out we can use the shortcut command option f and that will replace the specified word with the word you want to replace it with so here i'm specifying state one and i want to replace it with state two replace replace command option f is especially useful when you have to replace a lot of words with the same word now let's go to main.js and just copy this line and again replace state one with state two add another state script make sure you have the right file name and save everything and you can save all the files with the shortcut command option s now now if we restart our code we have two game states to switch states we can use the same method game dot state dot start and use the key of the state as your argument run the code and now we're in state two but how can we differentiate between states let's go back to our state files and change the background color we can do so in our create function so type out game dot stage dot background color and you have to set it to a hex color like hashtag ddd ddd dd save our code restart our local server and now we can see that state one has the color of this hex color now a hex color is basically a combination of red green and blue if you google hex color picker and click the first link you can pick any color you want and it will give you the hex color for that corresponding color so the first two characters represent red the third and fourth color represent green and the last two colors represent blue so let's make state two have a green background i'll just copy this hex code and in state two i'll type game dot stage dot background color equals that hex code and make sure it's in quotes save our code restart our local server so right now we are in state one to switch states we can type game dot state dot start parentheses and type in the key of your state as the argument so i'll just type in state two and now we are in state two let's also add a console dot log to tell us which state that we're in save our code restart our local server and now we can see when state one first starts at console dot log state one if we switch states we can see that state two has been console dot logged so now let's just add eight more states states zero through nine and let's just copy the code from state two and paste it and paste it in all the files that we just made and now we have to refactor the code and now we have 10 states let's save all our code don't forget don't forget to load your script tags and you also have to add the states in your main.js file save all of our code refresh our local server and now i can switch between states but for some weird reason sometimes you have to click the canvas element or the game screen for your game to start running and here we can see that our states are working because they're console dot logging what state they are so right now we have 10 states but our only means of switching between states is to go to our developer tools and typing out the game dot state dot start command something like that so instead of having to go to our console and running that command we can make an event listener so we can just press the number zero through nine and when we do so phaser will bring us to that state so first i think we should start with state zero save our code refresh our local server and we get an error no state found with the key state zero the error here is that i forgot to load my state zero dot js file refresh and we get another error so this time our console tells us that our error is in state zero dot js and it's on line one so let's go to state zero dot js and it says demo is not defined well that makes sense because we define it later in state one so let's just cut this line of code save that file and paste it in state zero save it refresh our local server and now we get no errors and here we can tell that we are starting at state zero because state zero console dot logs state zero when it first starts so when you're developing games with phaser make sure to have your developer tools open because the console is where you'll get the error messages now let's add an event listener so in our create function we can say game dot input dot keyboard dot add key and here is where you put the key code so each key on your keyboard has a specific key code phaser makes it easy so you don't have to remember the key code for each key on your keyboard you can just type phaser dot keyboard dot and then the name of your key so if i wanted to get the key code of a i could type in phaser dot keyboard dot a key code 65 but i want the key code for one so i would just type in one and that gives me 49 so instead of typing out 49 i think it makes more sense to just type out phaser dot keyboard dot one because that way you'll know that this event listener is for the one key instead of writing 49 which you would have to remember that it represents one next we want to say on down dot add parentheses the name of the function change state which we haven't made yet no no and then the argument which will be the arguments passed to this function which is a callback function in this case the second and third argument are the listener context and the priority which you can read more about in the phaser documentation so let's make a function change state and this function takes a state number or state num and all this function does is it starts a new state save our code refresh our local server actually it's lowercase k and the argument here should be one actually so when we press on the one key phaser will call the change state function and it will pass one as the argument save our code refresh our local server and when i press one we get an error and that's because phaser has this weird thing where the callback functions are called with another argument and that's like the event object so it carries all the information of what just happened so we have to have another parameter and let's just console dot log what the first argument is refresh our local server let's press one and we switch states and we could tell because it says state one and c.key is the first argument and it has a bunch of information of what key you pressed how long you press it for etc it's kind of useless in my opinion because we have the phaser framework doing a lot of the work for us but this might have certain applications so now we have an event listener so when we press one we switch to state one so now let's add another event listener and let's have it for a key two refresh our code and if i want to go to state two i press two it brings me to state two however if i press one i don't go back to state one that's because event listeners in phaser are local to the state that they were made in so if i wanted to switch states when i'm not in state zero i would have to add an event listener in that state so let's just copy this code and let's paste it in state one dot j s refresh our local server actually let's have this before the zero key and pass it zero as its argument save our code and let's copy and paste this into state one save our code refresh our local server and now i can switch between state one and state zero so keep in mind that event listeners are local to the state that they were made in meaning that they only apply in that state but functions are global as long as you declare them this way and not declaring them inside of your state object so this is kind of repetitive instead of having to write an event listener for each key in each state let's make a function that will add all of the event listeners for keys zero through nine and run that function in each state but before that let's make a function called add key call back and it will take the key or the key that you press down the function that will be called and the arguments that will be passed to that function and then we could just copy and paste this line of code put it there replace this with key and replace that with args and replace this with function don't forget to indent your code it makes your code easier to read so let's call our add key call back function in our create function our first argument is the key so let's say phaser dot keyboard dot zero the function will be change state and our argument will be zero and we can delete this line of code save our code refresh our local server i'm getting another error oh this time keyboard is capitalized save our code refresh our local server and let's switch to state one and if i press zero we go back to state zero so now we have a function add key call back that adds an event listener to whatever key you specify it so let's add an event listener for keys zero through nine save our code refresh our local server and now i'm going to press eight and now i am in state eight so remember event listeners are local to the state that they were made in so let's make a function that will add the event listeners and we'll call that function in each state so let's call that function add change state event listeners it takes no arguments and let's just cut and paste that code in here and just call our function that we just made save our code refresh our local server i'm gonna press four i'm in state four so now let's call this function in each state save all of our code refresh our local server and actually i'm gonna delete that console dot log here because you don't need it and now i can switch between each state by just pressing the keys i think now's a good time to change the background color of each state so it's even easier to tell which state you're in let's save our code refresh and now we can tell which states that we're in so state zero could be like your loading state state one could be your menu state state two could be like your game state at level one state three could be level two you know a state is basically a scene in your game so now i think it's a good time to push our code to github remember to change to the correct directory let's go back to github and there we go now all of our code is up to date on github now that we've written a lot of code it's a good time to push our code to github so open up your terminal or iterm let's change directories to phaser demo and because the folder's on our desktop we first have to say desktop and then forward slash and then phaser demo and if we print out the working directory we can see that we are now at phaser demo to go back to your root directory you can just type cd and it brings you back to your root directory now let's say we were at our desktop directory like so to go to our phaser demo directory because we're already on our desktop we can just type cd phaser demo and now we are at the correct directory so because we already set up a git repo on our computer and on github we don't have to link our repository in our command and actually we can just do the following commands to push our code to our repo so let's start off with git add dash dash all that adds all our files to our commit git commit dash m and m stands for message so let's add a message enter now we can just do git push and if we go to github and refresh the page we can see now that we have pushed all of our code to our github repository part of having a fun game is having a game that can be played on all screen sizes so if you notice when i resize the window our game screen does not resize we can use something in phaser called the scale manager to fix this issue so if we go to state zero and just type game dot scale dot scale mode equals phaser dot scale manager dot show underscore all saver code refresh our local server and now we can see that our game will resize depending on the size of our window another thing to keep in mind another thing to notice is that when you set the scale mode of your game that carries on to all of your other states so right now we are in state zero and you can see that it resizes if we switch to state five it also resizes now's a good time to make our game world bigger and i'll explain why in a few moments so if we go to main.js let's make our game world bigger and let's make it 1500 by 1000 saver code refresh our local server and it looks pretty similar right the reason why we want to have a big game world is that it will make our images crisper or less or less blurry so if you can imagine the actual size of our game world should be about this big but because we are shrinking it down it will reduce the blur of our images so the scale mode that we used was show all but there's also four other scale modes exact fit no scale resize and user scale you can play around with the scale modes on this line if you want to see how they behave but i think show all is the one you'll like the most so that's how to use phaser scale manager you may have noticed that after setting our scale mode to show all we have this annoying horizontal scroll in our window and that's because there's this strip of space called the margin and i won't go too much in detail but margin represent space on a web page so here you can see that we have a margin of eight pixels so to fix this we can add a css file so make a new file and call it main.css and now we have to link our css file in our index.html file so to do so we have to use a link tag and this tag doesn't require a closing tag but it does require two attributes and those are rel or relationship and this attribute tells the index.html file that this is a style sheet or it's going to be a css file and now we have to link our css file with a href attribute let's say main.css and now we're linking our main.css file to this web page so let's go to our main.css file and we have to select something on our web page so we can just select everything with the asterisk and then add curly brackets and between the curly brackets will be the css that we'll be applying to our select and in this case our selector selects everything. Selectors are out of the scope for this lesson but just google css selectors if you'd like to learn more so remember that this white space is eight pixels of margin so to remove it we can just say margin colon zero and end it with a semicolon save our code refresh your local server forgot to save our index.html file refresh and now we can see that we have no margin and when I scroll I don't have the scroll bar at the bottom of my screen so now let's just push our code to get hub and there we go we just pushed our code now we're going to start adding images to our game but before that we need to make our images two of the best free resources for making images are piscule and sketchpad so to start let's go to pisculeapp.com login and just click create piscule here you can draw eight bit images very easily because of the grid system that they have you can pick from an array of colors and you can also make your own custom color palette you can also undo the last lines that you drew with command z or redo them with command shift z this button rotates your images this one flips your images they also have different tools for making rectangles circles filling in your shapes and you can also make sprite sheets which are useful for animation but we'll get into sprite sheets later so there are a lot of features in piscule and I won't be going over them so just go to pisculeapp.com and start creating images and when you're done with your image you can save it on the website and click save gallery or you can export them and download them onto your computer by downloading the png the next website is sketch.io once you're on sketch.io click sketchpad and this website is used for making more organic images or smoother images so there are different writing heads and again you can change the color and undo all your lines or redo all your lines with command z and command shift z and again there are a lot of features on this website that I won't be going over so just go to sketch.io and just play around with it and when you're done with your drawing just click export and make sure to set your format to png and just click download now we're going to start adding images and functionality to each state in our project we'll start off with state zero the end result will look like this okay here's state zero it's basically just a guy who can move around the screen with the arrow keys things to take note of are that he animates while he walks and that our camera has a dead zone so the camera will only follow our character when he's at this point on the screen or if he's at this point of the screen otherwise if he's between those two points then the camera doesn't follow him you'll also notice that he animates as he walks and he stops animating when he's not walking and he can also collide with the top of the road as well as the bottom of the road and the sides of our background so that's state zero so first you want to go to pisco and make an image this is what I made earlier he's like a fatter version of zelda and I named him adam but that's not important but when you're finished making your image you want to resize it so right now our image is only 26 by 50 pixels that's really small one compared to the size of our game world our game world is 1500 by 1000 pixels so if we were to put this image in our game we would have to scale it up and it would be very blurry so with that being said I'm going to make my image 10 times bigger and make sure to have these two boxes checked when you resize your image so I'll click resize and now my image has been increased in size when you're finished making your image you want to save it to your gallery and then you want to export it as a png now we have to add our image to our game so first we'll open up our phaser demo folder create another folder called assets and assets are the images and sounds that make up your game in our assets folder we want to make another folder and let's call this sprites now we have to drag our file into our sprites folder so make a new finder window with command and click downloads there's our file let's just drag it into our sprites folder now let's go back to brackets and here we can see we have an assets folder in our assets folder we have a sprites folder and there is our atom.png so you'll notice there's this invisible box around our image this can be problematic for several reasons so to remove this white space let's go back to where our images in our folders double click it and now when I highlight it we can see the invisible box so let's just highlight the part of the picture that we want and click command k that crops our image so now when I highlight my image we can see that the xs invisible space has been cropped out let's save our file with command s close this and now we can see that we have removed the invisible box and now we're ready to add our image to our game so let's go to state0.js and in our preload function we can load our image we can do so with game.load.image parentheses our first argument will be the key for image so let's name our image atom and our second argument will be the path of where our image is so our image is in assets forward slash sprites forward slash and then we find our atom.png file now that we've loaded our image let's go to our create function and say game dot add dot sprite parentheses and our first argument is the x position so the width of our game world is 1500 and let's divide that by two to get the center of our width and our height is 1000 divide that by two and our second argument will be our key for our image let's save our code refresh our local server and there's our image let's change the background so it's easier to see his hat that's better you'll notice that our image isn't actually in the center of our game that's because images are drawn from the top left corner also it's important to know that the origin of our game or the zero zero coordinate of our game is in this corner so if we draw our image at zero zero save our code refresh our local server we can see that our image is drawn in the top left corner so let's draw our image back in the center of our game and we're probably going to be using the center of our game multiple times so let's create a variable that represents the center width and center height of our game world let's replace these with center x and center y save our code refresh our local server and there we go a javascript tip here is instead of typing out var to declare each variable we can separate our variables and their values with commas like so so this line right here is the equivalent of these three lines so to manipulate our sprite which is just another word for an image in our game we have to set our sprite to a variable and let's just call him adam and assign him that sprite now we can say adam dot anchor dot x equals 0.5 save our code refresh and now we can see that adam is being drawn from the center of his image and we can do the same for y save refresh and there we go we can also write this in one line with the set two method the first argument is x and the second argument is y save refresh our code and there we go now let's add some functionality to our code by being able to move adam with the arrow keys so if we go back to phaser this is the example that we looked at earlier we can use the same implementation of if statements to change the position of our sprite so pay attention to these two if statements this one checks if the left arrow is down and this one checks if the right arrow is down when the left arrow is down we are subtracting from the sprite's x position and when the right arrow is down we are adding to the sprite's x position so let's go back to brackets and in our update function we'll use similar if statements so if game dot input dot keyboard dot is down parentheses and our argument will be phaser dot keyboard dot right and remember this represents a key code we will change the x position of adam and add four to it save our code refresh and when i press my right arrow key we get an error and it says adam is not defined and this is relating to scope because we declared our adam variable inside our create function we only have access to the adam variable inside this block of code so let's delete var and declare adam up here save our code refresh and when i press my right arrow key we can see that adam is moving so let's change four to a speed variable and we'll create our speed variable up here and now let's make an elsef statement if we press the left arrow key we also have to change the plus to a minus so we move in the opposite direction save our code refresh and now i can use the left arrow key let's do the same if and elsef statements for vertical movement except we'll replace a few letters so let's make this up down and change x to y save my code refresh and when i press the up arrow key i go down because remember our origin is up here in the top left corner so when we add to our y position we're actually going down so let's switch this plus sign for subtraction and this subtraction for plus save our code refresh and now i can move in all directions we'll continue state zero in the next lesson but for now let's push our code to github and there we go okay now we're going to add a background camera movement and a tiny bit of physics in our game so first let's add a background image here's one i made on pisco earlier you can see that it's only 90 pixels wide by 32 pixels high so again we have to resize our image so it's bigger otherwise if we just scale it up in our game it will be really blurry so to resize i'll just click resize make sure these two boxes are checked and i know my height of my game is a thousand so when i resize it resizes the content so now i'll just export it download png and then i'll go over to my phaser demo folder and let's add it in our assets folder let's create another folder called backgrounds and let's open up another finder window with command n downloads there's our background image let's drag it into backgrounds and now let's load it into our game so it's the same process as we did with adam we're just gonna copy this line right here except we'll give it another key and we'll change the path of our image so it's in the backgrounds folder and it is called tree bg or tree background so there it is so now that it's loaded we can add the image in our create function so because in this example we won't be manipulating the tree background in the update function or with any event listeners we can create a local variable within our create function so we would only have access to that variable in this specific create function so i'm just gonna call it var tree bg equals game dot add dot sprite and again sprite is just another word for an image and since images are drawn from the top left corner we can just specify its x position as zero y position zero and the key of the image save our code refresh our local server and there is our image but obviously adam isn't on our screen anymore and that is because images are drawn on top of each other in the order in which they were defined so these two lines is where i'm drawing adam but after these two lines we are drawing the tree sprite on top of adam so if we just cut this line of code and paste it above where we drew our adam image save our code refresh we can see that adam is now drawn on top of the background so i think adam is slightly too big for this background so we can change the scale of our image with the following method first you say the variable name that represents the sprite which in our case is adam so adam dot scale dot set to parentheses and our first argument will be the width scale so if i say point seven the width of our image will be will be 70 percent of its actual width and let's do the same with height save our code refresh and now adam is slightly smaller so now we have a background that we can move around on let's just increase the speed by two because i think he's moving a little slow that's better okay so you'll notice that our camera doesn't follow our image we can go to the phaser documentation and find an example that does what we're looking for so here's an example of camera movement and it uses something called a dead zone so when you're in this rectangle you do not move the camera but as soon as you go outside of the rectangle or on the edge you can see that the camera will move with the character and now we can just look at the documentation and it looks like these two lines are what makes the camera follow the character so let's go back and add those two lines so here we can say gain dot camera dot follow parentheses and the variable that represents our sprite which in our case is adam we save our code refresh and our camera doesn't follow our sprite and that is because we haven't set the bounds of our game in other words the camera in our game doesn't have a reference point of where it should be so to add the bounds of our game we can use this line of code game dot world dot set bounds parentheses and then the x and y coordinates of where our bounds of our game is and then the width and height which in our case which in our case is 2813 because that's how wide our background image is and it's a thousand pixels high so let's save our code refresh now we can see that our camera can follow our sprite so now let's add the dead zone so our camera only moves when our adam image is on the edge of this invisible rectangle that we want so again we can just look at the documentation and its source code they're using this line so we'll use the same with the arguments changed out of course so let's say game dot camera dot dead zone equals new phaser dot rectangle parentheses and for this example we want our camera to be 600 pixels wide so about this wide so our first argument will be the origin of where our rectangle is drawn so let's say center x or the center of our game world minus 300 because our dead zone is 600 pixels wide so when we subtract 300 from where our rectangle is being drawn it's going to be drawn in the center of our game we also want our rectangle to be drawn from the top so let's just have zero as the y position which again is up here on the top of the screen and now the width of our rectangle and the height of our rectangle and it's a thousand because that's how tall our game screen is so let's save our code refresh and now you can see we have a dead zone so there are a few things missing and one of them is our character should face the other side when it goes left and there's an easy way to solve this issue and we can do that with scale we can actually just set our x value for our scale as a negative number so if i make this negative 0.7 save my code refresh you can see that adam's facing the opposite direction so now with that in mind we can just take this line of code copy it and just paste it in our if statements so that when we are pressing on the right arrow adam faces the actual direction of his image and when we press the left arrow we will set the scale x of our adam image to its inverse value so let's save our code refresh and now when i go right we're facing right and when we go left he's facing left so the last issue we're going to cover in this video is the game bounds so you can see that we have a character that goes out of bounds and that's not what we want we want to have our character stay on the screen so to fix that we have to add physics to our game so whenever you're going to use physics in phaser the first line of code in your create function should be initializing the specified physics engine so we're going to be using arcade physics so to initialize the arcade physics engine we can just say game dot physics dot start system parentheses and our argument will just be phaser dot physics dot arcade and arcade is in all caps so now that we have our physics initialized in our game we can add physics to a specified image we can add physics to a specified image so we can just say game dot physics dot enable parentheses and then the variable that represents our sprite which is adam and then below that to make our adam image collide with the bounds of our game world we can just say adam dot body dot collide world bounds and set this value to true save our code refresh and when we go to the edge of our game we can see that we are colliding with it same with the bottom as well as the right side of our game so the last thing we're going to add is some kind of collision with the road right here because you can see that adam can actually jump really high and just levitate in the air and that's not what we want we just want adam to be able to walk on the road like in this area so one way to fix this problem is to just add an if statement in our update function that just says if adam is above this point keep him there so let's see what the y position of our image is when adam is around this area we can get that value with just adam dot y and our value and his y position right now is 394 so now in our if statement that checks if we're pressing on the up arrow key we can just add another if statement inside and this one checks if adam dot y is less than 395 and if adam's y position is less than 395 like it is here we'll just we'll just set adam's y position to 395 save our code refresh and now when i go to the top of the road we can see that he is stuck at this point okay now we're gonna add animation to our adam image and then we'll be done with state zero here's an animation that i created earlier so in pisco they allow you to create frames of an animation and if you'll notice each frame is slightly different than the frame before that and if you play these frames very quickly you get the effect of motion and if i wanted to make my animation more smooth i would just add more frames and the difference between each frame would be even less so after you're done with your animation you want to resize it you want to make sure that these two boxes are checked and i'll just make my image 10 times bigger resize and then i'll export it and then over in our assets folder we'll create another folder and call it sprite sheets open up another finder window with command n go to downloads there's our image i'm going to rename it adam sheet because it's a sprite sheet and we already have another image called adam dot png so it's good to name your files differently and let's just drag this png into our sprite sheets folder so if we take a look at our sprite sheet we can see that it is each frame that we had and pisco automatically glues each frame to each other so that each frame is the exact same width so let's go back to brackets and instead of loading an image for adam we'll load a sprite sheet and don't forget to change the path and then you get to add a third and fourth argument and that will be the width and height of each frame in your sprite sheet so our image is 240 pixels wide by 370 pixels high so let's just put those numbers here 240 wide by 370 high save our code refresh and we can see that our image looks exactly the same that's because when you load a sprite sheet and you add that image to the game it will first default to the first frame in your sprite sheet so how do we add animation well there's this example on phaser and it's exactly what we want so when we look at the source code it looks like they're creating an animation where they state the name of the animation so this animation is called walk and then they are listing the order of the frames in which the animation is played and then to start playing the animation they just use the animations dot play method so let's use similar code in our state zero so here let's create a animation called walk so we start off with adam dot animations dot add parentheses and then the key of our animation which we'll call walk and then the order of our frames which will be zero one two three four so now that we have an animation called walk we can play it when we move left or right so in in our if statements that check of you press the right or left arrow key we'll just say adam dot animations dot play parentheses and then the key of our animation which is walk and then our second argument will be the frame rate so that could be anything from zero to 60 so let's just say 14 and then our third argument will be if our animation loops and because we are walking we want to loop because it's a constant cycle of moving your left leg and then your right leg but if you're making an animation for something like shooting a bow and arrow once you would have this set to false unless your character had a rapid fire bow and arrow where you would keep on looping the animation so let's just copy this line of code and paste it in our if statement that checks we press the left arrow key save our code refresh and now we can see that we have animation but you'll notice that our animation keeps on going even when we're not moving so to fix this we can just call the stop method so if we're not pressing on the right arrow key or the left arrow key we'll default to this else statement and say adam dot animations dot stop parentheses and then the key of our animation and that stops the animation from playing so if we save our code refresh you can see that when we stop walking our animation stops but you'll notice it is stuck in the last frame that was displayed while the walk animation was still playing so to fix this we can just set the frame of our sprite sheet to zero because the first frame or index zero is just standing so we can just type adam dot frame equals zero save our code refresh now when we stop walking he always stops in the first frame which is standing and that's it you just finished state zero now is a good time to push my code to get up we'll just open terminal cd and here's a trick that I haven't taught yet instead of typing out the path of where your directory is you can just type out cd and then space and then you can just drag your folder into the terminal and it writes the path for you enter and you could see that i'm at phaser demo let's go over to github and it looks like we successfully pushed our code now we're going to start working on state one the final result will look something like this so this is state one we have a tile map and our adam image that can move on the screen he can collide with the rocks and the dark patches of grass and you could see that we are console dot logging what we're hitting when we collide with either the rocks or the dark patches of grass so before we start coding let me change the theme of my text editor so that it's dark it's just easier on the eyes in my opinion and now i'm going to make our code less redundant so if you'll notice in each state we're saying we're console dot logging the state number and that's really redundant so instead of console dot logging the number of the state at the beginning of each state in the create function let's just console dot log in our change state function so i can just say console dot log and then state plus state num save my code refresh okay so now we are getting to console dot log so we know it's working and now let's just delete our console dot logs for our state numbers save our code refresh and everything seems to be working now a small issue here is that when we first refresh our game it doesn't print out state zero but that's okay if we don't get state zero printed out at the beginning it's nothing too important okay now let's start working on state one so to create a tile map you have to download the tiled tile map editor so if you just go to map editor dot org just download it for whatever operating system you have and once you have that installed you can start making tiles so here's some tiles i made they're just some kind of grass so the standard for tile size in tile maps is 32 pixels wide by 32 pixels high but you could have any size tile that you want just be sure that it's a perfect square so this will be its own tile and this will be its own tile so let me just export this and you'll see that we just get a sprite sheet but the tiled map editor will split this image in half so you don't have to worry about having a different file for each tile the tiled map editor will automatically break up the images so here's another tile that i'm going to put on my tile map except this one's 96 by 96 and that's important because 96 is a multiple of 32 which will be the size of our tiles and again we can just export this put it in the tiled map editor and tiled will automatically break up our image into nine tiles because 96 is three times 32 so i'll just export this and now let's go to our phaser demo folder and go to our assets folder make another folder and let's call it tile maps then make another finder window with command n go to downloads and let's just drag our two images to our tile maps folder okay now let's open up tiled and let's create a new tile map and when you make a new map make sure that the orientation is orthogonal so we have square tiles the tile layer format is csv and not base 64 encoded because phaser doesn't support base 64 encoded tile maps and then you can just set the height and width of your tile map to whatever you'd like and our tiles are 32 pixels wide by 32 pixels high so this is correct and let's just click okay and now now we're going to add our tileset images so let's say we don't have any of these side toolbars here we can just bring them back with view and let's select tile sets because that's what we're going to be that's what we're going to be adding now let's bring up our folder with our tileset images and just drag them in so this tileset will be called rock tiles all this information is correct so I'll just click okay and you can see that it automatically breaks up our image into nine tiles now let's add our grass tiles click okay now we have our grass tiles so one thing to keep in mind is that you can't add images to your tileset all the tiles for a specific tileset have to be on one image file so I can't make another rock on pisco and then add it to my rock tiles tileset I would have to create another tileset up here so let's just add some grass so I'll just select this tile click the bucket or the shortcut is f for fill and then I'll just add the grass to my tile map zoom out and I'll add some more grass except I'll use the stamp brush and just add it wherever and I'll add some rocks so I can just highlight this entire image and then just put it wherever I want to except you'll notice that our grass tiles here are gone and that we can see past the rock so what we have to do here is add another layer so I'll just undo what I just did with command z and then I'll bring up my layers sidebar so now I can see I have one layer I'll actually just name it grass and then I'll add another layer and call it rocks so now that I have my rocks layer highlighted whenever I add an image I'm adding to the rock layer and I could also deselect the grass layer to show me whatever is on a specific layer and I'll just add some more rocks okay I think my tile map is finished now so now we're going to export it so before we do that let's open up our map properties sidebar and it's really important that the layer format is csv because again phaser doesn't support base 64 or xml and now let's save our project with command s let's just name this field save it so now we have it on our desktop and now let's export it export as and export it as a json file and save now we can see that we have a field dot json file on our desktop okay now that we've created our tile map and we've exported it as a json file let's add it to our game so let's put our json file in our tile maps folder so now we can see that we have our json file in our tile maps folder so now we have to load our tile map with game dot load dot tile map parentheses our first argument will be the key for our tile map then the path and then null which isn't important for right now but basically it's a json object that you could pass to it but it's not important and the last argument is phaser dot tile map dot tiled underscore json and the reason why we have to add this line right here is because the default is a csv file so we have to let phaser know that we're going to be using a json file after that we have to load our tile set images so we can just say game dot load dot image parentheses and then the name of our tile set so grass tiles because if you look at our tiled map editor we have a grass tiles tile set and a rock tiles tile set so we had to say grass tiles and then the path for our tile set image and let's do the same for our rock tiles tiles set so that loads our tile map and our tile set images so now let's add it to our game so let's create a variable called map and this will represent our tile map now let's say game dot add dot tile map and then the key for our tile map now we have to add our tile set images with map dot add tile set images parentheses actually there's no s and then we say the key of our tile set image and we can do the same for rocks and now we have to add the layers to our tile map so let's create a variable for each layer with map dot create layer parentheses and then the name of our layer which in our case is grass and rocks so let's add the grass layer first and do the same for rocks save our code refresh our local server and when we go to state one there's our tile map so one thing that's worth noting is that like sprites our layers are drawn in the order that they were created so if we created the rocks layer first and then the grass layer we don't see the rocks anymore because what's happening here is we're drawing the rocks but then we're using the grass layer and drawing over the rocks so keep that in mind that the order of creating your layers matters so just to review first we have to load our tile map and because we exported it as a json file you have to say that it's a json file otherwise phaser will default to a csv file and then we have to add our tileset images and then we have to create a tile map and then we have to say that we are going to have a tile map then we have to add the tileset images and then we have to add the layers so that's how you add your tile map to your phaser project okay now let's add a character to state one so that our character can move around in our tile map and collide with the rocks so let's just use our atom image so here i'm just loading our atom.png file now let's create a atom variable and set it to that image let's put them somewhere on our map there's our image and if you're wondering why i don't have to say var atom it's because in state zero we've already declared our atom variable and so when we just switch to a different file this variable atom carries on to whatever file that you switch to so let's make our atom image smaller with atom.scale.set2 okay that's better now let's add physics to our game with game.physics.start system parentheses phaserphysics.arcade and one thing to take note of is that when you start physics in your game that physics carries on to the following states so this line right here that i just wrote is redundant because we we already started our physics in state zero but if this were a separate project then you would have to start the physics like so now let's add physics to our atom variable with game.physics.enable parentheses and then atom and now let's add some input so that when we press on the arrow keys atom moves so instead of saying game.input.keyboard.isDown etc we can use something called cursors so you don't have to write all that stuff down so let's create a global variable called cursors and let's set cursors to game.input.keyboard.createCursorKeys parentheses so this creates keys for our up down left and right arrow keys so in our update function we can just say if cursors.up or whatever direction that you want.isDown and then we could change the y position of our atom sprite so let's save our code and when i press the up arrow key it goes down and that's because i have this switched around it's supposed to be negative okay there we go but we want our atom image to collide with the rocks and part of that is instead of changing the position of our sprites this way we have to use velocity so after we enable physics on our atom variable we can use velocity with atom.body.velocity.y and then we could set the velocity to whatever number so i'm going to create a variable called val or velocity and then i'm going to set it to 500 save our code refresh okay he's moving fast enough so this should actually be negative now let's add input for the rest of our arrow keys save our code refresh now we have our character moving in all directions and actually our character doesn't stop so we have to add an else statement where if our up and down arrow keys are not pressed then our y velocity should be zero take that code and then set our y velocity to zero and then we'll do the same for x except change y for x save refresh go to state one and looks like everything's working fine okay now let's add collision between atom and the rock tiles so first let's say map dot set collision between and then parentheses and this part's kind of tricky because now we have to know what the index of our colliding tiles are so let's open our json file and we can see that here we have our rock layer and anywhere that says zero that means there's no tile put down but you could see that we have the numbers one two three four five six seven eight nine so i get the feeling that indexes one through nine represent the rock tiles and if we go up here where we can see the grass layer we can see that there are tens and elevens so i get the feeling that the tens represent this kind of grass tile and the elevens represent the darker shade of grass tile so with that in mind let's go back to our state one dot js file and the rock tiles ranged from indexes one to nine and our third argument will be true because it's a bullion that says if collisions are enabled or not and our fourth argument will be the layer that will have the collision which is rocks and then in our update function we have to check for collision between our atom variable and the rock tiles so we can say game dot physics dot arcade dot collide parentheses and then we're going to collide adam with our rocks layer so we actually have to have rocks a global variable save our code refresh and now you can see that we collide with our rock tiles and if you want you can add a callback function so that when we hit our rock layer we console dot log something and this thing right here is called an anonymous function it's basically just a function without a name so let's save our code refresh and now whenever we hit rocks we get hitting rocks in our console also it's important to notice that at the beginning of our state we're on top of our rocks even though we should be colliding with them it's only after we leave the rocks or stop being on top of them when we can actually collide with the rocks so that's just a kind of physics behavior to take note of so previously phaser didn't support multiple collision layers but now you can so let's say i wanted to collide with the darker patches of grass i can just set the collision for one tile index so i can just say map dot set collision parentheses and then i believe the index for our darker patches of grass was 11 and then i'll just set this collision for the grass layer and then check for collisions for our grass layer in our update function we also have to make grass a global variable let's change this to grass save our code refresh and now i can collide with the rocks and i could also collide with the darker patches of grass at least and that concludes state one so now let's push our code to get hub and there we go we just pushed our code to get hub so one thing to mention about collisions and phaser physics is that if you want your sprite to collide with something you have to use velocity because if we just used what we did in state zero where we just said atom dot y minus equal sum value save our code refresh that is not the same as giving an object velocity so if i go up you can see that we don't collide but when i go in any other direction because we're setting the velocity and we're not changing the position like this we can collide with things so that's just something to keep in mind now we're going to work on state two the end result will look something like this so here's state two all it is is a shooting example where if you hold down on the mouse you can automatically fire bullets with no limits and you can also shoot these sprites and they will kill themselves so one thing to point out is that this sprite right here is just a regular sprite we're using game dot add dot sprite but these three sprites right here these are part of a phaser group so we are not making three separate variables for each of these sprites which is useful if you have a lot of enemies and that's pretty much it so to start let's preload our images and these are just images that i made on pisco so now let's add the base to the center of our screen and now we have to set the anchor and the scale of it okay that's good now let's add the barrel of the cannon and again we have to set the anchor and scale of our sprite okay all looks good now we're going to make the barrel rotate to wherever our mouse is pointing so in our update function we're going to set the rotation of our barrel to game dot physics dot arcade dot angle to pointer and our argument will be barrel but because we are using barrel outside of the create function we have to make barrel a global variable so at the top i'll just say var barrel so that way you can use the barrel variable anywhere in our code save our code refresh and there we go now we're going to make our cannon fire bullets so let's make a bullets variable and in our create function we are going to make bullets a group so we'll say bullets equals game dot add dot group parentheses and groups are useful if you're going to have many sprites that are very similar to each other in our case it's bullets now let's enable a body on our bullets set the physics of our bullets to arcade and now let's add 50 bullets to our group so let's say bullets dot create multiple and our first argument is how many we want to add so let's add 50 and then the second argument is the sprite which is bullet or the key of our sprite which is bullet now let's make a fire function and we'll call this function whenever we click our mouse and for now let's just console dot log firing and in our update function let's check if game dot input dot active pointer dot is down we are going to call our fire method so let's save our code refresh and whenever I click you can see that our fire function is being called so now let's add our bullets to our fire function so we're going to make a variable called bullet and we are going to set bullet to the first dead bullet in our bullets group so we'll say bullets dot get first dead and we are going to reset bullet to the location of our cannon which is at the center of the screen so we'll say bullet dot reset and we'll just say barrel dot x and barrel dot y and to make our bullet move towards wherever we clicked our mouse we're going to say game dot physics dot arcade dot move to pointer and we're going to make bullet move and our first argument is the sprite that we want to have move towards the pointer and our second argument is the speed so let's make a variable called velocity and I'll just set velocity to a thousand save our code refresh and now when I click you can see that we have bullets but it's a burst of bullets and then right after we fire more than 50 bullets we get an error and we'll fix this error in a moment but first let's fix the rotation of our bullet so we can just say bullet dot rotation equals game dot physics dot arcade dot angle to pointer and then we'll get the angle of the bullet to wherever our pointer is save our code refresh oh i'm actually forgetting a t and there we go now our bullets are facing in the correct orientation so now let's fix this issue of having a limited amount of bullets that we can fire so one way to fix this is we can set every member in the bullets group to kill itself once it leaves the bounds of our world so first we have to say bullets dot set all and for every bullet in our bullets group we are going to set the check world bounds property and it has to be in quotes and we're going to set that to true and then we have to set the out of bounds kill property to true so let's save our code refresh and now we can fire more than 50 bullets so if I had so what just happened right now was that we have 50 bullets on the screen so in our case when we have 50 bullets on the screen there are no bullets that are dead it's only after the bullets leave the bounds of the world where the bullets will kill itself so it'll be dead and then get first dead will get the first dead bullet in our bullets group and it will reset that bullet to the center of our barrel so we can fix this issue by one either adding a lot of bullets to our bullets group so if I say 500 we won't run out of bullets and we won't get our error that says we can't reset our bullet the second option is to limit the amount of bullets that you can fire or limit the firing rate of your cannon so the way we can do this is we can have an if statement that checks for the time that you last fired a bullet and it will check if that time is greater than the desired firing rate so let's just make an if statement and put all of this inside the if statement and we are going to make a global variable called next fire and we're going to set that to zero and we're also going to make a fire rate variable and we're going to set that to 200 and then in our if statement we are going to set next fire to game dot time dot now and then we're going to add fire rate to it and then between the parentheses we're going to check if game dot time dot now dot now is greater than next fire save our code refresh and now we have a limited firing rate so what's happening here is game dot time dot now is how long the game has been running for so if I type it out right now you can see that we've been playing for about 22 seconds because this number is in milliseconds so every time we fire we are setting next fire to the amount of time played plus fire rate and what this number represents is the time that you are allowed to fire because if game dot time dot now is less than next fire or the time that you're allowed to fire we won't fire a bullet so now let's clean things up so we don't need 500 bullets in our bullet group and you'll also notice that our bullets are being drawn on top of our cannon barrel and they're slightly offset so first let's draw the bullets underneath the cannon barrel and we can simply do that by switching up the order in which we draw the sprites so first we're going to draw the base of the cannon and then we're going to draw the bullets and then we're going to draw the barrel of the cannon save our code refresh and now our bullets are being drawn underneath our cannon barrel and now we're going to set the anchor of our bullets and the scale so that they render properly and it looks like they're coming out of the cannon barrel so to do that we can just say bullets dot set all anchor dot y and we're going to set that to 0.5 save our code refresh so that centers our bullet and we don't have to set the anchor dot x of our bullet because all we care about is drawing the bullet from the center of its height and now let's set the scale of our bullet of our bullets group so let's say bullets dot set all and set scale x and we're going to set it to 0.85 and let's do the same for y and there we go now i don't think you can set scale just by itself to 0.5 so it looks like it doesn't work so you can't use scale and set all you have to state if it's dot x or dot y okay now we're going to add enemies so that we could shoot them with our bullets so first let's make a enemy variable and let's just set that variable to a sprite with game dot add dot sprite and we'll just use the atom image from state 0 so there he is now let's enable physics on our enemy with game dot physics dot enable enemy and then in our update function we want to check if bullet is overlapping with enemy and if so we will call a function so to do that we can just say game dot physics dot arcade dot overlap and the first two arguments will be the two sprites that we want to have overlap so that will be the bullets group and the enemy and the third argument will be the callback function that will be called when these two sprites overlap so i'm going to make a method called hit enemy and for now we will just console dot log hit okay so now in state 2 we can see that whenever a child of the bullets group overlaps with enemy it console dot logs hit so now what we have to do is we have to kill the enemy sprite and the bullet sprite so to do that we have to make bullet a global variable so that way you can use the bullet variable anywhere in the code and then in our hit enemy function and then in our hit enemy method we will just say enemy dot kill and then we will just kill the bullet variable save our code refresh and there we go so now let's add a group of enemies to shoot because sometimes when you have a lot of enemies in your game it's better to use groups rather than creating a variable for every enemy so to start let's create a another global variable called enemy group and we will set enemy group to a group with game dot add dot group and then we'll say enemy group dot enable body to true and that will allow the enemy group to use physics and then we'll set the enemy group physics body type to phaser dot physics dot arcade and arcade is supposed to be in all caps so this is just saying we're going to use the enemy group is going to use arcade physics and now let's just create a for loop to create the enemies so to create an enemy we can just use enemy group dot create the first two arguments will be the x and y will be the x and y position of that child in the group and then the third argument will just be the image to use for that child so let's save our code refresh nope I forgot to write an i it's supposed to be a lowercase h okay so there we go so the bullets and the enemy group aren't colliding but that's because we haven't coded that yet but for now let's change the size of the enemies in the enemy group so i'll just say enemy group set all and what set all will do is it will set the specified property for each child in the enemy group to whatever value you want so let's change the anchor for each child now let's set the scale for each one okay so that's better and then in our update function we can just use the same line but instead of enemy we will say enemy group and then we will make another method called hit group and because this is a group that we are checking for overlap we have to specify what we want to kill so i'll just give this method two arguments b and e for bullet and enemy and let's just say b dot kill and e doc save our code refresh and looks like everything's working so the reason why we have to say b dot kill in the hit group method but we don't have to make a bullet argument in our hit enemy method is because the arguments that are passed to the hit group method will come in the order of these arguments so if we switch these around we can just give this method one argument which is e and then we can just use the bullet variable instead of b so if we save our code refresh everything works fine so that concludes state two now we're going to work on state three the end result will look something like this so this is state three all it is is these three buttons and things to take note of are that they tint and untint when you press and let your mouse up and things to take note of are that they make sounds when you press and unpress them so that's what they sound like and the one and two buttons can go to state one and state two and that's pretty much it so to start i've already preloaded three button images so now we can just add a button to our screen with game dot add dot button parentheses and then the first two arguments will be the x and y position of our button and then the third argument will be the key of our image which is in our case button one and then the fourth argument will be a callback function which will be called whenever you press the button so we can just use an anonymous function for this example and let's just call the change state function that we made back in state zero and the first argument should be null and the second argument should be the number of the state so if we save our code refresh and look at state three there's a button and when we click on it we go to state one so i'm gonna make another button and it's just going to be button two and it switches to state two there we go and i'll make a third button that just does nothing for now at least so we can just delete this callback function so one thing we could add to these buttons is to make them more interactive so an example of that would be for the button to change when you press down on it and then go back to its previous state when your mouse is up so let's make a tint method and then we'll just change the tint of the button that calls it so we'll say this dot tint equals zero x and then six b's and this is basically just a hex color so the first two characters after the x is how much red is in the tint the third and fourth are green and the last two are blue so let's change the tint of button three whenever you press down on it so to do so we can just say b3 b3 dot on input down dot add and then we'll say this dot tint which is the function we'll be calling when input is down and then the second argument is the context which is button three so let's save our code refresh and then the tint of our button changes so let's add this feature to the other two buttons so that all the buttons can tint and now let's make a un-tint function so that when you so that when your mouse is up the button removes its tint so this color right here is just pure white and this is slightly and this is and this is like a gray so to make our buttons un-tint we can just say on input up instead of on input down and then let's change tint to un-tint and now our buttons can tint and un-tint now let's add some sounds to our buttons so that when you press down on them they make one sound and then when you let your mouse up they make another sound so in my assets folder I created another folder called sounds and inside of it is just an mp3 and what it is is just a series of sounds so those are our two sounds that we're going to use and we don't have to have separate mp3 files for each sound in our game we can just stitch all of those sounds into one file and then we could break them up in phaser so it's kind of like a sprite sheet except for sounds so in our preload function we can just load a sound with game dot load dot audio parentheses and then we can just give the sound a key just like our images and then the path for our sound now that we have our sounds loaded we can split them up into different segments so let's make a variable called sound and we will set sound in our create function to game dot add dot audio parentheses and then the key of our sound will be the argument so now we can split up our sound file into different segments we can do so with sound dot add marker parentheses and then the first argument will be the key for our sound so we have a lower pitched pop and a higher pitched pop so one key will be low and we'll make another marker for high so add marker needs two more arguments and those are the start and end points of the sound segments so so my sound file is only a second long so i'll just say the start is zero seconds and then the end is point five for low and then for high we'll just say it's 0.5 to one second and now to play the sounds and now to play the sounds when we click on our buttons we'll just say sound dot play dot low and then our argument will be the key for our marker which is low for when we press down on the button and then we'll play high when our button is let up so let's save our code refresh and now when we press on a button it makes a sound and when we let up it makes another sound so you might have noticed that there was a really long delay between pressing down on the button and the sound playing and the same goes for letting the button up and that's just because the the end points for my sounds are not an exact fit so actually for my sound file the low pitched pop starts at 0.15 seconds approximately and it probably ends at 0.3 but that doesn't really matter because there are no sounds immediately after the pop so the end point doesn't really matter for my sound file and then for the high pitched pop it actually starts at 1.1 and ends at maybe 1.3 but i'll just say 1.5 to be safe so i'll save my code refresh the local server and now the sounds are a little more responsive so that's state three now we're going to start state four the end result will look something like this so this is state four all it is is a bunch of examples of tweens here we can see that we are changing the values of these sprite objects this one loops forever and this one's opacity changes instead of its position like all the other ones and this guy will only tween once you call a function to make it start so that's state four so what this state will focus on are tweens so essentially what a tween is is a way to change a value from one point to another point in a certain amount of time using a certain pattern and that pattern can be something like linear or bouncing but i think it'll just make more sense if i just code it and show you so to create a tween what you would do would be game dot add dot tween and the tween method takes an object usually it's a sprite but it can be anything that has a numerical value so let's say i want to tween this first atom image so i'll say a one and if i want to tween it to a certain position i would just say dot two parentheses and the two method takes an object and this object will be the will hold the properties that you want to tween two so let's say i want to tween this guy to the y position of 400 so next our second argument will be the time it takes to go to this position of 400 so i'll say 2000 for two seconds and then the third argument will be the pattern of my tween or the ease of my tween and the most basic one would be linear and the fourth argument will be true and what this basically means is the tween will start automatically because by default tweens do not auto start so this would be false so i'll just save my code refresh and there we go so you'll notice that the sprite went from up here to down here in two seconds at the same speed so we can change the ease of our tween by just changing the third argument so if i wanted the tween to be a bouncing tween i would just say bounce and now he bounces so to get the full list of tweens i couldn't find it in the documentation but if you go to this url or just search up phaser tweens you'd probably find this page this this is the source code of the tween manager in phaser and these are basically just all the tweens you can use so if i wanted to use this one i could just use that for my third argument and now he has a different tween so to better visualize what these tweens would look like you can just google for easings or just go to easings.net and it has the patterns of every tween so the first one we had was linear which is just a constant speed and the one we have now is the ease out bounce but when we just type out bounce you can see that it's the same thing as bounce. ease out so just play around with the tweens and see what ease you like so let's make another tween except this time we'll create a variable so this is just stuff i had from earlier so we'll make a variable i and it's not a very good name but whatever we will set i to a tween so i'll say game.add.tween atom2 to x100 and y20 so you can actually change multiple values in a tween by just creating an object with multiple properties and we'll make this tween last one second so 1000 and our tween can be elastic ease out and that should look like this guy so i'll just put it there and we're not going to have a fourth argument because this tween isn't going to auto start so i'll just save my code refresh and now to start this i tween we can just say i.start with parentheses and there we go now let's make another tween for the third atom image except instead of using to let's use from so to and from are very similar the only difference is to will tween your object to that certain value that you specify here from will tween your value from the specified value to its actual value so i'll just say from and we will tween it from the y position of 1000 and this will take one and a half seconds and the tween will use will be circular ease out put it there and this will auto start so there we go it tweened from the y position of 1000 which is down here to 100 our fourth tween will change the anchor point of our fourth atom image so if we tween the fourth image and change its anchor value like so you'll notice that we get an error and that's because for properties like these you would put them here in the tween method and then change the x value like so so a fifth argument that we could add is a delay so i could delay this tween by one second the sixth argument would be if the tween would repeat so if i say true you could see that it repeats twice or if you wanted to repeat the tween three times you would say two so it repeats twice after the first initial tween and then our and then a seventh and last argument would be if you want it to yo yo so if a tween yo yo's that just means it reverses itself after it finishes its tween so if we set this to true and run our code you can see that it yo yo's back our fifth tween will change the alpha value of our atom image because tweens don't necessarily have to change the position of a sprite they can change any numerical value in an object so we'll change the alpha value or the opacity of our image to zero over one second using the bounce ease and it will automatically start so there it goes so two more tricks i'd like to show you so if you want your tween to loop infinitely you can just set the repeat argument to false and at the end of the tween you can just say loop parentheses and pass true as an argument so now you'll notice that this guy right here will loop forever so the last trick i'd like to show you would be let's say you don't know where you're going to be tweening to or the value that you're going to be tweening to is always different instead of tweening to a number like this we can just add to that value by putting plus or minus and the value that you want to add to the specified value so pay attention to the first guy where we are going to add 400 to its y position so that concludes state four okay now we're going to work on state five and the end result will look something like this so here's state five all it is is a simple platformer where we have adam and he can jump on top of these platforms you'll notice that he can bounce when he hits the ground and obviously there's vertical gravity but he also has acceleration so it takes time for him to build up speed when i press on the left and right arrow keys and that's pretty much it so first i'm just going to preload an image and that image will be of the platform that adam will be jumping on next let's add adam to our game so there he is next let's enable physics on adam so we can just say game dot physics dot enable and adam will be our argument after we add physics to adam we can give him gravity with adam dot body dot gravity equals 500 and we have to specify which direction the gravity is is occurring in so we'll give him vertical gravity so we're going to use dot y because y is up and down so now he can fall down next let's make him collide with the bounds of the world so now you can see that he collides with the world and let's make adam bounce a little bit when he hits the ground so we can just say adam dot body dot bounce dot y equals 0.3 so you can see that he bounces slightly when he hits the ground and now let's just add some keyboard input so that we can move adam around the world so in the update function i'm just going to make a few if statements that check if some arrow keys are being pressed down so if we're pressing the left arrow key we are going to add acceleration to adam with adam with adam dot body dot acceleration dot x and we'll make a variable called excel and it has to be negative because excel is going to be a positive number and then when we're pressing down on the right arrow key we'll just give him positive acceleration so when i press on the left arrow key he goes left and when i press the right arrow key he goes right and then if we're not pressing either the left or the right arrow key we'll just set his acceleration we'll just set his horizontal acceleration to zero so right now i'm not pressing on the left arrow key but you can see that adam does not seem to slow down so to make him slow down we have to add drag to his body so we'll just say adam dot body dot drag dot x equals 400 so now he can slow down whenever i let down on the arrow keys so now i'm just going to make another if statement so adam can jump up except this time we'll just use velocity because when you give a sprite velocity the sprite moves right away but if you give the sprite acceleration it's going to take time for the sprite to build up speed so let's save record refresh and now he can jump infinitely and that's okay for this example okay so now we're going to add the platforms and we're going to use this platform image that i made on pisco so up here i'm going to make a platform variable and i'm going to set platform to a sprite with game dot add dot sprite and then i'm going to enable physics on this platform so actually instead of saying this line again for a platform we can just make the argument an array so i can just say adam and platform inside one array and that will enable physics on both adam and platform and then in our update function we have to check for collisions between adam and the platform so we'll say game dot physics dot arcade dot collide and we will have adam and platform collide platform doesn't have any okay so now when i jump on it they collide but because it's a platform we don't really want the platform to move so to fix this it's super simple all you have to do is say the name of the sprite so platform dot body dot immovable equals true so this will just make the platform immovable so it doesn't move so when i jump on it the platform doesn't move now let's say we have a bunch of platforms it's not very wise to have a variable for every platform in the game so we wouldn't have something like platform one platform two platform three etc we can actually just make a group of platforms so i'll just make a variable at the top and call it platform group and then i will set platform group to game dot ad dot group so now that phaser knows that platform group is a group we can create platforms with it so we can say platform group dot create and then the arguments are the x and y positions and then the sprite that you want to use for the platform and i'll make two platforms so there they are we haven't added any code so that they collide so let's do that now so let's just add physics to the platform group by adding it to this array right here and then we are going to use set all and make all of the platforms in platform group immovable so we're going to set all so we're going to say set all body immovab