«Sobre dragones, naves espaciales y JavaScript»

UNA HISTORIA ÉPICA

BeerJS Córdoba VI
Año del Gallo, Día 89

Joel Alejandro Villarreal Bertoldi

con ilustraciones de digitalizaciones de The British Library

HABLEMOS DE
JUEGOS DE MESA

HABLEMOS DE
JUEGOS DIGITALES

¿QUÉ TIENEN TODOS
ESTOS JUEGOS EN COMÚN?

¡DADOS!

LOS DADOS NOS DEJAN
TOMAR DECISIONES

Roberta, ¿qué

quiere tomar?

¿Café o té?

*arroja D20*

LOS DADOS NOS DEJAN
CONSTRUIR HISTORIAS

¿Dragones o

campesinos?

LOS DADOS NOS DEJAN
DISEÑAR PERSONAJES

¿Saco puesto

o al hombro?

¿Y JAVASCRIPT?
¿QUÉ TIENE QUE VER EN ESTO?

Así nace Xethya.

(se dice «sézia» en español)

xethya-dice

ARROJADOR DE DADOS


 import { Dice } from 'xethya-dice';

 // Rolls a 20-sided dice.
 // Returns a number between 1 and 20.
 const rollD20 = new Dice(20).roll();

Resuelve casos de uso triviales

(como elegir un número en un rango)

xethya-dice

ARROJADOR DE DADOS


 import { Dice } from 'xethya-dice';
 import MyPRNG from './my-prng';

 // Rolls a 20-sided dice with a custom 
 // pseudorandom number generator.
 const r = new Dice(20, MyPRNG).roll();

Permite utilizar generadores de

números aleatorios personalizados.

(soporte nativo para MersenneTwister y BlumBlumShub)

xethya-random-mtw

xethya-random-bbs

xethya-dice

ARROJADOR DE DADOS


 import { CoinFlip } from 'xethya-dice';

 // Flip the coin.
 const coin = new CoinFlip().roll();
 
 if (coin === 1) { /* ... */ } 
 else { /* ... */ }

Decisiones de azar booleanas en 1 línea

(el clásico "tirá una moneda")

xethya-dice

ARROJADOR DE DADOS


 import { ChanceThrow,
   DiceThrowType } from 'xethya-dice';

 // Decide.
 const choice = new ChanceThrow.roll();
 
 if (choice.throwType === DiceThrowType.Success) {
   // Means that the dice threw a number between 21 and 90.
 } else if (choice.throwType === DiceThrowType.Failure) {
   // Dice was 20 or less.
 }

Decisiones de azar por probabilidades

("hay un 75% de probabilidades de que pase X")

¿QUÉ NECESITAMOS PARA
DISEÑAR PERSONAJES?

Atributos:
Descriptores numéricos de distintos
aspectos de un personaje.

CONSTITUCIÓN - FUERZA
INTELIGENCIA - SABIDURÍA
AGILIDAD

Estadísticas:
Cálculos resultantes de combinar atributos de un personaje.

PESO CARGABLE FUERZA x 5
PUNTOS DE SALUD CONSTITUCIÓN x 100
PUNTOS DE MAGIA INTELIGENCIA + SABIDURÍA

Habilidades:
Acciones cuyo éxito y calidad es determinada por atributos, estadísticas e incluso otras habilidades.

RESISTENCIAS CONSTITUCION
CORRER CONSTITUCION + AGILIDAD + RESISTENCIA

Raza/Clase:
Agrupación lógica de fortalezas y debilidades sobre atributos, habilidades y estadísticas.

ELFO AGILIDAD + 10, CONSTITUCIÓN - 5
ENANO FUERZA + 15, AGILIDAD - 20

xethya-entity

GESTOR DE PERSONAJES Y HABILIDADES


 import { LivingEntity } from 'xethya-entity';

 // Define a character.
 class Ship extends LivingEntity {
   constructor() { super('ship', 'My Ship'); }

   registerAttributes() {
     this.addAttribute('impulse', 10);
     this.addAttribute('lateralThrusters', 10);
   }
 }

Creación de un personaje básico

(cualquier "cosa" puede ser un personaje)

xethya-entity

GESTOR DE PERSONAJES Y HABILIDADES


 // Make the ship move.
 class Ship extends LivingEntity {
   // ...
   move(delta) {
     const impulse = this.getAttributeById('impulse');
     const easingY = impulse.getComputedValue() / 100;
     const currentY = this.getPositionOrWhatever(); // ;)
     document.querySelector('#ship').style.top 
       = `${this.currentY + easingY}px`;
   }
   // ...
 }

Aplicación de atributos a una acción

(el movimiento se ve afectado por los atributos)

¡DEMO!

https://github.com/xethya

Framework

Juego Demo

https://github.com/joelalejandro/lagos-sector

Inspiración D&D

https://www.5thsrd.org/

¡GRACIAS!

¡GRACIAS!

Sobre dragones, naves espaciales y JavaScript: una historia épica

By Joel Alejandro Villarreal Bertoldi

Sobre dragones, naves espaciales y JavaScript: una historia épica

Experiencias y aprendizajes sobre mecánicas de juegos de rol (derivadas de Dungeon and Dragons) aplicados en JavaScript.

  • 2,387