Programando un juego de navegador
ForoCoches: Miembro
27-oct-2025 22:07
#1
 Explora habitaciones, derrota monstruos, conoce a otros jugadores y haz misiones en un mundo retro de píxeles. Bienvenido a Cubity.   El comienzo Si tuviera que decir qué juego tuvo el mayor impacto en mi vida, no dudaría ni un segundo: Habbo Hotel. La última versión disponible de Windows era Windows XP. Internet estaba lleno de juegos Flash y experimentos. Habbo Hotel era un mundo en sí mismo: explorabas habitaciones laberínticas, hacías amigos y aprendías grandes lecciones cuando te estafaban y perdías todos tus "furnis". Yo quería más. Soñaba con algún día salir del hotel y explorar esta pantalla y el resto del mundo Habbo:  Así que estaba claro. Tenía que crear mi propio hotel, tenía que aprender a programar. Habbo moldeó mi vida no solo por el mundo que me presentó, sino porque me dio una profesión. Mientras la mayoría de mis amigos pasaban el instituto sin saber qué harían, yo ya lo sabía: sería programador. Elegir la tecnología Elegir tecnología es un proceso aburrido para mí, porque si quieres estar seguro de tu elección, tienes que listar y probar cada opción. Primero, tienes que pensar qué esperas del motor, cómo quieres que sea tu flujo de trabajo:
