JavaScript Sprite Animation

[@Frankslaboratory]

Click the like if you want more free sprite sheets and game art assets :D Have fun!

[@scottonanski4173]

Wow, Frank. The production quality of your videos are so good now. I mean, you're videos have always been excellent, but they've gotten so much better! Thanks for taking the time to make them! Really appreciate it!

[@Frankslaboratory]

Thanks Scott, I'm slowly learning and improving, I appreciate your feedback

[@xacxdcx]

The go-to channel for learning gaming in JS, amazing Frank!

[@Frankslaboratory]

Glad you think so :D

[@Dibiler]

Great video as always. Quick suggestion: If you wrap the input[radio] inside the labels as: All You don't need to set the "for" and the "id", it works directly. Also you could add that way the display block and get rid of the added at the end of each label. Last, using css selectors as label + input:checked to change the style of the selected label and adding input {display:none} to make it a bit more neat

[@Frankslaboratory]

Hi, yes, this is a good point, thank you for sharing with us! that tag shouldn't be there :D

[@Frankslaboratory]

🐟Check out my EXTENDED game development class where we build a complete Steampunk game with sounds and advanced visuals www.udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2

[@supraneedeesom8040]

i have no idea why, but hearing your voice just makes feel soothed.

[@alexdurigan3788]

My man's dedication is over the top!

[@PossumMedic]

Another great tutorial thanks! 😃 I'm glad this cutie won the vote!🥰 I've been fascinated with their lore since playing the board game Labyrinth! 🙌‍ One thing I noticed is that at some points if I needed to pause to catch up (such as 19:05) the pause bar covered the portion of code we were focusing on. Not a huge deal, just made it a bit harder to follow at times

[@Frankslaboratory]

Hi, thank you for pointing it out, I will try to make sure the code is always only in the top 80% of the screen to avoid things like this

[@adhochero6619]

you make this complex stuff so easy to understand. thank you

[@chilukproducoes]

You are doing a wonderful job by giving Knowledge many thanks

[@michaelhall2265]

WINK really ought to be BLINK. Great tutorial!!

[@Frankslaboratory]

Oh, yes you are right Michael, my English is bad :D

[@diamondkingx6281]

Watching you from 10k, almost at 50k! Once again a great video :)

[@Frankslaboratory]

Thanks for sticking with me :)

[@CodingAdventures]

Good tips! Your entire channel is so Eye Candy! Congrats on all the hard work you put into these videos ... and their presentation.

[@muratkoksal4094]

Thanks for your help. I will try it at first chance.

[@Frankslaboratory]

Thanks Murat

[@rrahll]

Always helpful tutorials! Thanks!

[@Frankslaboratory]

I'm here to help 😄

[@昂刘-k1q]

It is lucky that I recently want to learn knowledge about animition in JavaScript .it is a brief and nice video.

[@Frankslaboratory]

Glad you found some value, I have more videos in this series releasing soon

[@elijah4840]

Hey Frank, how do you create Sprite Sheets? Will you ever make a video on that?

[@rrahll]

Cool)) thank you Frank!

[@Frankslaboratory]

Glad you like it

[@marwanouchah2139]

Dw bro ADHD helps out so much with soft soft i find. day dreaming always gives new ideas so when i snap back i got that vision ready

[@stahlmandesign]

I like how you explained all of this using vanilla JS. Game engines hide these details and it's nice to see under the hood. An important detail is the update cycle. At 21:40 you used the built-in function requestAnimationFrame() but didn't explain that it attempts to be called at 60 fps. In the old days if you used setInterval() instead of requestAnimationFrame() you would have to specify the speed. Great video

[@Frankslaboratory]

Hi Justin, glad you found some value. requestAnimationFrame is a bit more complicated, it will attempt to call at 60fps on regular screens, but on high refresh screens it will try to call faster. To control animation speed, it has auto generated timestamp. I use that timestamp to unify animation speed across different machines in other videos, since I use requestAnimationFrame in almost every video, I don't always talk about all the details, since I covered it so many times in older content

