SlideShare a Scribd company logo
Juice up your
game feel
Simon Weis
Definitions
Motivation

Juice up your game feel
Indie Outpost

Juice up your
Game Feel
Music and SoundFX
Simple pallets
Know Your Math
Foundations

Simon Weis

Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

February 13, 2014

Conclusion
Juice up your
game feel

Definitions

Simon Weis

Game Feel

Definitions

1

Motivation

Steve Swink :
Game feel is real-time control of objects in a
simulated space with interactions emphasized by
polish.

Juice up your
Game Feel
Music and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes

juicy

Flashes
SpriteFX

2

Martin Jonasson :
Juicy things are things that wobble, squirt,
bounce or make little cute noises. The things that
make the game feel good to interact with.

1 Steve Swink. Game Feel, A gamer’s guide to virtual sensation.
Elsevier, 2009
2 Martin Jonasson and Petri Purho. Youtube – juice it or loose it, 2012.

http://www.youtube.com/watch?v=Fy0aCDmgnxg

Particles

Conclusion
Motivation

Juice up your
game feel
Simon Weis
Definitions
Motivation
Juice up your
Game Feel
Music and SoundFX

How to create game feel and juicy objects?

Simple pallets
Know Your Math

Exceeding pure functionality
For any kind of game/style/genre/platform

Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion
Motivation

Juice up your
game feel
Simon Weis
Definitions
Motivation
Juice up your
Game Feel
Music and SoundFX

How to create game feel and juicy objects?

Simple pallets
Know Your Math

Exceeding pure functionality

Foundations
Tweening and Easing

For any kind of game/style/genre/platform

Shakes

Ready to use for everyone3

SpriteFX

Flashes

Particles

Conclusion

3 Ok, almost. This talk is aiming for the one person indie gamedev studio
Music and SoundFX

Juice up your
game feel
Simon Weis
Definitions
Motivation
Juice up your
Game Feel
Music and SoundFX

This is so important.

Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion
Music and SoundFX

Juice up your
game feel
Simon Weis
Definitions
Motivation
Juice up your
Game Feel
Music and SoundFX

This is so important.

Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

SoundFX make your interactions feel real.

Conclusion
Music and SoundFX

Juice up your
game feel
Simon Weis
Definitions
Motivation
Juice up your
Game Feel
Music and SoundFX

This is so important.

Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

SoundFX make your interactions feel real.
Music conveys style, mood, spirit, feelings, . . .

Conclusion
Music and SoundFX

Juice up your
game feel
Simon Weis
Definitions
Motivation
Juice up your
Game Feel
Music and SoundFX

There are no excuses

Simple pallets
Know Your Math

Easy to implement

Foundations
Tweening and Easing
Shakes

Almost no computational costs

Flashes
SpriteFX

Feasible for everyone. It’s click and listen.

Particles

Conclusion
Juice up your
game feel

Music and SoundFX

Simon Weis
Definitions
Motivation
Juice up your
Game Feel

Tools of the trade

Music and SoundFX

SoundFX: SFXR4 , BFXR5 , Oscillators, . . .

Simple pallets
Know Your Math

6

7

Music: ProTools, Cubase, Audacity , LMMS ,
WolframTones8 , AudioSauna9 . . .

Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion

4 Sfxr – simple sound effects generator, 2014. http://www.drpetter.se/project_sfxr.html
5 Bfxr, 2014. http://www.bfxr.net/
6 Audacity, 2014. http://audacity.sourceforge.net/?lang=de
7 Lmms – linux multimedia studio, 2014. http://lmms.sourceforge.net/
8 Wolframtones, 2014. http://tones.wolfram.com/
9 Audiosauna – free software for making songs online, 2014. http://www.audiosauna.com/
Simple pallets

Juice up your
game feel
Simon Weis
Definitions

Use just two or three colors . . .

Motivation
Juice up your
Game Feel
Music and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion

10 Wikipedia, 2014. http://www.de.wikipedia.org[Johannes Itten]
Simple pallets

Juice up your
game feel
Simon Weis
Definitions

Use just two or three colors . . .

Motivation

Or a single color gradient . . .

Juice up your
Game Feel
Music and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion

10 Wikipedia, 2014. http://www.de.wikipedia.org[Johannes Itten]
Simple pallets

