Game Development with Phaser: Audio and Scenes [08/14 @ 4PM PT]

hello and welcome back to my stream so this is on the series of game development with phaser this is probably the first of a few series that's going to happen but i think this will actually close out the first series so i'll give a recap in just a second but for logistical purposes i am live um so i'm streaming live on twitch if you have any questions along the way please stop me i'm paying attention to the chat i'm just glancing over at my other monitor here um so definitely engage it makes it a more fun experience uh you're looking at the adsense on my on my blog you got me confused there for a second crutchcorn uh anyways so um if there are any kind of glitches in my audio or glitches in the video please please let me know because otherwise i'm not going to know about them so if the font's too small if you can't hear me maybe i'm too loud maybe it's frozen altogether let me know point it out i'll try my best to fix it and we'll see where it goes so as far as what we're trying to do on this particular stream series i think this is the fourth stream or the third stream somewhere along the lines of that they're all on youtube if you want to catch up but the goal was to recreate a game that i had created in 2014 so this is probably my first ever blog post or at least one of the first ever ones the goal was to create a game uh that i created at what's called turboprop so i'll hit play on this youtube video like i had mentioned in the previous streams this was built in unity i don't think i have any of the source code for this game not a problem we're just recreating it this time around in phaser i'll show you where we got in the previous streams and we're just going to add to it the focus of this particular stream is going to be around adding sound to our game as well as adding more scenes to the game so so that way maybe we have a game over scene a main game play scene something like that uh so i will go ahead and stop this we don't we don't need to see this again at least not until the end of the stream i will open up my visual studio code and i will run the project where we left off so this is exactly where we left off i haven't touched it since uh stream stop uh what what does stream stop me and maybe you can run it by me and i will uh i'll see if i can address it let me know i'll glance back over uh let's go ahead and say um serve so i'm going to serve this phaser project i am going to go back into my web browser and just open up a new tab here and this is where we left off so it's not exactly what we saw in that in the youtube video that i had done in 2014 but it's similar we've got a plane that's animated we can click around on the screen to collect the coins increase our score and if we crash into any of these obstacles uh we explode and it starts over um so ideally what we're going to want to do is we're going to want to go to a game over screen and every time we hit a coin or a obstacle we want to play a sound effect and we're going to create those uh best error user error uh all right um i i'm going to assume that you've got it fixed sandokun um but all good if you if you do run into trouble let me know so let's go and start working towards this uh but actually first what i want to do is i want to clean up some of the code that we've already done in the previous streams and that should kind of refresh our memory on where we stand so that way if you're if you're new to this series at least you'll be able to catch up a little bit so let's go ahead and see um so just give me one second uh what we're going to do first is uh we're actually going to move it into a dedicated scene file and we're going to strip stuff out along the way so right now everything exists in the index.html file as far as code and then we have an assets directory with all of our image files and things like that so i'm going to minimize that and i'm going to create a new file and what i'm going to do is i'm going to call this maybe gameplay scene and this is a javascript file go into the index.html file and i'm going to include it as a script so like i said we're going to be adding numerous scenes but we're also going to do code cleanup and i i promise you uh we're going to see how everything works as we as we shuffle things around so that way it's a it's a good catch-up lesson i'm going to say source and i'm going to say gameplay theme.js javascript i'm going to go one step uh actually i'm going to leave it like that if if we do run into trouble i will add a period and a slash there for a relative directory i don't think we're going to run into trouble but you never know all right so inside of this gameplay scene let's start creating it and this is a phaser three scene um you don't have to create a separate file for a separate scene but it does add a lot of maintainability because then you don't have a 100 different scenes in the same file and then you lose track of things and it becomes a big mess so let's go ahead and check it out let's go and say maybe var gameplay scene giving it a name here equals new phaser dot class and we're going to say extends we're going to say phasor dot scene we're going to say initialize and this is this is straight out of the phaser documentation too we're going to say function and we're going to say phasor dot scene dot call we're going to pass in the scope and we're going to give it a key so that way this key can be used when we want to switch to this particular scene so we're going to say key and let's go ahead and call it gameplay scene for consistency purposes that's kind of the boilerplate of a phaser scene but we also want to be able to handle our life cycle event so the question coming in is phaser a global object so this is part of the class so i believe it's a global object so we're including it here and it's more or less gonna somehow i don't i don't know how it works honestly but it's gonna take the classes out of this particular framework um it does javascript voodoo i'm not definitely don't call myself a javascript expert more of a javascript user but it does something something magical but what i want to do is i want to add my lifecycle function similar to what i had in the index file so i have init preload create so basically i want the same things i'm going to say init i'm going to say function i'm going to say reload also function let's go ahead and say create and update all right so now basically what we want to do is we want to start copying stuff over um so let's let's let's start doing that we'll we'll start with the uh preload because it doesn't look like we did a knit scene here um so i'm going to copy this and then we're just going to comment it out along the way as well we won't we won't fully remove it yet but if i paste it in what we're saying here is we are loading our images we have a sprite atlas so this sprite atlas is our sprite sheet that's been compacted so that way it's not it's not a uniform sprite sheet we do have a json file with kind of a map to where each component goes we have our sprites physics which we're actually not going to use so we're not we have we i think we removed it in the in the previous lesson this is if we wanted to use the um matter js physics engine rather than the arcade physics but we kind of determined that arcade physics was fine for this example so we're not going to use it part of our cleanup then we have a bitcoin and an obstacle so that that looks not bad and all of our files are inside of our assets directory let's go ahead and go to the create scene um actually quite long maybe we want to start with update scene we'll start with the create we'll just go down the line um so i'm going to copy this and we're going to we're going to do some cleanup as we as we paste it in just to see what we're using i think there's a lot of stuff that we're not actually using uh and we just haven't removed it and i noticed that i put it inside the init let me fix that in just a second it should actually be in the preload oops right here and do that so that way i don't mess it up again i think we will revisit the init at some point in this this tutorial or this stream um but for now we can leave it like that we just pasted a bunch of stuff in um so up until now we've kind of used these global variables rather than phaser class variables or member variables i think what we want to do is we want to keep it more phaser oriented and and strictly keep them as member variables so we're going to start doing some conversions it's not absolutely necessary but it'll help us in the long run so for example uh this dot cloud's blue we're just gonna we're just gonna prefix this to a lot of things um so we have our clouds uh three different versions of it we have our score i could do a find if i wanted to but it's best if we go uh probably line by line figure out what's going on so with the with the score this is just our text we're storing it in a variable so that way we can update it later uh we're setting the depth so that way the objects don't go in front of the score we want the score to be sitting on top it's kind of like the z index when working with css let's go ahead and look at our animations they look good those don't need to change we're not using the sprite physics i removed that so let's go ahead and remove this here as well we're looking at plane let's go ahead and i'll i'll do this then i'll i'll come back and fix it so let's say maybe this dot plane i did a multiple replace there and then fix that uh we're gonna do the same thing with our bitcoin group so as far as the plane goes we have a sprite it has physics associated to it again we're working with the depth of it uh image was kind of large so we shrunk it uh we have data information so that has to do with the score and that has to do with um where the where the plane is we set three positions a top a middle and a bottom and that really basically says where are we allowed to move to and we'll explore again in just a second we're going to play that fly animation i'm going to say this stop bitcoin group and this dot obstacle group just using bitcoin again because at the time bitcoin was cool i don't i don't think it's cool anymore at least me personally but you could use any kind of coin um or any kind of thing that is rewarding doesn't matter so bitcoin group obstacle group uh yo adrian is now hosting me oh uh thanks for the hosting dodge coin is where it's at yeah that's uh uh with the shibu it or is it the husky something like that for the moon right in before ocean bit ico let me know how that goes uh crutch corn uh so our obstacle group uh we we just uh locally uh we we created a member variable of it uh we're just doing a little bit more cleanup here um but the more exciting stuff is gonna come after we we get this into its own scene file yo yo kukukato thanks for joining uh glad to have you here all right let's see where we go all right so this uh we have our timer uh this is where we actually start pulling objects out of our object pool if i go back to my web browser it's still run but i don't want to refresh but the object pool would be these obstacles as well as uh the coins let's go ahead and fix that up so we have the position that can stay the positions so if we look back at our index.html html file oh we have positions y i do want to keep those so i'm going to copy that array and i am going to go to my init function so this is where i'm actually going to make use of the init so i'm going to say this dot edition's y equals an array that way inside of my create what i can do is i can say this stop positions y and i also want to say is this a is this a coin pool item so i do want to copy that and i want to init that as well i'll scroll up um and i will say that it starts as true maybe and then we can go back down i'm gonna do a lot of scrolling at least for now it's gonna it's gonna get better it's gonna get more interesting um but let's go ahead and say this dot is coin pool item uh and then the bitcoin group it's at some point i'm gonna have an error and i will look at the console logs and figure out what i did wrong uh but let's go ahead and say uh obstacle count that looks good obstacle position obstacle group gotta add to this to it and finally down here and people are applying a rule in their eyes that i'm just doing this manually there's probably better ways but this works because we're just we're just kind of re-familiarizing ourselves with the code all right so let's look at the phys the first physics collider this is for the plane against the uh bitcoin group so any item in that object pool um so we'll say this and uh these don't need to have a this on them because it's for this particular item so we'll keep it as is but the group itself uh we needed this basically what we're saying here is if the plane uh collides with any of the coins we want to check to make sure that particular coin is active and then that we're not cur and that we're not currently exploding uh if we if that's true then we can hide that particular coin and we can increase the score um so the score would be stored inside of the plane it's defaulted to zero i like not currently exploiting me too so that's good um let's go ahead and say this dot score text uh what we can also do here is we can we can further uh change this small chunk we can optimize how that that behaves i'm gonna comment it out instead of that what we can do is we can say plane dot increase data we're storing in a numeric and we're just uh increasing it uh pro tip don't be actively exploiting the pro tip uh score uh and then we're just gonna increase it by one and for the score we're just going to say now plain dot get data we're gonna say score that should work i'm going to leave it commented out just in case it doesn't work and we have to revisit it but it should be all right let's keep moving on as part of our cleanup goes and hopefully fingers crossed that by the end of this we are no worse than we started with because we're just doing cleanup and creating this first initial separated scene that way we can have multiple scenes in our game uh so this stop playing this.obstaclegroup once it's done i will restart this is probably fine uh what i will want to do for this right here is i need to make a change because i won't have access to this inside of inside of this particular function so i need it i need to do the following i need to say uh null and i need to say this so i need to pass the scope so that way it's usable just like i did with the obstacle group collider i'm going to save it i think we're almost good we're almost uh where we left off so let's keep going let's um let's copy that update here we go so i'm going to paste that in somewhere down at the bottom all right so let's see here uh this is for when we update so let's go ahead and just we're just gonna add a lot of this that's mostly what we're doing in this whole this whole segment so far um so this i want to add this to the wrong things why i'm not doing a bulk here i'm going to end up in more trouble than what what i started with so let's go ahead and say this distances is fine uh all right so this is where it gets wacky i think um so we have positions y so this should be this stop position y we have that's fine the plane i think what we want to do is this and maybe maybe we can get away with doing multiple here check it out yeah i think we can get away with it um so we have positions y let's go ahead and see how many we can select here looks good and if you're curious on how i'm doing this i was pretty amazed when i first learned how to do that as well i'm actually pressing ctrl d on windows on mac i think it's command d and that will just let you select multiple um might work i'm going to save it and see if we get any kind of errors um so i saved it it's still is still running i'm going to go back into my game here i'm going to refresh it uh that does not look good so let's let's check it out see what's going on here cannot read property frame of undefined um and i don't see a line number oh line number 109 all right this is probably because oh yeah because i i didn't i didn't wire it up to the index file yet i did a lot of copying out of the index file but i never actually um finished wiring it up so let's go check it out um so rather than just cut rather than just commenting out this section i'm going to comment out most of this actually i think i could do better than that i want to comment that as much as i can probably up until there all right so we're good on that angle um i also want to switch this over this instead of seeing now with an object i'm going to say that this is going to be gameplay scene as referenced in this particular javascript file at the top the gameplay scene i'm going to save it and we're going to see if that fixes things for us did so it looks like i can click to control my plane in the three different positions score is still being calculated so our change to the score did take and let's see what happens when we explode everything looks good so it restarts so we're where we left off but we've got a very dedicated scene so that could lead us into how we do things with game over so let's go ahead and check it out so let's go ahead and go back into the project get some water here so let's let's make a game over scene so that way when we do crash instead of immediately restarting at least we can see see our shame of failure and choose to retry so let's uh create a new file this is going to be game over scene and there's no particular naming convention i'm just making it up here but let's do the same same thing as what we did um so let's go ahead i'm going to copy some of this to start and we'll just finish it off but paste that in this can be game over scene and then we need each of our our lifecycle functions we're going to say init and uh actually let's not cause that problem again uh maybe reload i know that we're going to need to create we probably won't need an update but i'm going to add it anyways not going to hurt us all right so we need to figure out uh what we want to do um so at a minimum we want to display some text that we've now exploded um so let's go ahead and look at our create we're gonna we're gonna do uh text creation like what we saw in the gameplay scene but we're just gonna reposition it differently on the screen so maybe we say this dot text and we can say or not this dot text this dot add dot text we can position it i know that my scene is is uh 1280 by 720 so let's let's cut it in half so 640 uh by 360. and let's just go ahead and say game over we'll start with that and uh what i'm also going to do is i'm going to set the origin because if i don't set the origin on the text and i try to center it like that at 640 by 360 it's not going to be centered it's going to be at the edge of that point so if i set the origin to 0.5 it's going to be at the midway point so the origin could be between 0 and 1. so let's go and check it out and we didn't actually wire it up so let's go ahead and go to the index i am going to clone that line and say that this is game over scene and i'm also going to edit here so i'm going to say a game over scene all right so one thing that we need to do to actually make it to the game over scene is i need to instead of saying this dot scene restart we need to think about saying this.scene.start be the command and we need to specify the scene that we want to start in this case it's going to be game over scene and i think that should be good so let's go ahead and restart and i'm just going to crash hopefully right away all right it's small but it did its thing so of course the collision happened we played our explosion animation based on our logic we waited till the explosion animation was done and then we transitioned doesn't sound like a real possible i see i this guy all right making uh some jokes there always happy to have you on the stream crutch corn you always make it uh that much more special crutch corn has his own stream too does some good stuff with react development so if you're into react and react native definitely worth checking it out crunch corn i give you permission uh oh bearer of bad news don't tell me you're done oh i'll wait for you to do whatever your whatever you're typing um and i will proceed so i will proceed to making this text larger i think what we want to do is we want to display the score that we had before we uh got exploded and uh maybe a retry button and oh no i was just being a dork all right no no bad news all right perfect charge corn share your stream so that way uh people can check yours out as well all right full permission to give you to post that link deem the shameless plug perfect all right anyways uh let's go back into the code and let's start editing that game over scene uh so we have our text it's not very large so what we might want to do is well let's go ahead and add some configuration information so for one maybe we say that we want the font size i don't know to be like 60 i think it defaults at like 12. that's pretty small to start with uh the color maybe we make it black instead of white something that on that particular background color i would be easier on the eyes um maybe we add boldness to it so we say font style say bold and we could add a background color to it uh if we want it might uh it might make a little more snazzy testing something uh posted uh the polyglot dev uh twitch link curious to know what you're testing but i will allow it uh let's go ahead and add some uh padding and some background color just to make a little more snazzy uh let's go ahead and say maybe the background color is uh white maybe to like represent kind of like clouds because that's kind of the theme of our game and uh let's go ahead and say maybe the padding uh let's say maybe the padding is 10. i'll save it um let's go ahead and also add some other kind of placeholder text for when we start doing some more interactions say for our example our score and uh that retry button so that way we can play again uh let's go ahead and start with the uh score maybe so we're going to say this dot add text let's give it a position what i actually want to do is i want to copy uh the position from the other scene so basically what i'm going to do is i'm going to make it look identical to whatever we had here and i'm just trying to figure out where we put it inside this code uh looks good right here i'm actually going to just copy it all right so what we need to do is we will at some point need to adjust this score uh to be whatever we lost with uh but we'll get to that in just a second uh finally let's go ahead and add that that i guess retry button so we're gonna say uh this dot i don't know retry button um equals this dot add text give it a position uh we know that the the scene is 1280 by 720 let's go ahead and maybe pick something that's towards the edge of the screen uh we can adjust this as necessary um so 11 25 on the x maybe 6 25 and the y i always change it and then we say maybe retry and as far as style information goes let's let's make it a little more stylish kind of like what we did with the other items so the font size maybe we say that it's 40. maybe we say that the color is going to be black again and font style it's going to be bold so curious to know what crotch corn's up to that he's testing something but left me hanging um let's go ahead and say that maybe our um maybe our padding is the same background color it's going to be white again i realize up here that this is not white so let's go ahead and just make it white for the sake of this game over screen and then uh finally uh maybe we add some padding and this could be um and again at least for now a crushed corn says i'll never know thanks crutchcorn uh i'll save it uh retry won't do anything score won't do anything but at least we have something to look at um so let's go ahead and refresh it and uh we won't worry about the score although it's gonna die right here anyways so let's check it out all right we have a score we have a game over and we have a retry could be dropped a little lower but i'll let it slide for now uh it was a hover effect that provides more meta on the channel i can find elsewhere all right interesting uh what we want to do is we want to pass the score information and then we also want to make this clickable i'm clicking it but nothing's happening so let's go and check it out let's go ahead and first accept the score um so this is actually really easy inside the init the init can accept some variables from the previous scene so in the form of data so what i'm going to say is i'm going to say this dot score equals data dot score and then when i go down into score down here i'm going to say plus this dot score and how do i get that score well i'm going to go to gameplay scene i'm gonna go to wherever i exploded and i don't even know where that is it's somewhere over here uh that's bitcoin but i'm gonna remove this comment all right so we exploded here this is where we changed the scene and this is where i can provide an extra object in this case it's score and the score is going to be plain dot get data and this is going to be score that should be good enough for that uh we also want to add retry so this is where we go into the game over scene and we start messing around with this retry button which really be named anything so first of all what i want to do and actually for readability it's going to add some spacing here so what i'm going to do is i'm going to say that retry button needs to be interactive this text needs to be interactive because by default it's not i'm going to say this dot retry button dot set interactive all right so now that's interactive i need to figure out what happens when there's a mouse down event or a point or down event so i'm going to say this dot retry button dot on i'm going to say pointer down and if that happens then what i can do is i can say this dot scene dot start and i'm gonna say gameplay scene and we don't need to pass anything to the gameplay scene that's good enough let's go ahead and save it let's go ahead and save it let's go ahead and try to refresh it and see if our score is kept and uh we're also going to see a retry one it's not it's undefined uh perfect so let's let's figure out what's going on and uh we can work our way backwards um so let's at least see if retry works every try does work perfect um so let's go ahead and see why our score did not work uh so where did i make my mistake i have to print it out to the terminal levels for the heck of it i am going to say console.log dot score not that it matters i'm also going to say console.log data save it and to go back that is odd i feel like it should should have worked um but you never know i make bugs all the time up so score is undefined but it did in fact say that there was a score field so at the start so whatever whatever i was trying to pass obviously did not exist uh so plane dot destroy um all right so here's why i destroyed the plane before i tried to get the data um so the the plane didn't exist um so let's let's just go ahead and move it up a line and it should be fine uh so let's go ahead and maybe remove this i'm pretty confident that it's gonna work like my single coin and then crash bam it works i got the ultimate high score of one right now um so so far so good we set off and we completed our second goal of this particular stream so our first goal was to clean everything up second goal was to have multiple scenes now what we want to do is we want to have audio because it's a better game when you have sound effects so um let's go ahead and check it out i scored one uh wrp what is wr not good with um abbreviations like that i'm old you have to remember i'm old so i don't i don't keep up with that world record all right perfect um all right way to go crutch corn i'll send you this i'll i'll send you this game after and you can uh break my my high score with two uh that'll be awesome so what we want to do is we want to create some sound effects all right i'll tas it definitely don't know what that means either starting to think that you're making stuff up but that's all right this reminds me that i should probably push one of the buttons on my stream deck um just because why not um so here's a shameless plug right there to follow um anyways what i'm going to do now is i'm going to open up a digital audio workstation software to make our sound effects so i'm gonna i don't have any sound effects created as of right now we're gonna make them not gonna go ahead and bust a jam for a game loop these are just strictly gonna be sound effects but the same logic can be applied when it comes to actually creating background music and things like that so i am going to use a software called reaper fortunately it is not free um i did pay for it you could use garage band you can pay somebody to make your music it doesn't really matter but i am just going to create some custom tunes here and we're going to use them in our game and i apologize i don't think i can zoom in unfortunately in this software but i will walk you through what i'm doing but it should be i'm hoping self-explanatory so what i'm going to do is i'm going to click here i'm going to create a new track this track is going to be microphone appropriate and i am going to actually so when we collect a coin i know that for a lot of people the first thing that comes to mind is the sound that uh you hear on mario when you hit the box and you get the coin uh i thought i could reproduce something like that i couldn't but i have this bell right here move some windows around and make uh everyone can see it i have this bell it's just a it's just a restaurant bell nothing fancy i thought that if i could hit it that would be a cool sound effect but it plays too long so instead what i'm going to do is i'm going to hold the bell and i'm just gonna that's gonna be the sound effect that plays when we hit a coin not it's not great i'm sure everyone can do better if you've got a piano i'm sure you can hit a key and it will sound more like a coin than this but i'm working with what i have i'm not a very talented musician so it should work out so let's go ahead and check it out i am going to hit the record button did twice uh just in case um so let's go ahead um for whoever's watching the stream crutch corn can you tell me if you hear this when i play it back i did twice oops yep perfect so that's that way i set up obs correctly so i'm going to zoom in here i'm going to just cut it again this is my hacky diy approach to being awful at creating sounds but let's go ahead and trim it and i will get it right here too all right that to the beginning let's just validate one more time that we're we're good all right i think that works good enough um so let me export it i'm going to call this um i'm going to call this ding and i will just i don't know put it on my desktop and uh make it an mp3 and that looks fine perfect all right uh let's let's see if i can minimize some windows here you moved the window at the same time as very nice go ahead and drop that in and i'm going to drop the ding into the assets looks good and let's go back into visual studio code and now we're gonna actually uh string up that that audio let's go into our gameplay scene and go back into our preload where we're adding our assets and i'm going to say this dot load dot audio this i'm going to call it ding so this is going to be my phaser reference and i'm going to reference the file so it's going to be assets slash ding dot mp3 the reason why i did an array here is because you can provide multiple audio file uh formats so if you've got wave or other this this makes it for maximum compatibility um i think mp3 you can get away with on on most browsers but you have the options i'm going to save it now what we're going to do is we're going to actually add it to the scene so it doesn't really matter where you add it i'm going to add it up here but it's going to be in the create function and i'm going to say this dot ding equals this dot sound dot add i'm going to use the phasor reference here and i'm going to say that it's non-looping so false i'm going to save it so it's added to the scene but it's not playing until we go into the uh collider or um bitcoin and i'm just going to throw it in there so i'm going to say this.ding.play i'm going to save it let's go back into our browser i'm going to refresh and hopefully uh crutchcorn if you're still there you'll have to tell me if you can hear the dings but let's see what we get we hear some dings maybe i'm going to say that possibly we have some dings i will revisit this ask to see if it's actually working again after we do the explosion all right so let's go ahead and work on the explosion sound effect um so i'm i'm gonna go ahead and delete this we don't need that that anymore go ahead and create a new one um so again i thought about some things that could make an explosion sound effects prior i figured you know what maybe i can crinkle up some paper to make that sound effect i'm just going to use like some whisper noises out of my mouth again i'm not i'm not a great musician or creative artist on this stuff you saw the drawings inside the game they're not not the greatest um but they they proved the point let's go ahead and uh i'm gonna do my best at an explosion here go and check it out all right so let's go and check it out let's see what that sounds like all right not bad all right so let's go ahead and use it i think i like the second one better so i am going to cut it gotta use some imagination on some of this stuff all right fine drag it over do the uh add some reverb i i would if i'd if i knew how i'm a basic user of this software um but i'm sure it's possible but yeah it would be interesting to see what it would sound like with reverb let's go ahead and export it this is going to be instead of ding i'm going to call this one maybe explosion and that's probably fine all right let's go ahead and drag it to the appropriate directory and see what we get i'm gonna i'm gonna go back up to my my uh preload i'm going to clone it when i'm going to call for phaser's sake explosion again and the file is explosion.mp3 i am going to add it to the scene this is going to be explosion and inside of my slider i am going to say this dot explosion dot play i'm going to save it let's go ahead and see what our coins and our explosions sound like i'm going to refresh and get some coins make sure they still work didn't make it but it sounded like it was there can somebody confirm in the chat that uh sound effects were able to be heard not bad for an explosion right for a sound effect uh like i said uh you can you could add background music in the same way uh basically you would set that that loop to true and you just play it right there in the create or or whenever necessary you could add a ton of different reasons for sound effects maybe your player is walking maybe i want to add a sound effect for my plane flying i go i don't know whatever plane sounds like when it's flying uh flying through the air who knows um i'm sure tons of people know but uh let's go ahead and maybe maybe bring this project to a close i think we're at a good good point to end it um but just to recap this was inspired by a game i had built in unity which the unity version looks a lot better because i i didn't do it live i spent a little bit more time on the on the graphics and the sound effects i actually paid for uh but unfortunately i lost everything on uh as far as the assets and the code but we have our obstacles we have our coins we fly around in the same fashion um the clouds fly in the same fashion as far as tile sprites go uh when we when we hit a obstacle we explode takes us to another scene uh we're getting score for his handle a little bit differently in this game went a little bit more extravagant but uh let's wait for a crash explosion looks a little better in this circumstance too um what i didn't do uh is i didn't fancy up that that screen right there but for the most part that's the same game and we didn't use a whole lot of code i think i used paul used a ton more code uh in unity at the time because i was pretty new to development in general at that time um but we we did quite a bit in phasers i mean if we go over to our game now and not not as sexy as as the unity version but given that all of this was done live and only live um not too bad so let's just walk through the code one more time um so in this in this particular stream uh we focused strictly on scenes and cleanup and audio uh so the audio wasn't really any different than just adding images um if you have other audio files go ahead and add them to that array when it comes to playing the audios just play it for our cleanup we just moved everything into its own separate scene file and we added this to everything to make it a member variable for the class inside of the index.html uh we cut pretty much everything out of it so let's delete that big long comment and this is kind of what we were left with we added our two scenes here and we started our game for our game over scene actually let me save this before i forget for our game over scene uh it's just a bunch of text we did accept data from the previous scene and we did make a piece of text interactive so that way when we clicked it we just went back a scene so not not too bad if you did want to catch this video on demand like the others they are all uploaded on my youtube channel which i'm adding to the chat right now so check them out this this is the series one of of this particular game design with phaser i'll probably at some point in time redo this in unity for the stream may do other stuff with phaser may do other stuff with unity definitely some definitely a fun topic to play around with game development is really fun and you you don't have to have any kind of special skills uh to accomplish it you saw my skills terrible at drawing terrible at audio the programming involved uh there's not with modern game frameworks there's not a lot of things that you have to consider on your own you don't have to worry too much about the physics engines you don't have to worry about collisions things like that on top of this if you do go over to the blog i actually did do a few tutorials on uh different sections of this game so i didn't not all of them have published i've kind of been doing them as i've been streaming size stream and i write the tutorial about the top the concept so this one just being collisions just so that way if you want to refresher on everything that we've done um trying to think that if there's anything else i'm not sure when the next stream will be they kind of just happen um randomly um but if you're around and you want to participate uh or even if you have any suggestions on what you'd like me to stream about i'd be happy to do that as well so with that i think thank you everyone for participating you

Channel: The Polyglot Developer

Views: 263

Rating: 5 out of 5

Keywords: twitch, game development, phaser, javascript, audio, reaper, scenes, programming

Id: GLKq28QluHo

Length: 51min 25sec (3085 seconds)

Published: Sat Aug 15 2020