Coding a Street Fighter game | JavaScript, HTML Canvas | Background animation, floor effect (Part 9)

Coding a Street Fighter game | JavaScript, HTML Canvas | Background animation, floor effect (Part 9)

Show Video

hello and welcome to knife part in a series of videos aimed at developing retro games in vanilla JavaScript using the canvas elements my name is Anthony and please drop me an icon of the web where I like to build stuff in the browser using the latest Technologies it feels like a lifetime since the last video honestly but I did finally get a well-deserved vacation abroad at the end of September which meant I wasn't in front of my usual PC I was however getting some sun for what probably will be the last time this year for me at least living in the UK as we move into autumn although I'm now feeling refreshed and ready to pick up the series again the general consensus from the last video was that we should finish off the background in UI before moving on to the actual fighting moves so with that in mind I think it's wise that we jump straight into the dreddy to-do list once more and pull up the remaining things we should tackle today scrolling through the list there's still a number of items that relates above the background and the status bar overlay which we're able to take off so in summary in this video we'll start by adding the only UI on it today the text along the top of the screen that presents the scores for both the plays and the current high score we'll then move on to the background and looked about the missing various animations these include the bolt animation along with the characters on it we'll then move on to the floor and discover how the 3d effect was applied to the original game which is so famous for will then look to simulate this within our version of the game using a transformation effect finally we'll move on to the objects that sit on the floor itself some of which appear in front of the fighters so yes there's still plenty to do in this area although by the end of this video we should have a near complete stage that resembles the original version and game before we move on I'd like to quickly thank those who have signed up to my patreon page it's got more followers on there than I expected especially at this early stage there's still plenty work to be done there but if you'd like to get direct access to the code and early access to these videos or just say thanks and support what I do here then that would be the place to do it so thanks again to everyone so far who has taken the time out to support this Channel and my work okay enough talk let's crack on so where do we leave the code in the last video well if you've been following along we mainly focused on the UI and background replacing this static image background we've had since the start of the series with a set of different layers stacked on top of each other to replicate it we also added a camera to allow us to move our entities in 2D space which in turn transformed our static background into a scrolling Parallax one lastly we started to add the UI elements at the top of the screen to represent the game's details such as the Fighter's health bars and the battle countdown timer we'll ought to continue where we left off in today's video finishing the remaining components in the status bar before moving on to animating the background elements and finally applying the 3d skewing effect on the floor leaving us in a perfect place to jump right back into the state machines in the next video where we'll start to tackle the basic attacking moves but we're getting ahead of ourselves already let's start by updating the UI and the scores that appear across the top of the screen if we take a look at the original game again as reference there's a couple of things to note as we mentioned in the last video the status bar is gently split up into three sections and funnily enough the scores are no different on each side of the screen we have the individual fighter scores and in the middle we have the current high score from the store table of high scores we'll talk more about the high score table later in the series when we discuss Global States but for now we'll just use a known default value for an initial game notice how each section has its own label followed by the actual score value to allow us to draw these strings and values to the screen we'll need a set of alphanumeric character Graphics similar to how we drew the countdown timer but this time we need something a little more flexible so it'll be back into vs code let's quickly have a look at the misc PNG image that we brought in in the previous video you may notice that we've used quite a lot of this image already but if you focus on the middle it contains a couple of alphanumeric character sets along with a few other symbols which we can use to write strings to the screen scores in the status bar use a left set so the first task today will be to bring these into our code opening up the status backlash I'll start with both the fighter scores referencing the original game you only really need three characters for this letter P and the numbers one and two well I feel like I'm on episode of Sesame Street anyway just like before we'll have to add these frame details into our frame's map object although again as I already have these defined elsewhere I'll copy and paste them here to save on time replicating what we did before for the frame name we'll use a prefix followed by the character itself in this instance I'm using score and before we move on I'll add a quick comment above each like we've done previously to describe what each are next we'll add a stove function to house our draw cards for the score section which funnily enough I'm going to call draw scores this function will naturally require the context object like the other drawer functions we'll then call this new draw function within the main trial function passing on the context object let's put it at the top of the call list as we want this to be the first link to be drawn to the screen also while we're at it I'll just move our local drawer frame function down with our other draw functions to keep things tidy okay back to our draw scores function we'll now simply draw the correct character frames in the correct positions on the screen we'll start with the P1 and P2 labels first for the actual score values themselves let's create another function called Draw score to house our score drawing logic this function will have a further two parameters the score value itself and an X position presenting that it will be drawn and just like before we'll call this stub function within the draw scores function passing on the necessary arguments I found that Street Fighter tends to start every new player with a score value of 1. so let's copy that here too and hardcore that value for now again we'll come back to this soon once we start to implement the global States in a future video in regards to the draw score function this will take the score for each fighter and iterates over the individual characters of that value and draw them to the screen at the designated position for this to work the first thing we'll need to do is to ensure that the value is actually a string as iterating or restring it's far easier than a number value in this instance so we'll use the string Constructor and pop the results into a new variable before we continue let's quickly reference the original game again to see how he presents his scores on the screen as this will help us understand a few things the main takeaway is that the values align to the right hand side and can be a maximum of six characters in length also if you look a little closer each individual character is evenly spaced out by 12 pixels OK with this knowledge we can work out the actual Exposition we need to use in our draw score function we'll take the maximum number of characters and multiply this by the character width which will give us the total space available for the score we'll then minus the actual length for the score string and again multiply that by the character width the result is an offset X buffer which we'll need to add to the base X position so that we have the correct starting X position with that done let's now iterate over the characters and draw them to the screen we'll do this with a file Loop and step through the content of the string value based on its length with each character we'll draw it using the corresponding score frame and adjust the X position based on the index multiplied Again by the character width finally just like the other draw frame call so far we'll use a wide position of one okay let's take a step back and have a quick look in the browser for the first time in this video and see what we've achieved up to this point great the player score labels along with their initial scores are displayed at the top of the screen nothing overly exciting at the moment but the code we've written so far should work with any score value we pass into it so we're all prepped for the future we do have a gap in the middle though which is missing the high score name and value however so we'll get on to that next back in the cold let's add a new high score value to our draw scores function as we know we can cater this quite easily with the draw score function we just completed an open original game that the default highest score value is 50 000. so we'll use that and add code that value in for now again we'll come back to correct this in a future video next we'll need a new function to draw the associated high score name String so let's create that and call it draw score name to house or Draw logic this will take the context object and name String and an X and Y screen position coordinates otherwise you can probably expect before we can broadcast any further we'll first need to extract the remaining alphabet frames from the misc image it's back in the Constructor I call upon my predefined list of definitions and copy them over as per usual both for the numeric and alphabetic characters as a result we now have a full list of alphanumeric characters to play with in ascore display please freeze the video if you wish to copy these rascore name function just like before will use a file looter iterate top of the name String but this time you don't need to adjust the starting less position we'll just use the index from the ink clause again we'll just evenly space out the character's face on the character width which we know is 12 pixels looking back we probably don't need the Y position as we know the scores all appear on the same line so let's go ahead and remove that now with that now complete let's color within our draw scores function I'm going to use the name of ants for now because why not in fact we can actually replace all our current draw frame calls too so let's do this passing in P1 and P2 as the name argument as the draw scored name function is driving more than just names now let's give it a more accurate name I'm thinking to our score label we'll also change the name parameter to for consistency there you go much cleaner another quick check in the browser and great follow the scores on their labels are currently drawn on the top of the screen leaving the focus to the stage background now he's looking at listen to static for my liking each stage in Street Fighter had a number of animated objects and layers in all of their backgrounds to give it some life in terms of Ken's background this was mostly the boat and the various unlockers that he had on board let's look to add these to our background next starts with the Bobby motion the boat has this gives the perception that is floating on the scene so in the stage class and its Constructor let's add a new local property called boat this will hold all the properties that we'll need to animate it similar to how we've done it in the past these will include animation frame to hold the frame number animation timer to hold a copy of the frame time an animation delay property to hold a delay between each frame and lastly the animation itself which I'll set up a sequels of numbers ranging from 0 to -4 we'll explain what these numbers actually mean in due course but let's continue on we'll next add a new local function called update bolt passing on the frame time argument then we'll call in the main update function which we'll finally put in use today we'll Now set up the Vault animation but before we do we'll need a couple of more constants to help with the animation so in the constants folder let's add a new file called game.js this file will house

