Como fazer um jogo multiplayer para navegador

Escolha entre por turnos, tempo real ou comandado pelo host, diga quantos jogadores são e como jogam juntos, e o Go Bananas cria um jogo em que os amigos entram por um link.

Multiplayer é o que transforma um jogo pequeno numa noite com os amigos. As partes difíceis são manter a tela de cada jogador em sintonia, lidar com quem entra atrasado ou cai, e compartilhar o jogo sem ninguém instalar nada. No Go Bananas, você descreve o jogo, e o site cuida das salas, dos convites e das conexões. Este guia cobre os três tipos de multiplayer, como pedir o que você quer, como funciona jogar junto e o que ter em mente ao projetar um jogo para mais de uma pessoa.

Os três tipos de multiplayer

Todo jogo multiplayer do Go Bananas usa um de três jeitos de manter os jogadores sincronizados. Você não precisa citá-los, mas conhecê-los ajuda a descrever bem o seu jogo.

Tipo	Como funciona	Bom para
Por turnos	Os jogadores se revezam, e cada jogada é enviada quando é feita	Jogos de tabuleiro, de cartas, de palavras, quebra-cabeças, estratégia
Tempo real	A posição e as ações de cada jogador são enviadas muitas vezes por segundo	Corrida, tiro, jogos de arena, esportes, perseguições
Comandado pelo host	O jogo de um jogador (o host, o anfitrião da sala) aplica as regras e envia o resultado para todos	Jogos com física, inimigos ou cronômetros compartilhados que todos os jogadores precisam ver do mesmo jeito

Por turnos é o mais tolerante. Nada acontece entre as jogadas, então uma conexão lenta só atrasa um turno. Damas, xadrez, jogo da velha e quizzes se encaixam aqui.

Tempo real parece mais vivo, mas exige mais cuidado. Cada jogador envia o próprio estado umas 20 vezes por segundo, e as outras telas desenham o que recebem. Combina com jogos em que cada jogador controla o próprio personagem, como uma corrida ou um combate aéreo.

Comandado pelo host é para jogos em que algo além dos jogadores se mexe: uma bola que os dois times perseguem, ondas de inimigos, uma arena que encolhe. Um jogo só decide o que acontece, então todos veem a mesma bola no mesmo lugar.

Como pedir um jogo multiplayer

Seja específico sobre como as pessoas jogam juntas. Um bom pedido responde a estas perguntas:

Quantos jogadores? Os jogos podem ter até 16. Diga "2 jogadores" ou "até 8 jogadores".
Por turnos ou em tempo real? "Os jogadores se revezam" ou "todos se movem ao mesmo tempo".
Uns contra os outros ou cooperativo? Os jogadores se enfrentam, ou trabalham juntos contra o jogo?
Times? "Dois times de 3", "cada um por si".
O que termina o jogo? Uma pontuação a alcançar, um cronômetro, o último jogador de pé.

Por exemplo:

Um jogo de corrida em tempo real visto de cima para até 6 jogadores numa pista com curvas fechadas. Três voltas, vence quem terminar primeiro. Cada jogador escolhe a cor do carro. Mostre a posição de todos num minimapa.

Ou:

Um jogo por turnos para 2 jogadores: Lig 4 numa grade 7 por 6. Mostre de quem é a vez, destaque a linha vencedora e ofereça uma revanche.

Todo jogo também ganha um modo para um jogador, com um botão "Play vs AI" (jogar contra a IA) e os níveis Easy, Medium e Hard (fácil, médio e difícil), para as pessoas experimentarem sozinhas. Quando um jogo começa no modo multiplayer, ele pula esse menu e começa na hora.

Como funciona jogar junto no Go Bananas

Abrindo uma sala

Abra o jogo e escolha Multiplayer em vez de Play Solo (jogar sozinho). A opção Multiplayer só aparece em jogos feitos para mais de um jogador.
Escolha Create Room (criar sala). Você vira o host.
O lobby mostra um código de sala e um link embaixo de "Share this link with friends" (compartilhe este link com os amigos), com botões para copiar o link ou abrir o menu de compartilhamento do celular.
Os amigos entram, e os nomes deles aparecem na lista de jogadores.
Só o host pode apertar Start Game (começar o jogo).

Entrando

Há dois jeitos de entrar:

O link. Abrir o link do convite mostra uma janela Join Game (entrar no jogo): "Your friend made this game with AI!" (seu amigo fez este jogo com IA!), uma caixa para o seu nome e um botão Join Game. Sem conta e sem instalar nada.
O código da sala. Escolha Multiplayer, depois Join Room (entrar na sala), e digite o código de 6 caracteres. Os códigos não usam O, 0, I e 1, então é difícil ler errado.

Dá para entrar num jogo que já começou se tiver lugar livre. Se todos os lugares estiverem ocupados, aparece "Room is full" (a sala está cheia).

Quando alguém sai ou perde a conexão