[@jothidaragasiyangal]

don't give up!, there are more difficult programs then tNice tutorials one

[@danielachlakian1582]

Amazing video, and a great start for new js coders

[@loayabbas2454]

Nice work Frank😃

[@codingphil4007]

Great tutorials again!.. I'm always check your channel for your new video and finally here it now..love it so much💙.. btw I'm from Philippines

[@Frankslaboratory]

Thanks for checking up on me. Greetings to Philippines

[@martinagustinsilva6481]

Amazing videos!! i would love to see one of how to make sprite sheets in illustrator, but i uderstand that everyone uses the tools that they feel comfortable with.

[@AnimeThings_]

Excited for new video!!

[@Frankslaboratory]

Me too

[@fr1endsies]

Save all Mandrakes!!!! Great tutorial and an excelent way to start the day

[@Frankslaboratory]

They are a rare endangered species, we need to protect them! :D

[@ShaunLin-h4m]

Hi @Frankslaboratory, thanks a lot for the video! I definitely learnt something new today. Just a question though. At 22.40, you mentioned that the blinking of the animation is caused by the frame moving outside the source image "mandrake.png" and you went on to reduce "this.frameX < 18" to "this.frameX < 17". After removing it, the blinking indeed went away. However, I still cannot understand why would the frame move out of the source image given that there are 18 columns? By reducing it to 17, aren't you also removing some of the images? Your original "mandrake.png" dimensions is 4608 x 5120 (which translates into 18 columns x 20 rows if each image takes up 256 x 256).

[@Frankslaboratory]

Hi. Its 17 because we start counting from 0

[@ShaunLin-h4m]

@@Frankslaboratory Thanks for replying. Yes, I understand that it is 0 indexed. If this.frameX < 17, this means that only up to column 16 (range 0 - 16) will be picked up when in fact the entire "mandrake.png" has up to columns 17 (range 0 - 17)?

[@Frankslaboratory]

@@ShaunLin-h4m The code says if frameX is less than 17 increase frameX by 1 it means it does go all the way to 17, when its 16 frameX++ will still run one more time. We have 18 columns in the sprite sheet, column 0 - column 17.

[@ShaunLin-h4m]

@@Frankslaboratory Ahhhh... I see it now! Thanks Frank for your patience and generosity in sharing with the world.

[@Frankslaboratory]

@@ShaunLin-h4m I'm here to help :)

[@mashmixture5662]

Omg frank your are amazing.... I lost my words...!

[@Frankslaboratory]

Glad you like it ha

[@HuynhLuong227]

many thank, i'm learning it, hope you make more tutorial about game with canvas and javascript

[@Frankslaboratory]

I made many game tutorials Huynh and more are coming

[@MohamedSalah-je9lq]

wow thank you, now i can have fun!

[@Frankslaboratory]

Hope you find some value Mohamed

[@BobbyCharlz]

Great video, thank you.

[@krishnanspace]

Amazing videos! You have earned a subscriber!

[@Harsh-eo7xo]

Waiting for more

[@Frankslaboratory]

thanks Harsh

[@Harsh-eo7xo]

@@Frankslaboratory can you make a tutorial on sprite animation or how to make game assets if possible. Thank you

[@alekseysverbeev2934]

Okay now i finally know how to center a div

[@Frankslaboratory]

Hi Aleksey, nice :D

[@JNET_Reloaded]

Cant find the code for this on your links can you upload it all to github?

[@Frankslaboratory]

No github this time, maybe I will release code for the final game later

[@realsubhajitpatra]

Hi Frank 👋 Nice work brother.

[@Frankslaboratory]

Hi Subhajit! Thank you brother

[@jasonponce7415]

Bro! Thanks so much! I got and installed and wNice tutorialle watcNice tutorialng tNice tutorials I'm following your steps, and I really fully understand. So Kool! Thanks

[@helenefalk500]

Great job Frank, thank you. I learned a lot,

[@Frankslaboratory]

Hi Helene, nice to meet you, thank you for letting me know that you found some value

