Upgrade to Pro — share decks privately, control downloads, hide ads and more …

You Can Make Games

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

A5af583190a73a7d94255c6f79cde415?s=128

Alicia Sedlock

November 18, 2015
Tweet

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!