Game Development with Phaser: Collisions, Sprite Atlases, and Animations [07/18 @ 4:15PM PT]

hey welcome back to the stream so this is going to be another stream around game development again using phaser so this is part two whereas last time we saw how to create what's on my screen right now so we saw how to get started with phaser we saw how to add some background images some tile sprites that kind of animate in a continuous fashion those are those would be the clouds we saw how to use a sprite sheet to create this nice plane with these little little air streaks behind it that animate all of this graphics is really terrible this is I'm not a graphic designer but this the concepts that we used are very valid so if you ever wanted to hire your own graphics designer to make this better more power to you or if your designer fantastic so the whole point of this phaser game development series was to try to reproduce a game that I had created back in 2014 using unity so this game actually looks like the following so this game was called turboprop I made it in unity it was at the beginning of my development career it was very simplistic it's basically collect the coins avoid the little lightning bolts and see how far you can get and the game speeds up as you progress so we'll see what happens when we crash in a second to be crashing anytime now there we go you crash you explode you go to the game over screen and you're on your way now like I mentioned in the previous stream I'm pretty sure that I lost all of the files for that project I don't know where they are but luckily I think we can reproduce them and even though that the graphics are quite crude we're getting the point across and this time we're using freezers so we're using javascript and HTML so if we review the code that we had created in the last stream so this is what we have we we got started with phaser we added our kind of game canvas even though that it's either gonna use WebGL or a canvas item and we initialized our scenes so one scene with a different set of lifecycle events we set a background a background color some dimensions and then we got into the the more heavy lifting side of things so for example we created a few variables to our clouds clouds white and clouds why it's small and I think I need to correct something so I was calling this parallax scrolling between the clouds because they were scrolling at different speeds infinitely I don't know if that's the true definition of parallax scrolling I don't want to tell people the wrong thing so I'm gonna call that tile sprite scrolling and if that's not right either well I don't do game development as a career this is a hobby so you get the you get the idea is it's a scrolling effect and that's what we're after so going on inside of our preload scene what we did is we loaded our image assets that we created in this case with if affinity designer as well as texture Packer which is a software that you can get for free but I actually paid for it wasn't too expensive after we have our images in our sprite sheets we created our scene we created sprites so our tile sprites for the clouds we created clouds believe and that was a static image I made it a sprite this should be actually an image and I'm gonna change that soon the animations we got the flying animation from our sprite sheet for our plane which was a series of several different sprites so several different images why's the explosion we had several different smoke images that we kind of built into an animation or our sprite we created our plane we scaled it because it was quite large and we started playing that animation now for the actual explosion we don't have any explosion ty because I didn't add any physics in the last video but if I went to my browser here and I clicked anywhere be working correctly let me refresh yeah there we go I had to refresh because I had moved around the console prior to starting the stream but basically the explosion is wherever I click it animates for X number of frames and then it disappears so eventually what we're gonna do in this video is we're gonna have an object hit this plane it's going to explode and get replaced with the explosion animation so nothing nothing too bad and the code that we're going to see it's we're gonna see variations of what we can do and you can use your best judgment on how you want to implement it in your game let's go ahead and go back into our code so what we're going to do is we're going to create some physics layers for our game so we're going to start with the plane and we're gonna work our way up to some new images so what we can do is we can actually enable physics inside of our phaser config and we can do that anywhere I'm going to do it before the scene it doesn't matter but I'm going to say physics this is an object I'm gonna say that the default physics is and I don't have to have quotes I'm gonna remove the quotes for consistency default is going to be for now arcade so phaser has several different types of physics engines that you can use we're gonna use arcade for now and explain the differences as we progress but what we're also going to do is we're going to define that arcade as debug mode enabled add that comma down there and I'm gonna save it so if I went back into my game nothing I don't think anything will have changed yeah nothing will have changed because we didn't add any kind of physic physics elements to any of these sprites or images so what we can do is let's go ahead and add some physics to our plane we don't need to add anything to the clouds the clouds should be non interaction enabled images so they should be completely background oriented so what we want to do is we want to add something to our plane so inside of our create where we actually create the plane we're gonna make a small modification so what I'm gonna do is I'm gonna say this dot physics dot add sprite so if I go back into my browser and refresh you'll see that I do have a purple box around the plane so the purple box is because of debug mode I set it to true what it's doing is it's telling us where our collision areas are so with arcade physics so a quick rundown here arcade physics allows for circular or boxed collisions by default it's not gonna have any kind of gravity it's not gonna have any kind of air resistance or any kind of force or anything like that it's just going to be very vanilla in a sense that we only have a collision box and that collision box is not even to do anything by default it's just gonna be basically if two boxes collide it's gonna tell us but it's not going to add any kind of bounce or resistance or anything like that so with arcade physics it is going to be the fastest fastest physics option when it comes to phaser it but that could be at a price so the price being that you don't get that almost near pixel perfect kind of collision that you would see in another physics engine so there is no pixel perfect collision options when it comes to phaser it's not a part of the framework but you can have very very close polygon shapes in the other engines so pick and choose you want performance or do you need performance you need to be able to use vectors and things like that it's totally up to you let's go back into the code what I'm gonna do is I'm going to change this sprite like I said it's I said clouds blue let's go to just change that to image because this is is not moving we don't need to animate it all I'm going to spray it's gonna take up resources likewise what I want to do is I want to copy this I want to paste it up here with the rest of our kind of global variables I'm going to remove this so that way we're just more in tune with the rest of the application I'm gonna save it everything should still be good and it is and I just want to pause for a second if you're catching this live right now if you're in the chat if you're hanging around asked me some questions I'm here um I have two monitors here I periodically peek over to the chat ask questions if there's some kind of video problem or audio problem I can try to fix that too if you let me know and let me hit this button to tell everyone I'm live so all right so let's go ahead and add some more stuff we want to actually maybe handle collisions so what we probably wanna do is we want to add something to collide with so we don't necessarily have any other images so if we want to keep the tune of this previous game and capture Bitcoin and I cringe now because I don't like crypto anymore so that was the thing in the past but you can make any kind of kind of object of the game that you want to capture so let's go ahead and open up I'm gonna use affinity designer again I'm gonna create a new project it's gonna be 512 by 512 use whatever art program that you feel month the most comfortable with rather than trying to be artsy I'm gonna go into Chrome I'm gonna go to font awesome so I actually have font awesome installed on my computer so I can use fonts in applications including affinity designer so I'm going to type in Bitcoin I'm gonna click it let me just shut my door real quick you so I'm gonna click it what I'm gonna do is I'm gonna copy the Unicode glyph because I actually have it installed here I'm gonna click on the text tool I'm gonna paste it in it's a box because I actually have to switch the font over to font awesome it's a brand what I'm going to do is I am going to select it and turn it into curbs it's a little easier to work with I am going to resize it and again there's a million ways to accomplish this in other tools or this tool so it's totally up to you I'm gonna try to get it as large as I can without actually touching because I'm gonna add a border as well this is probably good for now we can we can adjust it I need be let's go ahead and change the color so actually let's go ahead and figure out what bitcoin color is and just gonna copy one of these hex values or to try to get the look and feel here let me change the color I'm going to add a background so that B isn't transparent here so I'm going to add a circle behind it doesn't have to take up the full space this has to be large enough to cover I'm going to change this to black you I am going to um drop this below oops actually then we merged it here so I have that let me make sure the chats working I hit the button on my stream deck but it didn't send anything there we go perfect so go ahead and add a background to this or not a background a border so I'm going to add a black border here I'm gonna make sure that it's like I don't know two points in size that way it's something to work with this is just going to be our objective here to capture these coins I'm gonna I'm gonna save it save it in turboprop phaser I'm going to call it fit coin I'm going to save it I am going to export it I'm an export of this Bitcoin here so save so now we have another image to work with so let's go ahead and add it into our project and see what we can do so what I'm going to say is I'm gonna say this stop load dot image and this is going to be Bitcoin and it is Bitcoin dot PNG and we don't have any animations for the Bitcoin which is fine so we have the image now what we want to do is we want to add it as a sprite so let's go ahead and add it we can add it maybe below the plane so we can say plain not plain Bitcoin now let's go ahead and create a variable for it above I'm going to say bar Bitcoin and we're gonna change this as we evolve this this game but let's go ahead and say Bitcoin equals this dot physics dot e dot sprite let's go ahead and say that the X is probably a little further to the right so let's maybe go ahead and say 500 we can position it the same and this is going to be fit coin because that's what we call the our image right here so Bitcoin let's go ahead and see what it looks like we're probably most definitely going to need to scale it so there's our Bitcoin image we we do definitely need to scale it so let's go ahead and scale it so it's gonna say it Owen dot set scale 0.15 maybe save it will go back better so we have that that box around it because it's a physics item now there's no gravity or anything if this we're moving nothing nothing would happen let's go ahead and try to move it let's go ahead and go down into our update scene let's go ahead and say a Bitcoin dot what is it position now it's X I think it's X minus equals let's go ahead and say maybe three it fails we'll try something else yeah Goods moving nothing happens it passed right through the plane so I'll refresh again again nothing's happening is just going right through the plane so we could we can we can fix this we can we can actually have a event that triggers when they touch um so let's let's try to let's try to do that let's go back into our code let's go ahead and go into our create so we're basically we're just creating kind of event handlers based on events that happen but what we can say is we can say something along the lines of this physics dot add dot collider this is going to tell us if two different sprites collide so we're gonna say claim and we're gonna say Bitcoin and in the event that they collide we're gonna say function we're gonna save claim and Bitcoin though these variables inside of the function they don't need to match the sprite names so this is just the local scoped version of the variable that we can work with so that way when a collision happens we can do something so in this case if the Bitcoin collides let's just go ahead and move it so we're gonna say Bitcoin dot X and then maybe we're gonna say I don't know there let's go in and say 1400 so we're gonna move it off the screen because our our x value on the screen it should be 1280 by 720 right so let's go ahead and save it let's go ahead and go into the browser here it's gonna hit this appears it doesn't really disappear it just moves off the screen here but it's going to keep doing that forever so let's go ahead and keep going you and because this bitcoin is a circle we should be able to set a circle bounding box on it so let's go ahead and say let's go ahead and play around with that let's go ahead and go in maybe right below we where we set the scale we can say something like Bitcoin dot set circle I might do it we might need to define the radius No let's go ahead and look it up real quick you just go to the examples here I want to need phaser three examples so what we want to do is we want to go to physics arkaid we probably want circle so it's circular body I live fine set circle 46 I think this is a think that's a radius so let's let's play around with the idea as if that was a radius so let's go ahead and say I don't know what what point 1/5 of that is so I'm just gonna guess right now and say 200 and let's go ahead and refresh and see if we've got any kind of yeah so it's too small we have a circle there so let's let's maybe bust open a calculator I am NOT a math expert here but let's go to say 512 times 0.15 so that's probably not right maybe it's times two that's the radius 153 maybe well it still seems too small I'm not sure what the value is maybe we'll revisit it I think it's a radius though so we it's not too important this kind of gets the idea across let's go ahead and check it out maybe maybe it's the set circle is around the 500 so maybe we want 250 and that might be makes more sense here so let's go to refresh yeah that made more sense so the the physics circle is on the original not the scaled but it's scaled with it so now we've got a more accurate collision at least for the circle not necessarily the plane so let's let's go ahead and keep going let's go ahead and say you know what now we need some kind of obstacle to trigger the explosion that happens when I click and to do that we already have the explosion animation in there we already have a separate sprite sheet for that I think this is a good opportunity to change how we're doing sprite sheets so we could do it this way when the we could set up a Collider for another object and when it when it happens we can swap out the sprites kind of a pain in the butt instead it kind of makes sense to include the explosion animation inside of our plane right sheet so it could be a different animation within our sprite sheet but really the best way to do that is to add what's called an atlas and there's many different ways that you can create an atlas again I'm using physics editor so that's I bought it when I bought texture Packer it's from the same site so let me open it up actually I'm sorry physics editor is something that we're going to do when it comes to a different type of physics we're gonna use texture Packer for this so I'm going to open up texture Packer we're going to create a new set of sprites so what I'm going to do is I am going to add some sprites I'm gonna add all four my planes and all four of my smokes all of them in the same sheet what I'm also gonna do is it looks like it's already optimize it for me I'm gonna let it do its thing in a previous example I said none so that way they're all the same size they're not all the same size here that's that's fine that's what we want what we do have to take note of though going forward is we need to know the file names so it's very important that you know the file names plane - one through four and then smoke - one through four because that's going to be how we define our animations so let's go ahead and save it so I'm gonna go and I'm going to call this plane what I'm gonna do next is I am going to publish a sprite sheet I'm going to call this plane so it saved it now open up my folder so what we should have is we should have the sprite sheet which we do so plain and then what we also have is we have an Atlas file so this is a JSON file this is going to be basically a map to tell our phaser application how to read this sprite sheet so that way we know how large each sprite frame is supposed to be and things like that so let's go ahead and make use of that so we're gonna actually do some swapping out so first of all what we want to do is we want to change our loading our plane so we're no longer loading it as a sprite sheet what we're gonna want to do is we're gonna want to say this dot load dot atlas this time and this atlas is going to be a we're gonna call it plane that's how we're gonna reference it going forward we're gonna say plane dot PNG and we're gonna say plane dot JSON and I believe that's what we called the files yeah so lean JSON and then plane dot PNG so that's gonna be our atlas we're gonna comment out this sprite sheet for now so now we have to actually change how we're doing our animations so we have our fly animation which is great we can leave it as called fly but we need to change how we're generating our frames so because we're not using an evenly defined sprite sheet we can't use frame numbers frame numbers are for sprite sheets where each frame is the same size but because we're not doing that we have to change that to frame names so let's go and change it to generate frame names and refrain names we didn't specify that we're pulling it from our atlas called plane and then we needed to say our configuration for it so this is where the file names be camp becomes important so what I'm going to say is I'm gonna say prefix and the prefix is going to be plain - we're gonna have a suffix so our suffix is going to be dot PNG so basically what we're saying here is uses is kind of like a map and after the - we're gonna use actual numbers and those numbers are going to be start so the start frame is going to be 1 and the end because we have 4 planes in our animation at least I think that's what we had let's open it up we have 4 planes doesn't really matter the order the the Atlas to occur that for us but we have 4 different frames and we have to define the 0 padding so we don't have any kind of 0 1 0 2 in ours so there is no there's no padding that we have to add that the numbers are going to be just 1 2 3 4 etc so the 0 pad is going to be 1 so I'm going to save it we can still have it repeat forever that's that's perfectly fine so let's let's see if this works actually I'm gonna refresh and it still works so the only difference now is though that we've actually got another animation in there that we have to create so let's go ahead and create it so what I'm gonna do is I'm gonna I'm just gonna clone this and in case you're curious how I did that I hit alt shift down arrow in Visual Studio code and it just copied it for me I'm going to call this one explosion now the frame names if I go back in a texture Packer remember the file name so this is called smoke and it's gonna be smoke one through four so I'm gonna say actually that's not that's not correct actually we want it to be plain still because that's where our Atlas is this right here is gonna be smoke so it's gonna be smoke - there's gonna be one through four with the same padding the animation will have it repeat twice so just like what we had for the explode down here and we can call it explode explosion doesn't really matter but let's go ahead and see what we're working with actually what we can do is just just for testing for now we can say plain dot play explosion and so when the touches it it should start exploding you let's check it out BAM we've got our explosion it still stays there we're not removing it well you get the idea we actually swapped our animation which honestly it would have been particularly difficult if we were changing sprites so it's just easier to change the animation on that same sprite so totally up to you all right so let's let's proceed here let's see let's see what else we can do so the Bitcoin again we don't we don't want it to cause an explosion in the future we're gonna it's going to generate points for us so what we want to do is we want to draw another another object we can do that in affinity designer here I've already saved this I think let's save it let's go ahead and create a new item here I'm gonna say new this is where my arts and crafts feels really bail but let's go ahead and say that we're gonna try to create our own little little obstacle II here we can call it a lightning bolt we can call it whatever you want really let's go ahead and add it let's go ahead and Center this all right make it as high as we can and we'll Center that again color doesn't really really hit home with me so let's go ahead and say that maybe this is we don't want it to be a blue maybe we make it a red actually what did I have it in the other the old game here oh that's yellow with red inside I don't I don't really like that one either let's go ahead and and maybe I'm spending too much time on this let's let's just do a darker red that's probably fine let's copy that let's go ahead and change it let's go ahead and what we want to do is we want to have have some zigzags in there I'm gonna actually we could do it more uniform or I can I can do something crazy here and just say something like this I can put the curve behind it and as crazy as this is we can actually make this our our collision detector so we can actually make this this valid here so before we do that let's see if I can actually shrink it down a bit so I'm gonna say document setup probably not 5:12 so let's go ahead and say that maybe this is maybe 100 I'm not sure what it is actually that's that's good enough we'll get the point across with that let's go ahead and save it I'm gonna call this one obstacle built correctly if not we'll find out soon saved it let's go ahead and export it obstacle let's go ahead and go back in our code what we're gonna do is we're gonna load it we're not gonna animate this we can we can try to animate it later but let's go ahead and go back up and we're gonna say maybe below Bitcoin it doesn't really matter this is in our preload where we're loading our image assets we're gonna say this load dot image this is going to be obstacle and this is going to be obstacle dot PNG obsticle dot PNG so let's go ahead and button turn it into a sprite so down below it doesn't really matter let me separate this a bit for readability purposes let's go ahead and say obstacle and before I do that let's go ahead and define that variable towards the top here let's go ahead and say obstacle equals this dot physics dot add not sprite let's go ahead and say maybe I don't know this is 900 by 512 and this is gonna be obstacle based on the image name that we gave it let's see what let's see what we're working with now so it's there it's large let's go and shrink it down again all my graphics I'm aware that they're very crude not a graphics designer let's go ahead and say obstacle dot set scale and maybe this is let's I don't know let's see what 0.25 looks like and we can work up from there that's way too small let's go ahead and say that maybe this is five that's good enough for now we can always fix it up later so let's go ahead and start start changing some things let's go and start by changing that Bitcoin change its reaction here so I'll go back into my editor and we're gonna we're gonna change this we're just gonna remove it the Bitcoin we still want it to repeat it's gonna change drastically probably on the next stream when we start doing object pooling and things like that but for now that's fine actually so let's go ahead and we're going to say that the obstacle X is going to be let's go to say that this is going to be traveling at 3:00 and maybe this is traveling at 4:00 so faster and let's scroll up let's go ahead and add another Collider this is going to be this dot physics not add dot Collider so we're going to say plane and the obstacle being the obstacle function plane obstacle and this time we're going to say plain dot play explosion let's check it out the Bitcoin still goes towards the end and then BAM it does explosion there so let's let's change it up you saw how it froze there it paused there's a reason for that actually why it wasn't smooth so if I go back in the code the collider well that that that obstacle that lightning bolt or whatever you want to call it it took time to fully pass over our plane so for the full time that it was over our plane he was calling this Collider it doesn't doesn't just happen once so what we can actually do is we can create like a is game over a variable so that way we can check to see if it's set so let's do that let's go ahead and say bar is game over we're gonna go and say false and we're going to scroll down say something along the lines of if is / so if not game over then what we're gonna do is we are going to play the explosion and we are going to let me fix the the space here we're gonna say is game over equals true we can we can still be better though I don't want it to keep exploding I wanted to actually disappear when it's done and you'll recall down here what we did was we did explosion once and then we we destroyed it we're gonna do the same concept here but it's gonna be with plane let's go ahead and copy it let's go ahead and say plane so once the animation is complete we are going to say plane dot destroyed and then in theory this would take us to the game over screen so let's go and try it all right so Bitcoin resets and then this should explode and then it should disappear and there was no lag that time around so that that's good news we have some active collisions happening right now that's that's exactly what we want so so far this this is this is not bad so let me let me just type a message here saying don't forget to follow the channel and then I'm going to say which if you're if you're liking this content so far please please hit that follow button it doesn't cost you anything you get notifications of when I'm live again and you get some really good content all right so let's let's go ahead and keep adding to this so let's let's figure out what else we want to do so we have an obstacle there we have a Bitcoin in the sense I think what we might want to do is we might want to play around with more advanced physics and actually there's one more thing I want to show so let me reset so when this obstacle passes over it it's passing over the animation on top of it so we might want to change the depth so that way the explosion is on top of the obstacle let's go and change that real quick let's go ahead and go to our plane and basically we're going to change the z-index if you're familiar with HTML so what I'm gonna say is I'm gonna say something along the lines of flame and I'm gonna say depth and I'm gonna say that this is going to have a depth of 1 or I'm gonna say set depth 1 so by default everything has a depth of 0 the higher the depth the more upvote up front that particular sprite is so this should reside on top of our obstacle now when the explosion happens yeah so that obstacle even though that it's kind of hard to see with the purple lines around it it still was like that so the next thing that we want to do is we want to change our physics because this square although it's fine for this game it's not is not detailed enough so we're gonna actually use matter J s it's another physics engine as part of phaser and you'll see that it has its pros and cons so what we want to do now is we want to actually create some physics for it so again I'm gonna I'm gonna be using physics editor this is the same same developer that created texture Packer so physics editor the site I'm not getting any kind of commission from it I think the free version will will accomplish everything that we want but like I said it wasn't that expensive and it saves us a lot of time so let's go ahead and open up physics editor it looks something like this pretty basic what we're going to do is we're going to add some sprites so let's go ahead and go to our desktop let's go to this game let's go ahead and add the obstacle and let's go ahead and add the Bitcoin and then you might be asking yourself well what do we do about the plane the plane has several different frames in an animation well you don't want to create physics for every frame of your sprite because it takes a lot of CPU load to be able to process every possible physics simulation so you basically want to create a physics solution that is kind of the best or all of your frames it's not gonna be perfect but you can create a best lucky for us our plane at least is the same in every single one of our frames so we're never gonna want to worry about colliding on the the jet stream here so we we can just select one of the planes a Bitcoin and the obstacle and it looks something like this so what we want to do is first of all let's rename this plane this is this is the first gotcha it took me a while to figure out well why is why is it not working it's because I should actually probably name it so instead of plane one I'm calling it plane I just double clicked it let's go ahead and start by creating some stuff so first up I'm going to change this to phaser three let me use the magic wand the magic wand we'll look at the transparency and it'll figure out what part of my sprite should be physics enabled so it does a pretty good job now this is a lot of vertexes the more vertex is the more stress it's gonna be in your game you can you can add or remove it's totally up to you you can create circular collisions it totally up to you on what you want to do I'm gonna say okay we don't have a lot going on in our game this is fine the body label I'm gonna call this plane we're gonna we're gonna leave everything like this for now I'm gonna go down to the fixture and I'm going to say plane to the fixture if you have if you wanted to add different collision points and name each collision point like maybe you wanted the propeller to be a point you can name each one of them as a different fixture it's just one fixture for this example so we are naming them all plane a bit name this is going to be the plane so this is the category name so this is this is a plane or we can call it player do whatever you want we're gonna populate this as we progress the physics stuff such as like friction and air and density things like that you'll see you'll see what we're doing in just a second I'm gonna save it so this is going to be saved in the turbo prop folder so I'm going to call this one plane I'm just gonna call this maybe sprite physics doesn't really matter what you call it I'm gonna click on the obstacle I'm gonna click on that magic wand again it's gonna figure out what should be selected I'm gonna trust it it has a lot going on but it's fine I'm gonna select it I'm gonna call this one obstacle the name here does not need to match the filename I'm gonna scroll down there's only one fixture so I'm going to say obstacle and for the category name I'm going to call this one obstacle and I'm going to save it finally I'm going to go to the Bitcoin and what I'm going to do is this is a circle I can create a circle can fill up as much as I want I'm going to call this one Bitcoin I'm gonna save it alright this is where we start getting into well what does this bit name mean I'm gonna say Bitcoin here for this so we're basically grouping in this area what sprites are what physics bodies can interact with other physics bodies so for example let's start with the plane the plane is part of the plane category and it should be able to interact with every single item on this checkbox so for example the plane should be able to interact with the obstacle the Bitcoin and probably other planes even though that it's not gonna happen for this example we click on the obstacle part of the obstacle category can interact with it's not going to be the same as the plane so the obstacle we don't want any interactions if it touches a Bitcoin if the obstacle touches a plane interactions are fine then likewise at the Bitcoin this is going to be a category Bitcoin and we're gonna say that the Bitcoin we don't want any kind of interaction if the Bitcoin touches the obstacle but we do if there's a plane so that's what that means took me a little while to figure that out but that's what that means I scroll down you might have seen is sensor and I realized this is probably very small in the TWiT stream so I'm reading it out loud there's an is sensor sensor checkbox basically what we're saying is we want a physics interaction with any kind of collision so is there gonna be any kind of force applied or do we want it to just tell us that a collision has happened kind of like what we saw with the arcade physics I'm gonna click it in the end but for now I just want you to see what what it looks like so I'm going to publish this publish it to our directory sprite physics and we're gonna we're gonna work with it so I'm gonna go into Visual Studio code and what we're going to do is we're going to first load that file so we're going to load it and eventually actually I think we can get rid of this this sprite sheet for explosion or I don't think we're using it anymore but let's go ahead and load it so this dot load we're actually gonna load JSON this time so we're gonna say that we're loading let's call it maybe sprites doesn't matter doesn't matter what you call it whatever it whatever you can identify it as we're gonna say that we're loading the sprite physics JSON and we are going to sorry I got a notification I lost my train of thought we're gonna call it at that so we're loading our JSON file which was generated by the physics editor let's go to make use of it so what we want to do is well first of all we need to change our physics so the default is not going to be arcane it's gonna be matter we can leave this in here but ultimately what we're gonna want to do is we're gonna want to say mater and we're gonna want to say debug true because we want to be able to see the shapes that create our collision area I'm gonna save it how we add items to this physics engine is going to be similar but not the same so what I want to do is I want to scroll down and instead of saying physics ad we're gonna we're gonna do something slightly different now I'm actually gonna comment this out I'm gonna clone the line and this time around we're gonna say this dot matter dot ad so this dot matter dot adds sprite gonna be the same but there's a little more to it so for example what we're gonna do is in addition to plane i'll we need to specify that first frame in our sprite so for plane it is going to be plane - 1 dot PNG and then we need to define the physics body that goes with it so sheep and it's going to be what I call it sprites dot plane that's what I named it and we can validate that in just a second let's go ahead and save it we got to do the same thing for the rest of them go ahead you're gonna try to save us some time here by actually it's not gonna save as much time at all so let's go ahead and clone the Bitcoin line I might hang it out so that way we have reference this is gonna be matter this is going to be Bitcoin this is not an animation so there's gonna be null there's no frames to work with so what we can do is we can say shape it's going to be sprites and this is going to be Bitcoin I scroll down do the same thing for obstacle and I'm going to say matter and there's no animation here sonal and we're gonna say shape sprites dot obstacle save it we can't use these anymore these don't exist so I'm gonna comment them out or we're not removing them we're gonna reference them later but we can't use them anymore everything else should still be fine so let's go ahead and go back into our browser and I'm gonna refresh sprites is not defined alright let's let's go back here what did I call it you I think a misstep I did so I'm mrs. step so we didn't define this so I actually have to define it so I've just I've just referenced the file but I don't have an actual an actual object in here to work with so let's go ahead and add it so what I'm gonna say is I'm gonna say var sprites and we could move that outside of the create as well but we're gonna say equals this dot cache JSON yet and this is going to be sprites so that's the actual JSON file that we loaded let's save it and let's try it again all right so it added it but you notice that oh no it they fell off the screen so they're still moving to the left but giving gravity if fallen off the screen here so this is one of the features of of matter J s we could easily do this with with arcade physics is not enabled by default but let's let's start playing around with things so let's let's disable the gravity because gravity is not gonna be something that we're we're too concerned with for this so what I'm going to do is I'm gonna say plane don't know why I took that semicolon down so clean dot set ignore gravity equals true so we're ignoring the gravity I'm going to copy this and I'm going to do that for all of them the bitcoin and obstacle you and I save it freshet right at all so where did I go wrong here let's go let's check it out set ignore gravity that should be right the bitcoins still falling I think that's what screwing things up so let's see let's go see what's going on with Bitcoin you I don't think that's screwing up long it has to be because the bitcoin is falling before it even reaches the plane that's not you let's see what's going on here you like I made a typo somewhere but I'm not sure where you when we comment out this that way that doesn't confuse me maybe let's let me comment our Bitcoin altogether for now see where if that's truly our problem case yeah that's weird make wants to fall but you see how the obstacle pushes the plane away because there's actually a collision happening maybe let's let's stop everything from moving all together and then we can get a better look at what's happening here so I refresh I don't know if it's hard to see in twitch but if you look at the obstacle it is no longer a purple box around our object it's actually it's actually attempting to cover all of our of our pieces of our shape it's not perfect remember we're not working with pixel perfect collision it's based on what we have in our physics editor there are a lot of vertexes like waves with the plane we're not doing anything with the animation but most of the plane is covered in some kind of bounding area that way a collision could happen again this is this is resource intensive so the more you have of this though the worse off you're gonna be some games require it some reams you do need to have this but a lot of games like for example this one probably would have been fine with the arcade physics and we can revisit it as well later let's try to see if we can figure out what's going on with the Bitcoin here so let me add the Bitcoin you you that's so weird what's going on here feel like I definitely did something made some kind of mistake or as a typo it is a sprite hopefully Bitcoin I guess what we could do is you and do something in the physics editor that I shouldn't have you now that should that should be right if you see anything in the chat I'll let me know while I troubleshoot this real quick let me go into our file here look at sprite physics the Bitcoin you I think it's fine let's let's see if we can change it up a bit let's go ahead and I click the wrong one again instead of a circle we need to lead it go ahead and use the the magic item here and I add more than we need to let's go ahead and save that I'm gonna call it Bitcoin this should be Bitcoin this changes anything I don't I don't know why it would but I'm gonna publish the Bitcoin yes has it's not a circle anymore but um save it and let's see what it is we're working with and it is still doing that now what did I do wrong here you you ah I think I know what's wrong Oh actually this should still fail let's go ahead and try it yeah that still fails alright so I think what's wrong I'll revert it back to what I had and then what's wrong is I still have this set circle let's go ahead and leave it BAM all right a lot better so for whatever reason that was causing him to fail I did still use that magic select tool so this is a lot of vertie vertexes vertices I don't know the correct terminology for it but it is more than it needs to be we can that we can set that circle the thing about the circle it's weird so the physics center when I scale it the circle still remains large but the collision is accurate so let's let's watch it let's go ahead and and add everything that we had prior I don't I think it might be a bug somewhere but let's go ahead and add our movement let's go ahead and open it up it's moving it touches it's moving us back that's kind of what we expected let's go back into our physics editor let's go ahead and change that back to a circle good enough let's call this Bitcoin now save it publish it um I am going to refresh see how the circle went through I don't I don't know what's going on there but it seems to work and when I shut off the debug mode that goes away but you would think that if the circle is out there it would push based on wherever the circle is but it's not so I don't know I can't explain it it works let's go to make some revisions here though because we don't want it to push so let's go ahead and go back in the physics editor and this isn't a physics editors not a requirement you could always create these these vertexes manually but let's go ahead and say that is sensor true for the Bitcoin we're gonna say it's true for the obstacle and we're gonna say that it's true for the plane because we don't want any kind of interaction a physics interaction we just want to know that a collision has happened though I saved it I'm gonna publish it and I'm gonna go back into my browser it should pass right through passes right through so let's go ahead and set up our kind of events so starting with the Bitcoin that might be the easiest and this is where things get a little complicated again based on matter J s but what we can do is we can do something like the following we can say this not matter dot world dot on we're gonna say collision star and this is I've taken this pretty much from the documentation you get used to typing it in event body a body B and I warn you this is this is not this is kind of a pain in the butt process but you know what it is what it is so we check to see if there's a collision inside the world basically we're relying very heavily on these mask values in the categories so not everything should trigger this only the only the items where the masks line up so what we're saying is we're gonna say if we're gonna say body a dot label equals claim and again like I said not not the most pleasant thing body B dot label equals Bitcoin or body B dot label equals Wayne body a dot label equals Bitcoin we're looking at the labels the fixture labels that we added to our physics editor and if they if they match up we're going to say Bitcoin dot x equals 1400 and I'm gonna save it I'm gonna refresh it see how it see how it worked it wasn't as elegant but it worked and the the obstacle passed right through because we don't have it it's a sensor right now it probably triggered that hey it hit but because we made it a sensor it's not actually having any kind of pushback or anything like that so let's go ahead and make an adjustment let's go and copy this you even go as far as making this an else--if instead of Bitcoin we're going to say that this is going to be obstacle and the obstacle it's going to look familiar we're going to check to see if it's game over and actually I think I could copy a lot of this I'm going to check to see if it's game over I'm gonna have to change the tabs for after this I think let's go ahead and check it out and so if it's game over or there's gonna be an explosion and this should be alright so let's try it out refresh it and resets explosion you still see the surrounding kind of wireframe there because remember we have our physics body on the plane itself not the smoke but if I wanted to I can go up and I can say debug mode is false or matter and I can refresh everything looks pretty slick down damn not bad so that that's an option when it comes to how you want to handle physics in your game so I think we might be at a good stopping point for the day I think we covered everything that I want to I'm gonna run through it real quick to just elaborate on everything that we've done but it's actually quite a bit and this this is kind of the essentials of any kind of game development so I'll refresh that way you can see it one more time things going pretty smooth in our code so what we did was we added physics so we added we started with arcade physics and arcade is going to be the fastest choice for phaser arcade uses either a square or a circle for your collisions nothing nothing more nothing less that's the fastest that you can do a lot of the commands and functionality is more elegant with arcade but if you need more perfection in your collision that's why we chose matter if we scroll down we are no longer using sprite sheets so well we are using spreadsheets but we're not using the sprite sheet command or they're not evenly distributed sprite sheets they are sprite sheets that are compressed so not all frames in that sprite sheet of the same size I removed it so what we're doing is we're using an atlas so an atlas we generated an atlas with texture Packer you can generate atlases other ways to but basically what we're saying is here's our image here's our sprite sheet image the frames are not all of the same size but this JSON file has information on where each frame is positioned and the size of that frame so that's how it takes care of things for us for these JSON right here this is from physics editor what we did is we created physics bodies on each of our sprite images so that way this is formatter j/s only so that way we have a more refined physics area or collision area on each of our sprites and then the Bitcoin and obsticle were just normal images so if we go to the animations because we're changing our sprite sheet we're using frame names for the generation process because we can't you to use generate frame numbers it has to be an evenly sized sprite sheet so inside of our sprite sheet and if I went to the texture Packer you can see on the left here all my files and their naming convention inside of that animation we're saying look at the plain data so our plain atlas information the files that represent our spritesheet are prefixed with plain - so plain - one playing - - so on and so forth the suffix of the extension is dot PNG we have four frames they start at one through four and the padding because we don't have any zeros so zero one zero two things like that we have a zero pad of one and it repeats infinite likewise with the smoke and the explosion comes from the same Atlas but a different series of images based on that data inside of that atlas for the animation we no longer need this animation because we're not using it anymore inside of the sprites so this comes from our sprites physics the first thing that we saw was our arcade physics so we just created we added our plane - as a sprite for the arcade physics engine if we wanted to actually I'll come back I'll separate them we're worried it we're worrying about matter jazz for now so for matter J s we have our plane this is our plane Atlas file this is the first frame in our animation and then this is the physics body data that comes from our JSON file this is for plane because plane is what we call that as far as a file name goes we said ignore gravity because if we didn't ignore the gravity our objects would just fall out of the sky the depth is not related to matter jazz or arcade physics that's just the z-index for a plane likewise with the scale in the play we've seen that already in previous stream we do the same thing for each one of our our sprites here or the matter GS collision we did have to work with this kind of collision so we have to look at the the collisions between body a and body B because of how we defined our physics bodies inside of physics engine and I'll go back here we actually defined which of our sprites should be allowed to collide with our other sprites so our for example our Bitcoin should never trigger any kind of event when it collides with an obstacle but it should trigger an event when it collides with the plane so we define that information and if there was a collision with the Bitcoin in the plane this moves the Bitcoin off the screen and let it scroll back in likewise if the plane hits the obstacle trigger the explosion animation which is part of the same sprite Atlas and then when that is done then we just destroy it we have some motion here but nothing nothing fancy inside of our update the update remember is triggered constantly and we are no longer worrying about our input events so I'm going to remove it come back in the future but for now it's gone that was the matter jazz if we wanted to go back to our other scenario so let's let's just go ahead and go back so that way we can see what I'm gonna do is I'm going to comment these two lines because they come together and I'm going to uncomment our arcade physics I'm also going to change the default up here to arcade and I'm going to set the debug to false so that way we don't see the bounding boxes all right so let's go ahead and start reenable in all of these the Bitcoin obstacle and we're gonna comment out this because this is part of matter je s not arcade they don't they don't play nice together I'm gonna uncomment this so with this Collider and there's an overlap over I think it's overlap er yeah overlap that you can use instead the collider we're just seeing if these two collided if yes then move it otherwise explode so let's go and save it it's going to refresh you can see that even though we're no longer using that much more defined set of physics body we're just using squares and circles in this example it really didn't make a difference for this particular game having arcade physics which is a huge performance boost and it's a lot easier to use we still have a pretty good game even though there was a small little gap because of where the bounding box would have been for the most part people probably won't notice when they're in the game at least not for this game for other games and maybe you never know so again this was this is part of our effort to try to reproduce this game I made called turboprop a game I had made in unity so this is the second stream the first stream being around sprites and animations and getting up to speed so this was atlases and collisions and more animation stuff I think what we're probably gonna focus on in the next stream is probably gonna be around keeping score and then probably around object pooling so you'll notice that all of these lightning bolts you don't want to create a hundred different lightning bolts and a hundred different bitcoins because that'll be resource intensive we want to use an object pool so that way we have a predefined amount of objects and then as we need to add them back into the pool maybe the Bitcoin hits us we add that Bitcoin back in the pool so it could be reused we're reusing the same item on the pool it works out it's definitely something you should do when it comes to game development and it'll make sure that your FPS is as high as it could be so again this is live your if you're coming in late this is gonna go up on YouTube so I actually put everything on YouTube fairly quickly that's the YouTube channel the first the first part of the stream is already on YouTube so I definitely check it out this is again my attempt at getting into game development once again because it's been about six years now so it's definitely it's definitely cool working with phaser after we recreate this game in phaser and I upload the source code as part of the final copy maybe we take a look at reproducing the in unity again we're gonna start from fresh but it's it's a good good thing to play around with it's not bad I mean even though my graphics are quite crude we get the point across it's smooth we have some nice scrolling clouds again I don't know if that's truly parallax scrolling um but it doesn't look that bad it could be a lot worse given given my skill set so thank you for tuning into the stream catch you on the next one you

Channel: The Polyglot Developer

Views: 264

Rating: 4.4285712 out of 5

Keywords: twitch, phaser, game development, javascript, html5, animations, sprite, atlas, spritesheet, physics, collission, matterjs, texturepacker, physicseditor

Id: NyroftLLwjg

Length: 74min 2sec (4442 seconds)

Published: Sat Jul 18 2020