any constant values that relate to the game itself remember back in the animation video we discovered that Street Fighter 2 ran at 60 frames a second we'll start by adding a base variable called FPS and set this to 60. then we'll add another call frame time which will be a calculated value of 1000 divided by this FPS variable the value of 1000 is ultimately one second in milliseconds so in summary the game runs at 60 frames a second and each frame has 16.6 milliseconds of time available to achieve that so if a frame takes longer than this expected time window it means the king will start to drop frames in terms of how bolt though you'll be using this value to calculate if the animation delay value has exceeded a certain amount of frames based on the frame time in the stage cluster we'll Now set the Bolt's animation delay with a base value of 22. as mentioned this is the amount

of game frames of delay between each of the Bolt's animation frames let's move on to the update bolt function and bring this all together where this will hopefully be a little more clear if not so far just like we've done previously we'll now check if the boat animation needs to update we'll take the previous time property and check if this is higher than the Bolt's stored animation Center Value Plus this animation delay value which we know is currently 22 and multiply by the frame time constant which we know is 16.6 this equals to a value of roughly 365. so this animation frame will have 365 milliseconds of delay moving on if this time has exceeded we'll first store the previous frame time value to the animation timer property then we'll increase the animation frame by one for those who are keeping track this is very similar to how we've done the animation Loop in the fighter class the thing we're going to do slightly different here is that we're going to set a new animation to lay value each time their bolt changes frame the original game seemed to have some Randomness to the animation delay so we'll simulate it here too we'll set it again to the base value of 22. we'll give it some wriggle room of eight frames either way by using the math random function and multiplying it by 16 and managing gates from that also like before we don't want the animation French to exceed the animation arrayline so we'll just do a quick check here and reset it back to zero if it has now that we have the vote animation set up we can move on to drawing it let's create a new drawbolt function above the main draw function passing in the context as per usual we'll then move the original draw frame call over to this function so we can update it to make things easier for later we'll create a new property within the bolt object at core position to store its X and Y coordinates with that in mind let's also add a camera parameter to the function too you'll then move the X and Y values from the draw call and move them to this new object I'll off the Y position however we're going to apply the bolt animation we've just set up we'll take the camera's y position and add the bolt animation to it based on its animation frame we'll now replace the missing X and Y parameters in the draw call with these new variables and to complete We'll add a call to this function in the main draw call in between the two current draw frame calls to ensure they are drawn in the right order and over checking the browser and the bolt is bobbied up and down as expected as you can openly gather the Volt's y position is changing based on the animation array using a random delay between each frame which gives it a little more life in fact the character on The Vault seem to be lacking that life at the moment so let's look to get them animated too as all the people on the boat are basically just the sequence of animations let's add a new generic class to contain this logic first in the entities folder we'll first create a new folder called stage which will contain any entities and classes that relate to stages in this new stage folder we'll start by moving our stage class over so it's then I'm going to create another folder called shared which strangely will house any entities that is shared among style stages not just cans in this folder we'll then create a new file called background animation and set this up as a new class as we've done before as mentioned as we have numerous background animation entities on each stage this class will contain all the logic for those so that they are in one place the Constructor will take a few parameters to configure The Entity though we'll pass on an image reference which will come from our stage a frames object that will contain all the animation Frame data and then the animation details itself optionally we'll also allow a starter frame just in case animation requires starting out of sequence we'll then pass these on to the local properties within the class as we've done before also adding the update and there are still functions again to follow our usual entity pattern within the draw function we'll then take the frame key from the animation based on the animation frame and use it to get the frame Dimensions from the frame map object finally passing these onto the context scroll image call Standard stuff so far the only difference is that we're passing on the X and Y parameters onto the function which will be controlled by the stage class to the update function now again we'll follow the same logic as we've done before for the animations in the previous classes taking the time object and comparing it to the store time object for the animation and delay and then increasing its frame if the frame delay has been exceeded as per usual too we'll also reset the frame if it has exceeded the animation length while updating the frame delay and timer in preparation for the next animation frame cycle if you've been following the series hopefully you're starting to see a trend here as we start to fill out the entities update and draw functions if so none of this code should really be unusual to you as we've moved the stage class file let's not forget to update the import references within the Street Fighter game class and the stage class itself while in the stage class let's go ahead and import the new background animation class too okay let's now move on to setting up the background animations which we know are the people on the boat cheering our fighters on let's add one of these to the Constructor referencing the ship working from left to right means we'll start with this baldman we'll add a new local property and create a new background animation calling it um polterman why not I guess we'll pass on our image reference and then from the animation and its frame data I'll copy these across as I prepared this code earlier but ultimately these follow the same structure as those in the fighter entity classes just to quickly recap each frame has a unique key value pair the unique screen key has an array of four values which are the bounded box on the image container the frame of animation for example our bald man has three unique frames which are then used to map out this animation in the last array the animation sequence contains a unique frame from The Frame data and the amount of time or delay this Frame will be shown for as for all your characters on the ship they all follow the same process using an unique local property name to represent them although rather than typing them all out I once again have them prepared so we'll copy them over here please pause the video if you wish to copy the code or if necessary why not become a patreon where you can gain access to the code directly details are in the video description sorry look over either way we'll now move on to the main update function and add these new properties there calling that individual update calls passing on the time in the same vein now in the update Vault function we'll call each of the entities draw function passing on the context and the Bolt's precision as the base and Y coordinates then for each we'll offset these values to align them correctly to their natural positions on the volt image with another check in the browser it will seem all the characters are now animating as expected with the exception of one the guide to the right of our original Barman character this is because he actually doesn't seem to follow any set animation for what I could see in the original game for this reason we'll have to do something different from him personally although there is one animation we can add first however and this is the American flag on the other boats to the right this too can use the background animation class we just created so let's add that first back at the top of our Constructor we'll again follow the same process as the others first copying over the predefined data for the flag local property using the same structure as the other background animations then in the update function add in the flagged update call there folding on the time for the flag's draw function as it's attached to the sky and ocean background layer let's do a small refactor to help with its positioning we'll first create a new function called Draw Sky ocean and in the same vein as the drawer bolt function we'll pass on the context on the camera and we'll move the current draw frame call from the main draw function to this one and then replace it with the call to the new function instead similar to the bolt function we'll create a base position value for all the orbitals in this function too although as this image only moves on the x-axis we'll just need an X variable which I'm calling background X we'll then move the map.flor function and its contents over

