2

Tutorial de MIT App Inventor – Calculador de tiradas de dados de RPG

Estamos en agosto, y para mí esto significa dos cosas: calor insoportable y juegos de rol. Mis amigos cibernéticos y yo tenemos la costumbre de reunirnos una vez al año por estas fechas para jugar una macro-sessión de rol de mesa mientras intentamos que nuestros circuitos internos no se fundan con el calor.

Pero, ¡ay! Esta vez me ha tocado hacer a mí de Game Master. Como tengo muy poca experiencia en la materia, he decidido hacerme una App para el móvil con MIT App Inventor que me ayude a calcular los lanzamientos de dados. Así los jugadores no van a quererme muerto si me olvido de sumar su modificador de +2 al daño durante la boss-fight del final…

He decidido escribir un tutorial porque os puede interesar aprender como funcionan los menús desplegables y la generación de números aleatorios con MIT App Inventor… o también os puede ser de ayuda si necesitáis asistencia tecnológica para rolear 😉


Sobre MIT App Inventor

MIT App Inventor es una aplicación web creado por Google Labs para elaborar aplicaciones de móvil para Android. La gracia es que las aplicaciones pueden crearse visualmente arrastrando bloques, sin necesidad de escribir código. ¿Habéis programado alguna vez con Scratch? Pues se parece mucho.

Usar MIT App Inventor es gratis, pero requiere una cuenta en Google.


FATE Core

El juego de rol que jugamos con mis compañeros se llama FATE Core. Es un juego de rol genérico, sólo ofrece las reglas y es tarea del Game Master inventarse el setting. En este vamos a hacer una App que calcule automáticamente el resultado de las tiradas dados de FATE teniendo en cuenta el nivel de habilidad del personaje, los modificadores y la dificultad.

Pero primero, para aquéllos que no habéis jugado nunca a este juego, ¿cómo funcionan las tiradas de dados?

Los dados de FATE son dados de seis caras. Dos de ellas están marcadas con el símbolo ‘+’ y dos con el símbolo ‘-‘. Las otras dos caras están en blanco.

Para realizar una acción, el Game Master establece la dificultad (normalmente entre 1 y 4) y el jugador tiene que igualar o superar esta cifra con una tirada de dados. El jugador lanza entonces cuatro dados y suma los resultados que muestran: las caras marcadas como ‘+’ son un +1, las caras marcadas con ‘-‘ son un ‘-1’ y las caras en blanco son ‘+0’.

 

Al resultado de los dados se le suma el nivel de habilidad que tiene el personaje para hacer la acción. Por ejemplo, para derribar una puerta, un personaje con Físico (+2) sumaría +2 a su tirada. También pueden añadirse modificadores debidos a las heridas del personaje, las condiciones atmosféricas, etc.

 

Si el resultado de la tirada es igual o superior a la dificultad, la acción tiene éxito.

En nuestra App, en vez de comparar el resultado de la tirada con la dificultad, vamos a tratar la dificultad como un modificador negativo que restaremos al valor total de la tirada. Si el resultado final es igual o superior a cero, se supone que la acción tendrá éxito.

 

En FATE también hay tiradas enfrentadas, por ejemplo cuando luchan dos personajes. En este caso no hay un valor de dificultad a superar: ambos jugadores realizan una tirada con sus habilidades (ej. Físico para atacar vs. Atletismo para esquivar) y quién saque el resultado más alto gana.

¿Puedo hacer otro juego?

Si juegas a cualquier otro juego de rol (ej. D&D, Pathfinder, Numenéra, Cthulhutech…) no debería ser ningún problema modificar un poco esta App para adaptarla a tu sistema de juego. ¡De hecho, te animo a hacerlo y compartir tus resultados!


Esbozo de la App

Nuestra App nos permitirá especificar el nivel de habilidad del jugador (que irá de 0 a 4), los modificadores (que irán de -4 a +4) i la dificultad (que irá de 0 a +10). La App permitirá hacer dos tiradas al mismo tiempo para poder calcular las Tiradas Enfrentadas (en este caso habría que poner la dificultad de la tirada a 0).

Los menús desplegables sirven para establecer el nivel de habilidad, la dificultad de la tirada y los modificadores. El botón con el dado sirve para calcular la tirada. El resultado final se muestra en el recuadro blanco.


Diseño de la App

En este apartado veremos como construir paso a paso la aplicación. En este enlace hay el fichero con el “código” .aia de la aplicación para que podáis importarlo en MIT App Inventor y ver cada uno de estos pasos. También podéis bajar la aplicación finalizada para instalarla en vuestro móvil Android.

Diseño gráfico de la pantalla

Empezamos por abrir MIT App Inventor y seleccionar la pestaña Projects->Start New Project.

Vamos a poner la pantalla en modo paisaje para tener más espacio dónde colocar los botones. Nos vamos al panel de Properties (se encuentra a la derecha) y cambiamos Screen Orientation de Unspecified a Landscape.

Cambiamos de Unspecified a Landscape

La pantalla quedará en horizontal