[@asakurachaos]

Thank you for the tutorial. Sadly for me after following you in the middle of coding my image disappeared and decided to start over again but the only difference I made was the Google fonts and I don't think matter in that situation. But even with an image that does not appear I decided to follow until the end

[@Frankslaboratory]

Hi, debugging is a challenge sometimes, when you encounter a bug like that console is there to help you. Check for errors, if there is an error it should usually guide you to a line of code in script file. If there is no error you have to console log all relevant variables and functions one by one to find which one is undefined, triggers an error or has wrong values. It becomes easier as you debug more often

[@fr1endsies]

Have another go. Take it slow and one line at a time. When the img vanishes, you should be able to pinpoint the line/block that is the problem, and work on it to fix.

[@xevernareto]

Excellent, thanks for sharing! :)

[@Frankslaboratory]

Hi Luis, glad to help :D

[@indidwilestari853]

dedication to what you want to acNice tutorialeve in life! Stay safe and be wise! Much love!

[@Frankslaboratory]

Thank you for your feedback, glad you found some value

[@marcoandreschmidt5859]

I had a good time watching your video

[@helleye311]

This is pretty great for beginners. Not sure why the algorithm brought me here but I gotta appreciate the production quality. Everything is super well explained, and while I feel like you could make things a lot better with some inheritance and array maps+dictionary for the event listeners at the end and such, this really demonstrates the concepts super well. Also, plain JS, very brave, I'm scared to go near this stuff. Fantastic work!

[@sofieneloghmari6814]

I had soft soft for a wNice tutorialle but never actually opened it because it looked too complex. TNice tutorials actually helped quite a bit. i an like for

[@Frankslaboratory]

Thank you Sofiene, it's not as complex if you take it step by step, it becomes just a set of repeating techniques

[@JaiV286]

Please create full Javascript course video bro, I want to learn from you !

[@Frankslaboratory]

Hi Jai, I will consider it. I think there are many courses covering basics, but not enough tutorials are showing the more interesting animations, that's why I usually end up teaching that.

[@yepyep3073]

The best tutorials

[@Frankslaboratory]

Thank you

[@cssanimationeffects2649]

you are a life saver, thank you👏👏

[@Frankslaboratory]

Glad you found some value :D

[@efthyvoulos_tsouderos]

Frank, congratulations for your marvelous content. I have a question, where we can find free sprites and sounds. They will be great to practice game development. Do you have some websites to suggest?

[@Frankslaboratory]

Hi Efthyvoulos, glad you found some value. Animated sprite sheets take work to make, you have to draw something and then rig it and animate it. There aren't many free resources. I can't leave the links here, KZbin would delete my comment. Opengameart website has the biggest repository of free sprites, quality varies. You can also Google Bevouliin or gamedeveloperstudio, both have some free stuff, but also affordable paid assets. You can also hire a sprite artist on Fiverr, that would be the most expensive option, but you can make unique custom themes for your games.

[@efthyvoulos_tsouderos]

@@Frankslaboratory Thank you Frank, you are awesome.

[@Anthony-nf3rb]

crystal clear is a nice drink

[@yarielpearson5081]

do you have a tutorial for making sprite sheets?

[@shivamkumargaur9871]

example... Drum kit - (kick, Snare, Nice tutorial-Hats ETC) all RED, app all Purple, Keyboards all Yellow, softs all Green and on..

[@joekagerer]

I hate to ask such a simple question, but what editor are you using, and is the screen layout done in post production, or is that how your desktop looks. It looks simple and clean...

[@Frankslaboratory]

Hi Joe, yes you guessed right. I'm using VS code editor with Live server plugin for instant reloads and on the right side is Google Chrome browser. I crop all non essential distractions in post edit so we can focus on the code.

[@joekagerer]

