7. Gráficos y sonidos

Inform 7: Empezando a programar

Por Xavi C.

Versión 1.1 - Fecha revisión: 18/01/11

Inform 7 es capaz de mostrar imágenes y reproducir sonidos gracias a la máquina virtual Glulx. Veremos cómo en esta parte del tutorial.

Dos formatos distintos: Z-Code y Glulx

Como has visto en el anterior capítulo, Inform produce código fuente que puede ser interpretado por dos máquinas virtuales: la máquina Z y la máquina Glulx. De todo esto el programador no debe preocuparse, puesto que simplemente deberá seleccionar el tipo de archivo final en la pestaña Settings, asegurándose que esté marcada la opción "Glulx" en caso de que su proyecto tenga gráficos, sonidos o hipervínculos.

Z-Code: sólo texto

Para proyectos sin gráficos y de corta extensión siempre seleccionaremos la opción Z-Code version 5. Para proyectos más largos será mejor seleccionar la opción Z-Code version 8 (aunque es preferible que sea el propio Inform quien nos avise de que un proyecto es demasiado largo para compilarse en Z-Code version 5). Los proyectos compilados tendrán la extensión .Z5 o .Z8 dependiendo de la versión. No es aconsejable en ningún caso compilar para Z-Code version 6.

Existe además la opción "Bind up into a Blorb file on release", que si está seleccionada creará un archivo Blorb de nuestro juego. Esto significa que la extensión del juego será .zblorb, que es más moderna y por tanto algunos intérpretes no la reconocen aún. Lo mejor es crear varias versiones compiladas de un mismo proyecto (Z5 y Zblorb, por ejemplo) y distribuirlas juntas, en la medida de lo posible, para que los usuarios con intérpretes antiguos o móviles puedan disfrutar de nuestro proyecto. La diferencia principal entre Z5 y Zblorb es que éste último aglutina la información bibliográfica del proyecto, además de su imagen de cubierta, algo así como las portadas del libro.

Nota: los teléfonos móviles con el sistema operativo Android o iPhone pueden leer archivos en Z5, pero no Zblorb, dado que por el momento este formato no es soportado por sus intépretes. Tienes más información al respecto aquí: iPhoneFrotz, Hunky Punk, Twisty. También existen intérpretes de código Z y Glulx para eReaders, como Iliad.

Glulx: con multimedia

Para proyectos largos o con multimedia es preferible compilar para la máquina Glulx, dado que es un sistema más moderno (el Z-Code es herencia del sistema de Infocom). Un proyecto compilado en Glulx tendrá la extensión .glx o .blb. De igual manera, si seleccionamos la opción "Bind up into a Blorb file on release" nos creará un archivo gblorb, con las mismas características que su versión zblorb.

Un archivo Glulx no tiene tanta portabilidad como un archivo en Z-Code, por el momento, por lo que siempre será mejor ofrecer dos versiones de tu proyecto: uno con gráficos y otro sin ellos. Dicho de otro modo, cuando empieces un nuevo proyecto trabaja con él como si fuera sólo para Z-Code, y cuando lo tengas acabado compílalo en dicho formato; luego añade los gráficos y sonidos necesarios y compílalo bajo Glulx: así tendras las dos versiones.

Intérpretes

Existen intépretes de Z-Code y Glulx para cada plataforma, aunque mi recomendación personal es que tu proyecto lleve un intérprete de serie, algo que veremos en el próximo capítulo. Sin embargo, es bueno que en tu ordenador tengas varios intépretes para probar cómo se verá tu proyecto en cada uno de ellos. Los más populares son el Frotz (para Z-Code/Zblorb), el Glulxe (para Glulx/Gblorb) y el Gargoyle (para ambas máquinas, recomendado).

Cómo poner gráficos

Vamos a hacer uso de un par de extensiones que nos facilitarán la tarea de incluir gráficos en tu proyecto. Descarga e instala las siguientes librerías: Simple Graphical Window.i7x y Location Images.i7x.

