Ep. 112: Sprite Rotation! - Game Programming
The Cherno
·
Intermediate
·11y ago
Skills:
CV Basics50%
Key Takeaways
Implements sprite rotation in a game using C++
Full Transcript
hey what's up guys my name is a chano welcome to episode 112 of game programming we are back it has been like over 6 months I think probably at least close to that which is absolutely ridiculous but we're back and hopefully I'm going to start pumping out videos a bit more often for you guys so obviously the reason I was away was because of University and whatnot I'm back I'm it's the holiday season I'm actually not going to be studying next year I'm just going to be working so that's a bonus as well basically there should be a lot more videos and uh so don't get too mad at me okay I'm sorry but you know I did what I had to do okay anyway I promised you guys we would do Sprite rotation so I mean I can't just come back here after not making videos and break my promises so we're going to be doing Sprite rotation today now few things I want you guys to realize is that Sprite rotation is not going to be it's not going to look completely Flawless and it is going to be uh slightly difficult to implement okay which is fine we can do it okay I know we can but just keep that in mind okay and one of the reasons is if we take a look at our Sprites right so if you go into your resources folder in your project and go to something like let's just say textures because the main thing we're going to use this for is projectiles right so or at least for now at least so in um textures shetes projectiles if you look at our wizard projectile or if you just look at our projectiles in general let's just edit this right in in our beloved paint.net you'll see that um we're dealing with pretty low resolution Graphics okay we are dealing with fairly low resolution Graphics so what we're going to do right now is create a projectile for us to rotate if we rotate this thing we're barely going to see any difference right it's basically a circle I mean we are going to see a bit of difference obviously and there is this thing here and it's not you know it's not completely it's not really you know if we rotate it on 45° or whatever there will be AIT a bit of a difference but let's just draw something that we can actually see in action like a line basically we're just going to make like an arrow projectile so I'll copy and paste this thing move it all the way over here um and Let's uh let's just make this Arrow so I'll delete this I'm just going to draw this black line here just for now so I can see the bounds okay so this arrow is going to be pretty beautiful um we're going to draw it in I don't know we're not going to really there aren't really any rules to follow when you're drawing this by the way so don't be too afraid I'm just going to kind of Make it try to make it look good which is always a struggle but you know that looks terrible is that right that's right okay that's symmetrical and then we'll give it a bit of like a tail you know cuz that's what arrows look like um all right maybe one less how's that look that looks pretty good I think um there you go so there's our Arrow um it looks pretty good so so rotation right this is going to be rotated now we can rotate this on any degree that's how we're going to make this we're not going to make it so that we can only rotate it by 90 now this was a very heavily requested topic I'm not going to lie Sprite rotation was very very very high up there in terms of how many people asked for it okay and I of course I do read the comments to my videos so I was reading through uh some of my videos and people were pointing out the fact that it's pretty much impossible to do because of the fact that you'll notice that if I try and rotate this right if I can even remember how to do it in paint.net okay here we go so there there's this little rotation thing if I rotate this yeah you will notice and let me just change the quality nearest neighbor so it doesn't anti-alias it um if I rotate this you'll notice look what's happening yeah if I rotate at 45° or something close to that look at that suddenly our Sprite does not take up our original size does it yeah a few things have happened first of all it's takes up more size right it's wider and it's taller than it was before second of all it looks like absolute rubbish but we'll get to that later and you'll also notice there are blank gaps there are void pixels that aren't there and they're basically over here where I'm just moving my mouse right now okay three issues okay the big one is the fact that it now takes up more width so how are we going to solve that and we are it's very easy to solve that okay it's also very easy to solve this problem the problem that we actually cannot physically solve is this okay this is kind of what it will look like all right unfortunately why why because it's just too low Fidelity right it's just too low resolution there's it we have to deal with this okay but nonetheless if you rotate at 90° you can see it's perfect okay and if we rotate at um 90° anywhere 180° whatever yeah it looks pretty good okay and I think our end game is going to probably look a bit better than this I don't know why this looks so bad but the point is um with low resolution Graphics you're going to get these kind of I don't know problems so so that's the idea okay but the two things that we that people were that seem to be afraid of was the fact that you can see the Sprite is now bigger okay it's kind of spilling out of its bounds so one thing I would just recommend you guys to do when you're drawing a Sprite don't make them overly big okay if you want them to be rotated properly so don't make let's just say if I I don't know why I'm drawing this stuff in black and white but let's say I just wanted like I don't know I had this here for some reason you're going to notice that as I rotate this right it's actually okay no sorry it has to be close to the um my bad it has to be close to the bounce so I'm just going to continue drawing black and white here but if I had something up here in the corners basically like I don't know this red kind of thing yeah like this red thing here and I was to rotate this Sprite you guys are going to see that it's going to go off right it's just going to go off it's going to go off the screen yeah so just keep that in mind try and draw your stuff to the center so you can see that the arrow that we drew is perfectly in bounds which is fantastic okay so we don't need to worry about that but that's just a heads up okay so I really don't know what the people was I don't know why you guys were so scared about um about uh rotation in terms of spilling out of bounds like I I would have thought that I taught you guys how to handle out of bounds stuff and that's simply by skipping those pixels and not rendering them and not you know obviously just yeah I mean clipping it I mean that's really how simple it is and to do with this we can just fill it in with a void color that we can then make transparent such as pink okay so don't worry this is not that hard the algorithm is a bit hard but we've kind of done it already okay we've subconsciously done it already so I'm going to put this Arrow here now I know this is in the wizard wizard Sprite sheet so really I don't know why it's this arrow is here but we're going to call this projectile Arrow okay um it's going to be in the wizard yeah just to save time right you guys can organize this price however you want obviously it doesn't really matter so the first thing I'm want to do is actually get this into the game yeah um if I go into Sprite uh sorry not Sprite sheet Sprite is what I meant now I'm selecting all text what am I doing well now I'm typing here it's been a while since I um made any videos on this um so projectile Sprites here yeah we'll copy and paste this we'll call this projectile Arrow okay we'll make sure it is the first you can see this is 16x 16 size pixel uh res 16 x 16 size pixel that's great 16x 16 size Sprite okay that's pretty low rars that's why this rotation won't really look very nice but it will still work that that's what's important um and because the projectiles are traveling that fast you probably won't even notice okay so projectile Wizard and it's Sprite number one so if we go back into our wizard projectile which we Fire Let's actually launch our game and see if it even works here it does I don't know why it appeared on my other monitor but here we go so it says hey what's up guys My Name Is AO great that's what I said at the beginning of the video um so we'll comment that out so this font. render yeah get get out of there um and it keeps bearing on my other monitor but anyway here we go yeah this is what it looks like um we're all good there those are our projectiles let's hop into wizard projectile and change this to be uh projectile Arrow so now we're dealing with our new projectile okay and there you go so we're shooting arrows let's get rid of that black border as well that black line there that we had in um paint.net so here we go gone all right fantastic so now you should be seeing an arrow that will is obviously not rotating right now but will okay there you go there's our Arrow fantastic so let's get into this um how we going to do this well it is a graphical operation so I'm going to stick in this screen right now we could stick in this bright and we'll see okay we'll play around with this we'll get it to work the way we want it to work but first of all let's focus on actually getting it in the game okay that's always good so right now the way we render projectiles is by calling render projectile this method right here I'm going to copy this method and I'm just going to add an angle now this angle is going to be a double it's going to be in terms of radians okay where the reason it's going to be in radians and not in degrees is pretty simple okay wizard projectile's angle is stored already in radians and also cosine wants radians instead of sign right all the trigonometry operations want radians not degrees and it's already in radians so there's no point having it in degrees it's in radians fantastic get used to it okay okay um now over here though uh instead of getting these Sprite pixels we want to actually physically rotate the Sprite okay to rotate the Sprite we're just going to modify its pixels now we're not going to modify the sprite's pixels okay we just want to make a copy of them we don't want to permanently modify them because next time when we go to rotate it it's already rotated okay apart from the fact that Sprites are static as you know which is a good thing um what I mean by that is there is only one copy of this projectile arrow in our entire game if we rotate it and we're we actually modify it it's going to be different for the next entity that shoots okay so we want to make a copy of these pixels so straight away let's make a private uh method here okay it's going to be called rotate it's going to return an integer array which is going to be the new pixels that it creates okay it's going to take in the old pixels which are essentially the non-rotated Sprite and it's going to return the rotated Sprite um it's going to also take in a bunch of important information such as the width and height since we're not passing in a Sprite you know we could actually pass in a Sprite honestly but we're just going to keep this nice and simple okay so we're not going to we're going to keep this very Universal so it can really act on any pixel array and finally we also need the angle we actually need two more methods as well just to make our lives easier but you'll see that um a bit later on okay so first of all I like to start off methods by writing what I really want to return which is going to be uh the result okay so the result's going to be a new um a completely new pixel array right a new integer array with the same size as our old one okay width time height okay WID time height should also be the size of this now how are we going to call this pretty simple okay it's going to be pretty simple right now we get the Sprites pixels and then we whatever we look up that index what we want to do is instead of getting the Sprites pixels we're going to get our own pixels so I'm just going to call RP R pixels okay this going to be our rotated pixels that's going to equal we're going to grab this cut it it's going to be rotate so we're going to rotate those pixels the width and height is just simply going to be P do get Sprite size I don't know why we're using um uh get sprite. size here if we've got get anyway I don't know um and then the angle is obviously going to be the angle that we specify here okay in radians so there's our pixels we're going to replace them with this over here and now essentially we're just dealing with rotate okay that's good that's all done now um if we were to run this it will give us a black um because all these integers will be automatically initialized to Zero by Java okay anyway let's get start off with the rotation so we actually need more methods we need two methods okay one's going to basically deal with the X side of rotation and one is going to deal with a Y side of rotation okay I'm not going to hand execute and basically explain this step by step because it will take too long but I will give you guys a rough idea of how it works and it's really not that hard okay it it might seem that way but it's not so first of all we'll be returning I'll just call this rotation X okay I know I'm kind of breaking the Java convention I honestly I honestly think it looks better this way um but rotation X okay so this is going to you can see it returns a double okay this is very similar to how we do projectiles okay when you think about it when you think about it right what are we really trying to do when we rotate we're trying to let's just say we're rotating by 45° okay if I copy and paste this and I were to rotate this by about 45° well that's exactly 45° there right that's what I've done um what's actually happening well we're taking and I'm let just use a different color for this maybe like green we're taking let's just say this pixel over here and we want to move we want to rotate it by 45° so we want to put it just about there okay what are we actually doing to it can you guys notice what's happening to that pixel how is it moving well it's moving you know it's moving right and then down okay so it's actually physically moving now what angle is it moving on roughly okay it's moving on 45° okay that's the angle that it's moving in we want us to rotate at 45° clockwise which means it goes Nega 45 now why is that way negative that's one question I actually get quite a lot so I'm going to answer that real quick if you guys are not familiar with the unit circle get familiar with the unit circle okay if you've done maths in like high school or whatever you you probably know what I'm talking about okay and this is what the unit circle uh looks like let me just show this real quick here I wasn't planning on showing this but you know what I thought it was important enough this is what the unit circle looks like all right now what you'll notice and what really is important for us is the fact that 0 degre you can see is right okay that's 0 deg it's going that way positive 90° is this way okay 270° is over here it's also if we go negative obviously we're going down so that's why we're going negative okay a lot of people think 0° is up it's not okay 90° is up 0° is just horizontally right okay down is either 270° 3 piun /2 radians orun /2 radians or 90° okay so thus when we go this way we're going negative 45° that's the angle okay now do we know how to move pixels based on angles yeah we do that's what that's how our entire projectile system works right in our projectile system look at this NX and NY what do we do we take the cosine of the angle and that's our new X or that's the DX that's the Delta X that's the direction along the x- axis where we actually move to okay and all we do to move our projectile is move it by that amount every frame okay or not every frame but every update all right that's how it works this is the same way that this is going to work all right there's nothing cryptic about this we're going to send this pixel and move it -45° that way because we've rotated it by 45° and even I can't even write 45 de at this resolution so there you go that explains the bad um rotation but that's that's the idea all right does that make sense I really hope that makes sense but that's the that's basically how it works okay if we rotate 90° obviously that pixel is going to be somewhere I don't know here okay and you'll see like if we rotate it you'll see that all right but the idea is you can see that we've moved it -45° all right that's the idea um yeah so the first thing you'll notice is well you'll notice a lot of things but if we rotate clockwise we want first of all we want to say that we want to say that clockwise is positive I know that goes against the unit circle but when we think about about this like as a human we think clockwise if I rotate this 90° I'm not rotating it um I'm not rotating it this way yeah that to me looks like 90 even though technically it is positive 90 okay so we want to reverse this that's why we're going to need to use negative angle so you'll see me use negative angle quite a lot here that's why okay it's because we're kind of overwriting the unit circle and doing our own rotation thus if we want this to be positive if we write 45° for this it act it's actually - 45 thus we need negative angle okay but that's how this works so how do we figure out the Delta X Delta y whatever you want to call the variables NX n y new X New Y how do we figure out where to move that pixel these are where these methods come in rotation X will figure out where to move it on the xais now this is going to take in a few things it's going to take in the angle all right right it's going to return a double which is going to be the new position of the X essentially based on that um it's not it's not even going to be that though right because we'll actually do the animation in rotate itself all right and by animation I mean the the moving of this pixel down to this pixel all right um but what this will do is simply return um either okay this is where this comes in as well we'll put double X and Y now these are not the positions these are whether or not we essentially want to do it on each axis okay and I know it's weird because you're rotation X but there's X and Y but you know we'll we'll get into that don't stress too much so the cosine is going to be very simple it's going to be math. cosine now we don't need to convert it into degrees it's already in sorry we don't need to convert it into radians it's not in degrees is already in radians so we simply pump in the angle here and we're good to go um now uh there will be one and more adjustment we have to make but we'll do that later after I demonstrate this uh as it is right now so um we'll return X multipli by the cosine okay plus y * negative s all right and how does this work this works exactly the same way that basic I don't know basic angular motion kind of works right going um incrementing variables based on a pixel and separating the axes to get it in terms of X and Y essentially converting kind of vectors into more or less Point space where we're actually dealing with X and Y rather than a direction and a length which is kind of what a vector is anyway getting back to this we've got rotation X we've got rotation y now this is going to be the same I at least these two are going to be the same this is going to be slightly different all right x x is going to be multiplied by S and Y is going to be multiplied by positive cosine all right simple that's the way it works okay that is how we can trans and that's all that's really all we need to get um the direction for X and Y of this okay I mean we've got the direction but to get the I guess the absolute position the new absolute position of it okay so back in result or back and rotate rather with result what we're going to do is we're going to have to figure out a few things first of all we need a new position we need a new X and Y position for uh this pixel all right so this pixel has two coordinates X and Y right um we need the NX or the I guess the amount we need to move by we don't know we we need to basically know the direction okay we don't know how far we want to move it yet that's what the four Loops that we'll see later we'll figure out this will tell us the direction it needs to move in so -45 right that's what we kind of figured it out to be so uh I don't know what to call this um I'll call it probably something like NX I mean we'll go with NX just because we chose it here okay but this is going to be the x coordinate of the X okay which is going to sound a bit tricky but don't worry it's going to use rotation X it's going to use negative angle right I explained why it's because of the unit circle in the way that we perceive this this is going to be 1.0 this is going to be 0.0 now you'll notice that if we make y 0.0 it's going to completely cancel out y cuz y multili by0 or Y multi by 0 is0 so th it's really x * cosine okay that's how we can use this all right um so that so we were only interested in the x coordinate now this is the y coordinate all right so the y coordinate is actually going to look exactly the same except it's going to use rotation y okay two more of these so now we need them to do for the Y pixels all right so we're just going to literally switch the names just like that and then over here we're going to switch this to be on the Y so it'll cancel out the X okay pretty pretty smart if I do say so myself all right there you go that's that's it's it's not like I created this I mean this is really common stuff to do but that's the idea now finally what we actually need is an initial uh rotation pixel value okay to do that I mean well we're just going to call this x0 I think I'm running out of names here um cuz we also need to the integer conversion so there's also that but we'll set this equal to rotation X and this will be negative angle as well but this is going to be a bit different all right it's going to be negative width / 2 negative height / 2 this is probably the most complex part of this entire algorithm and plus width / 2 okay and the Y version of that is going to be kind of simple as well it's going to be rotation y obviously and it's going to be the exact same except we're going to add on height / two instead of width okay what is this going to do okay that's the tricky part this is going to be the initial value of the pixel before we add on all of our actual direction or directional vectors okay this is the initial value of it okay based on the angle now where this goes and whatnot this kind of depends on I should say this this kind of depends on the source pixel okay so all the all the colors are yeah remember all all the all the stuff that's in pixels that's just a bunch of colors so the really the only reason we need this original pixels array is just to see which color but when you think about it we know the size we know where we want to rotate it to yeah so we don't need color for that we don't need this pixels array at all the only reason it's there is so that we know which color to put where okay but the point is we don't need it to figure out rotational vectors and whatnot okay we know that it doesn't matter what is inside these bounds yeah if I rotate at 45° it's going to it doesn't care what's inside okay that is what this does that's why it's just some number play okay now we get to the actual rotation so we know we we know the initial positions we know the V the positional ve I shouldn't really call them vectors because they're separated but um we know the the the separate X and Y directions for travel essentially so now what we need to do is actually go through the for Loop that will move the pixel into the right location yeah so we figured out this this is essentially X x0 and y0 we figured out this that's where I mean we haven't figured out this yet that's what the for Loop will do in a minute but we figured out which direction this lies in and how much we need to move on the X and Y okay so now all that's left is to actually move this into here all right so how are we doing that well we'll make a nested full loop here it's going to do this for every pixel in our array so thus it's going to be withth by height as I'm sure you guys are aware all right now I am going to make um X1 and uh X1 and Y On's just because we'll need them and you guys will see that in a minute but um basically these are just copies of the initial starting locations cuz we're going to animate it now so to animate it based on X and remember we have to animate it both on both on X and Y this is just going to do it for the row so the row if we look at the first row yeah that's going to get rotated and become somewhere here so obviously both the X and Y position changes hence we need the X and Y um so the first row yeah what that's what's going to happen to that is essentially okay let me think about how I'm going to write this to explain it better first of all let's just convert them into integers right X1 and y1 we'll convert them into integers because we need to draw them in terms of integers the reason I've got them as doubles is obviously because all these operations are using S and cosine and we want them to be fairly precise and I made a massive mistake here make sure this says sign okay so we got the signs and the cosiness obviously um uh so we'll uh why so yeah so they deal with s and cosine obviously we want some pretty high level precision and in the end we just convert it into an integer so that we can actually draw it since BX we can't have half pixels or whatever they need to be integers especially because this is an integer array okay we've got that now so what we essentially want to do is set um a variable here we want we just want to really set the result right now what index in the result x + y * width right pretty basic stuff same way we draw it yeah this is an accent this is a simple width height XY array sorry um for Loop structure thing so we obviously just want to draw it that way um and then we just set that equal to the color okay what is the color the color is just based on the original um array now what index in the array though it's going to be our rotated index that's what we're trying to figure out yeah we already know what the WID and height of the new one's going to be all we want to do is basically move this pixel right and the way we move the pixel is we figure out um we figure out the index of this pixel based on where it is in the old array and copy it into the new location in the new array okay that's how it works that was a mouthful to say bit so xx+ y y and guess what the width is going to the same isn't it we're not changing the width so the width Remains the Same the only thing that changes is the actual index okay and that's going to be or the x and y coordinate I should say because the whole thing's an index um and that's going to be based on our calculations here so that's the result yeah all we do is we increment XY X1 and Y one which are the ones we use kind of for X here we increment them based on the direction that's it so nxor X is what we use here and nxor Y okay so you can see the first kind of thing refers to this for Loop okay so for the next one we'll use NY Y and Nyx and NY y okay but that's the idea here um at the end of this same thing exactly except it's on x Zer so we're animating this okay based on the Y so this is going to be the hor the vertical pixels all right that's it this is basically the entire algorithm okay it's quite simple few errors okay first of all we don't clip this so we will get index out of bounds exceptions okay secondly we don't do anything with the void pixel so there's two problems with this that we need to figure out this is going to be a very long episode um I'm considering breaking this up into two actually I probably will okay so we'll get the basic stuff working and then we'll um we'll split it up uh next uh next episode so because I really wanted to get my explanation down on this cuz I know a lot of you guys are going to be really interested um so this is uh so we've done this right but you can see that we spill out of the bounds so we need to cover that so how do do we know what the bounds are absolutely less than zero and greater than width okay less than zero and greater than height yeah we know that stuff so what we do is we say that if XX so it's easy to detect right if XX is less than zero and Xs XX XX is greater than or equal to width okay width being the width of our Sprite um make sure it's not if you call this something different make sure you don't go this. width or basically well I don't remove that whole thing or basically if you call this W make sure you don't go width we we don't want the field we don't want the width of our actual window okay which is this width we want to make sure it's the width of the Sprite that's what we're interested in um uh okay and y y is less than z y y is greater than tight so it's easy easy to to detect but then what do we do so now we have to decide I'm going to say we're just going to give it kind of like a void color okay so like pink for example pink is kind of like our transparent color or basically a current a color that will be transparent okay so let's set up a color variable we'll just set it equal to zero for now here we'll set it equal to uh Pink okay which is uh f F f00 FF in terms of a 24-bit um RGB color with uh one B per Channel or 8 bits per Channel that's that right um and uh otherwise though yeah otherwise so else if it doesn't exceed the bounds then we'll set the color equal to this cuz these are the bounds that we're worried about exceeding so we'll put that here okay and obviously here we'll set it equal to color whatever that color may be either pink if it's void or the actual real color if it's actually Within bounds done okay simple as that that solves two problems the clipping so now this will get clipped okay um and it also solves so let me just so this will get clipped now there you go clipped nice clipping animation for you guys me moving that thing come on work with me here no it doesn't want to move okay the hour case um it's going to clip that right well it's not this is actually part of this but anyway um and it's also going to make sure that all of these white spaces that result from the rotation yeah or in this case I guess You' call them the transparent Parts yeah they will become pink it'll fill it in with pink all right there you go done okay simple as that let's test this out in action so what we want to do um oh let's see this in action I should say what we want to do here uh we're actually we actually already set it up haven't we so all we need to do really is go back to wizard projectile and change the angle to be uh for it to use the new rendom method all right and now let's launch it and see what we see so if I go up over here and I try and fire okay so we're getting a bunch of pink things so and then there's our so clearly we've done something wrong here um so let's go back into the code and see what we missed all right so let's see and it looks like so usually so make sure this is OB uh y1 and why whatever usually all these problems by the way when you get um good I guess experience at debugging you'll notice that usually the problems stem from from you if there's two components like X and Y you just forget to actually use the proper versions yeah so I put X1 twice instead of X1 and y1 and that was the problem okay so if we launch this again what we'll see is um check this out so it's working okay it looks really weird because it looks like this is going sideways let's one thing I really want to do actually is go to Wizard projectile and slow down the size to one so the speed is four not the size the speed uh the speed was four let's put it down to one here real quick and if we go over here somewhere we can see and we shoot you can see it's it's correct yes so it's it is rotated yeah it's just it looks like it's just not rotated properly all right and this comes down to exactly the way it works if we cast it right yeah what is right and that looks like a weird Arrow but right is 0° based on the unit circle that I showed you guys right that's 0° so but we kind of want that to be 0° in a way and then there's that pink void stuff that I was talking about right so there it is and then the other parts are just getting clipped which is fantastic we don't get any index at bounds erors ever um so really the problem is we want to offset the rotation how do we do that well the easiest way to do that is just to go into screen here and instead of going by angle we'll rotate it how much do we want to rotate it by we want to rotate it by netive 90° okay because if we look at this yeah and we um we fire right yeah we want it to be rotated clockwise and remember clockwise is negative on the unit circle so thus 90° 90° is equivalent to PI / 2 radians okay or half of Pi radians okay so we simply go um math. Pi / 2 in our rotation X and rotation Y and that'll just uh essentially get us to the right thing we could have also done this in the angle for Wizard projectile but I thought since this is going to apply to pretty much any anything we do it's better just to put it here in the actual method so if we go back to this thing and we try and launch it you'll see that oh look at that that arrow is heading in that direction and everything looks fantastic again the rotation looks kind of weird sometimes but if we do put the speed up to four um then you'll see that really it's kind of hard to actually notice that the arrow looks weird okay the other thing we get is the pink stuff I'm sure you guys know how to remove that right all we need to do is simply say in the color here that if color doesn't equal our Alpha color it's actually already in there it's just that our Alpha color is set to have a have an alpha Channel if I mean it's even called Alpha color so we should probably go down here and uh add the FF out the front right the reason I did this ways just so that you can actually see the pink um stuff that was getting added in based on the void stuff and now you can see we don't get it so there you go there is our rotation now there's a very kind there's a big problem with it's not really big problem but there's one thing stopping this from being perfect and that is performance okay if we check this out when we go into multiple mobs firing if you look up the frame rate I mean I just dropped to about 60 frames per second okay if you look here in the bottom of the screen and if I get out of here obviously we'll go back up to like 3,000 yeah there you go so what's the problem the problem is this rotation method is being called in a nested for Loop every frame for a projectile that that is an insane amount of times okay if I was to quickly measure how often this rotate method was actually called remember this rotate me method isn't isn't a walk in the park it calls external meth methods like six times right these two methods which are cosine calculations and it's got a nasted for Loop that copies and modifies everything in here okay that's a lot of calls okay that's a lot of data to actually process and this rotate method if I was just to quickly measure how often it actually runs how many times per second um so we'll go rotate Plus+ here we'll make a static integer here we'll go back to game and inside here where we print the per second kind of stuff um we'll add in uh so we'll just go screen. rotate plus per second all right and then we'll set it equal to zero when we're done with that if we look at this and I go down here look at that that is absolutely ludicrous check this out one over 1 million times per second over a million times per second and it looks like it went no less than 780,000 okay that is ridiculous we do not want to call such a heavy expensive algorithm that many times especially because we don't need it that many times once an arrow is thrown its direction never changes okay it stays on that constant angle okay so what we're going to do next time is avoid doing it that many times look if I fire right now it's do zero per second if I fire an arrow 174,000 per second yeah straight away that's absolutely ridiculous so we don't want to do that all right so next time we're going to fix that up and make sure it doesn't do it every frame if you guys enjoy this video please hit the like button um it really helps me out and of course it lets me know that you guys are looking forward to these videos and motivates me to do more if you guys have any questions be sure to post them in the comments below or on my forum and I'll see you guys hopefully like in like 2 days or so um with a new episod of game programming so yeah have a good day guys goodbye [Music]
Original Description
Patreon ► http://www.patreon.com/thecherno
Twitter ► http://www.twitter.com/thecherno
Website ► http://www.thecherno.com
Facebook ► http://www.facebook.com/thecherno
-------------------------------------------------------------------------------------------------
In this video:
-
-------------------------------------------------------------------------------------------------
Website: http://www.thecherno.com
Twitter: http://www.twitter.com/thecherno
Facebook: http://www.facebook.com/thecherno
Subreddit: http://www.reddit.com/r/thecherno/
Steam Group: http://www.steamcommunity.com/groups/thecherno
-------------------------------------------------------------------------------------------------
Outro music is by Approaching Nirvana: http://www.youtube.com/approachingnirvana
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from The Cherno · The Cherno · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
3D Game Programming - Episode 1 - Window
The Cherno
3D Game Programming - Episode 2 - Game Loop
The Cherno
3D Game Programming - Episode 3 - Arrays
The Cherno
3D Game Programming - Episode 4 - Drawing Pixels!
The Cherno
3D Game Programming - Episode 4.5 - How Rendering Works
The Cherno
3D Game Programming - Episode 5 - Playing with Pixels!
The Cherno
3D Game Programming - Episode 6 - Performance Boosting
The Cherno
3D Game Programming - Episode 7 - FPS Counter
The Cherno
3D Game Programming - Episode 8 - Alpha Support and More
The Cherno
3D Game Programming - Episode 9 - Beginning 3D
The Cherno
3D Game Programming - Episode 10 - Floors and Animation
The Cherno
3D Game Programming - Episode 11 - Rotation
The Cherno
3D Game Programming - Episode 12 - User Input
The Cherno
3D Game Programming - Episode 13 - Render Distance Limiter!
The Cherno
3D Game Programming - Episode 14 - Basic Mouse Movement
The Cherno
3D Game Programming - Episode 15 - Textures + More!
The Cherno
3D Game Programming - Episode 16 - Walking, Crouching, Sprinting + More
The Cherno
3D Game Programming - Episode 16.5 - Exporting Runnable Jars
The Cherno
3D Game Programming - Episode 17 - Small Adjustments + Birthday!
The Cherno
3D Game Programming - Episode 17.5 - Creating an Applet
The Cherno
3D Game Programming - Episode 18 - The Beginning of Walls
The Cherno
3D Game Programming - Episode 18.1 - A Few More Things
The Cherno
Episode 18.5 - Creating an EXE File in Java
The Cherno
3D Game Programming - Episode 19 - Rendering Walls
The Cherno
3D Game Programming - Episode 20 - Continuing Walls, Fixing Bugs, and Managing Crashes
The Cherno
3D Game Programming - Episode 21 - Texturing Walls, Fixing Clipping, and Fixing the Mouse
The Cherno
3D Game Programming - Episode 22 - Random Level Generator + Properly Fixing Clipping
The Cherno
3D Game Programming - Episode 23 - Graphical User Interface (GUI) Launcher
The Cherno
3D Game Programming - Episode 24 - Making Our Launcher Work
The Cherno
3D Game Programming - Episode 25 - Writing and Reading Files
The Cherno
3D Game Programming - Episode 26 - Custom Resolutions
The Cherno
3D Game Programming - Episode 27 - Decorating the Launcher
The Cherno
3D Game Programming - Episode 28 - Continuing our Custom Launcher!
The Cherno
3D Game Programming - Episode 29 - Launching The Game
The Cherno
3D Game Programming - Episode 30 - Colour Processing In-Depth
The Cherno
3D Game Programming - Episode 31 - Sprites!
The Cherno
3D Game Programming - Episode 32 - Sprite Mapping
The Cherno
3D Game Programming - Episode 33 - High Resolution Rendering
The Cherno
3D Game Programming - Episode 34 - Entities
The Cherno
Genesis - My Game for Ludum Dare 24
The Cherno
Vlog + Ludum Dare Results
The Cherno
Game Programming - Episode 1 - Resolution
The Cherno
Game Programming - Episode 2 - Threads
The Cherno
Game Programming - Episode 3 - Game Loop
The Cherno
Game Programming - Episode 4 - Window
The Cherno
Episode 5 - Buffer Strategy
The Cherno
Game Programming - Episode 6 - Graphics Initialized
The Cherno
Game Programming - Episode 7 - Buffered Image and Rasters
The Cherno
Game Programming - Episode 8 - The Screen Class
The Cherno
Game Programming - Episode 9 - Rendering Pixels
The Cherno
Game Programming - Episode 10 - Clearing the Screen
The Cherno
Game Programming - Episode 11 - "Out of Bounds, Baby!"
The Cherno
Game Programming - Episode 12 - Negative Bounds
The Cherno
Game Programming - Episode 13 - Timer
The Cherno
Game Programming - Episode 14 - FPS Counter
The Cherno
Episode 15 - Tiles
The Cherno
Game Programming - Episode 16 - The Map
The Cherno
The Walls 2 - Minecraft PvP Survival Map
The Cherno
Game Programming - Episode 17 - Key Input
The Cherno
Game Programming - Episode 18 - Controlling The Map
The Cherno
More on: CV Basics
View skill →
🎓
Tutor Explanation
DeepCamp AI