Search code examples
javascriptcanvashtml5-canvas

canvas rotate left and right animation on fillRects

EDIT: Decided to add actual sprites and animations instead of using fillRects.

enter image description here

Currently drawing all this on a canvas.

I have an update function and a draw function.

Within the update function, i loop through all the people and update their positions slightly. Then I call the draw function which renders it onto the canvas.

Currently all the do is slide around the bounds of the map but I think it'll add a lot more polish to the game if the little guys have a small walking animation.

The people are all drawn with a fillRect() function. I figured a small animation where the people rotate side to side when moving would be a nice effect. However, i'm not sure how to go about this as well as best practices.

Do you guys have any idea on how to achieve this effect? It seems like if I want to do what im looking for, i would need to then keep track of more states within the people. eg. isTiltedLeft, isTiltedRight, tiltDuration, etc etc. This seems a bit complicated(?) but maybe this is the only way.

Solution

  • Since you don't have any specific code questions, you're generally on the right path. There's a lot of different states to manage, and you'll need to track each of them. If things seem complex, they sure can be. People spend lots of money to run games nicely. A lot of code needs to run very fast in order to make these experiences.

    Common things I've found useful to know:

    • Use a sin wave to add a bounce to your animation.
    • Use Math.Atan2 to find the angle between two points
    • Understand how to convert between Radians and Degrees
    • Use Composition over inheritance as much as possible.

    I'm always happy to chat about game dev, feel free to look up my contact info and reach out. Happy Coding!