Sprite Animation in JavaScript - JavaScript Tutorial with HTML Canvas (Javascript Game Ep.3)

this video is inspired by spy animation in javascript by frank's laboratory [Music] [Music] hi friends this is tk and welcome to my youtube channel and today i will do crazy thing with my own characters and bring it next level making animation by using javascript it takes me a lot of time to get here i have to design my own characters and create a sprite sheet oh by the way you can check out my previous video somewhere right here so you can follow my step to design your own characters now we jump to the interesting part create an animation by using javascript by the end of this video you know how to change your character action just by one selection and if you love my character animation you can download my sprite sheet and quote on my github and don't forget to give me a star on my repository this will encourage me a lot now let's get started first phone as usual in my index.html5 i will give it title sprite animations and link it to my style.css file i also link script.js this is where we call all logic and algorithm to implement our idea here i create an xml canvas element with the id of my canvas if you don't know the html canvas element is used to draw graphics on the web page but don't worry just follow me i will explain it in more detail after in the css5 i write some code because i want my canvas to appear in the middle of the page with a width of 778 pixel and height of 625 pixel in script.js i will use getelementbyid method to return the mycanvas element with a specified value so i can edit my canvas element through this value easier then you need a drawing object for canvas using context you might be wondering why you have to write this light up code you can check out the canvas tutorial on w3school.com i will link below the description in canvas drawing tutorial it will show you three basic steps to draw on the canvas with javascript you just simply follow them next i give my canvas the width and height dimensions it is the same as i gave it in style.css to bring image into javascript project in html5 i add an image tag and give it a sort to my sprite sheet and the id my image in script.js i use getelementbyid method to return my image element with a value let's animate our characters by creating a function that's called animation to make sure that clear between every animation frame we use the clear rect method let's re-clear the specified pixel within a given rectangle i start to clear the upper left corner of the rectangle so i put 0 and 0 right here then i want to clear the entire rectangle so that i put the canvas width and height right here to draw our sprite sheet onto the canvas we use the draw image method because i don't want to draw the entire sprite sheet this method will help me draw parts of my sprite or even increase reduce the image size it says 3 or 5 or 9 argument depending on how you want to control your image let's go a bit deeper the first argument is the image you want to use so it passes my image then i pass this s x and x y to the recording edge of the image when you want to start to clip for example with my sprite sheet this point have the xx 1038 multiple 2 pixel and xy 833 pixel and the same as for this point this point and this point next as width and as high to set the width and height of the image would you want to clip for example i want to clip this attack action image i started sx 1038 multiple 2 pixel and xy 833 pixel but not enough i want to clip a zone of rectangle 1038 and 833 pixel so i pass them into as width and as height but carefully if your ratio of s width and as height is different from the ratio of my canvas it will stretch the image that looks so bad and you maybe don't want it to happen to keep it easy i will declare two cons value spy width and spy height and pass them right here then the last four argument will tell javascript when our destination canvas we want to draw the x and y coordinate is where to place the image on the canvas but for our project i will put it 0 and 0. finally the width and height of the canvas this is the same as the side of my canvas if not your image will be spread or reduced the request animation frame method tell the browser that you wish to perform an animation and request thus the browser called a specified function once to update an animation before the next repaint if i pass this animate the navies parent function it will just run over and over creating an animation loop and right here i just simply call it animate okay make sure you understand the draw image method before we continue with this method i can crop out a piece of my sprite sheet to be displayed on the canvas by changing these two arguments you can easily realize that this number must be multiple spy white and spy height if you want to crop exactly the image so to display the animation row frame by frame i just simply increase this number it allows us to cycle through the sprite sheet horizontally now if i want to swap between different animations i have to travel through it vertically by changing this argument it works the same as the previous argument when i create this number by 1 it will jump to the attack animation then gem animation and finally the dash animation there's a problem here whenever you want to change the animation you have to change these values and run the code again and definitely i don't want to do this and lucky there's a tune to help us deal with it we already have a loop in this loop i put a variable and automatic change it in an amount of time look at the first animation we have four frames so i says if game frame is less than four increase game frame by one otherwise return back to zero okay i have our animation here now i want to slow down it a little bit by using just one variable so how can i do that if i want the animation slowed down twice i just simply increa game frame every two animation loops using another condition statement [Music] the variable may show that two animation loops have been run and now it's time to increase game frame by one then it will turn the game frame back to zero slow down twice time is probably not enough i will slow down it a little bit by changing stagger frame by five the bigger number you pass into staggered frame the slower animation is we also have another method to slow down the animation using an arithmetic operator's modulus the modular operator returned the division remainder for example it will always return the integer value between 0 and 4 although the game frame is still increasing and the same thing with the stack variable that looks good but we have another problem when i want to change to the attack animation i have to change two variables the frame y and the number of frames the same thing happened when i want to change to germ animation and the dash animation this is so inconvenient let me show you a technique that allows us to swap between different animation state by changing just one value we realize that to display animation we need to know two information the name and the number of frames so i will put them into an object and do the same thing with the order animation then i will pack them into an array [Music] now i want to display the attack animation i will pass it index up the attack object in animation state in this case is 1 [Music] 2 for jump animation and three for the dash animation by this method we just only change one variable and everything has been automated then but passes 1 two or three here these numbers are meaningless so i wanna pass it the animation name is definitely clear meaning the easiest thing i can do is use another array including the animation names you notice that the animation stay array and spy animations array have the same order of animation names then i use the index up method to return the index of animation name and pass it right here [Music] finally i will create a select element this is used to create drop down list so you can easily change the animation during the code running in index.activemail i create a new div with a class of controls inside there will be a select element given label tell something to user it's so cute right inside of you we have four options each of the options has specified value such as run jump attack and dash go to style.css5 i will make it look better by some lines of code [Music] now i want animation change when i choose a different value in a drop-down list in script.js i create a constant variable drop down to read or edit a select element by using getelementbyid method i take trapdown and listen for the change event whenever the event occurs this function will be run in the callback function i will access to the event object e target the target event property returned the element that's triggered event in our case it will return to the select element and the value property will return to one of these texts whenever any of these option elements in my drop down is click the play state variable will be set is value attribute between different animation in my spy sheet just by selecting different animation now i can easily swap between different animation in my sprite sheet just by selecting different options in a drop down hope you enjoyed this video and get inspired to make your own character animation before you leave don't forget to give me a thumb up and hit the subscribe button i will see you in my next video bye [Music] you

Channel: TK

Views: 6,421

Keywords:

Id: krNollwfqN0

Length: 14min 12sec (852 seconds)

Published: Sun Jun 19 2022