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

Rate this content
Bookmark
8 min
02 Aug, 2021

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.

Available in English

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.

3. Implementando IA y Simulaciones

Short description:

La IA completa para este juego está disponible con BoardGame.io. Es importante asegurarse de que no haya un único ganador en los juegos abstractos e introducir variabilidad. Las simulaciones por computadora no pueden capturar la interacción social y la dinámica de los juegos de mesa jugados en una mesa.

Esa es la IA completa para este juego. Simplemente obtienes esto listo para usar con BoardGame.io al proporcionar un reductor y las acciones. Obtienes todo de forma gratuita.

Por qué es importante, si estás creando un juego abstracto, siempre debes asegurarte de que no haya un único ganador. Debe haber una alteración. Debe haber cierta variabilidad, incluso si la computadora juega. Por lo tanto, el programa real es una excelente manera de verificarlo.

Y lo que es aún más interesante, nuestros juegos, la computadora no puede simularlos, porque hay mucho más sucediendo con un juego de mesa en la mesa. Toda la interacción social, no se puede modelar eso. Pero hoy no tenemos tiempo para eso, así que lo dejamos como ejercicio para el lector. Si quieres saber más, echa un vistazo a BoardGame.io, y si quieres ver algunos de mis juegos, visita Kronobergespieler.de, o contáctame en Kaos Yoga.

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

TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️

Workshops on related topic

JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including:
- User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.