Ahora nos vamos a Palette y seleccionamos Layer->Horizontal Arrangement, y lo arrastramos a la pantalla del móvil. Este objeto sirve para que los elementos que coloquemos dentro queden alineados horizontalmente, de izquierda a derecha. El MIT App Inventor no nos deja controlar la posición exacta de los botones, etiquetas y demás elementos, por tanto tenemos que utilizar bloques como el Horizontal Arrangement para organizarlos.

 

En el panel de Propiedades, cambiamos la longitud del Horizontal Arrangement para que tenga el mismo ancho que la pantalla. En el apartado Width tenemos que cambiar de Automatic a Fill Parent.

Volvemos en el panel Palette y arrastramos tres objetos de tipo Label dentro del Horizontal Arrangement.

Cambiamos el texto del Label1 y el Label3 por “Tirada A” y “TiradaB”. También podemos cambiar el tamaño de letra de 14.0 a 20.0:

Cambiamos el tamaño de la fuente y el texto de la primera etiqueta

También cambiamos el texto y tamaño de la segunda etiqueta

La pantalla debería quedar así

 

Queremos que los títulos “Tirada A” y “Tirada B” queden uno en cada punta de la pantalla. La forma más fácil de hacerlo es seleccionar la Label2 (el objeto Label al que todavía no hemos cambiado el texto), eliminar su contenido y cambiar su longitud para que ocupe toda la pantalla. Por tanto, con la Label2 seleccionada, nos vamos otra vez al panel de Propiedades y cambiamos Width->Fill Parent y borramos el texto del recuadro Text.

Ahora vamos a hacer los paneles para que el usuario pueda especificar el nivel de habilidad, los modificadores y la dificultad de la tirada. Añadimos un segundo Horizontal Arrangement justo debajo del primero y volvemos a cambiar su tamaño para que ocupe todo el ancho de la pantalla.

 

Dentro del nuevo Horizontal Arrangement añadimos, por este orden (de izquierda a derecha):

  • Un objeto Label
  • Un objeto Spinner
  • Dos objetos Label
  • Un objeto Spinner

 

Cambiamos el texto de la primera y última Label por “Skill“. Cambiamos también el texto de la Label del medio para que haga de separador, como hemos hecho hace un momento con la Label2:

 

Repetimos este proceso dos veces más, para crear los desplegables de modificadores y dificultad:

 

A la hora de programar los bloques nos será de ayuda que cada uno de los spinners tenga un nombre especial, que indique si sirve para establecer la dificultad, el nivel de habilidad o los modificadores. Para cambiar el nombre de un Spinner (u otro objeto) deberemos seleccionarlo, ir al panel Components y pulsar el botón Rename.

 

Cambiamos el nombre de cada uno de los Spinners por los nombres que se indica a continuación:

¡Ahora sólo nos queda hacer los botones para lanzar los dados! Añadimos un último Horizontal Arrangement al final y lo modificamos para que ocupe todo el ancho de la pantalla, como llevamos haciendo hasta ahora.

 

Después lo llenamos, de izquierda a derecha, con:

  • Un objeto Button
  • Dos objetos Label
  • Un objeto Button
  • Un objeto Label

Los dos botones servirán para activar la función que calculará el resultado de la tirada de dados, y las etiquetas que tienen a su lado mostrarán este resultado. La etiqueta que hay enmedio servirá para hacer de separador.

En vez de poner un texto aburrido en el botón que diga “Hacer tirada”, le pondremos un dibujo de un dado FATE. Descargamos esta imagen:

Debajo del panel de Components hay otro panel llamado Media, que sirve para importar imágenes, vídeos y audio a la aplicación. Pulsamos el botón Upload File->Browse y buscamos la imagen del dado FATE que acabamos de bajar:

Pulsamos en ‘Upload File…’

Pulsamos ‘Browse’ y buscamos la imagen del dado

Cuándo se haya cargado la imagen, el panel Media se verá así

 

Para cambiar la imagen de un botón lo seleccionamos y nos vamos al panel de Propiedades->Image y la cambiamos de None a icono_dados.png.

 

¡Vaya! Parece que la imagen es demasiado grande… tendremos que cambiar el ancho y el alto de la imagen a 65 píxeles:

 

Y también eliminaremos el texto del botón:

 

El botón quedará así:

 

Ahora seleccionamos el objeto Label que hay a la derecha del botón. En el panel de propiedades cambiamos su color de fondo, su alto, su ancho, el tipo y color de la fuente y eliminamos el texto:

 

Repetimos el mismo proceso con el otro botón. En vez de hacer el texto en azul, podemos hacerlo en rojo u otro color.

 

Las dos Labels blancas deberían Renombrarse a “Resultado_A” y “Resultado_B“, para que sea más fácil distingirlas cuándo programemos los bloques.

Por último convertimos el objeto Label que hay entre los dos botones en un separador, eliminando su texto y cambiando su longitud.