@@Frankslaboratory Thank you, I just discovered your channel (and you) yesterday, amazing stuff!!! I commented on another video that I've been writing JS for about 25 years and you blew my mind... Your tutorials are very easy to follow, you're concise and to the point. #2 I was amazed at the frame rate of the animation and how fast you can animate thousands of objects. One of the drawbacks of being involved with computers for 40 years is I tend to underestimate the power of today's machines. My own JS code recently I clocked at 50,000 operations in 20mS and it just blows my mind. I remember 1mS clock cycles 🙂 Thank you for your work and response.

[@ManishKumar-oy7hq]

Typical indian bollywood music at start made my day

[@Frankslaboratory]

Hi Manish, it's the main Harry potter theme remixed, it does sound like good old Bollywood, now that you mention it :D

[@sipiware]

brilliant!!!

[@Frankslaboratory]

Glad you found some value!

[@AILearner-g9j]

Great tutorial, btw i cant find the source code of this

[@diegotenorio5815]

Is there any problem like performance to create divs with background instead of canvas? One background image changing its position is my favorite aproach for now

[@Frankslaboratory]

Hi Diego, you can use divs for small projects, it wont work if you want a game with physics, enemies, particle effects etc. Yes for simple games, but animating divs is only for very simple games.

[@simplystart]

Boss tNice tutorials mate, thanks

[@alexandriagrosso1952]

Thank you

[@Frankslaboratory]

Hi Alexandria, I'm here to help

[@appnexx1263]

Cómo siempre, excelente 👌👍

[@Frankslaboratory]

gracias :)

[@АдильЗакарин]

Cool👍

[@MugyGameDev]

Hi, question about scaling the animations. There is a way to avoid the blurry image ?

[@Frankslaboratory]

If you don't want blurry images when you upscale them you have to make sure the source image is big enough and sharp enough for the largest scale you will need. Then scale that image down or have multiple images for different scales. Depends on the project specifics. You can try to switch built in image smoothing on canvas on and off to see how it affects the image

[@yaswanthyash2588]

Thanks

[@Frankslaboratory]

I'm here to help Yaswanth

[@goffyfoot82]

Anyone new jumping in and would like the Play Animation selectors aligned just add to the CSS. He tries but moves forward to the JavaScript. It just hurts my eyes looking at it!! All GOOD ...Peace #controls { display: flex; justify-content: space-around; } p { padding: 0 .25rem; }

[@Frankslaboratory]

Hi Will, thank you, I forgot to go back to the css and fix it, much appreciated

[@angladephil]

Very good tutorial, thank you. But please, turn off the music when teaching !

[@Frankslaboratory]

Hi. There's not music. Maybe there is in the first 20 seconds

[@angladephil]

@@Frankslaboratory yes, sorry. My reaction was too fast. I follow you since monthes, and I really appreciate your work! Thx

[@mustang...]

Is there any particular reason to move the "animate" function outside of the Mandrake class? The sole purpose of this function is to animate the mandrake, so it should belong to the class, imo.

[@Frankslaboratory]

Hi, yes you are making a good point. The idea is that the mandrake is not the only thing we are animating, so the codebase we build in this video can be expanded to create a full game.

[@nein3405]

in update, i think you should first calculate frameX and frameY and only then increase frame for the next update. if you dont, you never start with the first, but the second frame, which might or might not be unimportant.

[@Frankslaboratory]

HI Nein, good point, unless from animation loop you first call draw, then update, that way that first frame will be drawn before frame count increases. It's not a big deal in looping animations but for something line an explosion that plays only once, that first frame would always get skipped.

[@nein3405]

@@Frankslaboratory "first call draw, then update" which is true, but it kinda feels backwards (at least in my head). you first update, then draw the scene dontyou? especially in larger projects with dozens of different entities being updated and drawn you may want to have consistency here. but other than this quite minor thing (its introductional) a pretty good video +1

[@Frankslaboratory]

@@nein3405 I think that calling draw first and then update is a good idea to do in general, I don't see an issue unless I'm forgetting something.

[@nein3405]

