Building a multiplayer version of space invaders

This PDF version does not include the GIFs, videos, or demos that were part of the talk.

Link to the original presentation: https://bit.ly/36kkqvz

You can reach out https://www.twitter.com/Srushtika to ask any questions or get access to complete resources including a link to the recorded video or full source code.

Transcript

1. BUILDING A MULTIPLAYER VERSION OF
   SPACE INVADERS
   SRUSHTIKA NEELAKANTAM | HALFSTACK CONF ONLINE 2020 | ABLY REALTIME
   @Srushtika
   

   View Slide

2. HELLO!
   I’M SRUSHTIKA
   Developer
   Advocate
   @Srushtika n.srushtika@gmail.com
   

   View Slide

3. BUT FIRST, LET’S PLAY THE GAME!
   - This game demo is capped at 10 people (to make sure my system doesn’t
   crash), so fastest fingers first!
   - Open the link in a computer browser. For best experience, maximize the
   window and set the magnification to 100% or less.
   - This video stream that you are looking at is about 15-30 seconds behind
   what’s actually happening in the real world. So I’ll join the game myself,
   the people who aren’t participating can have a look at that. I’ll try to
   do things slowly and try to stay alive by the time everyone actually
   joins. So let’s see how this goes.
   @Srushtika | HalfStack Conf Online 2020
   https://go.ably.io/play-space
   

   View Slide

4. CORE COMPONENTS OF A REALTIME MULTIPLAYER GAME
   Physics Networking
   Assets
   @Srushtika | HalfStack Conf Online 2020
   

   View Slide

5. ASSETS AND PHYSICS
   GAME COMPONENTS
   @Srushtika | HalfStack Conf Online 2020
   

   View Slide

6. GameScene extends Phaser.Scene {
   }
   WORKING OF PHASER
   GAME COMPONENTS
   @Srushtika | HalfStack Conf Online 2020
   gameConfig = {}
   

   View Slide

7. WORKING OF PHASER
   GAME COMPONENTS
   @Srushtika | HalfStack Conf Online 2020
   preload()
   gameConfig = {}
   GameScene extends Phaser.Scene {
   }
   

   View Slide

8. GameScene extends Phaser.Scene {
   }
   WORKING OF PHASER
   GAME COMPONENTS
   @Srushtika | HalfStack Conf Online 2020
   preload()
   create()
   gameConfig = {}
   

   View Slide

9. GameScene extends Phaser.Scene {
   }
   preload()
   create()
   gameConfig = {}
   WORKING OF PHASER
   GAME COMPONENTS
   @Srushtika | HalfStack Conf Online 2020
   update()
   

   View Slide

10. @Srushtika | HalfStack Conf Online 2020
    NETWORKING
    GAME COMPONENT
    server
    player1 player2 player3
    

    View Slide

11. GAME COMPONENTS
    @Srushtika | HalfStack Conf Online 2020
    HTTP WEBSOCKETS
    vs.
    NETWORKING
    

    View Slide

12. NETWORKING
    GAME COMPONENT
    @Srushtika | HalfStack Conf Online 2020
    Some open-source options
    Socket.io
    Socket
    Cluster
    faye-
    websocket
    SockJS Websocketd
    

    View Slide

13. GAME COMPONENT
    @Srushtika | HalfStack Conf Online 2020
    NETWORKING
    

    View Slide

14. @Srushtika | HalfStack Conf Online 2020
    NETWORKING
    GAME COMPONENT
    player1 player2 player3
    server
    

    View Slide

15. GAME COMPONENT
    @Srushtika | HalfStack Conf Online 2020
    NETWORKING
    

    View Slide

16. @Srushtika | HalfStack Conf Online 2020
    GAME ARCHITECTURE
    GAME COMPONENT
    1. Game Room channel
    2. Death notifications channel
    3. One channel each for every
    player that’s playing the game
    

    View Slide

17. @Srushtika | HalfStack Conf Online 2020
    GAME ARCHITECTURE
    GAME COMPONENT
    death notifs channel
    player2 channel
    player1 channel
    gameRoom channel
    player2
    player1
    server
    gameRoom channel
    gameRoom channel
    .
    .
    .
    player n channel
    player1 channel
    player2 channel
    death notifs channel
    death notifs channel
    

    View Slide

18. THANK YOU!
    @Srushtika n.srushtika@gmail.com
    https://github.com/Srushtika/
    realtime-multiplayer-space-invaders
    

    View Slide