Saludos desde el blog -

A partir de ahora, la cuenta oficial de twitter de cKolmos @cKolmosGames retwitteará los posts de este blog. Vienen novedades veraniegas.

Integración de Ink con Unity

En este artículo vamos a cubrir la integración de Ink con Unity, tratando de hacerla lo más fácil posible y sin complicarnos mucho la vida. Si lo que te interesa es aprender a usar Ink, puedes ver estos dos tutoriales:

• Introducción a Ink
• Avanzando con la sintaxis 

 Instalación

Abre un proyecto de Unity vacío, y descarga el paquete de Ink para Unity. Aparecerá el cuadro de diálogo para abrir el paquete en Unity o guardarlo. Puedes abrirlo directamente.








A continuación, aparecerá el diálogo de importación de Unity con todos los contenidos del paquete. Pulsa el botón Import para que Unity instale el plugin. Si todo ha ido bien, debe haberse creado la carpeta Plugins, y dentro de ella, verás la carpeta Ink. En su interior tenemos todo el contenido del plugin.

Hola Mundo

Lo primero es lo primero: vamos a hacer que ésto funcione, y a partir de ahí vemos qué se puede hacer. Así que preparemos un "Hola mundo". El objetivo será escribir algo en un archivo de ink y verlo por la consola de Unity. En la carpeta del plugin tienes una subcarpeta llamada Example donde puedes ver un ejemplo de funcionamiento, pero nosotros vamos a ir de 0. Aún así no la borres, porque te puede servir de consulta.

Lo primero que necesitamos es un archivo ink. Para ello, selecciona la carpeta Assets y haz click derecho -> Create -> Ink. También tienes este menú bajo Assets en la barra de menú. Llama al archivo como quieras. Se crearán 2 archivos en vez de 1. Un json y un ink. Abre el .ink para editar (pincha 2 veces y se abrirá Visual Studio o tu programa predeterminado).

 

 

Escribe Hola Mundo en el archivo. Guarda y regresa a Unity. Si pinchas en el archivo, podrás ver que en el inspector se ve el contenido y un botón de "Play". Si lo pulsas será como si estuvieses ejecutando el programa en inky, como en los anteriores tutoriales.

 

 

Es decir, lo que tenemos en el inspector es un intérprete de ink. Leerá y podremos explorar toda la historia como si estuviésemos en Inky. Pero nosotros queremos dar un paso más. Queremos hacer nuestro ese texto y sacarlo por consola. Vamos allá (hora de guardar la escena si aún no lo has hecho).

 