@@Frankslaboratory im not sure it creates such huge issue that its "game-breakingly bad", but you will always be a frame behind any change. like when some entity which updates but does not draw spawns other entities, you create them in the same frame, but only draw them the next one. or if you poll for player input in an update, it will only have a visible effect one frame later. it may even make a visible difference for very fast moving objects that collide with something, since the collision happens the frame before its drawn again. maybe its unimportant, maybe its not - in the end were talking about a single frame delay - and it maybe also really depends on your usecase or is simply a matter of choice (as long as you stay consistent across your application). im from a bit different background, i only got your video recommended and it looked interresting enough to watch, but major game engines also have their game loop follow a first update then draw principle (which may be the reason why it makes more sense to me, like i said, maybe its really only a matter of choice)

[@evilghost1993]

can u make enemy AI ?? Love your content ❤❤

[@Frankslaboratory]

Good idea, I need to do some enemy AI projects

[@diamondkingx6281]

@@Frankslaboratory I recently made a simple AI, an enemy will enter the screen choosing the closest point from an array of 'destinations' then it will check if the player is too far away. If, then it will find a point close to the player and set it's 'destination' there. If the player gets too close, the enemy will run in the opposite direction... and that's it. Did some tweaks for different types of enemies, like some enemies will wander... and I guess that's good enough :)

[@quiensoy9036]

To download soft soft is the download free or do you have to pay for it?

[@gpgowtham908]

With wNice tutorialch app you made tNice tutorials video??

[@vaaaaaaaaan8678]

what should I do if I cropped them? my animation is a bit laggy because the image is too big

[@Faisal-qd1jc]

Great video as usual. Would you make a video about pixel density independent canvas drawing? I believe It is an important topic for games & creative coding. Also, I think you should explore THREE.js and Webgl more. you can do unbelievable things there with high performance.

[@Faisal-qd1jc]

@Markus Zeller ​ yeah, I know. but this approach (not using a framework or library) isn't great for production or complex projects.

[@Faisal-qd1jc]

@Markus Zeller For sure!

[@Frankslaboratory]

@@Faisal-qd1jc Hi, yes, as Markus said, there are tools and libraries that make things easier but the point of this channel is to do things in vanilla JavaScript. You need to be good with JavaScript before you can build complex projects and you won't learn if you only know libraries. I use vanilla JS to explain how things work under the hood so that we can talk about the logic behind the scenes.

[@hamzabelhaj491]

ti (the instrunt into the channel rack) and then it crashes the soft soft... Can soone help please?

[@taposhbarman7447]

Is there any alternative to spritesheet animation? I am saying it because spritesheet is big in size which makes game load more time and laggy .

[@Frankslaboratory]

If you want to use graphics in your 2d game, sprite sheets are the best option as far as I know. There are many ways to optimise them that I haven't covered yet, there is only so much I can talk about in videos for beginners. Easy optimisations would be things like making the images the right size and putting all characters in a single sprite sheet. Splitting game into layers and only redrawing the things that actually updated will also increase rendering speed. I will show how to do some of these in a future video.

[@Vxortex]

At least here it is.

[@javascripter9477]

How to make image blinking on impact? I can see only one method: to use timer. But I want to find something else.

[@Frankslaboratory]

There are many ways, I would create a sprite animation frames specifically for that, like I did with the dog game

[@javascripter9477]

@@Frankslaboratory Thank you!

[@QvsTheWorld]

Flash: Look What They Need To Mimic A Fraction Of Our Power... But in all seriousness great video. I would suggest for ease of use to store animation in an object(like a dictionary) in your class. const Animations = { Anim1: {firstFrame: 0, lastFrame: 365}, Anim2: {firstFrame: 18, lastFrame: 35}, Anim3: {firstFrame: 35, lastFrame: 55}, }; then you could simply call Mandrake.setAnimation(Mandrake.Animations.Anim1). This way you only need to change a bunch of places in your code if you tweak your animations and realistically the class user is really only concerned about which animation they want to play, not what frames they use.

[@Frankslaboratory]

Hi, this is a good point, I will try to use this in a future video, thank you for sharing. I'm not a flash expert but I'm pretty sure canvas can do anything you can do with flash, but I might be wrong :)

[@QvsTheWorld]

