Sprite Move Face Tracking - RPG Tutorial 10

This post was inspired by this tweet from @chordbug, I loved it and wanted to add it to this tutorial series.

TLDR; Below I will show you how to track your users face and allow them to move goku (with arrow keys or canvas touch) only when they are looking at their screen, using trackingjs.

First off, download trackingjs if you haven’t already and include them into your project. We are only using tracking-min.js and face-min.js right now.

Below is the code you’ll need to add to the previous tutorial to allow for a simple allowMovement state (looking or not looking) toggle accessible within our simple game.

// add this with our global variables
var allowMovement = false;

// add face tracking support
var tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);


// or whatever your video tag's id is, within your markup
tracking.track('#video', tracker, { camera: true });

tracker.on('track', function(event) {
  // face recognized within camera?
  if (event.data.length) {
    allowMovement = true;
  } else {
    allowMovement = false;
  }
});

Now with that simple state toggle happening, we can add support for it at the start of our update() function, as shown below:

// is the user not looking at the screen?
if (allowMovement === false) {
  return false;
}

Now let’s say we want a visual representation of the movement state, add the following to the above code:

// is the user not looking at the screen?
if (allowMovement === false) {
  canMoveText[0].innerText = "can't move";
  return false;
}
canMoveText[0].innerText = "can move";

NOTE: add var canMoveText = document.getElementsByClassName('movement-state'); to the global variables area. Replacing the classname for your needs.

music in headphones when recording this: Kids See Ghosts by Kid Cudi

Now let’s say you want to take a look at what is actually being recognized as a face, add the code below within tracker.on('track', function(event) {})

context.clearRect(0, 0, canvas.width, canvas.height);
event.data.forEach(function(rect) {
  context.strokeStyle = '#a64ceb';
  context.strokeRect(rect.x, rect.y, rect.width, rect.height);
  context.font = '11px Helvetica';
  context.fillStyle = "#fff";
  context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
  context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
});

That’s about it for this tutorial, take a look at the live demo below and you can also download all of the files for tutorial… have fun!

Demo the thing…

Open Demo

Download Source Files

If you would like the source files for this tutorial: Download source files

View Files on Github

Github Folder