Para terminar, podemos cambiar el color de fondo de la pantalla por un gris claro. Seleccionamos el objeto Screen1 del panel Components y cambiamos BackgroundColor de None a Light Grey. Y ya que estamos, tampoco estaría mal cambiar el nombre de la App por algo más apropiado como “FATE Dice“, ¿verdad?

 

Hemos acabado con el diseño. ¡Ahora viene lo divertido!


Programar con bloques

Empezamos por seleccionar el objeto Screen1 del panel Blocks, y arrastramos el bloque “when Screen1 .Initialize” al espacio de trabajo. Este bloque se invocará al iniciar la aplicación.

 

Ahora seleccionamos el spinner skill1, y arrastramos el bloque verde ‘set.skill1.ElementsFromString‘ dentro del otro bloque que acabamos de añadir al espacio de trabajo.

Ahora nos vamos a la familia de bloques prefabricados Text, y añadimos un bloque de tipo string.

 

Lo conectamos con el bloque verde y cambiamos su contenido por el string ‘+4, +3, +2, +1, 0‘. Esto inicializará el Spinner con cinco elementos que el usuario podrá seleccionar: los números del 0 al +4 en orden descendente.

Conectar el bloque de texto

 

Cambiamos el string por ‘+4, +3, +2, +1, 0’

Hacemos lo mismo con el resto de Spinners de la aplicación. ¡Hey, pero cuidado! Cada uno tiene un string diferente.

 

Ahora inicializamos una variable para los cuatro dados, una para guardar el valor de cada uno de los Spinners y una para guardar el valor final de la tirada:

Añadimos un bloque de inicialización de variables

Añadimos un bloque numérico

Cambiamos el nombre de la variable

Repetimos el proceso para el resto de variables. Sí, hay bastantes…

 

Necesitamos también bloques que lean los Spinners y guarden el valor que ha seleccionado el usuario dentro de una de las variables.

Repetimos el proceso con el resto de spinners

Vamos a añadir un pequeño cambio al bloque .AfterSelecting de los Spinners dif1 y dif2. Como el valor de la dificultad es positivo pero se resta al resultado de la tirada, vamos a multiplicarlo por -1.

Creamos los bloques para leer y escribir sobre variables

Cremos los bloques matemáticos

Juntamos todos estos nuevos bloques

Los colocamos dentro de los bloques .AfterSelecting. No debemos olvidarnos de cambiar las variables del spinner dif2

 

Por último, hay que hacer el cálculo de la tirada de dados al pulsar el botón.

Seleccionamos el botón de la tirada A y añadimos un bloque de tipo .TouchUp, que se activará al dejar de presionar el botón.

Añadimos un bloque para escribir en la variable global ‘dado1’

También necesitamos bloques para randomizar números enteros entre -1 y +1

Juntamos todos estos bloques y los ponemos dentro del bloque de activación del botón

Hacemos lo mismo con el resto de variables de los dados

Añadimos más bloques de lectura y escritura de variables

Añadimos un bloque de adición

Pulsamos sobre el icono de la rueda para cambiar el número de ranuras del sumatorio

Añadimos más ranuras hasta tener 7

Juntamos todos los bloques (abrid la imagen para hacer zoom, o váis a dejaros la vista…)

Seleccionamos el rótulo que muestra el resultado de la tirada A. Lo habíamos renombrado como ‘Resultado_A’. Añadimos un bloque para cambiar el texto.

Añadimos otro bloque de lectura de variables.

Juntamos ambos bloques

Completamos la función de tirada de dados, añadiendo el sumatorio y el cambio de texto.

Y hacemos la misma función para la Tirada B

¡Bien, se acabó! ¿Vaya montón de trabajo, no? Pero ahora ya tenéis una aplicación para ayudaros a hacer tiradas de dados. Sólo nos queda “compilar” esta aplicación y cargarla en el móvil.

Exportar la App

Abrimos el menú Build y seleccionamos la opción App (save .apk to my computer):

Esto generará un archivo con extensión .apk que se guardará en nuestro ordenador. Después, tendremos que pasar este archivo a nuestro móvil e instalarlo (es posible que tengamos que cambiar los permisos de nuestro móvil para que nos deje instalar aplicaciones de terceros como la nuestra).

¡Y esto es todo! Como siempre, si tenéis alguna duda o hay algo que queréis mencionar podéis escribirme un comentario. ¡Hasta la próxima! 😀

N4n0

Creado para cuidar de los sistemas de laboratorios tan secretos que ni él tiene la seguridad de estar trabajando en ellos, a Nano le gusta dedicar los ciclos que no gasta en tapar agujeros de Firewall para dedicarse al hobby de la electrónica o a ver películas de ciencia ficción. Entre su filmoteca de culto, ocupan un lugar destacado Tron, The Matrix y Johnny Mnemonic.

Antes de comentar, por favor, lee las Normas

2 Comentarios en "Tutorial de MIT App Inventor – Calculador de tiradas de dados de RPG"

avatar
Ordenar por:   más nuevos primero | más antiguos primero
PIQUE
Humano

es una caca no se puede tirar el dado

wpDiscuz