to it and replace it with this variable with that change we can now add our flag's draw function to this function too using the background X variable while offsetting the necessary x-axis to a choice a line correctly to the sky notion background image let's quickly check the browser again and it would seem the flag is now happily flapping around in the Wind on the boat in the background okay to complete the background animations let's now tackle the gray trench coat guys animation as this is a special case we'll first had his Frame data to the phrase map object instead then we'll add a new local property to hold its animation details just like we did with the boat object adding it just above that one notice the absence of the animation property though we'll be manually producing that in code this time around so under the update bolt function let's create a new function called update gray suitman for the lack of a better name here we'll repeat what we've done before comparing the time's previous value by the entities animation timer plus the animation delay values as for the animation itself we'll be flipping between two frames of Animation which performs the guy's head bopping up and down motion as seen here by inverting the variable with a knot we'll be doing this on a random delay to give it some variation similar to the bolt animation above I'm using a base value of 100 milliseconds but with a variation of a further 900 milliseconds per frame finally we'll also reset the entities animation timer for the next cycle once complete we'll add this new function to the main update function to get this entity drawing to the canvas we'll go back to the draw bolt function and add a new draw frame call we'll use the entity's frame string prefix of gray suit and concatenate the animation frame property to this string as this property flips back and forth between zero and one we'll need to add a 1 to it to ensure it matches our frame Keys we'll then use the bolts X and Y position as a base position and again offset the interstate to align it to the correct position on the bolt image and with that we'll have another quick check the browser and the great trench command seems to be bobbing his head along with the numerous onlookers which is great as it means we've completed all the background animations so let's now move on to the floor and look to add the Fable clever 3D screwing effect as it's not really cutting the mustard at the moment in its current form we'll add a new class file to the shared folder next to the background animation file called skewed4 this class will take a number of parameters in its Constructor to allow the class to be reusable as I know some other stages use vary to the sensitive for such things as ceilings or on this in a possible future video but for now we'll fold on the image reference which will be on by the stage itself and the box dimensions that contain the floor graphics on that image we'll then create local properties with the same names and pass those on next we'll add a draw function which will take the usual contacts and Camera properties but also a y position so we can pass on where we want the floor to be drawn from the stage class the side will first deconstruct the SAS variables from the dimensions property and pass these on to a context scroll image call using the local image property as the image source notice how both the X and Y destination requirements are utterly zero here we'll come on to the reason for this in a second but with this in place let's move back to the stage class and update the code there so that it calls this new class let's add a new local property called floor and assign it to New instance of the skewed floor class passing on the stage image property and the dimensions from the stage floor Flames key we'll then move down to the main drawer call and replace the current draw frame call with the new floor properties drawer call I'll cut the X and Y position values and store them in memory before doing so however following the usual Trend this call takes the context and Camera arguments but will need to pass on the original y value of 176. with the stage class now set up to use the new skewed floor class let's jump back to it and get the floor working as it did previously before we started up snatching out the new code I'm going to introduce a new context function called set transform we'll go into detail about what this does in a moment but in a nutshell it works very similar to the transform function we've used previously in that it allows us to apply transformations to any future context draw our calls either way it takes six arguments the first four I'm going to be using one zero zero and one for now but for the last two I'm going to paste in the original X and Y positions with crocodilia from the floors original draw call the place in the 176 with a Y parameter as we're passing that value into the stage class anyway and that should now get us back to where we were before we made any changes although if you remember our previous running with Transformations you know that we should really reset them back after we finish using them as you could cast some unwanted Behavior so for this I'm going to introduce two more new contact functions to help with that the first is the save function this ultimately saves the contact State into memory which includes the current transfer Matrix so we'll add that before any context calls in this function then we'll add the second which is the restore function this as you can probably guess restores the save states back into the current state overriding any changes we've made in between thankfully this includes any Transformations we've set great stuff let's now check how this looks in the browser to ensure we've not broken anything and it doesn't seem so the floor is still being drawn as expected and moves as required using the camera okay before continuing on with the code let's take a small break and briefly explain how we'll be using the transform Matrix to apply the floor effects like the original game now we've been using multiple layers of backgrounds and moving them at different speeds to create the illusion of depth in 2D games this is called parallette scrolling this simulates certain distances away from the camera if you count the floor as ceilings however Street Fighter 2 uses that need that relied on how the hardware updated its screen Graphics Hardware at the time would generally for the frame buffer line by line to the screen top to bottom knowing this games like Street Fighter could interrupt their drawing sequence and eject small sections of code to manipulate how this line would be drawn to the screen meaning it could horizontally offset the floor or ceiling layer on each vertical line as it was being updated progressing down the screen this is why the flow graphic looks more deformed on the outer edges as it was decayed for this image manipulation although as you can see from this example once the image has been correctly adjusted on each line horizontally the ones the farm sections now appear to look correct in essence it's basically the same effect as parallel scrolling in that you updated the graphics at different speeds based on the camera's horizontal position however rather than it being applied to multiple whole layers or images it's applied directly to one layer or image and specifically line by line putting this all together produced a clever but fake perspective effect impressive stuff as per our version though we don't have access to such Hardware trickery on the web but luckily for us we can definitely simulate it with a similar 2D transformation effect known as skewing Skilling does exactly what we've just described by applying a slant to an image you may be familiar with this already to be fair as CCS also has a screw function that can be applied to the transform property but that's a topic for another video in terms of the canvas API we are able to perform skewing with the contacts transfer Matrix as you've already seen we'll be leaning on the set transform function for this so let's quickly explain how that works too the set transform function has six parameters that all control the viewport's display Matrix these allow you to perform a few different transformation effects which fully enough one of those is skewing parameters one and four control scaling while five and six control positioning which we've just used and specifically for the floor two and three allow us to manipulate the vertical and horizontal skewing positions respectively although to be fair for the floor we're only interested in the horizontal value applying a negative value here will make the drawing function scoot to the left but as a plain positive value will make them ski to the right with all that's been said that's all there is to it if you play a calculation based on the camera's exposition to this value this should give us the same effect as the original game so let's jump back into the code and apply what we've learned in this good floor class we'll change the parameters of the skewing arguments from zero to the values I found to work quite well starting with the X cubing position the third parameter we'll use the base value of -5.15 and manage the camera's X position which itself deducts the stage width and Stage padding values to complete we'll then divide this value by 112. in summary this gives us a value between minus 1.7 and 1.7 depending on the camera's exposition then for the transform's X position the fourth parameter we'll replace what we have and start with the base value of 32 and deduct the camera's Exposition which will divide by 1.55 and that's it you should now have the transform screwing as required for the floor so let's take another look in the browser and see the results with the transform now being affected by the camera's X position the floor seems to be screwing correctly in relation to the Fighter's movement I'll be honest here though after many hours of tweaking these values they might not be 100 authentic to the original game but as you can see the values are certainly good enough to at least prove its concept you may come back to this in a later video to refine what we have in fact why not to experiment with these values yourself and report back if you find better alternatives although before we move on if you look closely at the bottom of the screen we're incorrectly skimming the vertical section of the floor so let's fix that first back in the stage class we'll first deduct 16 pixels from the floor's height in the dimensions array as this is the actual height of the floor we want to skew let's then reuse the old frame Key Stage floor as we currently have no use for it and rename it to stage 4 bottom instead will update its Y and height position values just to cover this bottom section of the floor then at the bottom of the class we'll create another draw function as we'll need to draw this new bottom frame with the skewed floor we'll call it draw a floor and move the current skewed floor drawer call over to it and yes adding a call to this new function in its place and finally We'll add a new draw frame call to the new stage floor bottom frame we just set up we'll use the stage padding as a base Exposition while minusing the camera's X position and using 232 as the base y position notice how we've multiplied the camera's acquisition by your value greater than one here which means it will move slightly faster than the camera again solidifying the illusion of depth another quick check in the browser and the bottom section of the floor now seems to be corrected and moving in relation to the new skewing effect okay now that we have this floor updating as expected let's move on to populating it with the missing background objects starting with the bollard's nose to the boat in the frame's map object we'll first add the Bollard keys and their frame Dimensions the bollards come in two sizes which I'm calling small and large but we'll focus on the small ones at the moment as they sit on the floor behind the player then just like before we'll move down to the bottom of the class and create a new function called Draw small ballads as we'll be drawing two of these small bollards we'll set up some temporary variables so we can use them for both cameras Exposition first with its camera speed modifier of 1.54 and then a y

