The Danger Crew: Lessons Learned From Making a Video Game in React

React Rally 2016

Transcript

1. LESSONS LEARNED FROM MAKING A VIDEO GAME IN REACT
2. DREW CONLEY Hello! I am
3. 3 QUESTIONS
4. Chipotle
5. This game needs to be a “FULLY FEATURED” game, with a deep experience and adventure The Vision
6. HESITATIONS • Big project. Complicated • Canvas? :/ • Deep bugs in weird edge cases
7. TL;DR
 I was wrong.
8. Demo
9. THIS TALK IS ABOUT YOU MAKING GAMES
10. OVERWORLD
11. Maps are JSON { backgroundImage: ‘...’,
 walls: {...},
 people: {...} }
12. GRID
13. THE PLAYER CHARACTER <Person x={1} y={1}/>
14. <Person x={1} y={2}/> THE PLAYER CHARACTER
15. WALLS walls: {...}
16. jacob.svg
17. jacob.svg background-size background-position
18. jacob.svg animation: walkDown 0.4s steps(4)
20. SO LONELY :(
21. NPCs
22. overflow: visible
23. overflow: hidden
25. BATTLES
26. TURN BASED
27. 3 STEP CYCLE 1. Players submit Actions
 2. Actions are processed by Rules -> new Game State is created
 3. Players are notified of new Game State Repeat until winner is declared in new Game State
28. DEMONSTRATION rock, paper, scissors
29. State p1: { hp: 100} React Component p2: { hp: 90}
30. Actions are submitted p1 submits Action A p2 submits Action B { damage: 30, accuracy: 80% } { damage: 20, accuracy: 99% }
31. State p1: { hp: 80} React Component p2: { hp: 90}
32. Rollout [
 “Player A used Action A!”,
 “But it missed!!!”,
 
 “Player B used Action B!”,
 “It did some damage!”
 ]
33. Rollout Rollout Message
34. It took a few tries…
35. It took a few tries…
36. It took a few tries…
37. Separate Application from Content
38. Application Consideration: What happens when a Character steps on an icy spot?
39. Content Consideration: Where are the icy spots?
40. Benefits • Game state is perfectly recreatable • Saving/Loading • Easy to iterate on levels design, puzzles
 storytelling
41. Demo
42. Go make a game!
43. drewconley@gmail.com thedangercrew.com @drewconley13