Building physical video games for marketing, entertainment and offline goodness.

1. JUSTIN GITLIN
BUILDING VIDEO GAMES FOR
MARKETING, ENTERTAINMENT, AND
OFFLINE GOODNESS
08.02.2014

2. JUSTIN GITLIN
MODE SET

3. who?
Born & raised in NH
Univeristy of Denver, 2002
Clevermedia [2000-2001]
[redacted]
Factory Design Labs [2005-2011]
Mode Set [2011-present]

4. find me:
@cacheflowe
modeset.com
cacheflowe.com (don't judge)
instagram.com/cacheflowe
flickr.com/cacheflowe
vimeo.com/cacheflowe

5. why build games?
Fun - a great way to learn programming
Multidisciplinary art - dig into other mediums & mix with
programming
Money?
Indie games - risk vs. reward
Marketable skills
Techniques extend far beyond games
Delve deeper into programming concepts & creativity
Graphical concepts
js1k

6. why build games? marketing :-/
Microsites / advertisements
Brand engagement
PR / wow factor
Business models

7. why build games? goodness :)
Learning & Education
Research says so
Jane McGonigal
Gamification / Game Theory
Science!
#OhHeckYeah / Public art
Creative Placemaking
Gamification of human interaction on the street

8. OHHECKYEAH

9. ohheckyeah
KacheOut: The "prototype"
Artplace grantees
1st-of-kind*
Benefits
Safer streets, economic development, revitalization, IRL
community building, new workforce breakroom, idea sharing
Open source
Demo: KacheOut
Opening night video

10. KINECT

11. using the kinect
What is the Kinect?
Skeleton tracking vs. raw data
Demos: KinectBodyParticles & KinectPixelated
Kacheout controls
Improvements & normalization for OHY
Demo: KinectHumanJoysticks - common controls for OHY
Demo: Catchy!

12. kinect protips
Kinects don't do well in direct sunlight
Kinects can lose data with reflective surfaces
Kinects aren't intuitive - there aren't great conventions yet. Educate
users!
Kinect v2 is amazing, but Microsoft tools are required
Bellco game & issues
Small humans don't skeleton-detect very well

13. PHYSICAL SPACE

14. ohheckyeah spatial challenges
General play area: more players = more area
Kinect remote control - UDP! (WebSockets, OSC)
16th St. - Wifi woes
16th St. - Audio woes
16th St. - Aversion to marketers
16th St. - If nobody's currently playing, you don't know what it is
15th St. - Buses

15. LEAP MOTION

16. leap motion
What is the Leap Motion?
Skeleton tracking of the hands
Like a mini Kinect, but just skeleton data (no raw depth data)
Demo: KacheOut w/Leap

17. ACCELEROMETER

18. accelerometer
Native came first: Audi games
Sept, 2008
5 Million+ downloads
iTunes Top 10 Game of 2008
Happy client

19. familiar game + novel control =
success

20. accelerometer
Accelerometer comes to the (mobile) web
deviceorientation event
devicemotion event (gyroscope -previously iOS-only)
Chrome console's accelerometer simulator
"Emulation" tab -> Sensors -> Accelerometer

21. g.co/rollit

22. accelerometer gestures
Demo: Roll It
New iOS & Android should be capable
Touch & mouse fallbacks
Timeout unless good data helps since there's not reliable
detection
Maeda: Familiarity + Novelty
ValueBuffer!
Time-based sampling of data

23. // create an array of values, defaulted to zero
function 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 value
ValueBuffer.prototype.update = function( value ) {
this.sampleIndex++;
if(this.sampleIndex == this.numSamples)
this.sampleIndex = 0;
this.buffer[this.sampleIndex] = value;
};
// return buffer's sum or average
ValueBuffer.prototype.sum = function() {
var sum = 0;
for( var i=0; i < this.numSamples; i++)
sum += this.buffer[i];
return sum;

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

25. accelerometer protips
Skeeball throw gesture
HTML5ROCKS article
Timeout 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)

26. paranorman extra credit
Pinch gestures
See also: rotation gestures
Android support?

27. MORE MODERN INPUT:
MOBILE WEB

28. 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();
};
}
};

29. boxtrolls custom gesture recognition
Demo
Screen lock
Gesture recognition with Dollar recognizer
PIXI.js
Vertical responsiveness with javascript
CORS image -> canvas issues & IE workaround

30. coke ahhh: ice toss
Demo
Screen lock again
CSS-based movement with transform:translate3d(x,y,z) for
hardware-accelerated speed
RequestAnimationFrame for best frame rate
Desktop normalization:
Disable mouse-dragging on HTML elements
Add a cursor: grab or cursor: move if you can drag something

31. ENOUGH INPUT.
MOTION!

32. coke ahhh: ice toss
Fake gravity
var speedY = 0;
var gravity = 0.1;
var throwIce = function() {
speedY = -10;
};
var updateIce = function() {
speedY += gravity;
};

33. motion
Spring/elastic calculations: Hooke's law
Easing (linear interpolation)
Demos & code

34. 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 );
}

35. }

36. 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;
}

37. }

38. trigonometry is important!
Oscillation: Boxtrolls
Demo: TrigCircle
Demo: TrigDistribute
Demo: TrigDriveTest

39. extending techniques to non-game
projects
Add whimsy to your site or app
Charts / data visualization
Animation for magic & context
CMKY visuals
Kinect drum machine
Generative & interactive art

40. tools
Unity
Processing
Cinder / OpenFrameworks
GLSL
HTML5
Phaser.io
PIXI
THREE.js
Impact.js / Ejecta

41. thank you.
@cacheflowe.