Juice up your
game feel
Simon Weis
Definitions

Use just two or three colors . . .

Motivation

Or a single color gradient . . .

Juice up your
Game Feel

Or a subsection of the color circle10

Music and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion

10 Wikipedia, 2014. http://www.de.wikipedia.org[Johannes Itten]
Simple pallets

Juice up your
game feel
Simon Weis
Definitions

Use just two or three colors . . .

Motivation

Or a single color gradient . . .

Juice up your
Game Feel

Or a subsection of the color circle10

Music and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion

Name some games doing this!

10 Wikipedia, 2014. http://www.de.wikipedia.org[Johannes Itten]
Simple pallets
Simple pallets
Simple pallets
Simple pallets
Simple pallets
Simple pallets
Simple pallets
Simple pallets
Memorizable, unique Look

Juice up your
game feel
Simon Weis
Definitions
Motivation
Juice up your
Game Feel
Music 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 your
game feel
Simon Weis
Definitions
Motivation
Juice up your
Game Feel
Music and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion
Simple pallets

Juice up your
game feel
Simon Weis
Definitions
Motivation

Tools of the trade

Juice up your
Game Feel
Music and SoundFX
Simple pallets

ColorBlender11
Share your pallets12
Color Lovers13

Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion

11 Color blender, 2014. http://meyerweb.com/eric/tools/color-blend/
12 tigsource – share your pallets, 2014. http://forums.tigsource.com/index.php?topic=25396.0
13 Colorlovers, 2014. http://www.colourlovers.com/palettes
Know your math

Juice up your
game feel
Simon Weis
Definitions
Motivation
Juice up your
Game Feel
Music and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion
Know your math
It’s not that hard – Math is like dancing

Juice up your
game feel
Simon Weis
Definitions
Motivation
Juice up your
Game Feel
Music and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion
Tweening and Easing

Juice up your
game feel
Simon Weis
Definitions
Motivation

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

Juice up your
Game Feel
Music and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion

14 Robert penner’s easing functions – a collection of swappable functions that add flavor to motion, 2014.

http://www.robertpenner.com/easing/
15 Codepen – organic motions, 2014. http://codepen.io/soulwire/pen/kqHxB
Tweening and Easing

Juice up your
game feel
Simon Weis
Definitions
Motivation
Juice up your
Game Feel
Music and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion
Tweening and Easing

Juice up your
game feel
Simon Weis
Definitions
Motivation
Juice up your
Game Feel
Music and SoundFX

Tween . . .
Positions and velocities (mimic physics)
Scaling

Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX

Timing Behaviour

Particles

Conclusion
Juice up your
game feel

Shakes

Simon Weis
Definitions
Motivation

Game objects, camera

Juice up your
Game Feel

Random or Drag Positions

Music and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX

y

y
x

Feeling of impact and weight.

Particles

x

Conclusion
Flashes

Juice up your
game feel
Simon Weis
Definitions
Motivation
Juice up your
Game Feel
Music and SoundFX
Simple pallets

Flash into a color/back to original color
Game objects, whole screen, background (for contrast)
Timing behaviour ⇒ tweening functions

Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion
SpriteFX

Juice up your
game feel
Simon Weis
Definitions
Motivation

Sprites that serve as overlays or underlays for any
graphical effect

Juice up your
Game Feel
Music and SoundFX
Simple pallets

Combine with easing functions

Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion
SpriteFX

Juice up your
game feel
Simon Weis
Definitions
Motivation

Sprites that serve as overlays or underlays for any
graphical effect

Juice up your
Game Feel
Music and SoundFX
Simple pallets

Combine with easing functions

Know Your Math
Foundations

Linear – Look at that sky!

Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion
SpriteFX

Juice up your
game feel
Simon Weis
Definitions
Motivation

Sprites that serve as overlays or underlays for any
graphical effect

Juice up your
Game Feel
Music and SoundFX
Simple pallets

Combine with easing functions

Know Your Math
Foundations

Linear – Look at that sky!
Radial – neon lamp

Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion
SpriteFX

Juice up your
game feel
Simon Weis
Definitions
Motivation

Sprites that serve as overlays or underlays for any
graphical effect

Juice up your
Game Feel
Music and SoundFX
Simple pallets

Combine with easing functions

Know Your Math
Foundations

Linear – Look at that sky!
Radial – neon lamp
Vignette & vintage

Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion
SpriteFX

Juice up your
game feel
Simon Weis
Definitions
Motivation

Sprites that serve as overlays or underlays for any
graphical effect

Juice up your
Game Feel
Music and SoundFX
Simple pallets

Combine with easing functions

Know Your Math
Foundations

Linear – Look at that sky!
Radial – neon lamp
Vignette & vintage
Scanlines – retro

Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion
SpriteFX

Juice up your
game feel
Simon Weis
Definitions
Motivation

Sprites that serve as overlays or underlays for any
graphical effect

Juice up your
Game Feel
Music and SoundFX
Simple pallets

Combine with easing functions

Know Your Math
Foundations

Linear – Look at that sky!
Radial – neon lamp
Vignette & vintage
Scanlines – retro
Change the Draworder

Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion
Particles

Juice up your
game feel
Simon Weis
Definitions

One just can not have too many particles.

Motivation
Juice up your
Game Feel
Music and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion
Juice up your
game feel

Particles

Simon Weis
Definitions
Motivation

No drawing skills required – simple shapes or SpriteFX
Change/modulate color/alpha
16

Many References

Juice up your
Game Feel
Music and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion
16 Wikipedia, 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
Particles – Physical Background and Code

Juice up your
game feel
Simon Weis

Movement – Newton-equations

Definitions
Motivation

F =m·a

Juice up your
Game Feel

t1

v=
x=

t0
t1
t0

a dt = a · t + v 0

Music and SoundFX
Simple pallets
Know Your Math
Foundations

2

v dt = 1/2a · t + v 0 · t + x 0

Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion
Particles – Physical Background and Code

Juice up your
game feel
Simon Weis

Movement – Newton-equations

Definitions
Motivation

F =m·a

Juice up your
Game Feel

t1

v=
x=

t0
t1
t0

a dt = a · t + v 0

Music and SoundFX
Simple pallets
Know Your Math
Foundations

2

v dt = 1/2a · t + v 0 · t + x 0

Tweening and Easing
Shakes
Flashes
SpriteFX

Stokes friction

Particles

F r = −6πr ηv = R · v

Conclusion
Particles – Physical Background and Code

Juice up your
game feel
Simon Weis

Movement – Newton-equations

Definitions
Motivation

F =m·a

Juice up your
Game Feel

t1

v=
x=

t0
t1
t0

a dt = a · t + v 0

Music and SoundFX
Simple pallets
Know Your Math
Foundations

2

v dt = 1/2a · t + v 0 · t + x 0

Tweening and Easing
Shakes
Flashes
SpriteFX

Stokes friction

Particles

F r = −6πr ηv = R · v
Does this make sense to you?
v = ( v * R + a * dt ) ;
x = x + v * dt ;

Conclusion
Particles

Juice up your
game feel
Simon Weis
Definitions
Motivation

Some possible applications:

Juice up your
Game Feel
Music and SoundFX

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

Simple pallets
Know Your Math
Foundations
Tweening and Easing
Shakes
Flashes
SpriteFX
Particles

Conclusion
Juice up your
game feel

Conclusion

Simon Weis
Definitions
Motivation
Juice up your
Game Feel
Music and SoundFX
Simple pallets
Know Your Math
Foundations
Tweening and Easing

Compare!

Shakes
Flashes
SpriteFX
Particles

Conclusion
Game Over
References I

Juice up your
game feel
Simon Weis

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.
References II

Juice up your
game feel
Simon Weis

Wikipedia, 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.

More Related Content

What's hot (6)

Sony Presentation
Sony PresentationSony Presentation
Sony Presentation
 
Ig1 task 2 analysis work sheet (2)
Ig1 task 2 analysis work sheet (2)Ig1 task 2 analysis work sheet (2)
Ig1 task 2 analysis work sheet (2)
 
Putting the pieces together: The MDA Framework
Putting the pieces together: The MDA FrameworkPutting the pieces together: The MDA Framework
Putting the pieces together: The MDA Framework
 
Sony’s play station®
Sony’s play station®Sony’s play station®
Sony’s play station®
 
Flow Of The Making Of A 2D Game
Flow Of The Making Of A 2D GameFlow Of The Making Of A 2D Game
Flow Of The Making Of A 2D Game
 
Computer games design - retro
Computer games design - retroComputer games design - retro
Computer games design - retro
 

Viewers also liked

Viewers also liked (15)

Keep your game in the fun zone - Designing an AI Director
Keep your game in the fun zone - Designing an AI DirectorKeep your game in the fun zone - Designing an AI Director
Keep your game in the fun zone - Designing an AI Director
 
Making HTML5 Games with Phaser
Making HTML5 Games with PhaserMaking HTML5 Games with Phaser
Making HTML5 Games with Phaser
 
Postmortem: "Spellcreepers"
Postmortem: "Spellcreepers"Postmortem: "Spellcreepers"
Postmortem: "Spellcreepers"
 
CipSoft Innovations-Prozess
CipSoft Innovations-ProzessCipSoft Innovations-Prozess
CipSoft Innovations-Prozess
 
Games Bavaria - Spieleentwickler Förderung in Bayern
Games Bavaria - Spieleentwickler Förderung in BayernGames Bavaria - Spieleentwickler Förderung in Bayern
Games Bavaria - Spieleentwickler Förderung in Bayern
 
Eye Tracking Studie in Amnesia the Dark Decent
Eye Tracking Studie in Amnesia the Dark DecentEye Tracking Studie in Amnesia the Dark Decent
Eye Tracking Studie in Amnesia the Dark Decent
 
Amazon Web Services
Amazon Web ServicesAmazon Web Services
Amazon Web Services
 
VlbgWebDev Mai 2015 - Game Design PT 1
VlbgWebDev Mai 2015 - Game Design PT 1VlbgWebDev Mai 2015 - Game Design PT 1
VlbgWebDev Mai 2015 - Game Design PT 1
 
硅谷早期投资趋势
硅谷早期投资趋势硅谷早期投资趋势
硅谷早期投资趋势
 
Phaser presentation
Phaser presentationPhaser presentation
Phaser presentation
 
Introduction to HTML5 game development (with Phaser)
Introduction to HTML5 game development (with Phaser)Introduction to HTML5 game development (with Phaser)
Introduction to HTML5 game development (with Phaser)
 
我的敏捷测试宣言(Agile Testing Manifesto)
我的敏捷测试宣言(Agile Testing Manifesto)我的敏捷测试宣言(Agile Testing Manifesto)
我的敏捷测试宣言(Agile Testing Manifesto)
 
跨境10年 - The Next Decade of US China Crossborder Early Stage Tech Venture Inve...
跨境10年 - The Next Decade of US China Crossborder Early Stage Tech Venture Inve...跨境10年 - The Next Decade of US China Crossborder Early Stage Tech Venture Inve...
跨境10年 - The Next Decade of US China Crossborder Early Stage Tech Venture Inve...
 
敏捷开发全景视图(流程、方法和最佳实践)
敏捷开发全景视图(流程、方法和最佳实践)敏捷开发全景视图(流程、方法和最佳实践)
敏捷开发全景视图(流程、方法和最佳实践)
 
Física na UI com PhaserJS
Física na UI com PhaserJSFísica na UI com PhaserJS
Física na UI com PhaserJS
 

Similar to Juice up your game feel! (11)

What makes games fun. Creating Enhanced Play.
What makes games fun. Creating Enhanced Play.What makes games fun. Creating Enhanced Play.
What makes games fun. Creating Enhanced Play.
 
What makes games fun?
What makes games fun?What makes games fun?
What makes games fun?
 
3 .research video games
3 .research video games3 .research video games
3 .research video games
 
Winning With Audio by Selcuk Bor
Winning With Audio by Selcuk BorWinning With Audio by Selcuk Bor
Winning With Audio by Selcuk Bor
 
Rules of Engagement
Rules of EngagementRules of Engagement
Rules of Engagement
 
Fifa 15 Sound Analysis
Fifa 15 Sound AnalysisFifa 15 Sound Analysis
Fifa 15 Sound Analysis
 
3. research
3. research 3. research
3. research
 
Games for Nature - how games can make a change
Games for Nature - how games can make a changeGames for Nature - how games can make a change
Games for Nature - how games can make a change
 
Video Game Music Overview
Video Game Music OverviewVideo Game Music Overview
Video Game Music Overview
 
2. initial plans
2. initial plans2. initial plans
2. initial plans
 
5 lecture (fun and passes ) 1 2-2021
5 lecture (fun and passes ) 1 2-20215 lecture (fun and passes ) 1 2-2021
5 lecture (fun and passes ) 1 2-2021
 

More from IndieOutpost

More from IndieOutpost (9)

Algorithmische Grafik
Algorithmische GrafikAlgorithmische Grafik
Algorithmische Grafik
 
Haxe & NME
Haxe & NMEHaxe & NME
Haxe & NME
 
Dreamfab
DreamfabDreamfab
Dreamfab
 
Spiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDKSpiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDK
 
GameMaker:Studio
GameMaker:StudioGameMaker:Studio
GameMaker:Studio
 
Cocos2dx
Cocos2dxCocos2dx
Cocos2dx
 
Scaleform in Unity3D
Scaleform in Unity3DScaleform in Unity3D
Scaleform in Unity3D
 
HTML5 Spiele entwickeln mit ImpactJS
HTML5 Spiele entwickeln mit ImpactJSHTML5 Spiele entwickeln mit ImpactJS
HTML5 Spiele entwickeln mit ImpactJS
 
Location-based Games - Game Design für kaputte Controller
Location-based Games - Game Design für kaputte ControllerLocation-based Games - Game Design für kaputte Controller
Location-based Games - Game Design für kaputte Controller
 

Recently uploaded

Skeem Saam in June 2024 available on Forum
Skeem Saam in June 2024 available on ForumSkeem Saam in June 2024 available on Forum
Skeem Saam in June 2024 available on Forum
Isaac More
 
Panchayat Season 3 - Official Trailer.pdf
Panchayat Season 3 - Official Trailer.pdfPanchayat Season 3 - Official Trailer.pdf
Panchayat Season 3 - Official Trailer.pdf
Suleman Rana
 

Recently uploaded (11)

Q4 WEEK 1 JUDGE THE RELEVANCE AND WORTH OF IDEAS.pptx
Q4 WEEK 1 JUDGE THE RELEVANCE AND WORTH OF IDEAS.pptxQ4 WEEK 1 JUDGE THE RELEVANCE AND WORTH OF IDEAS.pptx
Q4 WEEK 1 JUDGE THE RELEVANCE AND WORTH OF IDEAS.pptx
 
Skeem Saam in June 2024 available on Forum
Skeem Saam in June 2024 available on ForumSkeem Saam in June 2024 available on Forum
Skeem Saam in June 2024 available on Forum
 
A DARK AND HOLLOW STAR BY ASHLEY SHUTTLEWORTH
A DARK AND HOLLOW STAR BY ASHLEY SHUTTLEWORTHA DARK AND HOLLOW STAR BY ASHLEY SHUTTLEWORTH
A DARK AND HOLLOW STAR BY ASHLEY SHUTTLEWORTH
 
Barbie Presentation Template.pptx aaaaaa
Barbie Presentation Template.pptx aaaaaaBarbie Presentation Template.pptx aaaaaa
Barbie Presentation Template.pptx aaaaaa
 
Panchayat Season 3 - Official Trailer.pdf
Panchayat Season 3 - Official Trailer.pdfPanchayat Season 3 - Official Trailer.pdf
Panchayat Season 3 - Official Trailer.pdf
 
Dehradun Girls 9719300533 Heat-lava { Dehradun } Whiz ℂall Serviℂe By Our
Dehradun Girls 9719300533 Heat-lava { Dehradun } Whiz ℂall Serviℂe By OurDehradun Girls 9719300533 Heat-lava { Dehradun } Whiz ℂall Serviℂe By Our
Dehradun Girls 9719300533 Heat-lava { Dehradun } Whiz ℂall Serviℂe By Our
 
Meet Crazyjamjam - A TikTok Sensation | Blog Eternal
Meet Crazyjamjam - A TikTok Sensation | Blog EternalMeet Crazyjamjam - A TikTok Sensation | Blog Eternal
Meet Crazyjamjam - A TikTok Sensation | Blog Eternal
 
Reimagining Classics - What Makes a Remake a Success
Reimagining Classics - What Makes a Remake a SuccessReimagining Classics - What Makes a Remake a Success
Reimagining Classics - What Makes a Remake a Success
 
