Conectividad WebRTC para Videojuegos Multijugador en JavaScript

🎮 RtcParty.js: Conectividad WebRTC para Videojuegos Multijugador en JavaScript

RtcParty.js es un módulo ligero en JavaScript que facilita el manejo de conexiones WebRTC basadas en datos, pensado especialmente para videojuegos multijugador, pero útil para cualquier aplicación que requiera comunicación P2P eficiente.

Este módulo encapsula toda la lógica de señalización, conexión, sincronización de estados y comunicación en red, permitiendo que te concentres en lo más importante: el juego.

---

🧱 Niveles de uso

Este documento está organizado en orden de mayor a menor nivel de abstracción. Si solo quieres hacer funcionar una partida multijugador con lobby y lista de jugadores, empieza desde aquí. Si necesitas más control o tienes casos especiales, puedes ir bajando a los niveles inferiores.

---

🔝 1. RTC.RTCMultiplayer(...) – Solución completa con interfaz de usuario

Esta función implementa todo lo necesario para una experiencia multijugador:

• Pantalla de bienvenida

• Ingreso de nombre

• Selección de tipo de conexión: pública, privada, local o QR

• Lobby con lista de jugadores, íconos, selecciones y estado de "listo"

• Disparo automático del inicio cuando todos están listos

Ideal para:

Juegos casuales, prototipos rápidos, experiencias multijugador completas.

Ejemplo:

var rtcMp = RTCMultiplayer(
  "3.236.221.36", // ip ice server
  "server.com",   // dominio del servidor websocket
  self_id => console.log("onOpen", self_id), // se ejecuta al obtener tu ID
  guest_id => console.log("onGuest", guest_id), // un jugador se ha conectado
  guest_id => console.log("onUnguest", guest_id), // un jugador se ha desconectado
  (guest_id, data, time, target) => console.log("onMessage", guest_id, data, time, target), // mensaje recibido
  popularChoice => console.log("onReady", popularChoice), // todos listos, empieza el juego
  guest_id => console.log("onChangeReady", guest_id), // alguien marcó como "listo"
  () => console.log("show config game section"), // se debe mostrar la sección de configuración del juego
);

// Cuando termines la sección de configuración, llama:
rtcMp.show(); // muestra el lobby

// Dentro de la configuración puedes asignar ícono y selección:
rtcMp.setIcon("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEA....");
rtcMp.setChoice("opcion 1");

// En el juego puedes enviar mensajes con:
rtcMp.commit("Hola a todos");

🎨 Estilo visual para

RTC.RTCMultiplayer

La interfaz visual generada por RTC.RTCMultiplayer puede personalizarse fácilmente. El sistema ya incluye clases de CSS para las distintas pantallas y elementos de la interfaz.

Aquí tienes un conjunto de estilos base que puedes usar como punto de partida para integrar con el diseño de tu juego:

/* Administra la pantalla de bienvenida */
#RTCMultiplayerltiplayer.splash {}

/* Pantalla para ingresar el nombre */
#RTCMultiplayerltiplayer.requestName {}

/* Pantalla para elegir tipo de conexión */
#RTCMultiplayerltiplayer.menu {}

/* Pantalla para escribir el nombre de la sala privada */
#RTCMultiplayerltiplayer.requsetRoom {}

/* Pantalla de lobby (estilo libre, personaliza aquí) */
#RTCMultiplayerltiplayer.lobby {
	/* puedes agregar estilos como display:grid, borders, etc. */
}

/* Estilo base para campos de entrada */
#RTCMultiplayerltiplayer input {}

/* Estilo base para botones */
#RTCMultiplayerltiplayer button {}
#RTCMultiplayerltiplayer button.Scan {}
#RTCMultiplayerltiplayer button.changeName {}

/* Indicador visual para el botón enfocado (útil para teclados o TV remotos) */
#RTCMultiplayerltiplayer button:focus::after {}

📌 Recomendaciones

• Todos los estilos están encapsulados dentro del ID #RTCMultiplayerltiplayer, lo que facilita su integración sin afectar el resto de tu UI.

• Puedes sobrescribir cualquier clase agregando tus propios estilos al final de tu archivo CSS.

• Si usas rutas personalizadas para las imágenes (scan.png, user.png, selector.png, PachangaLogo.png), asegúrate de ajustar las URLs según tu estructura de proyecto.

🖼️ ScreenShots

📁 Archivos

Los archivos necesarios son RtcParty.js, coloredQR.js, jsQR.js, qrcode.js que puedes encontrarlos acá

https://drive.google.com/drive/folders/1SId9jA3d96udH_1t0-LgRCTLSfBEOlrI?usp=sharing

Para el servidor Turn Stun y Room Dealer Websocket aquí. Recuerda que necesitaras un dominio con ssl, o correrlo solo en local.
https://drive.google.com/drive/folders/1bqa7436mbJoTJgtpsoaVaz4c204EyJuz?usp=sharing

---

🌐 2. RTC.roomDealer(...) – Conexión automática vía WebSocket

Permite conectar automáticamente a los jugadores en una sala, usando un servidor WebSocket para señalización. Internamente utiliza RtcParty.

Ideal si ya tienes una interfaz personalizada pero quieres evitar manejar ofertas y respuestas manualmente.

---

🤝 3. RTC.localPlayer(...) – Conexión por códigos QR (sin servidor)

Permite que los jugadores se conecten entre sí localmente usando WebRTC puro. Utiliza códigos QR para compartir la información de conexión (ofertas/contraofertas).

Requiere las librerías:

• jsQR.min.js

• qrcode.js

• coloredQR.js

---

🧪 4. RTC.singlePlayer(...) – Modo sin red

Modo de operación sin conexión para pruebas o juegos de un solo jugador. Ejecuta localmente todos los eventos como si estuviera en red.

---

🕸️ 5. RTC.RtcParty(...) – Red P2P en malla

Conecta múltiples jugadores en una red de malla usando WebRTC. Cada jugador comparte sus conexiones con los demás.

Permite:

• Invitar jugadores con invite(id)

• Aceptar conexiones con acceptInvite(id, offer)

• Enviar mensajes con commit(data, [targets])

• Escuchar eventos como onGuest, onData, etc.

Ideal si quieres manejar la lógica de conexión directamente, pero con soporte multicliente.

---

🔧 6. RTC.RTC(...) – Conexión punto a punto básica

Nivel más bajo: conexión entre dos puntos usando WebRTC. Es necesario encargarse manualmente de la negociación de ofertas y respuestas.

Ejemplo de uso:

const peer = RTC.RTC("3.236.221.36", onOpen, onState, onError, onMessage);

peer.createOffer(offer => {
  // Enviar 'offer' al otro usuario
});

// Luego, con la respuesta del otro usuario:
peer.acceptContraOffer(answer);

// Enviar datos:
peer.send("hola");

---

🗣️ ¿Qué opción debería usar?

Necesidad	Función recomendada
Quiero todo listo con interfaz visual	RTC.RTCMultiplayer
Tengo mi propia interfaz pero quiero que se conecten fácil	RTC.roomDealer
Quiero jugar en local sin servidor	RTC.localPlayer
Quiero simular red sin red real	RTC.singlePlayer
Quiero controlar conexiones entre varios usuarios	RTC.RtcParty
Solo necesito conectar dos usuarios directamente	RTC.RTC