position of 166. we'll then draw both of these smart ballads on screen using the draw frame function using the small ballad frame key and the template variables we've just created and then finally add the chords to this function within the main trial function check in the browser shows that we now have two bollards behind the fighters and they move in line with the camera's movement great so we now just have one more object that's drawn behind the fighters to add and that's the barrels and boxes that appear to the right to the stage they'll follow the exact same process again with the Barrel's background object we'll first add the new frame key barrels and its Dimensions to the frame's map object and then move down to the main draw call and add a new draw frame called using it as this objects moves at the same speed as the camera this object does not required any modifier however and honestly that's all we need for this one right now so again just making sure everything works as expected we'll check the browser to see the results moving to the right we can see the barrels and boxes now correctly slid in when the camera is at the furthest right to the stage okay with all the background objects now in place the last thing we'll add in today's video will be the foreground objects these objects are still background objects but actually get drawn last and in front of the fighters a number of the stages have these type of objects but in regards to Ken stage these are yet another set of bollards so let's jump back to the code and make the necessary adjustments to accommodate these follow our stages moving forward I like to break tradition and move away from just one main draw function as we now know stages have multiple drawing layers those that happen before and behind the fighters and those that happen after them and therefore in front of them with that in mind we'll start by creating a new function called for our foreground to house these new draw calls likewise we'll now rename the current draw function to draw a background instead with that change this now meets the stage class no longer follows the standard entity interface for that reason can no longer be part of the main entity array within the street fighter class as we've removed the main crawl function so back at the Constructor of the Street Fighter class we'll create a new local property called stage and create a new instance of the stage class minumi can remove the previous instance from within the entities array then within the update function just like the camera property in the previous video we'll call the stages update function here individually instead passing on the same arguments similarly in the draw function we'll call the stage a new rename function draw background before the entity file Loop then in staging all of its background elements will be drawn before any of the entities within its array we'll then add a call to the draw foreground function after the file open to ensure this layer has been drawn after any of the entities and with those changes we should be ready to add the foreground elements to the draw foreground function so back in the stage classes Constructor we've already got the frame data for the large Bollard so we can go ahead and add the draw frame calls to the draw foreground function but before we do we'll first set up some temporary variables like we did in the draw smile bollas function earlier as we'll again be drawing multiple bollards here we'll start with the midpoint variable which uses the stage midpoint and the stage padding constant values to get the middle of the stage then just like before we'll get the adjusted cameras X and Y positions using an XP modifier of 0.958 and a y position of 200. we'll then make two calls to the draw frame function using the Bollard large frame key and these temporary coordinate values adjusting 147 as a base X position on each side of the midpoint and if we check the browser we should now have a complete background that replicates Ken stage from the original game with both the background and foreground bollards working as expected we've made some great progress here so I think that's where we'll call it quits for today's video as per usual though there's a few little refactors I'd like to make before we actually do that the first thing we want to do is to move the coal we just rolled for the large bollards over to its old function so let's create a draw a large ballads function and do just that and then make a call to this one from the draw foreground function and just to keep things tidy we'll make sure it sits next to the smart bollards function as we've been making changes to our enters array I like to do something similar for the overlays the reason for this will become more apparent in the future videos ultimately overlay should be drawn last over the top of everything else so it would be smart to have a separate draw list for those so in the Street Fighter game class we'll add a new local property called overlays and move the status plant and FPS counter instances over to it then in the update function we'll copy and reuse the entity file Loop and make the necessary changes for the new overlays array looping over its list we'll do exactly the same within our draw function too looping of an array but this time column your overlay scroll function instead a small check in the browser and yep bizarre we've not broken anything okay let's continue the next change on the list will be to rename the stage class to Ken stage after getting to update the class name within the file along with it this makes it more obvious what the class is for and furthermore allows us to add the stages for other faces more easily if we ever wanted to although as we renamed the fail We'll add to ensure we update any input references to where necessary luckily this is only in the Street Fighter game class both in the import and in the Constructor similarly we'll do some more foul changes with the next refactor and want to add a new folder called engine and move the input Handler and Camera files over to this this changes a general house cleaning exercise to keep the generic engine code away from the actual Street Fighter game code if you get time we'll look to flesh out the engine code somewhere in the future videos either way with that we've done we'll again need to update any input references we've now broken these include the Street Fighter game class the fighter class the camera class and the input Handler module [Music] but the last change today we'll move the FPS counterclass over to the overlays folder again ensuring we update any import references which luckily for us the s-code was smart enough to do this for us this time today we'll have another quick check in the browser just to ensure we haven't broken anything and it seems everything is still working as it should okay and that's what I think we'll call it quits for today so let's quickly recap what we've completed in this video we now have Ken's stage pretty much complete at this point we've added all the background animations which include the bolt bubbling up and down on the water along with its number of characters to give it some life but also the flag on the boat in the distance we've added the skipping effect on the floor to give it the infamous 3D feel while adding the various objects that set atop it furthermore solidifying the feel of depth as we scroll back and forth and finally we've added the initial scores along the top of the screen which we'll come back to in a future video once we apply some Global States hopefully you'll agree the game looks pretty authentic at this point but we're missing the main ingredient to actually make this a Street Fighter game the actual fighting not to worry we'll finally start tackling some of this in the next video where we'll add the basic attacking mousse and apply the hits and attack Collision boxes so yes it'll be yet another big one but first things first let's sign off apologies for the delay between this video and the previous one as mentioned in the previous video and finding these are taking longer to complete at the moment due to exploring the game's more complex topics now and with my delayed summer break this past month they have both unfortunately contributed to the delay of this video so the release schedule will still be a little erratic for the next few parts as I attempt to get back into the code and finish up the topics I have planned for future videos a regularly drop update messages on my patreon page if you'd like to keep up with the latest news but you're all free by the way although our Vlog will probably drop here too at some point over the next month just to summarize visually where we're at and finally thanks again for all the support so far you don't know how appreciated I am both with a patreon page and the new subscribers to this channel especially while I've been away honestly it's been a shock and as you've probably already noticed my patreon supporters will now appear on these end credits and I think that's all for now but as per usual though if you've gotten this point in the video a special acknowledgment goes out to you too you're the special ones hopefully I'll see you in the next one and out [Music]

2022-11-09 08:32

Show Video

Other news