Diseñando Juegos de Mesa y Cómo la Tecnología (y React) Puede Ayudar

Rate this content
Bookmark

FAQ

Un buen punto de partida es conocer la historia de los juegos de mesa y observar qué tipo de juegos son populares actualmente. Esto te ayudará a entender qué les gusta a los jugadores y qué hace exitoso a un juego.

El consejo principal es no repetir lo que ya se ha hecho, sino tomar inspiración de juegos existentes y luego modificarlos, dándoles un giro único. Esto proporciona una base sólida y permite cierta libertad creativa.

Puedes utilizar BoardGame.IO, una biblioteca que actúa como Redux para juegos de mesa, lo que te permite definir estados iniciales y acciones posibles de manera sencilla, además de integrar una interfaz de React para la visualización del juego.

Es importante diseñar juegos que sean fáciles de entender y probar. Evita reglas complicadas y numerosas piezas, y considera simplificar el juego tanto como sea posible para hacerlo más accesible.

Conocer la historia de los juegos de mesa te ayuda a entender su evolución y significado cultural, lo que puede inspirarte a crear juegos que no solo sean entretenidos, sino que también tengan profundidad y relevancia.

BoardGame.IO facilita la programación de juegos de mesa digitales al manejar la lógica del estado del juego y las interacciones, y ofrece herramientas para implementar IA con pocas líneas de código.

La inteligencia artificial puede mejorar la experiencia del juego al proporcionar desafíos ajustados y realistas, además de simular estrategias que los jugadores podrían enfrentar contra otros humanos.

Johannes Goslar
Johannes Goslar
8 min
02 Aug, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

En estos tiempos extraños, todos tenemos una pregunta: ¿qué hacer con tanto tiempo en casa? La respuesta es inventar más juegos de mesa y potencialmente usar React. Modificar juegos existentes y agregar IA puede traer nuevas posibilidades y desafíos. La biblioteca BoardGame.IO proporciona una interfaz simple para crear versiones jugables de juegos de mesa en una computadora y agregar IA. Las simulaciones por computadora no pueden capturar la interacción social y la dinámica de los juegos de mesa jugados en una mesa.

1. Tips for Making Board Games in Current Times

Short description:

En estos tiempos extraños, todos tenemos una pregunta: ¿qué hacer con tanto tiempo en casa? La respuesta es inventar más juegos de mesa y potencialmente usar React. Como desarrollador web profesional, me gusta gastar mi dinero tecnológico en publicar juegos de mesa. Si quieres hacer juegos, comienza por comprender la historia de los juegos de mesa y el mercado actual. Observa juegos populares como Gloom Haven y Spirit Island, pero recuerda hacer tu juego accesible y divertido. Inventemos un juego simple.

La pregunta es qué hacer con tanto tiempo en casa. Creo que hay una respuesta simple para eso. Es inventar más juegos de mesa y potencialmente usar React. Soy un desarrollador web profesional en una startup tecnológica en Londres en este momento y me gusta gastar mi dinero tecnológico en publicar juegos de mesa. Voy a darte algunos consejos o tips si también quieres hacer juegos en los tiempos actuales.

Lo primero, conoce mejor la historia de los juegos de mesa. Creo que hay una cita que debes conocer o estar conectado a ella. Es: el juego es más antiguo que la cultura. La cultura, por definición siempre presupone la sociedad humana. Los animales no han esperado a que los hombres les enseñen a jugar. ¿Y por qué es relevante para nosotros? Básicamente está diciendo que debemos ver el juego o el juego desde una perspectiva mucho más profunda que solo la tontería que hacemos. Así que lee Homo Ludens si quieres un poco más de antecedentes allí.

Entonces, digamos que nunca has inventado un juego antes. ¿Qué podemos hacer por ti? La primera regla es conocer el mercado, pero eso es demasiado capitalista. Digamos, hey, conoce la historia de los juegos y sabe qué está sucediendo en este momento. Conoce lo que a la gente le gusta jugar. Veamos juegos populares actuales, que serán, por ejemplo, a la izquierda Gloom Haven a la derecha Spirit Island. Te darás cuenta de algunas cosas sobre ellos. Hay muchas reglas complicadas y engorrosas porque hay muchas piezas diferentes. Las personas pueden sentirse tontas porque no entienden las reglas, que son dos cosas muy malas. Quieres hacer un juego nuevo, especialmente el primer juego, lo más accesible posible porque es más fácil de probar para ti. Es más fácil probarlo con otras personas. Al final, incluso diría que estos juegos no son divertidos. Son mucho más mecánicos. ¿Y qué nos recuerda esto? Nos recuerda a Gee Crabby y Spaghetti Co. Pero somos una conferencia de React, así que queremos ver juegos fáciles. Cada regla que se puede eliminar es una buena regla, es la cita para este tipo de cosas. Es de Sid Saxon, uno de los autores de juegos de mesa estadounidenses más populares y famosos. Así que inventemos un juego simple.

2. Modifying Existing Games and Adding AI

Short description:

El truco número uno es no repetirse, sino modificar un juego existente. Por ejemplo, al rotar Conecta Cuatro 45 grados, obtenemos Diagonal Cuatro, lo cual introduce más posibilidades y es más difícil de calcular por una computadora. Para convertir este juego en una versión jugable en una computadora, podemos usar la biblioteca BoardGame.IO, que proporciona una interfaz simple de React. Agregar inteligencia artificial al juego también es sencillo con BoardGame.IO, solo requiere unas pocas líneas de código. La IA utiliza un enfoque basado en árboles para determinar los mejores movimientos y las probabilidades de ganar. Mira el video para ver la IA en acción.

