Creation of a Ragdoll with Flash part 1: Verlet integration

Some of you in this On the horizon post requested a Ragdoll tutorial, so I started reading and experimenting until I got something good.

But it’s not easy nor intuitive.

If you want to follow me in this jouney, open flash and prepare an huge amount of aspirin, you’re going to feel a real headache.


Ok, let’s start.

The first thing we need to consider is that a ragdoll, or a simple ball, is a particle system in the space.

We’ll start with a single particle in the space: a ball.

Let’s define the attributes of a particle in the space:

Position: The (x,y,z) position in the space. From now on, we are going to consider a 2d space so we’ll have a (x,y) position

Velocity: The speed the particle moves in the space. If we split the speed in x speed and y speed, we can know its direction too. At the moment, it’s not so important.

Acceleration: The acceleration (if any, positive or negative) of the particle.

Knowing all this attributes, we can determine new position and velocity in this way:

Nx = x + vx * Dt
Ny = y + vy * Dt
Nvx = vx + a * Dt
Nvy = vy + a * Dt

That sounds like this: The new x position Nx is determined by the last known x position x plus the x velocity vx multiplied by the time interval Dt. Same thing for y velocity, then the new x velocity Nvx is determined by the last known x velocity vx plus the acceleration a multiplied by the time interval Dt. Same thing for the y velocity.

This is better know as Euler integration or Euler method

From Wikipedia: In mathematics and computational science, the Euler method, named after Leonhard Euler, is a numerical procedure for solving ordinary differential equations (ODEs) with a given initial value. It is the most basic kind of explicit method for numerical integration for ordinary differential equations.

While this formula may fit our needs in a space with few particles, the large amount of trigonometry involved in splitting velocity into x and y velocities just to determine once again the angle of movement would crash the system in case we are going to simulate a space with lot of particles.

Even with a supercomputer, where the CPU does not represent a problem, the large amount of equations needed to solve all the problems we are going to solve (all in all we are talking about ragdolls!) would be too complex to be solved with the single use of trigonometry.

Moreover, this kind of integration suffers from many problems as discusses on Wikipedia that I won’t explain since this is not the aim of this tutorial.

To reduce the errors, we need another integration scheme where velocity is not considered.

Of course, we can use a velocity-less integration scheme only if we can assume that we have regular time intervals. The question is: do we have regular time intervals? Yes, we have… that’s what us flashers call “frame”.

Now that we know that we have a fixed time interval, it’s time to introduce the Verlet integration.

From Wikipedia: Verlet integration is a method for calculating the trajectories of particles in molecular dynamics simulations. The verlet integrator offers greater stability than the much simpler Euler integration methods, as well as other properties that are important in physical systems such as time-reversibility and area preserving properties. Stability of the technique depends fairly heavily upon either a uniform update rate, or the ability to accurately identify positions at a small time delta into the past.

As said, “uniform update rate” is what we have. The Verlet integration reduces the level of errors introduced into the integration by calculating the position at the next time step from the positions at the previous and current time steps, without using the velocity.

We can now calculate the new position in this way:

Nx = 2x – Ox + a
Ny = 2y – Oy + a
Ox = x
Oy = y

And sounds like this: the new x position Nx is calculated from the actual x position multiplied by 2 minus the previous x position Ox plus the acceleration a. Then, the previous x position Ox will be the actual x position.
Same thing for the y position.

As you can see, there is not velocity in this integration.

When I firstly saw this integration, I was tempted to give up saying it was not possible. And I ran out of aspirin!

But, believe or not, it works… and it’s time to put some actionscript in action

Start creating two movieclips defined and linked in this way:


The red ball is the “Euler” ball, while the green one is the “Verlet” ball.

Then, for this first example, we are considering only an y-axis movement, controlled by the “gravity”.

The actionscript in the first frame is:

gravity = 0.5;
yspeed = 0;
attachMovie("euler", "euler", 1, {_x:166, _y:20});
attachMovie("verlet", "verlet", 2, {_x:334, _y:20});
euler.onEnterFrame = function() {
	yspeed += gravity;
	this._y += yspeed;
previous_y = 20;
verlet.onEnterFrame = function() {
	save_y = this._y;
	this._y = 2*this._y-previous_y+gravity;
	previous_y = save_y;

Line 1: Defining the gravity, the y acceleration.

Line 2: Defining yspeed to zero (for Euler method)

Lines 3-4: Placing the movieclips on the stage

Line 5: Beginning of the routine to be executed at every frame for the euler particle

Line 6: Adding the gravity to yspeed

Line 7: Updating euler _y position according to its yspeed. Notice that this method is the same as seen in this tutorial. Anyway, people still call it Euler method instead of Feronato method.

Line 9: Defining the previous_y position for the verlet particle. It’s 20 because it’s its starting position as you can see at line 4

Line 10: Beginning of the routine to be executed at every frame for the verlet particle

Line 11: Saving the actual _y position

Line 12: Applying Verlet integration

Line 13: Updating the previous_y variable with the _y position of the verlet particle

As you can see, one method is a quite good approximation of the other one. You may need to reload the page to see the code in action (if can we call “action” two falling balls). Even if in normal purposes I will continue preferring the Feron.. ehm Euler method, you’ll see how the Verlet integration will be very useful when we’ll start to make our ragdoll.

At the time it’s over, open a window and take a deep breath, it’s over at the moment. In next tutorial we’ll see how to “link” one particle to another to create a body.

Download the source code and give me feedback

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers