@aliciability #SassGames
You Can Make Games!
Alicia Sedlock | Sass Summit 2015
Slide 2
Slide 2 text
@aliciability #SassGames
Purple Monkey Game Jam
Slide 3
Slide 3 text
@aliciability #SassGames
Slide 4
Slide 4 text
@aliciability #SassGames
Slide 5
Slide 5 text
@aliciability #SassGames
Slide 6
Slide 6 text
@aliciability #SassGames
A gaming community
centered on the web
Slide 7
Slide 7 text
@aliciability #SassGames
Slide 8
Slide 8 text
@aliciability #SassGames
Slide 9
Slide 9 text
@aliciability #SassGames
Slide 10
Slide 10 text
@aliciability #SassGames
Can we use HTML & CSS
to make games?
Slide 11
Slide 11 text
@aliciability #SassGames
Where does Sass come in?
Slide 12
Slide 12 text
@aliciability #SassGames
• Wide audience without going through
publishers
• Can interest web developers in game
development, and vice versa
• Is it even possible?
But why?
Slide 13
Slide 13 text
@aliciability #SassGames
What makes a game, a game?
Slide 14
Slide 14 text
@aliciability #SassGames
Slide 15
Slide 15 text
@aliciability #SassGames
“…a system of rules in which agents
compete by making ambiguous decisions."
- Gamasutra, "What Makes A Game"
Slide 16
Slide 16 text
@aliciability #SassGames
Slide 17
Slide 17 text
@aliciability #SassGames
• What the player needs to do (Objective)
• How the player does this (Mechanics)
• What is the result of their action?
(Win condition)
Slide 18
Slide 18 text
@aliciability #SassGames
• What the player needs to do (Objective)
• How the player does this (Mechanics)
• What is the result of their action?
(Win condition)
Slide 19
Slide 19 text
@aliciability #SassGames
Demos @ CodePen!
Slide 20
Slide 20 text
@aliciability #SassGames
Walk Cycles
Slide 21
Slide 21 text
@aliciability #SassGames
Walk Cycles
Slide 22
Slide 22 text
@aliciability #SassGames
Walk Cycles
Slide 23
Slide 23 text
@aliciability #SassGames
Walk Cycles
Slide 24
Slide 24 text
@aliciability #SassGames
Directions
Slide 25
Slide 25 text
@aliciability #SassGames
Directions
Slide 26
Slide 26 text
@aliciability #SassGames
…but it needs JavaScript :(
Slide 27
Slide 27 text
@aliciability #SassGames
Make A Scene
Slide 28
Slide 28 text
@aliciability #SassGames
Make A Scene
Slide 29
Slide 29 text
@aliciability #SassGames
…but is STILL needs JavaScript!
Slide 30
Slide 30 text
@aliciability #SassGames
Slide 31
Slide 31 text
@aliciability #SassGames
Walk Cycles…with less JS?
http://codepen.io/M_J_Robbins/pen/NPRGjP
Slide 32
Slide 32 text
@aliciability #SassGames
Walk Cycles…with less JS?
http://codepen.io/M_J_Robbins/pen/NPRGjP
Slide 33
Slide 33 text
@aliciability #SassGames
Walk Cycles…with less JS?
http://codepen.io/M_J_Robbins/pen/NPRGjP
Slide 34
Slide 34 text
@aliciability #SassGames
Enemy Generation
Slide 35
Slide 35 text
@aliciability #SassGames
Enemy Generation
Slide 36
Slide 36 text
@aliciability #SassGames
Enemy Generation - Placement and Floating
@aliciability #SassGames
You Can Make Games!
(…kinda!)
Slide 46
Slide 46 text
@aliciability #SassGames
• Limited response to user input & physics
• Cannot detect collisions
• Sass compilation
• Audio
• Controller support
We’ve Got Some Problems
Slide 47
Slide 47 text
@aliciability #SassGames
Just Because You Can…
Slide 48
Slide 48 text
@aliciability #SassGames
• Continue to push the limits of Sass/CSS?
• Sass “game engine”?
• Responsive games?
• Great for prototyping?
…Does It Mean We Should?
Slide 49
Slide 49 text
@aliciability #SassGames
Sass/CSS handles how things look and behave
JavaScript handles reactions to input and state
Slide 50
Slide 50 text
@aliciability #SassGames
Sass and JavaScript are
complimentary for games!
Slide 51
Slide 51 text
@aliciability #SassGames
What about the games
community?
Slide 52
Slide 52 text
@aliciability #SassGames
Twine
Slide 53
Slide 53 text
@aliciability #SassGames
The web needs more
game developers
Slide 54
Slide 54 text
@aliciability #SassGames
• CSS and 3D Games
• Game Console Browsers
Good Reads/Watches