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

Building a multiplayer version of space invaders

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.

Srushtika Neelakantam

May 22, 2020
Tweet

More Decks by Srushtika Neelakantam

Other Decks in Programming

Transcript

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

    View full-size slide

  2. HELLO!
    I’M SRUSHTIKA
    Developer
    Advocate
    @Srushtika [email protected]

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

  18. THANK YOU!
    @Srushtika [email protected]
    https://github.com/Srushtika/
    realtime-multiplayer-space-invaders

    View full-size slide