​ @Franks laboratory The point really was that in flash you have an IDE made for animation that happens to support coding, so it's pretty trivial to create/import/modify an animation with a couple of click and no line of code. Even early teenagers could do it easily. In a way the display and styling is handled using a visual IDE while logic is handled with code (ActionScript3). To me it always made more sense to use visual tools to deal with display and logic based tools (programing languages) to deal with application logic rather than learn extra languages. Anyway it was all in jest. Great video again.

[@dipeshkanavaje2039]

how is it going ? Any progress ?

[@CodeToad_]

What editor did you use for this tutorial?

[@Frankslaboratory]

Visual studio code

[@CodeToad_]

@@Frankslaboratory Ok thanks!

[@greeffer]

Because I am such a big fan I want to offer you some constructive criticism. You can take it or leave it: Link to a repo of a working version of the code in your video so your audience doesn't have to pull thier hair out trying to diagnose relatively minor bugs. Some of us can't afford to lose any more hairs up top. I know you want to encourage learning, but maybe you could put a link to the github at the very end of the video, or hide it in the comments or on your social media or something. Please?

[@kcinplatinumgaming2598]

lol bit different from what I was developing using sprites on 8 bit machines back in the 1980s .. no bitmaps or image maps back then

[@Frankslaboratory]

Must have been a very different workflow back then, modern programming languages make everything easy :)

[@kcinplatinumgaming2598]

@@Frankslaboratory yep ... all designed in binary lol

[@darwinvillanueva8533]

damn tNice tutorials felt like i learned a new language or programming.

[@WMFM]

Plz make a tutorial on an Rpg game

[@Frankslaboratory]

I will

[@hano2424]

I don’t even have any old types of soft soft

[@Nodsaibot]

I say the " unused space" of horizontal sprite sheets is not an issue with even 128k internet only if you have MANY characters and want to fit your game in a FloppyDisk

[@Frankslaboratory]

@Markus Zeller Thanks for the clear explanation Markus

[@amitlevi373]

sa here

[@karinagabrielaserranorodri5646]

Appears the default is the distorted app wNice tutorialch softed terrible.

[@PolineChan]

ah yes. just need to add " i am groot"

[@Frankslaboratory]

Hi Poline, yes, I forgot to add some groot jokes in the video, damn :D thanks for doing that for me :D

[@DragonxgamerYT]

Who else has been making soft for a wNice tutorialle before but with a different DAW and wants to learn how to us soft?

[@randomfinn404]

first!

[@Frankslaboratory]

Congrats :D

[@Slayergg.]

together. They're not great and they still have a ways to go before being

[@igors634]

Better to create a separate videos where to explain basics of css, classes, reusability, scope, ternary expressions and so on... And in this video just focus on animation.

[@Frankslaboratory]

Hi Igor, thank you for your feedback

[@irfanakatkn1457]

that marijuana

[@Frankslaboratory]

It's a mandrake Irfan, lol

[@dmaz123]

your definition of a "compact" sprite sheet is incorrect. both your examples are just regular sprite sheets because they are a regular grid of cells. a compact sprite sheet attempts to remove as much empty space it can by removing all the empty margins around the gfx. you would record the sizes of each sprite in a file so you know how to extract the sprite and place it correct. you can even go further and rotate sprites 90 degrees to better pack them into the sheets to get even more use out of your GPU memory and reduce your draw calls.

[@Frankslaboratory]

Hi David, thank you for your feedback. Probably you are right when you are talking about sprites in the world of Unity and other game engines. If you look online there is a mix of sprite sheets that use the term 'compact'. For example if you check free sprite sheet packer tool on codeandweb website (can't leave a link here, KZbin blocks links, but it's easy to Google), they use the term 'compact' same as I did in this video. I did explain what I mean by the word compact by showing it in the beginning, so it's easy for people to understand if this is what they are looking for or not. Anyway I appreciate your feedback.

[@gucciking4907]

its free

[@safouanefethallah5485]

L struggled to make soft

[@mukhammad5464]

Thank you. It really works 