GitHub | Documentation | Become a Patron

Lobby System



  • Hey guys

    I need a queue system where I collect for example 20 players, and when it's ready a timer starts and then sends those clients into a game state.

    Anyone done something similar?

    Also how do go about having "Rounds" that are 10 seconds long each, like an quiz game perhaps?

    Any insights be useful


  • administrators

    Hey @patrykmaron,

    For the "lobby" system, you can let players connect into your room handler, and only start the match when the client count reaches the number you specify. That's exactly what I'm doing on Crash Racing - the game only starts after having 4 players - or after a timeout of 10 seconds.

    Example

    onJoin (client, options: any) {
        if (this.clients.length === 10) {
            // change the state to notify clients the game has been started
            this.state.started = true;
    
            // additionally, you may lock the room to prevent new clients from joining it
            this.lock()
        }
    }
    

    For the "rounds", you can either use JavaScript's setTimeout(), or the built-in this.clock.setTimeout(), which returns an Delayed instance, which you can pause/resume/clear later (http://colyseus.io/docs/api-room/#clock-clocktimer)

    Slightly rewritten example:

    onInit () {
      // auto-start the state after 10 seconds
      this.autoStartTimeout = this.clock.setTimeout(() => this.start(), 10 * 1000); 
    }
    
    onJoin () {
      if (this.clients.length === 10) {
        this.autoStartTimeout.clear();
        this.start();
      }
    }
    
    start () {
      // change the state to notify clients the game has been started
      this.state.started = true;
    
      // additionally, you may lock the room to prevent new clients from joining it
      this.lock()
    }
    

    Note that this code wasn't tested, there might be some issue on it. Cheers!



  • This post is deleted!


  • Thanks thats all great, I got a grip of it!

    May I ask you about the clock timer and rendering a countdown?

    start(){
    // change the state to notify clients the game has been started
    this.state.started = true;

    if (this.state.started = true){
        // additionally, you may lock the room to prevent new clients from joining it
        this.lock()
        this.state.messages.push("COUNTDOWN SHALL BEGIN!");
    
        this.clock.currentTime = 10;
        this.clock.running = true;
        
        this.state.messages.push(`${ this.clock.currentTime.toString()}`)
    } 
    

    Im trying to have a countdown running and refresh on start(), however it only outputs me a "0"? any thoughts?


  • administrators

    Hi @patrykmaron,

    I've just added a page for Timing Events on the docs site: http://colyseus.io/docs/api-timing-events/

    I'm afraid your code isn't working properly because the currentTime property is read-only.

    Ideally, you'd register an interval using clock.setInterval(), and update the state setting the countdown time. Like:

    Server-side:

    onInit () {
      this.state.countdown = 10;
    
      this.countdownInterval = this.clock.setInterval(() => {
        this.state.countdown--;
    
        if (this.state.countdown === 0) {
          this.countdownInterval.clear();
          this.start();
        }
      }, 1000);
    }
    

    Client-side:

    room.listen("countdown", (change) {
      console.log(change.value) // => 10..., 9..., 8...
    });
    

    Cheers



  • Thanks for the awesome replies!

    I was wondering how are you declaring the "countdownInterval" ?

    Thanks :)


  • administrators

    Hey @patrykmaron,

    I've just released a new version of the module (0.8.11) to allow importing these definitions easily through:

    import { Room, Delayed } from "colyseus";
    
    class MyRoom extends Room {
      myTimeout: Delayed;
    
      onInit () {
        this.myTimeout = this.clock.setTimeout(() => {/* ... */}, 1000);
      }
    }
    

    Hope this helps! Cheers!



  • clocks do not work on javascript, in this code the message "timer" is not displayed.

    this.clock.setInterval(() => {console.log("timer");}, 1000);
    

    what am I doing wrong?


  • administrators

    @Алексей-Андронов the clock only works if you set up the simulation interval.

    I guess that's not intuitive, I'll fix this on version 0.9.0 too.