Think Reactively with RxJS for Game Development
•Download as PPTX, PDF•
0 likes•84 views
The talk I have delivered at Global Code Jam Sri Lanka - 2020
Recommended
Recommended
More Related Content
Similar to Think Reactively with RxJS for Game Development
Similar to Think Reactively with RxJS for Game Development (20)
Recently uploaded
Recently uploaded (20)
Think Reactively with RxJS for Game Development
- 1. Think reactively with RxJS for Game Development
- 2. Hi! I am Dhanushka Chandana Full stack Developer & Blogger Facebook Developer Circle: Colombo 2
- 4. Reactive does things only in response to others 4
- 6. 6
- 7. Where do I store my players health? 7
- 8. Where do I store my players health? Inside the Player component, of course! 8
- 9. Where do I store my players health? Inside the Player component, of course! Where do I store the amount of damage can caused by a bullet once it hits the player? 9
- 10. Where do I store my players health? Inside the Player component, of course! Where do I store the amount of damage can caused by a bullet once it hits the player? Inside the Bullet component! 10
- 11. 11 how neat and tidy their health value is stored internally.
- 12. 12 how neat and tidy their health value is stored internally. what they see displayed in the game UI and how the actions are triggered
- 13. What if? There is a great flashing animation for every time the player’s health decreases? There is a power-up you can collect that lets you control another player for a period of time, showing that player’s health instead of your own? 13
- 14. 14
- 15. Reactive Programming to the rescue. 15
- 16. Reactive programming Reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change. (Wikipedia) Programming with asynchronous data streams 16
- 17. In reactive programming it’s all about programming with data streams, streams of input data. RP raises the level of abstraction of your code so you can focus on the interdependence of events that define the business logic. 17
- 18. a = b + c 18
- 19. 19
- 20. 20 Image taken from The introduction to Reactive Programming you’ve been missing
- 21. 21
- 22. RxJS
- 23. RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code. 23
- 24. Observable You can think of an observable as a stream of values. Capable of emitting values over time. 24
- 26. 26
- 27. 27 when an item is emitted by either of two Observables, combine the latest item emitted by each Observable via a specified function and emit items based on the results of this function
- 28. Let’s get into something cool.
- 29. 29
- 31. Identifying the source streams 31
- 32. Identifying the source streams ● Navigate the bird using the keys ● Keep track of the player’s score ● Keep track of the player’s lives ● Keep track of the pipes on the field (includes generating new pipes) 32
- 33. keydown events (KeyboardEvent) bird$: represents the position of the bird gamePipes$: represents the pipes in the game area 33
- 34. “ 34 Enough Talks, Show me some code
- 35. 35 bird$ scan - apply a function to each item emitted by an Observable, sequentially, and emit each successive value.
- 36. 36 gamePipes$
- 37. Support functions 37 createPipes(gameSize) updateGame (bird, pipes) valueOnCollisionFor (pipes) fly & fall
- 41. 41
- 42. 42
- 46. Further improvements Rendering the scene (Performance based) Add sound responses 46
- 47. Rendering the scene 47 Let’s say we’d like to redraw the whole scene 60 times per second.
- 48. JavaScript is single-threaded. Preventing the browser from doing anything so that it locks up. In other words, the browser may not be able to process all these updates quickly enough. 48
- 49. The browser is trying to render a frame and then it’s immediately asked to render the next one. As a result, it drops the current one to keep up the speed. That’s when animations start to look laggy. 49
- 50. window.requestAnimationFrame(callback) Tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. 50
- 51. Scheduler a mechanism to schedule some task to be performed in the future 51
- 52. animationFrame from RxJS This Scheduler performs a task when window.requestAnimationFrame would fire. 52
- 54. Add sound responses ● window.AudioContext ● window.webkitAudioContext 54
- 55. A game, in programming terms, consists of an infinite loop with the following steps: ● gather user input ● update the state of the game based on that input ● draw everything 55 Final thoughts
- 57. 57 Further learnings UniRx (Reactive Extensions for Unity) https://github.com/neuecc/UniRx RxJS Marbles https://rxmarbles.com/ ReactiveX Official Website http://reactivex.io/