Lite version of elevator game simplified.pptx
Lite version of elevator game simplified.pptxLite version of elevator game simplified.pptx
Lite version of elevator game simplified.pptx
 
The Evolution of Animation in Film - Mark Murphy Director
The Evolution of Animation in Film - Mark Murphy DirectorThe Evolution of Animation in Film - Mark Murphy Director
The Evolution of Animation in Film - Mark Murphy Director
 
NO1 Pandit Black Magic Specialist Expert In Bahawalpur, Sargodha, Sialkot, Sh...
NO1 Pandit Black Magic Specialist Expert In Bahawalpur, Sargodha, Sialkot, Sh...NO1 Pandit Black Magic Specialist Expert In Bahawalpur, Sargodha, Sialkot, Sh...
NO1 Pandit Black Magic Specialist Expert In Bahawalpur, Sargodha, Sialkot, Sh...
 

Juice up your game feel!

  • 1. Juice up your game feel Simon Weis Definitions Motivation Juice up your game feel Indie Outpost Juice up your Game Feel Music and SoundFX Simple pallets Know Your Math Foundations Simon Weis Tweening and Easing Shakes Flashes SpriteFX Particles February 13, 2014 Conclusion
  • 2. Juice up your game feel Definitions Simon Weis Game Feel Definitions 1 Motivation Steve Swink : Game feel is real-time control of objects in a simulated space with interactions emphasized by polish. Juice up your Game Feel Music and SoundFX Simple pallets Know Your Math Foundations Tweening and Easing Shakes juicy Flashes SpriteFX 2 Martin Jonasson : Juicy things are things that wobble, squirt, bounce or make little cute noises. The things that make the game feel good to interact with. 1 Steve Swink. Game Feel, A gamer’s guide to virtual sensation. Elsevier, 2009 2 Martin Jonasson and Petri Purho. Youtube – juice it or loose it, 2012. http://www.youtube.com/watch?v=Fy0aCDmgnxg Particles Conclusion
  • 3. Motivation Juice up your game feel Simon Weis Definitions Motivation Juice up your Game Feel Music and SoundFX How to create game feel and juicy objects? Simple pallets Know Your Math Exceeding pure functionality For any kind of game/style/genre/platform Foundations Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion
  • 4. Motivation Juice up your game feel Simon Weis Definitions Motivation Juice up your Game Feel Music and SoundFX How to create game feel and juicy objects? Simple pallets Know Your Math Exceeding pure functionality Foundations Tweening and Easing For any kind of game/style/genre/platform Shakes Ready to use for everyone3 SpriteFX Flashes Particles Conclusion 3 Ok, almost. This talk is aiming for the one person indie gamedev studio
  • 5. Music and SoundFX Juice up your game feel Simon Weis Definitions Motivation Juice up your Game Feel Music and SoundFX This is so important. Simple pallets Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion
  • 6. Music and SoundFX Juice up your game feel Simon Weis Definitions Motivation Juice up your Game Feel Music and SoundFX This is so important. Simple pallets Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Particles SoundFX make your interactions feel real. Conclusion
  • 7. Music and SoundFX Juice up your game feel Simon Weis Definitions Motivation Juice up your Game Feel Music and SoundFX This is so important. Simple pallets Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Particles SoundFX make your interactions feel real. Music conveys style, mood, spirit, feelings, . . . Conclusion
  • 8. Music and SoundFX Juice up your game feel Simon Weis Definitions Motivation Juice up your Game Feel Music and SoundFX There are no excuses Simple pallets Know Your Math Easy to implement Foundations Tweening and Easing Shakes Almost no computational costs Flashes SpriteFX Feasible for everyone. It’s click and listen. Particles Conclusion
  • 9. Juice up your game feel Music and SoundFX Simon Weis Definitions Motivation Juice up your Game Feel Tools of the trade Music and SoundFX SoundFX: SFXR4 , BFXR5 , Oscillators, . . . Simple pallets Know Your Math 6 7 Music: ProTools, Cubase, Audacity , LMMS , WolframTones8 , AudioSauna9 . . . Foundations Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion 4 Sfxr – simple sound effects generator, 2014. http://www.drpetter.se/project_sfxr.html 5 Bfxr, 2014. http://www.bfxr.net/ 6 Audacity, 2014. http://audacity.sourceforge.net/?lang=de 7 Lmms – linux multimedia studio, 2014. http://lmms.sourceforge.net/ 8 Wolframtones, 2014. http://tones.wolfram.com/ 9 Audiosauna – free software for making songs online, 2014. http://www.audiosauna.com/
  • 10. Simple pallets Juice up your game feel Simon Weis Definitions Use just two or three colors . . . Motivation Juice up your Game Feel Music and SoundFX Simple pallets Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion 10 Wikipedia, 2014. http://www.de.wikipedia.org[Johannes Itten]
  • 11. Simple pallets Juice up your game feel Simon Weis Definitions Use just two or three colors . . . Motivation Or a single color gradient . . . Juice up your Game Feel Music and SoundFX Simple pallets Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion 10 Wikipedia, 2014. http://www.de.wikipedia.org[Johannes Itten]
  • 12. Simple pallets Juice up your game feel Simon Weis Definitions Use just two or three colors . . . Motivation Or a single color gradient . . . Juice up your Game Feel Or a subsection of the color circle10 Music and SoundFX Simple pallets Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion 10 Wikipedia, 2014. http://www.de.wikipedia.org[Johannes Itten]
  • 13. Simple pallets Juice up your game feel Simon Weis Definitions Use just two or three colors . . . Motivation Or a single color gradient . . . Juice up your Game Feel Or a subsection of the color circle10 Music and SoundFX Simple pallets Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion Name some games doing this! 10 Wikipedia, 2014. http://www.de.wikipedia.org[Johannes Itten]
  • 21. Simple pallets Memorizable, unique Look Juice up your game feel Simon Weis Definitions Motivation Juice up your Game Feel Music and SoundFX Simple pallets Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion
  • 22. Simple pallets Memorizable, unique Look Create a certain mood Juice up your game feel Simon Weis Definitions Motivation Juice up your Game Feel Music and SoundFX Simple pallets Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion
  • 23. Simple pallets Juice up your game feel Simon Weis Definitions Motivation Tools of the trade Juice up your Game Feel Music and SoundFX Simple pallets ColorBlender11 Share your pallets12 Color Lovers13 Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion 11 Color blender, 2014. http://meyerweb.com/eric/tools/color-blend/ 12 tigsource – share your pallets, 2014. http://forums.tigsource.com/index.php?topic=25396.0 13 Colorlovers, 2014. http://www.colourlovers.com/palettes
  • 24. Know your math Juice up your game feel Simon Weis Definitions Motivation Juice up your Game Feel Music and SoundFX Simple pallets Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion
  • 25. Know your math It’s not that hard – Math is like dancing Juice up your game feel Simon Weis Definitions Motivation Juice up your Game Feel Music and SoundFX Simple pallets Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion
  • 26. Tweening and Easing Juice up your game feel Simon Weis Definitions Motivation 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 Juice up your Game Feel Music and SoundFX Simple pallets Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion 14 Robert penner’s easing functions – a collection of swappable functions that add flavor to motion, 2014. http://www.robertpenner.com/easing/ 15 Codepen – organic motions, 2014. http://codepen.io/soulwire/pen/kqHxB
  • 27. Tweening and Easing Juice up your game feel Simon Weis Definitions Motivation Juice up your Game Feel Music and SoundFX Simple pallets Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion
  • 28. Tweening and Easing Juice up your game feel Simon Weis Definitions Motivation Juice up your Game Feel Music and SoundFX Tween . . . Positions and velocities (mimic physics) Scaling Simple pallets Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Timing Behaviour Particles Conclusion
  • 29. Juice up your game feel Shakes Simon Weis Definitions Motivation Game objects, camera Juice up your Game Feel Random or Drag Positions Music and SoundFX Simple pallets Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX y y x Feeling of impact and weight. Particles x Conclusion
  • 30. Flashes Juice up your game feel Simon Weis Definitions Motivation Juice up your Game Feel Music and SoundFX Simple pallets Flash into a color/back to original color Game objects, whole screen, background (for contrast) Timing behaviour ⇒ tweening functions Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion
  • 31. SpriteFX Juice up your game feel Simon Weis Definitions Motivation Sprites that serve as overlays or underlays for any graphical effect Juice up your Game Feel Music and SoundFX Simple pallets Combine with easing functions Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion
  • 32. SpriteFX Juice up your game feel Simon Weis Definitions Motivation Sprites that serve as overlays or underlays for any graphical effect Juice up your Game Feel Music and SoundFX Simple pallets Combine with easing functions Know Your Math Foundations Linear – Look at that sky! Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion
  • 33. SpriteFX Juice up your game feel Simon Weis Definitions Motivation Sprites that serve as overlays or underlays for any graphical effect Juice up your Game Feel Music and SoundFX Simple pallets Combine with easing functions Know Your Math Foundations Linear – Look at that sky! Radial – neon lamp Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion
  • 34. SpriteFX Juice up your game feel Simon Weis Definitions Motivation Sprites that serve as overlays or underlays for any graphical effect Juice up your Game Feel Music and SoundFX Simple pallets Combine with easing functions Know Your Math Foundations Linear – Look at that sky! Radial – neon lamp Vignette & vintage Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion
  • 35. SpriteFX Juice up your game feel Simon Weis Definitions Motivation Sprites that serve as overlays or underlays for any graphical effect Juice up your Game Feel Music and SoundFX Simple pallets Combine with easing functions Know Your Math Foundations Linear – Look at that sky! Radial – neon lamp Vignette & vintage Scanlines – retro Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion
  • 36. SpriteFX Juice up your game feel Simon Weis Definitions Motivation Sprites that serve as overlays or underlays for any graphical effect Juice up your Game Feel Music and SoundFX Simple pallets Combine with easing functions Know Your Math Foundations Linear – Look at that sky! Radial – neon lamp Vignette & vintage Scanlines – retro Change the Draworder Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion
  • 37. Particles Juice up your game feel Simon Weis Definitions One just can not have too many particles. Motivation Juice up your Game Feel Music and SoundFX Simple pallets Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion
  • 38. Juice up your game feel Particles Simon Weis Definitions Motivation No drawing skills required – simple shapes or SpriteFX Change/modulate color/alpha 16 Many References Juice up your Game Feel Music and SoundFX Simple pallets Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion 16 Wikipedia, 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
  • 39. Particles – Physical Background and Code Juice up your game feel Simon Weis Movement – Newton-equations Definitions Motivation F =m·a Juice up your Game Feel t1 v= x= t0 t1 t0 a dt = a · t + v 0 Music and SoundFX Simple pallets Know Your Math Foundations 2 v dt = 1/2a · t + v 0 · t + x 0 Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion
  • 40. Particles – Physical Background and Code Juice up your game feel Simon Weis Movement – Newton-equations Definitions Motivation F =m·a Juice up your Game Feel t1 v= x= t0 t1 t0 a dt = a · t + v 0 Music and SoundFX Simple pallets Know Your Math Foundations 2 v dt = 1/2a · t + v 0 · t + x 0 Tweening and Easing Shakes Flashes SpriteFX Stokes friction Particles F r = −6πr ηv = R · v Conclusion
  • 41. Particles – Physical Background and Code Juice up your game feel Simon Weis Movement – Newton-equations Definitions Motivation F =m·a Juice up your Game Feel t1 v= x= t0 t1 t0 a dt = a · t + v 0 Music and SoundFX Simple pallets Know Your Math Foundations 2 v dt = 1/2a · t + v 0 · t + x 0 Tweening and Easing Shakes Flashes SpriteFX Stokes friction Particles F r = −6πr ηv = R · v Does this make sense to you? v = ( v * R + a * dt ) ; x = x + v * dt ; Conclusion
  • 42. Particles Juice up your game feel Simon Weis Definitions Motivation Some possible applications: Juice up your Game Feel Music and SoundFX 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 Simple pallets Know Your Math Foundations Tweening and Easing Shakes Flashes SpriteFX Particles Conclusion
  • 43. Juice up your game feel Conclusion Simon Weis Definitions Motivation Juice up your Game Feel Music and SoundFX Simple pallets Know Your Math Foundations Tweening and Easing Compare! Shakes Flashes SpriteFX Particles Conclusion
  • 45. References I Juice up your game feel Simon Weis 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.
  • 46. References II Juice up your game feel Simon Weis Wikipedia, 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.