Develop Denver 2014: Building Physical Video Games
-
Upload
cacheflowe -
Category
Presentations & Public Speaking
-
view
368 -
download
0
description
Transcript of Develop Denver 2014: Building Physical Video Games
![Page 1: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/1.jpg)
JUSTIN GITLIN
BUILDING VIDEO GAMES FOR
MARKETING, ENTERTAINMENT, AND
OFFLINE GOODNESS08.02.2014
![Page 2: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/2.jpg)
JUSTIN GITLIN
MODE SET
![Page 3: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/3.jpg)
who?
Born & raised in NHUniveristy of Denver, 2002Clevermedia [2000-2001][redacted]Factory Design Labs [2005-2011]Mode Set [2011-present]
![Page 4: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/4.jpg)
find me:
@cacheflowemodeset.comcacheflowe.com (don't judge)instagram.com/cachefloweflickr.com/cacheflowevimeo.com/cacheflowe
![Page 5: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/5.jpg)
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
![Page 6: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/6.jpg)
why build games? marketing :-/
Microsites / advertisementsBrand engagementPR / wow factorBusiness models
![Page 7: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/7.jpg)
why build games? goodness :)
Learning & EducationResearch says soJane McGonigalGamification / Game Theory
Science!
#OhHeckYeah / Public artCreative Placemaking
Gamification of human interaction on the street
![Page 8: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/8.jpg)
OHHECKYEAH
![Page 9: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/9.jpg)
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
![Page 10: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/10.jpg)
KINECT
![Page 11: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/11.jpg)
using the kinect
What is the Kinect?Skeleton tracking vs. raw dataDemos: KinectBodyParticles & KinectPixelatedKacheout controlsImprovements & normalization for OHYDemo: KinectHumanJoysticks - common controls for OHYDemo: Catchy!
![Page 12: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/12.jpg)
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
![Page 13: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/13.jpg)
PHYSICAL SPACE
![Page 14: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/14.jpg)
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
![Page 15: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/15.jpg)
LEAP MOTION
![Page 16: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/16.jpg)
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
![Page 17: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/17.jpg)
ACCELEROMETER
![Page 18: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/18.jpg)
accelerometer
Native came first: Audi games
Sept, 20085 Million+ downloadsiTunes Top 10 Game of 2008Happy client
![Page 19: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/19.jpg)
familiar game + novel control =
success
![Page 20: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/20.jpg)
accelerometer
Accelerometer comes to the (mobile) webdeviceorientation eventdevicemotion event (gyroscope -previously iOS-only)
Chrome console's accelerometer simulator"Emulation" tab -> Sensors -> Accelerometer
![Page 22: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/22.jpg)
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
![Page 23: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/23.jpg)
// 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;
![Page 24: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/24.jpg)
};ValueBuffer.prototype.average = function() { return this.sum() / this.numSamples;};
![Page 25: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/25.jpg)
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)
![Page 26: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/26.jpg)
paranorman extra credit
Pinch gesturesSee also: rotation gesturesAndroid support?
![Page 27: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/27.jpg)
MORE MODERN INPUT:
MOBILE WEB
![Page 28: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/28.jpg)
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(); }; }};
![Page 29: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/29.jpg)
boxtrolls custom gesture recognition
DemoScreen lockGesture recognition with Dollar recognizerPIXI.jsVertical responsiveness with javascriptCORS image -> canvas issues & IE workaround
![Page 30: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/30.jpg)
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
![Page 31: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/31.jpg)
ENOUGH INPUT.
MOTION!
![Page 32: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/32.jpg)
coke ahhh: ice toss
Fake gravity
var speedY = 0;var gravity = 0.1;var throwIce = function() { speedY = -10;};var updateIce = function() { speedY += gravity;};
![Page 33: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/33.jpg)
motion
Spring/elastic calculations: Hooke's lawEasing (linear interpolation)Demos & code
![Page 34: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/34.jpg)
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 ); }
![Page 35: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/35.jpg)
}
![Page 36: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/36.jpg)
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; }
![Page 37: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/37.jpg)
}
![Page 38: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/38.jpg)
trigonometry is important!
Oscillation: BoxtrollsDemo: TrigCircleDemo: TrigDistributeDemo: TrigDriveTest
![Page 39: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/39.jpg)
extending techniques to non-game
projects
Add whimsy to your site or appCharts / data visualizationAnimation for magic & context
CMKY visualsKinect drum machineGenerative & interactive art
![Page 40: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/40.jpg)
tools
UnityProcessingCinder / OpenFrameworksGLSLHTML5
Phaser.ioPIXITHREE.jsImpact.js / Ejecta
![Page 41: Develop Denver 2014: Building Physical Video Games](https://reader033.fdocuments.us/reader033/viewer/2022060107/55498cb7b4c90554648b542c/html5/thumbnails/41.jpg)
thank you.
@cacheflowe.