Post on 06-May-2015
description
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Juice up your game feelIndie Outpost
Simon Weis
February 13, 2014
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Definitions
Game FeelÏ Steve Swink1:
Game feel is real-time control of objects in asimulated space with interactions emphasized bypolish.
juicy
Ï Martin Jonasson2:Juicy things are things that wobble, squirt,
bounce or make little cute noises. The things thatmake the game feel good to interact with.
1Steve Swink. Game Feel, A gamer’s guide to virtual sensation.Elsevier, 2009
2Martin Jonasson and Petri Purho. Youtube – juice it or loose it, 2012.http://www.youtube.com/watch?v=Fy0aCDmgnxg
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Motivation
Ï How to create game feel and juicy objects?
Ï Exceeding pure functionality
Ï For any kind of game/style/genre/platform
Ï Ready to use for everyone3
3Ok, almost. This talk is aiming for the one person indie gamedev studio
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Motivation
Ï How to create game feel and juicy objects?
Ï Exceeding pure functionality
Ï For any kind of game/style/genre/platform
Ï Ready to use for everyone3
3Ok, almost. This talk is aiming for the one person indie gamedev studio
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Music and SoundFX
This is so important.
Ï SoundFX make your interactions feel real.
Ï Music conveys style, mood, spirit, feelings, . . .
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Music and SoundFX
This is so important.
Ï SoundFX make your interactions feel real.
Ï Music conveys style, mood, spirit, feelings, . . .
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Music and SoundFX
This is so important.
Ï SoundFX make your interactions feel real.
Ï Music conveys style, mood, spirit, feelings, . . .
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Music and SoundFX
There are no excusesÏ Easy to implement
Ï Almost no computational costs
Ï Feasible for everyone. It’s click and listen.
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Music and SoundFX
Tools of the tradeÏ SoundFX: SFXR4, BFXR5, Oscillators, . . .
Ï Music: ProTools, Cubase, Audacity6, LMMS7,
WolframTones8, AudioSauna9. . .
4Sfxr – simple sound effects generator, 2014. http://www.drpetter.se/project_sfxr.html5Bfxr, 2014. http://www.bfxr.net/6Audacity, 2014. http://audacity.sourceforge.net/?lang=de7Lmms – linux multimedia studio, 2014. http://lmms.sourceforge.net/8Wolframtones, 2014. http://tones.wolfram.com/9Audiosauna – free software for making songs online, 2014. http://www.audiosauna.com/
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Simple pallets
Ï Use just two or three colors . . .
Ï Or a single color gradient . . .
Ï Or a subsection of the color circle10
Ï Name some games doing this!
10Wikipedia, 2014. http://www.de.wikipedia.org[Johannes Itten]
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Simple pallets
Ï Use just two or three colors . . .
Ï Or a single color gradient . . .
Ï Or a subsection of the color circle10
Ï Name some games doing this!
10Wikipedia, 2014. http://www.de.wikipedia.org[Johannes Itten]
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Simple pallets
Ï Use just two or three colors . . .
Ï Or a single color gradient . . .
Ï Or a subsection of the color circle10
Ï Name some games doing this!
10Wikipedia, 2014. http://www.de.wikipedia.org[Johannes Itten]
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Simple pallets
Ï Use just two or three colors . . .
Ï Or a single color gradient . . .
Ï Or a subsection of the color circle10
Ï Name some games doing this!
10Wikipedia, 2014. http://www.de.wikipedia.org[Johannes Itten]
Simple pallets
Simple pallets
Simple pallets
Simple pallets
Simple pallets
Simple pallets
Simple pallets
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Simple palletsÏ Memorizable, unique Look
Ï Create a certain mood
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Simple palletsÏ Memorizable, unique LookÏ Create a certain mood
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Simple pallets
Tools of the tradeÏ ColorBlender11
Ï Share your pallets12
Ï Color Lovers13
11Color blender, 2014. http://meyerweb.com/eric/tools/color-blend/12tigsource – share your pallets, 2014. http://forums.tigsource.com/index.php?topic=25396.013Colorlovers, 2014. http://www.colourlovers.com/palettes
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Know your math
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Know your mathIt’s not that hard – Math is like dancing
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Tweening and Easing
Ï Term „in between“
Ï Interpolation from 0 to 1
Ï Robert Penner’s easing functions14 for JavaScript,
ActionScript 1, 2, 3 , Java, Lua, C#, C++
Ï Codepen equations for organic motion15
14Robert penner’s easing functions – a collection of swappable functions that add flavor to motion, 2014.
http://www.robertpenner.com/easing/15Codepen – organic motions, 2014. http://codepen.io/soulwire/pen/kqHxB
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Tweening and Easing
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Tweening and Easing
Tween . . .
Ï Positions and velocities (mimic physics)
Ï Scaling
Ï Timing Behaviour
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Shakes
Ï Game objects, camera
Ï Random or Drag Positions
x
y
x
y
Ï Feeling of impact and weight.
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Flashes
Ï Flash into a color/back to original color
Ï Game objects, whole screen, background (for contrast)
Ï Timing behaviour ⇒ tweening functions
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
SpriteFX
Ï Sprites that serve as overlays or underlays for any
graphical effect
Ï Combine with easing functions
Ï Linear – Look at that sky!
Ï Radial – neon lamp
Ï Vignette & vintage
Ï Scanlines – retro
Ï Change the Draworder
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
SpriteFX
Ï Sprites that serve as overlays or underlays for any
graphical effect
Ï Combine with easing functions
Ï Linear – Look at that sky!
Ï Radial – neon lamp
Ï Vignette & vintage
Ï Scanlines – retro
Ï Change the Draworder
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
SpriteFX
Ï Sprites that serve as overlays or underlays for any
graphical effect
Ï Combine with easing functions
Ï Linear – Look at that sky!
Ï Radial – neon lamp
Ï Vignette & vintage
Ï Scanlines – retro
Ï Change the Draworder
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
SpriteFX
Ï Sprites that serve as overlays or underlays for any
graphical effect
Ï Combine with easing functions
Ï Linear – Look at that sky!
Ï Radial – neon lamp
Ï Vignette & vintage
Ï Scanlines – retro
Ï Change the Draworder
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
SpriteFX
Ï Sprites that serve as overlays or underlays for any
graphical effect
Ï Combine with easing functions
Ï Linear – Look at that sky!
Ï Radial – neon lamp
Ï Vignette & vintage
Ï Scanlines – retro
Ï Change the Draworder
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
SpriteFX
Ï Sprites that serve as overlays or underlays for any
graphical effect
Ï Combine with easing functions
Ï Linear – Look at that sky!
Ï Radial – neon lamp
Ï Vignette & vintage
Ï Scanlines – retro
Ï Change the Draworder
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Particles
One just can not have too many particles.
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Particles
Ï No drawing skills required – simple shapes or SpriteFX
Ï Change/modulate color/alpha
Ï Many References16
16Wikipedia, 2014. http://www.de.wikipedia.org[Partikelsystem]
Daniel Shiffman. The Nature of Code.Magic Book Project, 2012
www.di.ubi.pt. Video game technologies – particle systems, 2014.http://www.di.ubi.pt/~agomes/tjv/teoricas/09-particles.pdf
Daniel Church. Gamedevtuts – make your game pop with particle effects and quadtrees, 2014.http://gamedevelopment.tutsplus.com/tutorials/make-your-game-pop-with-particle-effects-and-quadtrees--gamedev-2138
Mike McClelland. Gamedev.net – make a particle explosion effect, 2014.http://www.gamedev.net/page/resources/_/creative/visual-arts/make-a-particle-explosion-effect-r2701
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Particles – Physical Background and Code
Ï Movement – Newton-equations
~F = m ·~a
~v =∫ t1
t0
~a dt =~a · t + ~v0
~x =∫ t1
t0
~v dt = 1/2~a · t 2 + ~v0 · t + ~x0
Ï Stokes friction~Fr =−6πrη~v = R ·~v
Ï Does this make sense to you?
v = ( v *R + a * dt ) ;
x = x + v * dt ;
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Particles – Physical Background and Code
Ï Movement – Newton-equations
~F = m ·~a
~v =∫ t1
t0
~a dt =~a · t + ~v0
~x =∫ t1
t0
~v dt = 1/2~a · t 2 + ~v0 · t + ~x0
Ï Stokes friction~Fr =−6πrη~v = R ·~v
Ï Does this make sense to you?
v = ( v *R + a * dt ) ;
x = x + v * dt ;
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Particles – Physical Background and Code
Ï Movement – Newton-equations
~F = m ·~a
~v =∫ t1
t0
~a dt =~a · t + ~v0
~x =∫ t1
t0
~v dt = 1/2~a · t 2 + ~v0 · t + ~x0
Ï Stokes friction~Fr =−6πrη~v = R ·~v
Ï Does this make sense to you?
v = ( v *R + a * dt ) ;
x = x + v * dt ;
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Particles
Ï Some possible applications:
smoke, sparks, weather, wind, raindrops and
rainspalesh, snow, flashes, clouds in the sky, bullets, fire,
stars, explosions, fluids, falling leaves, lasers, bullet time
trails, fog, sunrays, rocket exhaust, water, flying birds,
bouncing balls, desintegrating asteroids, grass, mist and
smoke, spell-Effects, even hair and feathers and many
other effects
Juice up yourgame feel
Simon Weis
Definitions
Motivation
Juice up yourGame FeelMusic and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles
Conclusion
Conclusion
Compare!
Game Over
Juice up yourgame feel
Simon Weis
References I
Audacity, 2014.
http://audacity.sourceforge.net/?lang=de.
Audiosauna – free software for making songs online, 2014.
http://www.audiosauna.com/.
Bfxr, 2014.
http://www.bfxr.net/.
Codepen – organic motions, 2014.
http://codepen.io/soulwire/pen/kqHxB.
Color blender, 2014.
http://meyerweb.com/eric/tools/color-blend/.
Colorlovers, 2014.
http://www.colourlovers.com/palettes.
Lmms – linux multimedia studio, 2014.
http://lmms.sourceforge.net/.
Robert penner’s easing functions – a collection of swappable functions that add flavor to motion, 2014.
http://www.robertpenner.com/easing/.
Sfxr – simple sound effects generator, 2014.
http://www.drpetter.se/project_sfxr.html.
tigsource – share your pallets, 2014.
http://forums.tigsource.com/index.php?topic=25396.0.
Juice up yourgame feel
Simon Weis
References IIWikipedia, 2014.
http://www.de.wikipedia.org.
Wolframtones, 2014.
http://tones.wolfram.com/.
Daniel Church.
Gamedevtuts – make your game pop with particle effects and quadtrees, 2014.http://gamedevelopment.tutsplus.com/tutorials/make-your-game-pop-with-particle-effects-and-quadtrees--gamedev-2138.
Martin Jonasson and Petri Purho.
Youtube – juice it or loose it, 2012.http://www.youtube.com/watch?v=Fy0aCDmgnxg.
Mike McClelland.
Gamedev.net – make a particle explosion effect, 2014.http://www.gamedev.net/page/resources/_/creative/visual-arts/make-a-particle-explosion-effect-r2701.
Daniel Shiffman.
The Nature of Code.Magic Book Project, 2012.
Steve Swink.
Game Feel, A gamer’s guide to virtual sensation.Elsevier, 2009.
www.di.ubi.pt.
Video game technologies – particle systems, 2014.http://www.di.ubi.pt/~agomes/tjv/teoricas/09-particles.pdf.