Hi guys, I am doing the tutorial found in the link at the bottom and need help creating a sprite such that if the component moves, it appears like they’re walking, or if a rocket ship flies, it looks like its bursting several waves of fire. Please help?
Hi @ayanda, hope you are well!
We do actually have a nice little example that might help you: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics#A_simple_character_animation
Give me a shout if you have any questions.
1 Like
Let me dive in and see what I can come up with! 
well done @ayanda
waiting to see the next pubg/fortnite game made by you 
1 Like
:
1 Like
Hey @chrisdavidmills, what is a coordinate origin, from:
At the bottom of the JavaScript, add the following line to once again make the coordinate origin sit in the middle of the canvas:
ctx.translate(width/2, height/2);
?
@ayanda by default, the coordinate origin is (0,0), which is the top left corner of the canvas. Anything drawn on the canvas is drawn relative to this point. So a point at (100,200) is 100 pixels across from the left, and 200 pixels down from the top.
The translate() function you cited changes it so that this point is in the centre of the canvas instead.
1 Like