Using Bezier Curves to Tween Object Movement

Bezier curves are commonly used for two-dimensional graphics. A tutorial from a veteran HTML game developer gives us basic pointers on how to use this type of curve for tweening animations.

A Bezier curve is composed of points that are connected by handles. You can move the handles to change the curve’s shape.

You can create the curve with just a single line on Phaser 3. Then, you can add points on both ends of the line to define its shape.

The game developer also shared his code for tweening the animation.

Read the rest of the tutorial here.

bezier curve


You might also find this interesting:


  1. Hearthstone card effect in CSS An interesting question was posed via Twitter recently. It was about finding a way to create a card browse/hovering effect like the one in the popular card game Hearthstone using...

  2. HTML5 Game Development Facebook, Twitter and G+ The official HTML5GameDevelopment.org Facebook page up at: http://www.facebook.com/Html5GameDevelopment The official HTML5GameDevelopment.org Twitter account is at: https://twitter.com/#!/gamedevhtml5 The Google Plus page is up at: https://plus.google.com/b/106608051085232600929/ All are updated automatically via the...

  3. CodePlayer Tutorial: Make a snake game using HTML5 and jQuery The folks over at TheCodePlayer.com have written an interactive coding tutorial that walks you through the code for making a snake-game in HTML5. The tutorial walks you through the code...

  4. Quintus Engine The Quintus engine is a simple HTML5 game engine designed to be modular and lightweight, with a concise JavaScript-friendly syntax. ...

  5. Planet Builder Web Game with Spherical Voxels In this Minecraft-like game project, you can build a spherical planet using cubes. But unlike Minecraft, Planet Builder uses cubes that must be just a teeny bit convex on one...

, ,
Uncategorized