¿Cuál es el truco número uno aquí? El truco número uno es no repetirse, lo que básicamente significa no hacer el mismo juego nuevamente, sino repetir el de otra persona. Porque lo que es muy fácil y accesible para un nuevo diseñador es copiar un juego que te guste, copiar un juego que creas que es interesante, que tiene potencial para aún más, y luego modificarlo un poco, modificarlo en esa dirección. Esto te brinda una buena base para comenzar y aún te da cierta libertad para ser este diseñador que introduce primero las reglas.

Así que espero que todos ustedes conozcan este juego, es Conecta Cuatro. Básicamente ganas el juego al tener cuatro piezas en línea. ¿Qué podríamos hacer con este juego para llevarlo al siguiente nivel, ponerlo en los tiempos modernos? Tomé la decisión simple de simplemente rotarlo 45 grados. Ahora se llama Diagonal Cuatro y las mismas reglas aún se aplican. En el turno de un jugador, coloca una pieza en el tablero, pero en este juego realmente tiene que colocarlas desde la izquierda o desde la derecha, en la parte superior y caen, y aún ganas al tener cuatro en línea. Hay algunas reglas adicionales en las que podríamos entrar en otro momento, pero básicamente es lo mismo, solo girado 45 grados, lo que introduce muchas más posibilidades y no es tan fácilmente calculable por una computadora.

También somos una conferencia tecnológica, entonces, ¿cuánto esfuerzo sería convertir este juego en una versión jugable en una computadora? En realidad, no mucho esfuerzo, porque hay una gran biblioteca llamada BoardGame.IO. BoardGame.IO es básicamente el Redux para juegos de mesa. Simplemente defines tu usuario lector, tienes algún estado inicial. En nuestro caso, simplemente decimos, okay, tenemos esta cuadrícula de ocho por ocho piezas y llenamos un espacio específico, y luego declaras todas las acciones posibles. En este juego, solo hay una acción posible porque solo puedes colocar una pieza en la parte superior de la fila, así que hay una acción, hay algunas inserciones a medida que las haces clic, así que hay algunos argumentos estándar para una acción, que todos deberíamos conocer muy bien. Y hay algunas funciones de utilidad que calculan movimientos válidos y algunas funciones de utilidad, algunas ganan en realidad porque es un juego, algunos pueden ganar, es relevante verificar eso. Y luego, ¿cómo lo haces visual porque esto es solo un reductor? BoardGame.IO proporciona una interfaz de React bastante simple para ti. Simplemente declaras con algún código React estándar cómo se ve tu tablero con cualquier estado dado. Aún puedes usar tablas si quieres, porque en realidad es bastante fácil poner este juego en la computadora y luego usar alguna transformación CSS para rotarlas 45 grados.

La pregunta ahora es, ¿por qué realmente necesitamos BoardGame.IO? ¿Qué tiene de genial esta cosa bastante simple? Estimemos cuánto tiempo tomaría agregar inteligencia artificial a esto. Probablemente sea una estimación grande, pero con BoardGame.IO básicamente solo necesitas cinco líneas de código, dependiendo de cómo lo cuentes, y tienes tu IA. ¿Cómo funciona? Solo voy a mostrarte el video de la IA en acción. La IA es literalmente solo esta cosa en mi lado de programación. Definitivamente hay algunas cosas sucediendo en la biblioteca. Veamos un video. Ahora la computadora está jugando contra sí misma, y ves que la pieza cae. ¿Qué está pasando? En cada turno, la computadora elige aleatoriamente uno de los movimientos posibles y luego juega el juego dependiendo de ese movimiento. Básicamente está comenzando un árbol para algunos de los movimientos posibles y luego verificando quién tiene más probabilidades de ganar al final. Para cada uno de estos árboles, se calculan algunas probabilidades de ganar o perder, y hay alguna configuración en la que puedes decir cuántas iteraciones, cuántas muertes de juego quieres hacer. Ves a la computadora jugando aquí, y Redd está poniendo a Blue en una situación difícil, porque Blue está obligado a jugar piedras específicas, pero Redd tiene cuatro piezas en línea ahora.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
Construyendo Experimentos Divertidos con WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Construyendo Experimentos Divertidos con WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Solucionando Problemas de Rendimiento en React
React Advanced Conference 2023React Advanced Conference 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.

Workshops on related topic

Crea un Juego Con PlayCanvas en 2 Horas
JSNation 2023JSNation 2023
116 min
Crea un Juego Con PlayCanvas en 2 Horas
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más.
Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas
Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
PlayCanvas de principio a fin: la versión rápida
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas de principio a fin: la versión rápida
Top Content
WorkshopFree
João Ruschel
João Ruschel
En esta masterclass, construiremos un juego completo utilizando el motor PlayCanvas mientras aprendemos las mejores prácticas para la gestión de proyectos. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la gestión de activos, scripting, audio, depuración, y mucho más.
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Construye una sala de chat con Appwrite y React
JSNation 2022JSNation 2022
41 min
Construye una sala de chat con Appwrite y React
WorkshopFree
Wess Cope
Wess Cope
Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!
Problemas difíciles de GraphQL en Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Problemas difíciles de GraphQL en Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.