Develop Denver 2014: Building Physical Video Games
Post on 06-May-2015
368 Views
Preview:
DESCRIPTION
Transcript
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
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.
top related