Develop Denver 2014: Building Physical Video Games

JUSTIN GITLIN

BUILDING VIDEO GAMES FOR

MARKETING, ENTERTAINMENT, AND

OFFLINE GOODNESS08.02.2014

JUSTIN GITLIN

MODE SET

who?

Born & raised in NHUniveristy of Denver, 2002Clevermedia [2000-2001][redacted]Factory Design Labs [2005-2011]Mode Set [2011-present]

find me:

@cacheflowemodeset.comcacheflowe.com (don't judge)instagram.com/cachefloweflickr.com/cacheflowevimeo.com/cacheflowe

why build games?

Fun - a great way to learn programmingMultidisciplinary art - dig into other mediums & mix with

programmingMoney?

Indie games - risk vs. reward Marketable skills

Techniques extend far beyond gamesDelve deeper into programming concepts & creativity

Graphical conceptsjs1k

why build games? marketing :-/

Microsites / advertisementsBrand engagementPR / wow factorBusiness models

why build games? goodness :)

Learning & EducationResearch says soJane McGonigalGamification / Game Theory

Science!

#OhHeckYeah / Public artCreative Placemaking

Gamification of human interaction on the street

OHHECKYEAH

ohheckyeah

KacheOut: The "prototype"Artplace grantees

1st-of-kind*

BenefitsSafer streets, economic development, revitalization, IRL

community building, new workforce breakroom, idea sharing

Open sourceDemo: KacheOutOpening night video

KINECT

using the kinect

What is the Kinect?Skeleton tracking vs. raw dataDemos: KinectBodyParticles & KinectPixelatedKacheout controlsImprovements & normalization for OHYDemo: KinectHumanJoysticks - common controls for OHYDemo: Catchy!

kinect protips

Kinects don't do well in direct sunlightKinects can lose data with reflective surfacesKinects aren't intuitive - there aren't great conventions yet. Educate

users!Kinect v2 is amazing, but Microsoft tools are requiredBellco game & issues

Small humans don't skeleton-detect very well

PHYSICAL SPACE

ohheckyeah spatial challenges

General play area: more players = more areaKinect remote control - UDP! (WebSockets, OSC)16th St. - Wifi woes16th St. - Audio woes16th St. - Aversion to marketers16th St. - If nobody's currently playing, you don't know what it is15th St. - Buses

LEAP MOTION

leap motion

What is the Leap Motion?Skeleton tracking of the handsLike a mini Kinect, but just skeleton data (no raw depth data)Demo: KacheOut w/Leap

ACCELEROMETER

accelerometer

Native came first: Audi games

Sept, 20085 Million+ downloadsiTunes Top 10 Game of 2008Happy client

familiar game + novel control =

success

accelerometer

Accelerometer comes to the (mobile) webdeviceorientation eventdevicemotion event (gyroscope -previously iOS-only)

Chrome console's accelerometer simulator"Emulation" tab -> Sensors -> Accelerometer

g.co/rollit

accelerometer gestures

Demo: Roll ItNew iOS & Android should be capable

Touch & mouse fallbacksTimeout unless good data helps since there's not reliable

detection

Maeda: Familiarity + NoveltyValueBuffer!

Time-based sampling of data

// create an array of values, defaulted to zerofunction ValueBuffer(numSamples) { this.numSamples = numSamples; this.sampleIndex = 0; this.buffer = []; for( var i=0; i < this.numSamples; i++) this.buffer.push(0);};// replace the oldest value in the buffer with a new valueValueBuffer.prototype.update = function( value ) { this.sampleIndex++; if(this.sampleIndex == this.numSamples) this.sampleIndex = 0; this.buffer[this.sampleIndex] = value;};// return buffer's sum or averageValueBuffer.prototype.sum = function() { var sum = 0; for( var i=0; i < this.numSamples; i++) sum += this.buffer[i]; return sum;

};ValueBuffer.prototype.average = function() { return this.sum() / this.numSamples;};

accelerometer protips

Skeeball throw gestureHTML5ROCKS articleTimeout if real values haven't been detected (laptop browser's can

fire {0,0,0})Androids (as of 1 year ago) are half as fast with event updates

Time-stamp & normalize across devices :(

ParaNorman gestures w/gyroscope event (iOS-only)

paranorman extra credit

Pinch gesturesSee also: rotation gesturesAndroid support?

MORE MODERN INPUT:

MOBILE WEB

lock/unlock a mobile browser screen

To disable scrolling and enable fancy, custom touch interfaces

var lockTouchScreen = function( isLocked ) { if( isLocked == false ) { document.ontouchmove = null; } else { document.ontouchmove = function( event ) { event.preventDefault(); }; }};

boxtrolls custom gesture recognition

DemoScreen lockGesture recognition with Dollar recognizerPIXI.jsVertical responsiveness with javascriptCORS image -> canvas issues & IE workaround

coke ahhh: ice toss

DemoScreen lock againCSS-based movement with transform:translate3d(x,y,z) for

hardware-accelerated speedRequestAnimationFrame for best frame rateDesktop normalization:

Disable mouse-dragging on HTML elementsAdd a cursor: grab or cursor: move if you can drag something

ENOUGH INPUT.

MOTION!

coke ahhh: ice toss

Fake gravity

var speedY = 0;var gravity = 0.1;var throwIce = function() { speedY = -10;};var updateIce = function() { speedY += gravity;};

motion

Spring/elastic calculations: Hooke's lawEasing (linear interpolation)Demos & code

public class EasingFloat {

public float _value, _target, _easeFactor;

public EasingFloat( float value, float easeFactor ) { _value = value; _target = value; _easeFactor = easeFactor; }

public float value() { return _value; }

public void setTarget( float value ) { _target = value; }

public void update() { _value -= ( ( _value - _target ) / _easeFactor ); }

}

public class ElasticFloat { protected float _fric, _accel, _speed, _value, _target;

public ElasticFloat(float val, float fric, float accel) { _fric = fric; _accel = accel; _value = _target = val; }

public float value() { return _value; }

public void setTarget(float target) { _target = target; }

public void update() { _speed = ((_target - _value) * _accel + _speed) * _fric; _value += _speed; }

}

trigonometry is important!

Oscillation: BoxtrollsDemo: TrigCircleDemo: TrigDistributeDemo: TrigDriveTest

extending techniques to non-game

projects

Add whimsy to your site or appCharts / data visualizationAnimation for magic & context

CMKY visualsKinect drum machineGenerative & interactive art

tools

UnityProcessingCinder / OpenFrameworksGLSLHTML5

Phaser.ioPIXITHREE.jsImpact.js / Ejecta

thank you.

@cacheflowe.