I discovered this channel like 2 hours ago and I am binging right now. So before this channel gets big and videos started to cluttered with comments (which probably will happen in no time) . I must say that I really like your mathematical approach, and quality of your videos are amazing please keep making videos.
the formula for the vertical position of the center of your slime is : starting position - 0.5 * g * time ^2 + (vertical speed at the start) * time now you can tweak : g (the "amount" of gravity) its equal to 10 irl the length of a frame the size of a pixel the initial velocity and the initial speed of the slime to achieve the wanted result for example, with 16 px = 1m, g = 10, 1 frame = 0.1 s, initial speed = 4.5 m/s, I find : frame 0 | 0 px frame 1 | 6 px frame 2 | 11 px frame 3 | 14 px frame 4 | 15 px frame 5 | 16 px frame 6 | 14 px frame 7 | 11 px frame 8 | 6 px frame 9 | 0 px here is a small python code to do the calculations automatically : starting_pos = 0 #in meters g = 10 duration = 1 frames = 10 pixel_height = 1/16 for t in range(frames): print("frame ", t, " | ",\ int((starting_pos + 4.5 * t*(duration/frames) \ - 0.5*10*((t*(duration/frames))**2)) /pixel_height), "px")
Great job, once again! The squash and stretch stuff always felt wrong to me when I did it. I also just always heard, "Play around until it feels right," but that would leave me frustrated when after so many attempts, something is just off and I can't figure it out. This breaks it down way better and actually gives me a foundation to build on with experimentation, rather than experiment with everything including the foundation, which always results in a mess. Thanks and keep it up!
Ahh I'm so glad to hear that, that's exactly what I was hoping from putting this video together! That's such a great way to put it, that there should be a logical place to start rather than "experimenting with the foundation". Thanks for watching and best of luck with your animations! :D
this channel is the best-kept secret on UA-cam. What a gem, seriously! You are unbelievably good at teaching. Thank you for taking the time to put this together for us internet people :)
5:48 Parabola!! It forms an exponential function, from a 4D perspective! But the "Half-life Principle" sounds way cooler, haha :) Great tutorial, I really like the area explanation for squashing/stretching! This is something I really love about pixel art, it's how technical it can be. I find that I can understand things that are more technical, better than things that require you to just "feel it out"!
THANK YOU! "Parabola", of course! Not sure why I blanked on that word hahaha. And yeah same here; there's a fair amount of "feel" I'll put in when eventually tweaking things, but I always feel like its important to start with some kind of technical plan of attack :D
@@BJGpixel Hahaha! I only have it in my mind, because I've had to make so many of'em for Neon Hook!! That sounds like a good process, I'm learning lots! :D
@@CKTDanny Hey yeah I'm curious about that actually! - is it programmed to calculate the cleanest looking pixel arc for the grapple? Or does it fit the same kind of parabola within the start and end points alone?
@@BJGpixel Calculated! The throw parabola is calculated once per throw, whereas the swing parabola is re-calculated every frame to ensure the player lands properly!
@@CKTDanny ah very cool, that's neat how they're handled individually like that! It's amazing the kind of math/technical you can get into even when you think it's gonna be all fun and games 😅
There's another trick to figuring out the step-heights for each frame in this kind of animation, without using any math. If you do an image search for "parabola", you'll find graphs which show that typical natural up/down curve. You can scale this to fit your canvas and desired bounce height, overlay it, and then basically read off the height at regular intervals along the curve (divide it up depending on how many frames you have). If you want some sideways motion too, as opposed to a straight bounce, then search for "ballistic trajectory". You'll find graphs of the path a cannonball follows when launched at various different angles. Pick the appropriate one, and then use it as a guide for your object to follow (move the same amount along the X axis each frame). I'm sure you could also edit these into handy templates, with markers for different frame counts for these motions, to make it even more convenient.
It's a good tip. But people should be careful, for there's not just one "parabola". The eccentricity depends on a parameter. The ballistic trajectory on the other hand will almost surely work like a charm, because it is pretty hard to find ballistic trajectories which assume gravity other than Earth's.
Brandon, I’m not an artist by any stretch of the imagination, and I’ve watched dozens of UA-cam videos and read numerous websites trying to find something that really made sense. This is that video. You’ve taken metrics and made them art. As a hobbyist game developer, having this skill broken down exactly like this for me was like cracking the code of the Rosetta Stone. Thank you. 🙌🏻 Looking forward to watching/learning more from your videos. Cheers.
To make a jump animation, you have to offset the vertical velocity by a constant each frame (since the second derivative of a parabola is a constant). So, if we want a jump height of 32 pixels over a course of 4 frames, we can find the function by taking the start and end times and forming a binomial expression x(x-8) (8 is used since we're interested in the zeroes of the polynomial here, meaning we need twice the time for it to reach the ground again). We then need to multiply by a constant. In this case, since when x=4 the result is -16, we multiply by -2 to get 32. So our final equation is y=-2x(x-8)=-2x²+16x. We then set the initial velocity to the derivative at x=1/2 (I'll leave it to you to prove why we need to have x=1/2), and the per-frame increment to the second derivative. In the case of a quadratic, these can trivially be found to be 14 and -4, respectively. Our final result is this: 0+14=14 14+10=24 24+6=30 30+2=32 32+(-2)=30 And so on. Generally you'll want to have your jump height be some multiple of the square of the number of frames, otherwise you'll probably (maybe always? see extra credit) end up with fractions. Extra Credit: Do all jump heights h and frame counts t, such that h/t² is not an integer, result in at least one frame with non-integral height? I honestly don't know myself. See if you can prove it though.
I gave you a thumbs up because your formula is correct. But then I took it back because your way of presenting it is extremely confusing (and I'm a mathematician). To answer your question from the Extra Credit: The general form is y= hx²/(t² - h) - h²x/(t³ - ht), giving the second derivative 2h/(t² - h). Thus, h/t² should be of the form k/(2 + k) for some integer k.
you are absolutely the best 100%, you are extremely good at teaching pixelart and i like your love of math. the quality is amazing! please continue making videos!!!
Speaking as a game developer, I often use a placeholder art (like a box sprite) and try to figure out how the controls feel, first. That way, I can use velocity data to determine what sub-animations or what frames to use to represent the active motion. A lot of people advise "feeling it out" especially in game development circles because some platformers have press-and-hold jumping schemes like Mario and Cave Story where the height that you jump can vary. But still, you've got cases where you've got complex motion like Strider Hiryu's ninja flip. At that point you're animating a parabola for a human being's center of gravity, but because he's doing a flip, there's a "rotation" going on as he somersaults, which in the arcade doesn't affect things, but in the modern remake it causes this cool, whiplash-like extra oomph that might be a good source of inspiration for some interesting spacing. It is very contextual.
Ah very cool, thanks for the insight! I can see how 'feeling it out' is essential for this sort of thing, since you're literally in control of the character, so it has a very specific feedback to your experience and expectations. I'm curious about the press-and-hold style jump heights; do those have preset heights once it passes certain "hold times", or is it on a sort of continuum of that input time?
@@BJGpixel It actually depends on the game. Super Mario and Cave Story are continuum in that longer hold time translates to higher jump amount. But there are games like Super Smash Bros where they have multiple possible jumps; tapping jump does a short hop set at a fixed height, while holding the jump button switches to a higher fixed height. Both allow a double jump and sometimes an attack which are both fixed height gains.
Remembering the concepts I learned in this video have helped a ton on my current game project. Thank you for demonstrating concepts in a away that makes them fun and rememberible.
From a game dev perspective it's usually a case of unit size calculation. For example if your games scale factor is 32 pixels per unit then your character needs to jump high enough to be able to reach a 32 pixel high ledge, it's more necessity than preference
Two minor points about physics, for if you want your animation to have a bit more verisimilitude/physicality: *1.* Gravity provides a constant vertical acceleration. Giving the slime a large vertical velocity and then subtracting a set amount from it each time is more physically precise; for instance, moving it up 14 pixels on the first frame, another 11 (25) on the second, 8 (33) on the third, etc. (I usually try to make the initial velocity divisible by the acceleration-say, initial 16, -4/frame-but this fits BJG's arc better.) Admittedly, this reduces the "coyote time" at the top of the jump. *2.* When squashing and stretching, take the third dimension into account. Don't approximate the slimeball as a 15×15 square, but a 15×15×15 cube (~3,375 "voxels"), with a depth equal to its width. For instance, 17×14, 19×13, 21×12, and 25×11 are roughly accurate for the stretch frames. This is more complicated, and also doesn't work well with more exaggerated squashes/stretches (but if you're exaggerating that much, you're probably not worried about verisimilitude).
The way i do jumps from a more animation point is I "feel it out" by calculating. Basically I either do something similar to you where I calculate a hight or i move the sprite to a hight that looks right then count how high that is and work from there. For me the most important steps is to get the important key frames in frist (botom, top then back to bottom, no in-betweens) and see if it fits, then i begin to add the in-between frames and adjust according to animation principles. This allows me to add or remove or change a frame as i go along and see what's needed rather than following a set path but I use a set path to achieve this freedom so... ya. It's a wierd mix of courting, math, basic animation principles and gut feeling and the results are mostly the same.
Your videos are always a delight! As an engineering student, game designer and artist, you have just the right mix of technical data and aesthetic that really speaks to my brain. I especially love watching the time lapse art pieces as you talk through the character design or specs of how you plot out a piece. You are informative without being too didactic or condescending, which a lot of people can't really pull off hehe. I love love love your work! Looking forward to the next post!
Watching your tutorials feels like I’m doing something illegal. They are so good and I learn so much that I feel like I’m cheating. Thanks for tutorials like this.
Something else worth keeping in mind is a lot of game engines let you change the x and y scale of sprites on the fly. This lets you dynamically apply squash and stretch so its great for saving time.
For game dev, you would typically make the zenith (highest point) of the jump last just a little bit longer than it should, then make the downward portion of the jump shorter than the upward portion. Otherwise, the character tends to feel rather floaty, even though it's the way physics normally works.
i would say that i determine the jump heights similarly but when it comes to the time i make the object jump fast and stand still at its peak for a little longer then quickly fall down. and i like to provide lesser time for transition frames
Thank you so much for this video, and honestly, just for sharing your knowledge with us. I am working on a game and this will be very helpful when I soon get onto animating my tiny critters. Your pixel art is so cute that I couldn't help but click every video of yours that was recommended on my feed, so I went ahead and subscribed. I am hoping to see more of your content for months and years to come.
Grrr, the use of exponentials instead of a quadratic function for the height over time makes my skin crawl. However, you've earned my subscription today because I've been bingeing your videos and gaining just the right amount of superficial knowledge to feel comfortable putting my hands in the mud and practicing pixel art myself :D
I typically use a linear acceleration, as in, I just add or subtract a fixed amount to the number of pixels I offset from the last frame (e.g. i move it one pixel from the original position, then two from that position, then three from that, etc.)
Whenever I program any sort of movement, I like to have two variables that represent how fast it’s going along the x and y directions (forgot the plural of axis lol). To make the jump, I set the y speed to a number. Every frame, I change the object’s position by its speed. But I also change the y speed by however much influence gravity has every frame. This way you can make the object jump. I have no idea how well I explained that. So let’s say gravity pulls the character down one pixel every frame. But I don’t actually change their y position by 1 every frame because of a few things. One: that’s kind of messy. Two: their downward velocity doesn’t really build. So what I do is I change their downward velocity by the gravity (1 pixel) and I have a cap set so they don’t fall too fast. (Like in a Celeste TAS, it lookes like Madeline is going through the spikes but that’s not really happening. Madeline is moving so fast that one frame she’s on the left of the spikes and the next she’s on the right.) When the character jumps, I just set their y velocity to a negative number so they go up. (Also if you didn’t know, at the top of a computer screen the Y is 0 in the computer’s coordinate system. This actually has some pretty cool history related to printing text.) So let’s say I set their y speed to -8 every time they jump. Every next frame gravity adds 1 to the speed so they move down more. First frame of the jump they go down -8 pixels, then -7, -6, ... which is all just going up while the amount they go up gradually decreases. Then that amount goes negative which causes them to start going down. Assuming the character doesn’t move to the sides at all, the downward speed will go up to 8 because physics. This approach is really nice because you can play around with gravity to make their jump heavier or lighter, and you can play with what you set their velocity to when they jump to change how high the jump is. It’s pretty realistic too. I have know idea how good of a job I did explaining that; I’m not a teacher lol. I know what I’m trying to say but I don’t quite know what I’m actually saying. If you have questions, feel free to ask.
Second tutorial of yours i'm watching now. Just as good, if not better then the first one. I mean, i feel like i'm the kind of person who would go with the "feel it out" approach to the animation, but what you're explaining is the basis of why it would end up looking correct or not (or what would be exaggerated, which might be the goal instead). Something one can always rely on and refer to when one is not sure why the animation looks off. And you explain it so nicely. Loving these videos man, they're incredibly helpful stuff!
I really like your mathematical approach for animating this. I'm glad I found this video since I'd usually want to have a reference when learning, and this video had information that fits the bill. Thank you!
This is the second video I've watched on this channel and I've really enjoyed it! This is a very good channel with fantastic content. Keep up the good work!!!!
just found this channel and by just looking at this video i can instantly say that it's really good content you're making. all the time you've probably spent on each and every video to make sure they're good. really love it! also thanks, i needed this for a game im making atm!
If you imagine your object as actually existing in 3D space, then cross-sectional area is *not* preserved. When squashing, you're shrinking 1 dimension and growing 2 dimensions, so that the volume is preserved. This means that the shrinking factor should be the square of the growing factor. The math works similarly for stretching. To use the example in the video, a 15x15 base sprite squished to a height of 9 has a shrinking factor of 5/3, so the growing factor should be sqrt(5/3), giving a width of 15*sqrt(5/3) or approximately 19. This is a bit less wide than the 25 pixel width in the video because the "invisible z-axis" is absorbing some of the deformation, and results in a slightly more natural squish.
While I personally don't agree with using numbers for something like this (I was taught to do it by feel, so that's how 'bouncing ball' was burned into my brain. Then again, all my animations start as pencil sketches, soooo, ymmv...), I DO appreciate the thought of it. Some people just need more precise examples. And volume is so hard to eyeball when you're just starting. So, 10/10, would recommend; pixel, digital, or traditional. :3 Various books on animation demonstrate that 'half-life', 'hangtime', or 'coyote time' that happens when a character jumps (and most other movements for that matter, right down to those grey guidelines for distances), but call it an innumerable amount of things, so I never bothered memorizing a single term. But it is the same technique; you slow things at the 'top' of their arch and animate them closer together, and you animate them farther apart at the 'bottom' of the arc. **In general.** Sometimes you want to have a weird float or be mechanical, so you space the movement more evenly. Sometimes you want the movement to spaz or jerk for some reason or another, so you put the timing and posing all over the place. Animation is fun like that. :B Real magic comes when you start adding clothes, limbs, tails, etc. Then wind-up/anticipation, follow-through and SFX... I believe game devs would call those things 'juice', if anyone wanted a comparison. ;P Why am I sharing this on a four year old video? No idea. But I went to school for 2.5 years for it before burning out like a white dwarf on it's last century and have no inclination of sharing it in any organized form, so, here we are. Also, I dunno. It might help someone. :v
Nice! Also, I did it one time with an alien, but he became so funny when he has made his ''full stretch'' because of the four eyes deforming themselves.
Jump height in game dev is simple. First you need your level box out prototype. For Pixel art you are good to go in standard sizes like 8x8, 16x16 or even 32x32, if you are ambitious and love the pain. (Or a sub-par quality asset in the same time) . In your Prototype Test Area, you should check the absolute limit on what you want your jump to be in your entire game. Usually you don't animate the x&y motion in an external program, like shown here, as you'll need some game logic anyways to make it better. (Check out Coyote Timing and adjustable jump height for your characters, both pretty much nailed in the early days by the king of Platformers. Mario). I guess since this is more of an enemy sprite, rather than a player one, you can get away with not coding the jump (basing it solely on your animation), depending on your Dev tool it can be tricky to match collision though, so bare that in mind!
Thank you for the great insight! I'm going to look into this some more. I'm usually making stuff just to work within a stand-alone piece of art, so it's usually based on what looks appropriate, but I'd like to be aware of schemes like this to give a more authentic feel or maybe branch out later for gamedev purposes!
I'm sure your channel will get big in no time, the quality is amazing! May i ask a tutorial about palettes? There are plenty out there, but you got this Gameboy feeling that is pretty unique. I saw your "pixel art timelapse" and there you talked about how you picked some colors but it wasn't clear for me, i'm pretty color blind.
Thanks for your support! Yes I try to touch on it in most of the artwork vids, but I do plan on making more dedicated colour vids, like selecting colours and putting a palette together!
If anything I'd say you should add one frame of anticipation. I'd say it's more important for a game, if it's just for an animation it's your choice. Mostly it's so the player can predict a bit better the jump, and it also makes it more natural. Also, if the slime is moving horizontally while jumping you should add some deformity or trail to show the direction it goes, again, to make it's movement easier to read. All of this is from a game point of view of course ^^
If you want mathematically correct jump heights (5:50-ish), the principle is that the change in height should _subtract the same amount each time._ So, 16, then another 12, then another 8, then another 4, then you're at the top (and after that, negative 4 means falling by 4, so it's symmetric). In total, the heights above the ground are 16, 28, 36, and 40. The mathematical term for this shape is a "parabola".
If you want to maintain a max height of 30, you can do these heights above the ground: 12, 21, 27, and 30, I suppose. (The difference between adjacent heights is 9, 6, and 3, so you're subtracting 3 to the height change each time.)
From the gamedev perspective the thing I can is that for gameplay the timing of the jump is different, usually. Real physics usually make the object rise and fall at the same speed, making a perfect curve, but in videigames that will feel floaty. That's why it's usually better to make the fall faster than the rise. For example, the original mario bros. has mario falling in half the frames he takes to reach the apex of his jump. Feels better for the player, and it doesn't have to be half, you can change it depending on what you're looking for.
The thing about halving the distance is an exponential growth ... real jumps would behave with a square growth So you take the frame with the highest point of the animation and name it 1, the frame after and before this frame "two", the frames after and before these frames "3" and so on ... Then you square each frame number and have the distance to the highest point in your animation mathematically this would be called a parabola (between time (x) and distance from the highest point of the animation (y)) hope that was understandable i am swiss xD
Your videos are great, always informative and helpful! Can you do a video about humanoid animations or a video about how to create pixel art faster? Like what details not to obsess about and waste time, or how to plan your design time in advance
I found myself having my own rule of thumb when it comes to jumps. I just use the Fibonacci Sequence and add the pixel displacement from the last frames. I'd start from the top going down. Next frame: 0 changes in height. Next: 1, then 2, then 3, then 5, then 8, and so on. Calculating? pssh
Let's say a bounce takes a second(with 60fps). I'll divide it into 5 parts that's 12 frames each. Set 1st frames y position to 0 (on ground) then the last frame the 60th frame to 0 as well. In the middle 30th frame set y to let's say 1 then grab the 12th frame from both sides (that's 12th and 48th frames) and set them to 0.75 height. And I let the animator calculate the curves. After it's done I can just shorten or widen the animation as needed. The proportions stay the same. Going up fast 1/5ths of anim duration. 75% of Max height Staying airborne 3/5ths of anim duration. Max height Going down fast 1/5ths of anim duration. 75% of Max height
idk if there's a proper term for that "half-life principle" you're mentioning rn, but the closest that I could think of is "fibonacci sequence". . . which is still not the same tho I'll look into that. BTW, I've been studying pixel art based on your tutorials. you definitely need more subs
From game dev point of view I prefer to make a bit longer upward part and faster drop as to accentuate gravity. Quite common technic in platformer games.
At 1:19, shouldn't the saturation value for highlight colours of the yellow and white slimes be zero? Because anything with a saturation greater than zero can't be white.
When I wanted to start making a game I wanted the main character to be a slime with multiple elemental powers, but I got tired of that idea, but if someone's looking for some game idea, I recommend that
I have a doubt.. if the slime will occupy 15x15px, how much does that character's sprite have to be, since he will stretch horizontally or even vertically by 25px? For a 16x16 tile it is a little difficult to imagine how it would be done.
I discovered this channel like 2 hours ago and I am binging right now. So before this channel gets big and videos started to cluttered with comments (which probably will happen in no time) . I must say that I really like your mathematical approach, and quality of your videos are amazing please keep making videos.
same
Agreed, his editing style looks so professional and his videos are so engaging. I'm running out of his content to watch!
The Dashinator: totally agree
same
For me it was 5 hours ago and I’ve already made a gif and three pixel art all in one day.
"ME_AND_THE_BOYS.png" xD
I actually needed the physics for slime
Be great for the vid
Also its a great vid
the formula for the vertical position of the center of your slime is :
starting position - 0.5 * g * time ^2 + (vertical speed at the start) * time
now you can tweak :
g (the "amount" of gravity) its equal to 10 irl
the length of a frame
the size of a pixel
the initial velocity
and the initial speed of the slime to achieve the wanted result
for example, with 16 px = 1m, g = 10, 1 frame = 0.1 s, initial speed = 4.5 m/s, I find :
frame 0 | 0 px
frame 1 | 6 px
frame 2 | 11 px
frame 3 | 14 px
frame 4 | 15 px
frame 5 | 16 px
frame 6 | 14 px
frame 7 | 11 px
frame 8 | 6 px
frame 9 | 0 px
here is a small python code to do the calculations automatically :
starting_pos = 0 #in meters
g = 10
duration = 1
frames = 10
pixel_height = 1/16
for t in range(frames):
print("frame ", t, " | ",\
int((starting_pos + 4.5 * t*(duration/frames) \
- 0.5*10*((t*(duration/frames))**2)) /pixel_height), "px")
I'm doing A level maths, took me a second to work out the equation as it's in the form 1/2at^2 + ut instead of ut + 1/2at^2 haha
?????
@@eggeggington606it's reasonably high level maths, you would only know it if you do some sort of further maths subject
thank you, you are based
@@BenJaded r/iamverysmart much?
Great job, once again! The squash and stretch stuff always felt wrong to me when I did it. I also just always heard, "Play around until it feels right," but that would leave me frustrated when after so many attempts, something is just off and I can't figure it out.
This breaks it down way better and actually gives me a foundation to build on with experimentation, rather than experiment with everything including the foundation, which always results in a mess. Thanks and keep it up!
Ahh I'm so glad to hear that, that's exactly what I was hoping from putting this video together! That's such a great way to put it, that there should be a logical place to start rather than "experimenting with the foundation". Thanks for watching and best of luck with your animations! :D
this channel is the best-kept secret on UA-cam. What a gem, seriously! You are unbelievably good at teaching. Thank you for taking the time to put this together for us internet people :)
> Best kept secret
> Video has over one-hundred and sixty-thousand views
> mfw
It’s a comment from 4 years ago…congratulations on a completely useless reply 😂
Using numbers to calculate the amount of squash and stretch is what has been missing in my life! Thank you. Seriously.
5:48 Parabola!! It forms an exponential function, from a 4D perspective! But the "Half-life Principle" sounds way cooler, haha :)
Great tutorial, I really like the area explanation for squashing/stretching! This is something I really love about pixel art, it's how technical it can be. I find that I can understand things that are more technical, better than things that require you to just "feel it out"!
THANK YOU! "Parabola", of course! Not sure why I blanked on that word hahaha. And yeah same here; there's a fair amount of "feel" I'll put in when eventually tweaking things, but I always feel like its important to start with some kind of technical plan of attack :D
@@BJGpixel Hahaha! I only have it in my mind, because I've had to make so many of'em for Neon Hook!! That sounds like a good process, I'm learning lots! :D
@@CKTDanny Hey yeah I'm curious about that actually! - is it programmed to calculate the cleanest looking pixel arc for the grapple? Or does it fit the same kind of parabola within the start and end points alone?
@@BJGpixel Calculated! The throw parabola is calculated once per throw, whereas the swing parabola is re-calculated every frame to ensure the player lands properly!
@@CKTDanny ah very cool, that's neat how they're handled individually like that! It's amazing the kind of math/technical you can get into even when you think it's gonna be all fun and games 😅
There's another trick to figuring out the step-heights for each frame in this kind of animation, without using any math.
If you do an image search for "parabola", you'll find graphs which show that typical natural up/down curve.
You can scale this to fit your canvas and desired bounce height, overlay it, and then basically read off the height at regular intervals along the curve (divide it up depending on how many frames you have).
If you want some sideways motion too, as opposed to a straight bounce, then search for "ballistic trajectory". You'll find graphs of the path a cannonball follows when launched at various different angles. Pick the appropriate one, and then use it as a guide for your object to follow (move the same amount along the X axis each frame).
I'm sure you could also edit these into handy templates, with markers for different frame counts for these motions, to make it even more convenient.
It's a good tip. But people should be careful, for there's not just one "parabola". The eccentricity depends on a parameter.
The ballistic trajectory on the other hand will almost surely work like a charm, because it is pretty hard to find ballistic trajectories which assume gravity other than Earth's.
Brandon, I’m not an artist by any stretch of the imagination, and I’ve watched dozens of UA-cam videos and read numerous websites trying to find something that really made sense. This is that video. You’ve taken metrics and made them art. As a hobbyist game developer, having this skill broken down exactly like this for me was like cracking the code of the Rosetta Stone. Thank you. 🙌🏻 Looking forward to watching/learning more from your videos. Cheers.
This is sick! Thank you so much for all this free content!! Precise and simple!
To make a jump animation, you have to offset the vertical velocity by a constant each frame (since the second derivative of a parabola is a constant).
So, if we want a jump height of 32 pixels over a course of 4 frames, we can find the function by taking the start and end times and forming a binomial expression x(x-8) (8 is used since we're interested in the zeroes of the polynomial here, meaning we need twice the time for it to reach the ground again).
We then need to multiply by a constant. In this case, since when x=4 the result is -16, we multiply by -2 to get 32. So our final equation is y=-2x(x-8)=-2x²+16x. We then set the initial velocity to the derivative at x=1/2 (I'll leave it to you to prove why we need to have x=1/2), and the per-frame increment to the second derivative. In the case of a quadratic, these can trivially be found to be 14 and -4, respectively.
Our final result is this:
0+14=14
14+10=24
24+6=30
30+2=32
32+(-2)=30
And so on.
Generally you'll want to have your jump height be some multiple of the square of the number of frames, otherwise you'll probably (maybe always? see extra credit) end up with fractions.
Extra Credit: Do all jump heights h and frame counts t, such that h/t² is not an integer, result in at least one frame with non-integral height? I honestly don't know myself. See if you can prove it though.
I gave you a thumbs up because your formula is correct.
But then I took it back because your way of presenting it is extremely confusing (and I'm a mathematician).
To answer your question from the Extra Credit:
The general form is y= hx²/(t² - h) - h²x/(t³ - ht), giving the second derivative 2h/(t² - h). Thus, h/t² should be of the form k/(2 + k) for some integer k.
This channel is actual proof if your video quality is good enough and your passionate, you can succeed in a relatively short amount of time
you are absolutely the best 100%, you are extremely good at teaching pixelart
and i like your love of math. the quality is amazing! please continue making videos!!!
Speaking as a game developer, I often use a placeholder art (like a box sprite) and try to figure out how the controls feel, first. That way, I can use velocity data to determine what sub-animations or what frames to use to represent the active motion. A lot of people advise "feeling it out" especially in game development circles because some platformers have press-and-hold jumping schemes like Mario and Cave Story where the height that you jump can vary. But still, you've got cases where you've got complex motion like Strider Hiryu's ninja flip. At that point you're animating a parabola for a human being's center of gravity, but because he's doing a flip, there's a "rotation" going on as he somersaults, which in the arcade doesn't affect things, but in the modern remake it causes this cool, whiplash-like extra oomph that might be a good source of inspiration for some interesting spacing. It is very contextual.
Ah very cool, thanks for the insight! I can see how 'feeling it out' is essential for this sort of thing, since you're literally in control of the character, so it has a very specific feedback to your experience and expectations.
I'm curious about the press-and-hold style jump heights; do those have preset heights once it passes certain "hold times", or is it on a sort of continuum of that input time?
@@BJGpixel It actually depends on the game. Super Mario and Cave Story are continuum in that longer hold time translates to higher jump amount. But there are games like Super Smash Bros where they have multiple possible jumps; tapping jump does a short hop set at a fixed height, while holding the jump button switches to a higher fixed height. Both allow a double jump and sometimes an attack which are both fixed height gains.
Remembering the concepts I learned in this video have helped a ton on my current game project.
Thank you for demonstrating concepts in a away that makes them fun and rememberible.
I don't know what makes me so happy about that animation
Rodrigo 5005 It’s adorable and so happy!!
It's a bouncy slime.
That's why.
I'll explain it in one single word: "Boing"
( *| |* )
From a game dev perspective it's usually a case of unit size calculation. For example if your games scale factor is 32 pixels per unit then your character needs to jump high enough to be able to reach a 32 pixel high ledge, it's more necessity than preference
Ah right, that makes sense! Would you normally scale your character with that same unit size, like they'd be 32px tall also for example?
It's not 100% necessary but I like to. Makes map generation so much easier, along with interactive elements
I love that color of yellow. and it matches the logo! the text contrasts so well! the whole thumbnail is awesome
Two minor points about physics, for if you want your animation to have a bit more verisimilitude/physicality:
*1.* Gravity provides a constant vertical acceleration. Giving the slime a large vertical velocity and then subtracting a set amount from it each time is more physically precise; for instance, moving it up 14 pixels on the first frame, another 11 (25) on the second, 8 (33) on the third, etc. (I usually try to make the initial velocity divisible by the acceleration-say, initial 16, -4/frame-but this fits BJG's arc better.) Admittedly, this reduces the "coyote time" at the top of the jump.
*2.* When squashing and stretching, take the third dimension into account. Don't approximate the slimeball as a 15×15 square, but a 15×15×15 cube (~3,375 "voxels"), with a depth equal to its width. For instance, 17×14, 19×13, 21×12, and 25×11 are roughly accurate for the stretch frames. This is more complicated, and also doesn't work well with more exaggerated squashes/stretches (but if you're exaggerating that much, you're probably not worried about verisimilitude).
The way i do jumps from a more animation point is I "feel it out" by calculating. Basically I either do something similar to you where I calculate a hight or i move the sprite to a hight that looks right then count how high that is and work from there. For me the most important steps is to get the important key frames in frist (botom, top then back to bottom, no in-betweens) and see if it fits, then i begin to add the in-between frames and adjust according to animation principles. This allows me to add or remove or change a frame as i go along and see what's needed rather than following a set path but I use a set path to achieve this freedom so... ya. It's a wierd mix of courting, math, basic animation principles and gut feeling and the results are mostly the same.
Your videos are always a delight! As an engineering student, game designer and artist, you have just the right mix of technical data and aesthetic that really speaks to my brain. I especially love watching the time lapse art pieces as you talk through the character design or specs of how you plot out a piece. You are informative without being too didactic or condescending, which a lot of people can't really pull off hehe. I love love love your work! Looking forward to the next post!
Your numbers technique is tremendously helpful to complete noobs and even non- pixel artists !!
This channel really helps out, thank you for existing!
Watching your tutorials feels like I’m doing something illegal. They are so good and I learn so much that I feel like I’m cheating. Thanks for tutorials like this.
Just got into making pixel art animation, and this channel is amazing! Don't know how you're not more popular
Something else worth keeping in mind is a lot of game engines let you change the x and y scale of sprites on the fly. This lets you dynamically apply squash and stretch so its great for saving time.
Greatness. Adding the info about animation was really cool.
A big YES for more human beings like Mr. Greer around this f* world. Thank you for the careful and brilliant work, Dude.🥰
For game dev, you would typically make the zenith (highest point) of the jump last just a little bit longer than it should, then make the downward portion of the jump shorter than the upward portion. Otherwise, the character tends to feel rather floaty, even though it's the way physics normally works.
i would say that i determine the jump heights similarly but when it comes to the time i make the object jump fast and stand still at its peak for a little longer then quickly fall down. and i like to provide lesser time for transition frames
This is awesome. I have been struggling with slime animation and other pixel art lines and feel more confident after seeing your videos.
Thank you so much for this video, and honestly, just for sharing your knowledge with us. I am working on a game and this will be very helpful when I soon get onto animating my tiny critters. Your pixel art is so cute that I couldn't help but click every video of yours that was recommended on my feed, so I went ahead and subscribed. I am hoping to see more of your content for months and years to come.
Brandon: Let's go make some slime.
Me: shivers
That is why so many games have slime in the early levels! The artist is still practicing, or at least has them around anyway!
Your vids are so fun to watch, very well structured and clear.
Grrr, the use of exponentials instead of a quadratic function for the height over time makes my skin crawl.
However, you've earned my subscription today because I've been bingeing your videos and gaining just the right amount of superficial knowledge to feel comfortable putting my hands in the mud and practicing pixel art myself :D
You could add some cool green slime particles when it lands.
How have I not been aware of this channel till now?! Is soooo good :D
I typically use a linear acceleration, as in, I just add or subtract a fixed amount to the number of pixels I offset from the last frame (e.g. i move it one pixel from the original position, then two from that position, then three from that, etc.)
Whenever I program any sort of movement, I like to have two variables that represent how fast it’s going along the x and y directions (forgot the plural of axis lol). To make the jump, I set the y speed to a number. Every frame, I change the object’s position by its speed. But I also change the y speed by however much influence gravity has every frame. This way you can make the object jump. I have no idea how well I explained that.
So let’s say gravity pulls the character down one pixel every frame. But I don’t actually change their y position by 1 every frame because of a few things. One: that’s kind of messy. Two: their downward velocity doesn’t really build. So what I do is I change their downward velocity by the gravity (1 pixel) and I have a cap set so they don’t fall too fast. (Like in a Celeste TAS, it lookes like Madeline is going through the spikes but that’s not really happening. Madeline is moving so fast that one frame she’s on the left of the spikes and the next she’s on the right.) When the character jumps, I just set their y velocity to a negative number so they go up. (Also if you didn’t know, at the top of a computer screen the Y is 0 in the computer’s coordinate system. This actually has some pretty cool history related to printing text.) So let’s say I set their y speed to -8 every time they jump. Every next frame gravity adds 1 to the speed so they move down more. First frame of the jump they go down -8 pixels, then -7, -6, ... which is all just going up while the amount they go up gradually decreases. Then that amount goes negative which causes them to start going down. Assuming the character doesn’t move to the sides at all, the downward speed will go up to 8 because physics. This approach is really nice because you can play around with gravity to make their jump heavier or lighter, and you can play with what you set their velocity to when they jump to change how high the jump is. It’s pretty realistic too.
I have know idea how good of a job I did explaining that; I’m not a teacher lol. I know what I’m trying to say but I don’t quite know what I’m actually saying. If you have questions, feel free to ask.
"I added a few eyes"
Adds two
He isn't wrong, two is a few
@@AnonyMous-gj7qq it depends on who you ask, everyone I know seems to think differently about it. Yes though, I agree with you.
@@AnonyMous-gj7qq 2 is a couple, a few is 3-11
@JZG
"Oh yeah I have a few dogs"
"Oh really, what are their names?"
And then they just start listing fucking 200 dog names
I usually interpret a few as exactly 3.
Second tutorial of yours i'm watching now. Just as good, if not better then the first one. I mean, i feel like i'm the kind of person who would go with the "feel it out" approach to the animation, but what you're explaining is the basis of why it would end up looking correct or not (or what would be exaggerated, which might be the goal instead). Something one can always rely on and refer to when one is not sure why the animation looks off. And you explain it so nicely. Loving these videos man, they're incredibly helpful stuff!
I really like your mathematical approach for animating this. I'm glad I found this video since I'd usually want to have a reference when learning, and this video had information that fits the bill. Thank you!
I love these videos like they are AWESOME
Awesome tutorial man! Keep grindin! Your content is already up there!
Thank you! :D
Just starting to learn animation after doing static for a couple of years - this was invaluable and made so much sense! Thank you :)
This is the second video I've watched on this channel and I've really enjoyed it! This is a very good channel with fantastic content. Keep up the good work!!!!
just found this channel and by just looking at this video i can instantly say that it's really good content you're making. all the time you've probably spent on each and every video to make sure they're good. really love it! also thanks, i needed this for a game im making atm!
Your content is great, Brandon. Keep it up!
If you imagine your object as actually existing in 3D space, then cross-sectional area is *not* preserved. When squashing, you're shrinking 1 dimension and growing 2 dimensions, so that the volume is preserved. This means that the shrinking factor should be the square of the growing factor. The math works similarly for stretching. To use the example in the video, a 15x15 base sprite squished to a height of 9 has a shrinking factor of 5/3, so the growing factor should be sqrt(5/3), giving a width of 15*sqrt(5/3) or approximately 19. This is a bit less wide than the 25 pixel width in the video because the "invisible z-axis" is absorbing some of the deformation, and results in a slightly more natural squish.
While I personally don't agree with using numbers for something like this (I was taught to do it by feel, so that's how 'bouncing ball' was burned into my brain. Then again, all my animations start as pencil sketches, soooo, ymmv...), I DO appreciate the thought of it. Some people just need more precise examples. And volume is so hard to eyeball when you're just starting. So, 10/10, would recommend; pixel, digital, or traditional. :3
Various books on animation demonstrate that 'half-life', 'hangtime', or 'coyote time' that happens when a character jumps (and most other movements for that matter, right down to those grey guidelines for distances), but call it an innumerable amount of things, so I never bothered memorizing a single term. But it is the same technique; you slow things at the 'top' of their arch and animate them closer together, and you animate them farther apart at the 'bottom' of the arc. **In general.** Sometimes you want to have a weird float or be mechanical, so you space the movement more evenly. Sometimes you want the movement to spaz or jerk for some reason or another, so you put the timing and posing all over the place. Animation is fun like that. :B
Real magic comes when you start adding clothes, limbs, tails, etc. Then wind-up/anticipation, follow-through and SFX... I believe game devs would call those things 'juice', if anyone wanted a comparison. ;P
Why am I sharing this on a four year old video? No idea. But I went to school for 2.5 years for it before burning out like a white dwarf on it's last century and have no inclination of sharing it in any organized form, so, here we are. Also, I dunno. It might help someone. :v
Nice!
Also, I did it one time with an alien, but he became so funny when he has made his ''full stretch'' because of the four eyes deforming themselves.
Jump height in game dev is simple. First you need your level box out prototype.
For Pixel art you are good to go in standard sizes like 8x8, 16x16 or even 32x32, if you are ambitious and love the pain.
(Or a sub-par quality asset in the same time)
.
In your Prototype Test Area, you should check the absolute limit on what you want your jump to be in your entire game.
Usually you don't animate the x&y motion in an external program, like shown here, as you'll need some game logic anyways to make it better.
(Check out Coyote Timing and adjustable jump height for your characters, both pretty much nailed in the early days by the king of Platformers. Mario).
I guess since this is more of an enemy sprite, rather than a player one, you can get away with not coding the jump (basing it solely on your animation), depending on your Dev tool it can be tricky to match collision though, so bare that in mind!
Thank you for the great insight! I'm going to look into this some more. I'm usually making stuff just to work within a stand-alone piece of art, so it's usually based on what looks appropriate, but I'd like to be aware of schemes like this to give a more authentic feel or maybe branch out later for gamedev purposes!
This is the best channel on UA-cam. :]
Insane! I just start pixeling and your tutorials have been really helpful!
I'm sure your channel will get big in no time, the quality is amazing!
May i ask a tutorial about palettes? There are plenty out there, but you got this Gameboy feeling that is pretty unique. I saw your "pixel art timelapse" and there you talked about how you picked some colors but it wasn't clear for me, i'm pretty color blind.
Thanks for your support! Yes I try to touch on it in most of the artwork vids, but I do plan on making more dedicated colour vids, like selecting colours and putting a palette together!
If anything I'd say you should add one frame of anticipation. I'd say it's more important for a game, if it's just for an animation it's your choice. Mostly it's so the player can predict a bit better the jump, and it also makes it more natural. Also, if the slime is moving horizontally while jumping you should add some deformity or trail to show the direction it goes, again, to make it's movement easier to read.
All of this is from a game point of view of course ^^
Thank you! This is a really great guide!
You are fantastic at pixel art
👍
super awesome video dude. Love it!!!
I love your vids it’s thought me so much about pixel art and has given me more interest in this wonderful format of art
If you want mathematically correct jump heights (5:50-ish), the principle is that the change in height should _subtract the same amount each time._ So, 16, then another 12, then another 8, then another 4, then you're at the top (and after that, negative 4 means falling by 4, so it's symmetric). In total, the heights above the ground are 16, 28, 36, and 40. The mathematical term for this shape is a "parabola".
If you want to maintain a max height of 30, you can do these heights above the ground: 12, 21, 27, and 30, I suppose. (The difference between adjacent heights is 9, 6, and 3, so you're subtracting 3 to the height change each time.)
I'm just starting pixel art and this is really helpful, thanks a lot.
LOVE THIS! great job.
Masterpiece.
Nooo your sucking me back into pixel art.....great now I’m going to have to stay up all night watching these videos and drawing with piskel...
If you click on the black square is the corner with a whit e square that has a gray checkered pattern on it a color pallets will come up
Yeah
Just gained another subscriber!!!!!! I had a question about animating ur pixel art. But I'm sure it's been posted. Love ur tutorials!
From the gamedev perspective the thing I can is that for gameplay the timing of the jump is different, usually.
Real physics usually make the object rise and fall at the same speed, making a perfect curve, but in videigames that will feel floaty. That's why it's usually better to make the fall faster than the rise. For example, the original mario bros. has mario falling in half the frames he takes to reach the apex of his jump. Feels better for the player, and it doesn't have to be half, you can change it depending on what you're looking for.
I just found your channel, and i’m having so much fun watching!
Celeste has an amazing jump/squish animation
so cool, I know what I will do this weekend ! ! !
Awesome, thank you!
The thing about halving the distance is an exponential growth ...
real jumps would behave with a square growth
So you take the frame with the highest point of the animation and name it 1, the frame after and before this frame "two", the frames after and before these frames "3" and so on ...
Then you square each frame number and have the distance to the highest point in your animation
mathematically this would be called a parabola (between time (x) and distance from the highest point of the animation (y))
hope that was understandable i am swiss xD
Your videos are great, always informative and helpful!
Can you do a video about humanoid animations or a video about how to create pixel art faster? Like what details not to obsess about and waste time, or how to plan your design time in advance
Usually the jumping height is programmed into code, but you would need to sync the frames.
Discovered your channel . very good videos.
I already know all of this, but I just want to watch your content
I really enjoy your art and video style and would love for you to do a full pixel art course on Udemy or something! Keep up the great videos
I found myself having my own rule of thumb when it comes to jumps. I just use the Fibonacci Sequence and add the pixel displacement from the last frames. I'd start from the top going down. Next frame: 0 changes in height. Next: 1, then 2, then 3, then 5, then 8, and so on.
Calculating? pssh
Let's say a bounce takes a second(with 60fps). I'll divide it into 5 parts that's 12 frames each. Set 1st frames y position to 0 (on ground) then the last frame the 60th frame to 0 as well. In the middle 30th frame set y to let's say 1 then grab the 12th frame from both sides (that's 12th and 48th frames) and set them to 0.75 height. And I let the animator calculate the curves. After it's done I can just shorten or widen the animation as needed. The proportions stay the same.
Going up fast 1/5ths of anim duration. 75% of Max height
Staying airborne 3/5ths of anim duration. Max height
Going down fast 1/5ths of anim duration. 75% of Max height
idk if there's a proper term for that "half-life principle" you're mentioning rn, but the closest that I could think of is "fibonacci sequence". . . which is still not the same tho
I'll look into that.
BTW, I've been studying pixel art based on your tutorials. you definitely need more subs
Try with "parabola" or "exponential/logarithmic rule".
From game dev point of view I prefer to make a bit longer upward part and faster drop as to accentuate gravity. Quite common technic in platformer games.
My slime don't jiggle, jiggle, it folds
I'd like to see you wiggle, wiggle, for sure
It makes me wanna dribble, dribble, you know
Thanks that help'd alot !!!!
awesome vids!
Therapist: Dont worry Vertical Slime isnt real it cant hurt you
Vertical Slime: 2:20
Me: D:
Cool Bruhé me: :D
Really want make animation Thx for this tutorial!!!
Awesome video! I would consider weakening/removing the "falling stretching" though. It looks rather unnatural.
i have nesmaker and cos of a certan animi i love slimes lol also once had an actuel meter long yellow living slime mold lol
The vertical movement of the bowling ball is named “parabolic motion”.
At 1:19, shouldn't the saturation value for highlight colours of the yellow and white slimes be zero? Because anything with a saturation greater than zero can't be white.
thank you so much!
When I wanted to start making a game I wanted the main character to be a slime with multiple elemental powers, but I got tired of that idea, but if someone's looking for some game idea, I recommend that
thanks
This video is great,I would like next time a slime walking animation or an idle animation
I have a doubt.. if the slime will occupy 15x15px, how much does that character's sprite have to be, since he will stretch horizontally or even vertically by 25px? For a 16x16 tile it is a little difficult to imagine how it would be done.
14x16=224 so it is really good!
I saw this on the CaptainSparklez subreddit!
For your videos, do you draw every window, too? Like, the "calculating squash and stretch" window.
Haha yes I do, they're all pixel art as well! :D
Thanks that was useful