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.