Crea un nuevo script (Botón derecho sobre Assets->Create->C# Script) y llámalo como quieras. Será el script que lea el texto de ink, así que puedes llamarlo ExtractorInk por ejemplo. En dicho script, copia el siguiente código

using UnityEngine;
using Ink.Runtime;

public class ExtractorInk : MonoBehaviour {

    public TextAsset inkAsset;
    Story historia;

    void Awake()
    {
        historia = new Story(inkAsset.text);
    }

    void Start()
    {
        while (historia.canContinue)
        {
            Debug.Log(historia.Continue());
        }
    }
}

Guarda el archivo. A continuación, crea un objeto vacío en la jerarquía y llámalo Ink, por ejemplo. Añade el script como un componente. También puedes arrastrar el script directamente al objeto o a la cámara.

 

 

Con ésto, estamos dando a ese GameObject el comportamiento del script. Pero tenemos una variable que debemos enlazar en el inspector. Se trata de la variable inkAsset. Pincha en el GameObject "ink" que has creado, y mira en el inspector. Verás que pone "none (TextAsset)" junto al nombre de la variable. Arrastra hasta ese hueco el json que se creó antes. Para saber cuál es el json, puedes fijarte en la barra de estado de Unity, donde te dice la extensión del archivo pinchado.

 

Ya lo tenemos todo listo. Pulsa Play en Unity, y en la consola podrás ver que aparece el contenido de tu historia.

 

 

¿Qué está ocurriendo realmente? El archivo ink se transforma en un archivo json, que es lo que verdaderamente parsea el plugin. De hecho cada vez que hagas cambios verás que Unity "se pone a pensar". En nuestro código cogemos ese json y lo parseamos. Bueno, nososotros no, ya lo hace la librería de Ink gracias a

 

historia = new Story(inkAsset.text);

 

Después, en la función Start, hemos creado un bucle que dice "si la historia puede continuar -es decir, si no hemos llegado al final-, entonces imprime por consola la sioguiente línea." 

Éste bucle es la base para ir trayendo todo el texto desde ink.

Ya hemos cumplido el objetivo de este artículo, pero aún nos queda por ver cómo manejar por ejemplo las opciones y decisiones. En el siguiente artículo crearemos una botonera y algo de interfaz de usuario para ir reflejando la historia en Unity. Pero si quieres seguir investigando por tu cuenta, te recomiendo el manual en inglés de los creadores de ink.

¡Hasta la próxima

Avanzando con la sintaxis de Ink

Éste artículo es el segundo de una serie dedicada a aprender la sintaxis Ink y el framework Inky. Se trata de un sistema muy sencillo para hacer tus propias aventuras conversacionales o ficciones interactivas.

Si quieres empezar desde el principio, ve a este artículo.

Los nudos

 En el artículo anterior vimos cómo crear un programa en Inky, añadir algunas opciones de diálogo y compilarlo para web. Sólo con esas herramientas ya podríamos crear una historia interactiva decente, sin embargo Ink nos ofrece una serie de "potenciadores" que nos permiten muchísima más agilidad y versatilidad a la hora de crear historias completas.

Los nudos son la primera de esas ventajas. Nos permiten estructurar el contenido en escenas. Para usarlos, sólo tenemos que escribir

=== MiNudo1 ===

Lo que escribamos debajo de la "bandera" del nudo, pertenecerá a ese nudo, hasta que escribamos el siguiente. Veamos un ejemplo de nudos:

 Como puedes ver, el programa tienes 2 bloques grandes: "=== Entrada ===" y "=== Jardín ===". Ésto nos permite para separa escenas o bloques temáticos y reutilizarlos. Para saltar a cualquier nudo, sólo tienes que usar la instrucción desvío "->". Si te fijas, al inicio de la historia he puesto un desvío hacia la Entrada (-> Entrada). Ésto hace que se lea la primera línea y saltemos al nudo "Entrada". Aquí se presentan 2 opciones (recuerda el tuto anterior). Una de ellas es entrar al jardín, así que usamos el desvío al jardín (-> Jardin). Ojo, no pongas tildes en los nombres de los nudos. Cosas de programadores. La segunda opción es Irse, y aplica el desvío a END. Cuando quieras que acabe la historia y estés dentro de un nodo, tienes que usar -> END para que Inky no siga leyendo código.

Ten en cuenta que los desvíos son invisibles, no aparecerán en la ejecución final. Además, cada vez que se produce un desvío a un nuevo nudo, Inky inserta una línea nueva. Si quieres evitar este comportamiento, tienes que usar el pegamento <>. Por ejemplo:

=== Puerta ===
La puerta parecía pesada. 
-> Abrir

=== Abrir ===
Un poco de fuerza hizo que girase sobre sus goznes

La ejecució normal de la estructura anterior genera:
La puerta parecía pesada.
Un poco de fuerza hizo que girase sobre sus goznes

Pero si añadimos el pegamento:

=== Puerta ===
La puerta parecía pesada. <>
-> Abrir

=== Abrir ===
Un poco de fuerza hizo que girase sobre sus goznes

La ejecución queda como sigue:
La puerta parecía pesada. Un poco de fuerza hizo que girase sobre sus goznes

Bucles
Si te has fijado en el nudo del jardín, los nudos y los desvíos pueden usarse para generar bucles. Ésta utilidad es muy interesante, ya que en la mayoría de los juegos, el bucle es el núcleo. En el caso del jardín, las opciónes 2 y 3

* Buscar al jardinero
    Buscas al jardinero, para parece haberse desvanecido.
    -> Jardin
* Oler las flores
    Las flores huelen a primavera y sueños inalcanzados.
    -> Jardin

Remiten de nuevo al nudo del jardín. Esto genera un bucle. Lo mejor de los bucles es que las opciones que ya has seleccionado no vuelven a aparecer a menos que se lo especifiquemos, pero eso irá en un artículo diferente donde profundicemos en los bucles.

 Espero que este artículo te sirva. Si creas alguna historia con Ink, ¡pon el enlace en comentarios!

Introducción a Ink para creación de historias estilo "Elige tu propia aventura"

Ink es una sintaxis para estructurar y crear aventuras interactivas. El programa para crear tu historia se llama inky. Es open source y está desarrollado por inkle studios, creadores de juegos narrativos como Heaven's Vault y 80 days.
Inky te permite exportar a json y a web, por lo que es muy usado como soporte para juegos con gran carga narrativa o para hacer juegos completos. En esta introducción vamos a ver cómo hacer un juego sencillo de manera rápida.

Descargar

Ve a la página de descarga y elige el paquete que corresponda con tu sistema operativo. Sólo tienes que descargarlo y descomprimirlo. Dentro de la carpeta verás muchos archivos. Busca inky.exe si estás en windows o el correspondiente ejecutable. Con eso se te abre el programa y podemos empezar.

Hola Mundo

​Verás la ventana de inky dividida en dos partes. A la izquierda tienes "el código" y a la derecha tienes lo que verá el jugador.  Escribe "Hola Mundo" en la parte izquierda. Como verás, aparece a la derecha. No es muy emocionante, así que vamos a añadir algo:
​​
Cuando usamos un asterisco, estamos creando una opción. A la derecha podemos ver que la opción aparece como un texto en gris. Este texto es clicable, creando la siguiente secuencia al pinchar:
​
Como puedes ver es muy sencillo. Sobre el panel derecho, tienes dos botones, que son flechas apuntando a la izquierda.  Sirven para rebobinar una opción o para ir al principio de la historia.

Añadiendo complejidad

Normalmente lo primero que vamos a querer hacer va a ser añadir varias opciones de respuesta, cada una con su texto y su camino. Para ello usamos un código de este estilo:
​
En este ejemplo se pueden ver varias cosas:
- Puedes usar tabuladores para estructurarte el texto
- Puedes usar notación html. Por ejemplo, he usado la cursiva <i> para dos de las opciones
- Cada asterisco es una opción, y lo que hay debajo del asterisco es la respuesta a esa opción
- Un detalle muy chulo de ink es el uso de los corchetes. Hacen que cuando se repita la frase en la respuesta, se omita lo que hay dentro de los mismo. Puede usarse para que la respuesta no se repita, por ejemplo. Sé creativo.

Esto sería lo básico para empezar. Recomiendo mirar el uso de nudos (knots) para que podamos estructurar el texto en capítulos o regiones. Inky también permite el uso de diferentes archivos, así que puedes estrucutrarte el contenido como mejor te convenga, pero estos temas quedan fuera de esta introducción.

Compilar para WEB

Vamos a File->Export for web..., indicamos la carpeta objetivo y lo tenemos. Inky nos generará los archivos necesarios que tenemos que subir a cualquier servidor web.

Recursos

Web oficial de inkle
Manual de programación ink (en inglés, pero fácil de seguir)
Descarga de inky
Juego de ejemplo: The Intercept (con código)

Puedes aprender más aquí:
Avanzando con la sintaxis

Acceder y usar un repositorio con GitKraken

Últimamente he estado usando mucho GitKraken, un cliente Git gratuito para uso no comercial. Tanto en Xatapp para organizar todas las líneas paralelas de desarrollo como en un proyecto personal, fos, me está sirviendo mucho. Para mi gusto le ha ganado la mano a SourceTree, el oficial de Atlassian -aunque hace varios años que no uso SourceTree, la verdad.

Voy a dejar aquí una guía para quien necesite acceder a su repo. Ojo, la guía no cobre cómo crear y configurar el repositorio, sólo el acceso y el uso básico de GitKraken. Para la mayoría de los usuarios será suficiente.

Necesitarás la ruta de acceso al repositorio sobre el que quieres trabajar. Te la puede dar el administrador del repositorio.

Clonar el repo

1.- Descarga GitKraken.

2.- Ábrelo y disfruta de la animación. Ve a File->Clone Repo o pincha en la carpeta que aparece arriba a la izquierda

3.- Selecciona la primera opción. Elige el lugar donde quieres clonar el repo. Clonar un repositorio consiste en descargarse los datos a una carpeta. Pega la url del repo que te haya pasado el administrador y pulsa el botón verde. Verás cómo aparece una ventana azul y una barra indicando que se está descargando el repositorio.

4.- Puedes hacer un té mientras se descarga.

Trabajar sobre el repo

Siempre que vayas a trabajar sobre tu proyecto, antes de abrirlo, ten en cuenta lo siguiente: Git va a llevar un registro de todos los cambios que realices. Esos cambios estarán en tu ordenador. Cada vez que acabes una sesión de trabajo, puedes querer enviar los cambios o descartarlos.

¿Necesita mi equipo los cambios que yo haga sobre el proyecto? Si no los necesitan, basta con que lo clones, y hagas los cambios que necesites para ti. Suele ser una opción válida para diseñadores o gente que sólo necesita "lectura" sobre el proyecto.

Si necesitas enviar a tu equipo los cambios que hagas sobre el proyecto. Trata de seguir esta guía como si fuese un mantra: repítelo siempre así.

1.- Abre GitKraken (si usas Unity, mantenlo cerrado). Verás la secuencia de nodos del proyecto. Cada nodo es una "anotación" de cambios, "commit" en inglés.
2.- Pulsa el botón Pull. Ésto actualiza tu copia local, descargando cualquier cambio que haya en el servidor. Si es tu primera sesión después de clonar el repo, no hace falta.

3.- Si no es tu primera sesión, te conviene revisar en qué rama estás. Puedes estar en master o en una rama tuya. Mira a la ventana de la izquierda. La que esté marcada en verde, es la copia que está en tu ordenador. Si no estás en máster, lo más normal es que quieras pasarte ahí. Así que pulsa con el botón derecho y selecciona checkout master. Si quieres seguir trabajando en una rama, haz lo propio con esa rama.

3.- Si es tu primera sesión o ya terminaste con una rama, asegúrate de estar en máster y crea una nueva rama de trabajo. Pulsa sobre el botón Branch y dale un nombre identificativo de lo que vas a hacer. Ésto hace que puedas trabajar en una rama del proyecto sin que tus cambios afecten a los demás. No hagas ésto si ya creaste una rama en la sesión anterior.

4.- Si trabajas con Unity, cierra GitKraken y abre Unity. Ésto no es necesario en todos los sistemas operativos, pero en algunas ocasiones los permisos sobre los archivos, abiertos por ambos programas, te pueden dar problemas.

5.- Cuando acabes de trabajar, cierra Unity y abre GitKraken. Verás que aparece un nodo nuevo en la secuencia, arriba del todo. Representa los cambios que has hecho en el proyecto. Debería poner WIP (Work In Progress). Pincha en él para ver a la derecha el listado de archivos modificados, borrados o añadidos.

El repo de FOS

6.- Fíjate bien en ese listado. Son los cambios que has hecho. Puede que veas archivos que nos has cambiado. Son archivos que ha podido cambiar el motor, por ejemplo los meta, que guardan datos sobre los archivos originales. Normalmente no pasa nada porque los anotes. Puedes marcar todos los archivos, o ir uno a uno marcando sólo los que quieres anotar como modificados. Irán pasando a la ventana de abajo. Donde pone Summary, escribe un comentario de lo que has hecho (es obligatorio). Es el mensaje que aparecerá al lado del nodo.

7.- Cuando hayas escrito el mensaje, pulsa el botón verde. Ésto anota tus cambios de forma local. Ten en cuenta que no están en el servidor aún y que tus compañeros no pueden verlos. Verás que el icono del ordenador (a la izquierda de los nodos) está una línea más arriba que el del proyecto.

8.- Si quieres enviar los cambios al servidor (recomendado si no tienes mucha práctica), pulsa el botón PUSH. Verás que el icono del ordenador y el del proyecto se vuelven a poner en la misma línea.

9.- Ahora tienes 2 opciones. Si has terminado lo que estabas haciendo (tu rama), dile al administrador del repositorio que ya está lista. Él la combinará (MERGE) con la rama principal (normalmente master). Si no has terminado, no tienes que hacer nada. La próxima vez que abras el proyecto, comienza desde el paso 2.


Si trabajas con Unity, ten en cuenta que puedes tener problemas mergeando una escena modificada por dos o más personas.