David King

full stack developer

All Blog Articles

Prev « Button Up! Next » Practical Internationalisation

The Inverse Kinematics of Lord Mountbutton

04 Mar 2015

On the surface Button Up! is a simple casual game, but there's more than meets the eye when it comes to the FTUE (First Time User-Experience).

I've been through several iterations of content, but the one element that felt "just right" is the dynamics of Lord Mountbutton. With a little back and forth with Gavin McPhail (graphics) I rigged him up in a few days.

Here I will describe the basic logic that goes into the Inverse Kinematics with a stretchy twist.

Lord Mountbutton can point at anything on-screen

In most Inverse Kinematics tutorials you will read about skeletons and bones etc. terms used to describe components of fixed length. Lord Mountbutton however, has a "telescopic" needle that allows us to extend the range of pointing. This required an extra step in the kinematic logic

The forearm image contains the arm, hand and telescopic needle, "3-slicing" allows the image to stretch along the needle shaft:

Forearm logic
length a
the known variable length
length b
fixed length based on internal geometry
length c
sits exactly on the X-Axis, 3-slice scaling stretches this segment leaving the rest intact
angle A
fixed angle based on internal geometry
angle B
used to offset the overall asset angle to keep the arm visually straight
angle C

Essentially, we need to convert length a into length c and angle B, this can be acheived by solving the triangle. After that, it's a case of restricting the motion of the arm to natural looking angles and deciding which routine to use.

  1. Attempt to calculate using inverse kinematics (example)
  2. Bind the angles to a natural range
  3. If the point has not been "touched", stretch the forearm, accounting for internal geometry

Simple as that!

The deconstructed Lord Mountbutton looks terrifying

Prev « Button Up! Next » Practical Internationalisation