Pointer Events in Canvas

Who Are We?

Dean Hudson, @deanero
Mason Browne, @metapandava
Developers, Massively Fun

We make games with
open web technology.

http://massivelyfun.com
@massivelyfun

Basic Game Loop
and Entities

Game Loop
Outline
• Call requestAnimationFrame
• Handle queued UI events
• Call update on your game entities
• Render!

// game loop
gameLoop = {
run: function () {
this.id = requestAnimationFrame(this.run);
update(); // Call update on each entity
draw(); // Call draw on each entity
},
stop: function () {
cancelAnimationFrame(this.id);
}
};

gameLoop.run();

RAF Shim

• Lots of examples on the internet
• Set RAF to whichever your browser has
• Fallback to set timeout at ~16ms

buildRAFPolyfill = function () {
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (cb, elt) {
window.setTimeout(function() {
cb(+new Date());
}, 1000 / 60);
};
}

Simple Game
Entity

• Respond to update call
• Manage position, height, width
• Attach pointer events here

class GameEntity
# @params: {rect} The entity's drawing primitive
constructor: (options = {}) ->
{x, y, rotation} = options
@position = new Position(x, y, rotation)
@id = options.id ? UUID.generate() # You wa this

moveTo: (pt) ->
@position.setXY(pt)

rotateTo: (rot) ->
@position.setRotation(rot)

# Coeff is a multiplier from the timer which we can use to adjust
# motion to match how far we are off our target frame rate
update: (tick, coeff) ->
# do something interesting here.

contains: (otherX, otherY) ->
@rect.contains(x, y) if @rect? and @linkedRect

module.exports = GameEntity

Simple Draw
Primitive
• Respond to draw call
• Manage position, height, width
• Determine containment here (image hit
detection, for instance)

##
# Rect: Drawing primitive
class Rect
constructor: (options = {}) ->
@visible = options?.visible ? true
@width = options?.width ? 1
@height = options?.height ? 1
{x, y, rotation} = options
@position = new Position(x, y, rotation)

draw: (ctx) ->
throw new RenderError("Implement Me")

# Basic, rectangular containment.
contains: (otherX, otherY) ->
{x, y} = @position.get()
(otherX >= x && otherX <= x + @width) and
(otherY >= y && otherY <= y + @height)

module.exports = Rect

Strategy
• Attach onFoo to your canvas element
where Foo is your DOM pointer event
• Build a normalized event from the DOM
event
• Normalize your page X/Y to canvas X/Y.
• Check for containment in game entities
• Call handler if the entity contains the point
and the handler exists

WTF is
ImageData?
• ImageData is what you get back from a
getImageData() call
• A single byte Array with ALL your pixel
data
• Pixel data is stored as R, G, B, A tuples

Single pixel Array
offsets
0 1 2 3

R G B A
8 bits 8 bits 8 bits 8 bits

4 bytes

Since ImageData
acts like a byte
array....
• We can iterate through the pixels and do
arithmetic or bitwise manipulation on the
data.
• Use XOR, NOT, etc. Get weird!

var filter = function (x, y, w, h) {
if (!this._cache) return;
var ctx = this._cache.getContext('2d'),
idata = ctx.getImageData(x, y, w, h),
i;
for (i = 0; i < idata.data.length; i++) {
idata.data[i] = (idata.data[i]++) % 255;
}
};

var filter = function (x, y, w, h) {
if (!this._cache) return;
var ctx = this._cache.getContext('2d'),
idata = ctx.getImageData(x, y, w, h),
i;
for (i = 0; i < idata.data.length; i++) {
if (! i % 4 === 3) continue;
idata.data[i] = (idata.data[i]++) % 255;
}

Strategy

• If (x, y) is in the bounding box for the image,
check pixels.
• getImageData() to get a pixel data array for
your sprite at pixel x, y.
• Check byte values for pixel.

var isPixelPainted = function (x, y) {
ctx = this.imageCache; // this must be a canvas!
thresh = this.transparencyThreshold || 100;

// Grab a single pixel at x, y: if the alpha channel is greater
// than the threshold, we're in business. idata acts like a byte
// array with each pixel occupying 4 slots (R, G, B , A).
idata = ctx.getImageData(x, y, 1, 1);
return idata.data[3] > thresh;
}

DON’T FORGET:
each idata.data
value is between
0-255!

Thanks!

dean@massivelyfun.com, @deanero
mason@massivelyfun.com, @metapandava
http://massivelyfun.com

Pointer Events in Canvas

Recommended

More Related Content

What's hot (20)

Similar to Pointer Events in Canvas (20)

Recently uploaded (20)

Pointer Events in Canvas

Editor's Notes