You Can Make Games

A talk about game development, and an exploration of how much of game development we can push onto CSS/Sass.

Codepen demos: http://codepen.io/collection/nWvBQJ/

Sass Summit, Nov. 2015

Transcript

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