Unity es una mala idea aquí porque su soporte para WebGL es bastante secundario. Es muy probable que compiles tu juego y obtengas un error ilegible, luego lo compiles de nuevo sin cambiar nada y de repente funcione... Los tiempos de compilación y la cantidad de capas intermedias que no controlas lo hacen muy poco atractivo. Necesitamos ir con un framework que ya esté basado en JS. Conozco el trabajo de personas como Johnix y Kozen cuyas bases están construidas sobre PIXI.js. El problema es que PIXI no es un framework, es una parte de uno: un renderizador. También conozco BitHotel. Un juego que parecía que iba a ser el Habbo 2.0 pero se quedó solo en promesa. Está hecho con Phaser y es 2.5D.  Cuando trabajas con 2.5D, añadir nuevos modelos es bastante laborioso porque tienes que cortarlos según las baldosas que ocupan para luego generar el efecto de tercera dimensión. También tienes que prerenderizar el modelo en todas las orientaciones posibles. O si no es un modelo 3D, tienes que pintarlo varias veces.  (cómo se ve un sofá de BitHotel detrás de escena) No soy modelador así que tengo cero paciencia para hacer esto. En mi caso, tiene que ser 3D real para poder hacer e insertar modelos simples. Si el entorno tiene que ser 3D y en JS, tendremos que ir con three.js. Primeros pasos La parte más básica del juego es tener habitaciones con baldosas y poder caminar en ellas, así que eso es lo primero que haremos. Para eso, usaremos EasyStar.js, un sistema de pathfinding simple y ligero. https://i.imgur.com/7rnTdWH.mp4 El siguiente paso es el multijugador. Hoy en día hay una buena selección de servidores de juegos como Nakama o Colyseus que facilitan mucho el proceso. https://i.imgur.com/L0P9tB7.mp4 También me tomé un tiempo para calcular la altura de los furnis al moverme. https://i.imgur.com/HiQKJLn.mp4 Primer Furni Y ya que estamos, también deberíamos intentar hacer y añadir nuestro primer modelo desde cero. El software más sencillo para editar en modo voxel es MagicaVoxel.   En solo unos minutos pude hacer y añadir mi primer modelo personalizado. ¡Es la primera vez que puedo decir que modelar ha sido sencillo y divertido! Se puede acceder al estado actual del juego en https://cubity.yelidmod.com/?utm_source=forocoches ¿Quieres enterarte de cuando publico el siguiente blog? ¡Avisa en tu comentario! Índice de devblogs: - Añadiendo multiplayer - El Personaje, la Fuente y los NPCs |
Editado: 10-nov-2025 14:10 -
FloroCoches: Menbrium
28-oct-2025 09:01
#4
|
Hombre Habbo Hotel más que un juego, era un chat con muñequitos donde cada 1 tenía su habitación... Lo tuyo, sí es un juego, así que enhorabuena por el proyecto. |
ForoCoches: Miembro
28-oct-2025 19:22
#5
|
¡A ver cómo va! |
ForoCoches: Miembro
02-nov-2025 12:13
#6
|
Añadiendo Multiplayer La mejor manera de hacer un juego multijugador es teniéndolo en cuenta desde la base. Eso es porque habrá acciones que quieras validar en el lado del servidor, lo que te obliga a trocear más el código. Por ello he empezado ya a montar lo necesario para que los personajes aparezcan por orden del servidor y sus movimientos sean sincronizados entre todos los participantes. https://i.imgur.com/L0P9tB7.mp4 Primeros furnis Yo no soy modelador, ni tengo paciencia para serlo. Teniendo esto en cuenta he estado probando varios programas de modelar y he encontrado MagicaVoxel. Es casi perfecto. Le permite a cualquier monguer hacer un objeto simple sin mayor dificultad. En unas pocas horas he podido hacer todos estos:  Por desgracia no es perfecto como ya he dicho. La exportación de los modelos es muy mala. Añade muchos triángulos innecesarios, no soporta el formato de salida que más me interesa y cuando es un modelo compuesto por múltiples objetos no puedes exportarlos como uno solo. Su creador se ha puesto a crear otro programa lo cual ha hecho que deje bastante de lado este (normal porque es gratuito, si no te pagan, para qué esforzarse). Furnis sobre furnis He implementado también la opción de poder poner furnis sobre otros furnis. Es una chorrada pero creo que puede dar mucho juego a la hora de decorar salas y hacerlas más únicas. https://imgur.com/Zl7dJTR Estoy super contento por empezar a tener una base 
|
ForoCoches: Miembro
10-nov-2025 14:09
#7
|
El Personaje, la Fuente y los NPCs Para manejar correctamente los NPCs y al propio jugador, necesito tener ya el modelo final. Contraté a una chica en Fiverr y… después de 1 semana esto fue lo que me envió:  Ignoró completamente la referencia. No quiero un personaje humano genérico  Tenía derecho a 1 revisión, así que le pedí que por favor mirara la imagen que le había enviado, y me mandó esto:  Honestamente, lo miro y no es como la imagen, pero no puedo explicar por qué. Aún no me gusta. Además, se suponía que debía estar riggeado y no lo estaba, la ropa debía ser separada para poder crear más en el futuro… ignoró todo eso. Nunca escatimen en arte. La Fuente Estoy usando DEPIXEL y resulta que le faltan un montón de glifos. Se nota que fue hecha por un americano. Para salir del paso, usé Glyphr Studio para añadir algunos glifos básicos. Pero no estoy dispuesto a expandir una fuente yo mismo. Busqué qué fuente usaba Habbo, y resulta que crearon su propia fuente “Volter” y la hicieron open source cuando dejaron de usarla: Anuncio de Volter. (Su fuente tiene 323 glifos mientras que la que uso solo tiene 207.) Estaba listo para descargarla y aplicarla, pero la justificación que dieron para dejarla me mató: “no responsiva, solo 1 tamaño.” ¿Cómo que no responsiva? ¿Acaso las fuentes no son automáticamente responsivas? Me encantaría usar su fuente, especialmente ya que no la usan más, pero ese tema de “no responsiva” me mató :S NPCs Otra parte central del juego son los NPCs. Quiero que cuando camines por la ciudad, no se sienta como un pueblo fantasma. Quiero que puedas tener bots empleados y, en un futuro muy lejano, mascotas. Así que configuré el ECS necesario para los NPCs de modo que su funcionalidad pueda expandirse fácilmente. En las salas son “solo otro objeto,” así que puedes moverlos, colocarlos donde quieras y rotarlos. Además tienes la opción de añadir componentes. Por ejemplo, puedes añadir un componente de Diálogo para que cuando el usuario haga doble clic, muestre los diálogos que hayas configurado. Con el componente Patrulla, los NPCs pueden caminar por la calle. Gracias a cómo está configurado, esas opciones son parte del objeto, así que los usuarios también podrían comprar NPCs para construir mazmorras o contar historias más allá de usarlos como empleados.  Vista previa en video del comportamiento de la interfaz. Detalles Menores Mientras esperaba lo que pensaba que sería el modelo del jugador, trabajé en diseñar la pantalla donde verás la lista de amigos/mensajes privados. Buscando ideas encontré este concepto increíble hecho por Wimell:  Y yo hice algo muy similar:  No funcional, pero creo que se ve bastante bien. Los paneles de la interfaz mantienen su posición entre cerrar y abrir durante la sesión. También puedes bloquear el personaje con Código:
/lock Código:
/unlock |