Primero de todo, vamos a cambiar las opciones de compilación, en la pestaña "Settings" selecciona la opción Glulx. Una vez seleccionada, llama a la primera extensión:

Include Simple Graphical Window by Emily Short.

Definir el tamaño y la posición de la pantalla gráfica

Y vamos a hacer una primera prueba dividiendo la pantalla en dos mitades: una para gráficos y otra para texto:

The graphics window proportion is 50.

Mundo is a room. "Un mundo con una pantalla gráfica."

Y decidimos la posición de los gráficos; si los queremos a la izquierda:

The graphics window position is g-left.

...o a la derecha:

The graphics window position is g-right.

...arriba:

The graphics window position is g-above.

...o abajo:

The graphics window position is g-below.

Haz la prueba con todos y observa cómo pone Inform la pantalla gráfica. Observa además que podemos cambiar la proporción, podemos poner por ejemplo:

The graphics window proportion is 15.

Aunque también podemos definir el tamaño de la pantalla gráfica por píxeles. Por ejemplo, si queremos que los gráficos salgan en la parte de arriba con una extensión de 200 píxeles, pondríamos:

The graphics window pixel count is 200. The graphics window position is g-above.

Cambiar el color de la pantalla gráfica

Y podemos cambiar el color de fondo de dicha pantalla gráfica:

The graphics background color is g-medium-grey.

Cambiar el color es más complicado de lo que parece en un primer momento, si necesitas un color distinto de negro, blanco o gris te recomiendo mirar la documentación de la extensión Glulx Text Effects by Emily Short ya que los colores se definen en hexadecimal. Por defecto se incluyen los siguientes: g-black, g-dark-grey, g-medium-grey, g-light-grey y g-white.

Poner una imagen (sin la pantalla gráfica)

Vamos ahora a la parte que nos interesa_ ¿cómo poner una imagen? Bien, en mi caso primero voy a buscar alguna imagen por internet libre de derechos, por lo que me dirijo al Banco de Imágenes y Sonidos, y elijo ésta:

Nota: Tienes disponibles más recursos gráficos en la wiki del CAAD: Página de recursos gráficos.

Importante: Inform requiere que el formato de las imágenes sea JPG o PNG.

Una vez descargada, voy a ponerla en la carpeta Figures de la carpeta Materials de mi proyecto (tienes más información sobre esto en la sección 22.4. Gathering the figures de la documentación de Inform):

Voy a prepar la imagen para que no supere el tamaño de 200 píxeles que he puesto antes, cosa que puedes hacer con cualquier programa de retoque fotográfico, como la Vista previa de Mac o Windows. Y ahora voy a definir dicha imagen para que inform la entienda y la muestre en pantalla:

Figure of Mundo is the file "29985__151_a_4.jpg".

Y voy a mostrarla, a modo de ejemplo:

When play begins: display the Figure of Mundo.

Si ahora compilamos, veremos el siguiente desastre o similar:

Esto es, la capacidad por defecto de Inform de mostrar imágenes deja bastante que desear, pero efectivamente muestra la imagen con un "display"... pero podemos arreglarlo, como veremos a continuación.

Poner una imagen en una pantalla gráfica definida por el programador

¿Porqué la imagen anterior no salió en la pantalla gráfica? Porque display es la orden por defecto para poner imágenes en Inform 7, pero no la orden adecuada para ponerlas en una pantalla gráfica definida por la extensión "Simple Graphical Window". ¿Cómo la pondríamos en la pantalla gráfica que acabamos de definir? Con la Rule "change currently shown picture to", como veremos a continuación:

When play begins:

change currently shown picture to the Figure of Mundo;

follow the current graphics drawing rule.

Así, el código anterior lo cambiaríamos por el siguiente, haz la prueba y funcionará:

Part 1 - Introducción

The story title is "Una imagen".

The story author is "Xavi C.".