Celulares perdem a conexão, e as pessoas trocam de app para mandar o convite. O Go Bananas está preparado para isso:

Um host que troca de app enquanto espera no lobby continua com a sala, então o convite ainda funciona quando ele volta.
Se o host sair de vez, um novo host é escolhido entre os jogadores ainda conectados. Quando não sobra ninguém, a sala fecha.
Um jogador que perde a conexão tem o lugar guardado por 15 minutos.
O jogo tenta se reconectar sozinho, 5 vezes, com 5 segundos de intervalo, e mostra "Connection lost — Reconnecting" (conexão perdida, reconectando) enquanto tenta.
Uma sala sem atividade fecha depois de 30 minutos, e qualquer sala fecha depois de 4 horas.

Projetando para mais de um jogador

Um jogo multiplayer precisa ser justo e precisa mostrar a mesma coisa em todas as telas. Estes hábitos ajudam, e você pode pedir por eles diretamente.

Dê a cada jogador seu próprio ponto de partida. Jogadores que nascem um em cima do outro começam o jogo confusos. Em jogos de tabuleiro, cada jogador deve ver o tabuleiro do próprio lado.

Deixe um jogo só decidir as coisas aleatórias compartilhadas. Se um baralho é embaralhado ou um mapa é gerado aleatoriamente, o host deve fazer isso uma vez e enviar o resultado. Senão, cada tela joga os próprios dados e os jogadores acabam em jogos diferentes.

Nunca envie informação escondida. Se os jogadores têm cartas secretas ou papéis ocultos, simplesmente não envie os segredos dos outros jogadores. Tudo o que é enviado a um navegador pode ser lido por um jogador curioso.

Use "travar e depois revelar" (commit-then-reveal) para escolhas simultâneas. Em jogos tipo pedra, papel e tesoura, cada jogador primeiro trava uma escolha sem revelá-la. Só quando todos tiverem travado as escolhas são mostradas.

Planeje para o lag. As atualizações em tempo real chegam umas 20 vezes por segundo, e cada uma leva um tempo para viajar. Suavize o movimento dos outros jogadores em vez de fazê-los pular de uma posição para outra, e decida os acertos num lugar só, para que duas telas não discordem.

Decida o que acontece quando alguém sai. O personagem dele fica, some ou passa a ser controlado pelo computador? A partida termina se sobrar só um jogador? Diga isso no seu pedido.

Mantenha as mensagens pequenas. Envie o que mudou, não o jogo inteiro, e fique abaixo de umas 60 mensagens por segundo por jogador.

Para desenvolvedores: os helpers de multiplayer

Os jogos do Go Bananas recebem uma conexão pronta, então um jogo não deve abrir o próprio WebSocket. No modo multiplayer, window.gameOptions descreve a sessão (mode, playerId, isHost, players, roomCode, playerName), e os atalhos window.playerId, window.isHost e window.playerName ficam definidos. No modo para um jogador, window.mp é um substituto que não faz nada, então o mesmo código roda sozinho.

Para enviar, pelo window.mp:

sendTurn(data): uma jogada num jogo por turnos. Não use uma chave chamada type em data, senão a mensagem é descartada.
sendState(state): o estado do seu próprio jogador num jogo em tempo real. É limitado a uns 20 envios por segundo.
sendAction(action): um evento pontual num jogo em tempo real, como atirar ou pular.
sendHostState(state): o estado compartilhado, enviado pelo host num jogo comandado pelo host.

Para receber, defina funções em window: onRemoteTurn, onRemoteState, onRemoteAction, onHostState, onPlayerJoined, onPlayerLeft, onPlayerDisconnected, onPlayerReconnected e onNewHost.

// Defina os callbacks de recebimento no nível principal do script, não dentro de
// uma função que roda depois, senão as mensagens que chegam cedo se perdem.
window.onRemoteTurn = function (turn) {
  applyMove(turn.column);      // os campos que o outro jogador enviou
  myTurn = true;
  draw();
};

window.onPlayerLeft = function () {
  showMessage('Seu adversário saiu do jogo');
};

window.onNewHost = function () {
  // O host saiu e um novo foi escolhido. Se este jogo agora é o host,
  // ele passa a enviar o estado compartilhado.
};

function dropPiece(column) {
  if (!myTurn) return;
  applyMove(column);
  myTurn = false;
  draw();
  window.mp.sendTurn({ column: column });   // você nunca recebe a sua própria mensagem
}

Algumas regras mantêm tudo funcionando:

O window.mp fica pronto depois que os seus scripts rodaram, então envie a partir de eventos do jogo, não das primeiras linhas do script.
Quem envia nunca recebe a própria mensagem de volta. Aplique a sua jogada localmente e depois envie.
Mantenha cada objeto de estado bem abaixo de 1 MB.
No multiplayer, "Play Again" (jogar de novo) recarrega o jogo para todos os jogadores recomeçarem juntos.