The story headline is "'Un ejemplo de gráfico dentro de una pantalla gráfica'".

Section 1 - Extensiones

Include Spanish by Sebastian Arg.

Include Basic Screen Effects Sp by Emily Short.

Include Basic Help Menu SP by Emily Short.

Include Simple Graphical Window by Emily Short.

Section 2 - Definición de gráficos y sonidos

The graphics background color is g-white.

The graphics window pixel count is 200.

The graphics window position is g-above.

Figure of Mundo is the file "29985__151_a_4.jpg".

Part 2 - Localidades

Mundo is a room. The description is "Un mundo con imágenes.".

When play begins:

change currently shown picture to the Figure of Mundo;

follow the current graphics drawing rule.

Además, es aconsejable poner la siguiente Rule:

Rule for starting the virtual machine:

now the current graphics drawing rule is the standard placement rule.

¿Y cómo lo haríamos para poner la imagen de la localidad actual, en todas las localidades?

Poner una imagen por localidad

Afortunadamente tenemos extensiones que solucionan todos los problemas. Llama a la Location Images:

Include Location Images by Emily Short.

Con la imagen anterior en la carpeta Figures, llama a la imagen así:

Figure of Paisaje1 is the file "29985__151_a_4.jpg".

Con "Figure of Paisaje1 is the file..." le decimos qué archivo de la carpeta Figures es la figura Paisaje1. Y la localidad la programaremos así:

Mundo is a room. The description is "Un mundo con una pantalla gráfica.".

The room illustration is Figure of Paisaje1.

Con el "The room illustration is Figure of Paisaje1" le decimos a Inform que el gráfico de la localidad es la figura Paisaje1.

¡Y ya está! Ahora ya sabes que para mostrar una imagen podemos utilizar la sentencia "display...", y para mostrar una imagen distinta por localidad pondremos "The room illustration is...". Existen otras formas para poner imágenes, te recomiendo que le eches un vistazo al capítulo Chapter 22. Figures, Sounds and Files de la documentación de Inform 7.

Sonidos

Vamos ahora a poner algo de ruido en nuestro proyecto. Primero de todo voy a buscar un sonido en el Banco de Imágenes y Sonidos, y elijo un sonido de tipo OGG:

Nota: Tienes disponibles más recursos sonoros en la wiki del CAAD: Página de recursos sonoros.

Es importante que el sonido esté en formato OGG, dado que Inform no soporta ni WAV ni MP3. Tampoco hace falta que te preocupes mucho por esto, puesto que por Internet puedes encontrar programas conversores como el Free Mp3 Wma Converter y programas de sonido que generan archivos OGG como Audacity.

Definir sonidos

De igual manera que con las imágenes, los sonidos deben ir en su propia carpeta dentro de Materials, en este caso la carpeta Sounds:

Y en el código fuente, tenemos que definir su nombre:

Sound of inicio is the file "pj00917.ogg".

Y podremos reproducir el sonido mediante la orden "play":

When play begins: play the sound of inicio.

Si compilas el proyecto, verás que no suena nada, pero el sonido está contemplado: [Sound effect number 3 here.]

Escuchar los sonidos

Para poder escuchar los sonidos, y en general para probar cómo está yendo la programación de tu juego, es preferible empaquetar el juego y probarlo con un intérprete externo. Vamos a descargar e instalar el intérprete Gargoyle, que puedes conseguir aquí, para todas las plataformas. Una vez instalado, dirígete a Inform y pulsa el botón "Release" (que está al lado de Go!, Replay y Stop). Te saldrá una pantalla similar a la siguiente:

Ahora ve a la carpeta Release dentro de la carpeta Materials de tu proyecto y ejecuta el archivo Gblorb que verás ahí con el programa Gargoyle. ¡Debería sonar algo!

En el siguiente capítulo

Vamos a aprender algo más acerca de las Releases de Inform, esto es... ¡la publicación de tu proyecto!