En este documento se proporciona información básica sobre cómo diseñar y construir minijuegos hipertextuales con gráficos usando la herramienta de edición Flicksy.
Esta herramienta no requiere instalación pues está pensada para utilizarse directamente desde esta web.
Aviso: Flicksy es una herramienta web bastante insegura. Al eliminar un dibujo (drawing), si hemos dejado uno o más objetos (referencias) a ese dibujo en la escena, estos quedarán como “unnamed objects” (basura). Si no eliminas manualmente TODA esa basura, TODOS esos “unnamed objects”, Flicksy empezará a fallar al intentar ejecutar o exportar el juego a JSON o HTML (si pulsáis F12 en el navegador podréis comprobar que aparecen errores de Canvas cada vez que pulsáis el botón correspondiente).
Como consejo general, intentad usar la exportación siempre desde el gestor de proyectos y con mucha frecuencia, descargando tanto el fichero HTML como el JSON y guardando versiones incrementalmente. Así será luego posible recuperar lo último que hayáis creado desde esas “copias de seguridad” en caso de que Flicksy se bloquee.
Creación de la aventura
En el menú inicial, arriba, tenemos varios botones:
- Project, el gestor de proyectos.
- Drawings, el editor de sprites.
- Scene, el editor de escenas, que también permite ubicar objetos y programarlos.
- Map, el gestor de escenas y organizador visual del “mapa” de escenas.
- Play, el reproductor de juegos y también exportador.
- Save, botón para guardar los cambios.
Lo idea es, una vez escrito el documento de diseño, escribir los textos y preparar las imágenes de fondo. A continuación crear algunos sprites, pues con ellos ya puedes montar alguna escena (poniendo objetos que usen estos sprites, e incluso programando), y al crear y conectar varias escenas vamos configurando el “mapa” del juego. Elegimos una escena inicial y probamos el juego dándole a play.
Scripting
En Flicksy 2 es posible programar el comportamiento de los objetos (apariciones de los sprites en la escena) usando Javascript. Lo más fácil es usar los comandos proporcionados a continuación, pero teóricamente puedes hacer todo lo que permita el navegador.
Valores
Como valores se usan:
SCENE, el id de referencia de esta escena.
OBJECT, el id de referencia de este objeto.
Acciones
Como acciones tenemos:
SAY(“ALGO DE TEXTO”) añade diálogo a la cola de reproducción de diálogo.
LOG(“ALGO DE TEXTO”) añade una línea de texto en el registro (log) de playtesting, para ayudar en la depuración.
HIDE(“referencia a objeto”) oculta el objeto referido, haciéndolo invisible y no clickable.
SHOW(“referencia a objeto”) deja de ocultar el objeto referido.
SET(“nombre de variable”, “valor”) asigna un valor a una variable nueva o existente. Se permiten números, ids de referencia, diálogos, etc.
GET(“nombre de variable”) devuelve el valor de una variable previamente establecida. Usamos esto en conjunción con una instrucción if para crear un script condicional.
TRANSFORM(“referencia a objeto”, “referencia a dibujo”) cambia el dibujo (sprite) de un objeto.
TRAVEL(“referencia a escena”) hace que el juego pase a una nueva escena.
Esperas
await DIALOGUE espera hasta que no quede diálogo en pantalla.
await DELAY(.5) espera un número determinado de segundos.
LOCK() impide que se pueda hacer clic sobre objetos.
UNLOCK() permite que se pueda hacer click sobre objetos.
Ejemplos
El comportamiento por defecto de un objeto (el comportamiento llamado “simple” que se puede establecer sin necesidad de scripting) es este:
await SAY("Texto introducido a través del editor de diálogo")
TRAVEL("refencia a escena de destino")Como ejemplo de scripting avanzado, es posible tener ejecución condicional de comportamientos dependiendo del valor de ciertas variables, simplemente usando instrucciones if de Javascript:
if (GET("monedas") == 3) {
SAY("Tienes justo tres monedas.")
} else if (GET("monedas") > 3) {
SAY("Demasiadas monedas, amigo...")
} else {
SAY("¡Consigue más monedas!")
}De hecho se puede incluir y ejecutar cualquier código Javascript dentro de Flicksy, y funcionará:
alert("¡Hola, mundo!");Para el tema del audio, Flicksy no incorpora funcionalidad explícita para reproducir música o sonidos. Una posibilidad para tener algo de música de fondo sería editar el fichero HTML resultante y añadir controles con auto-reproducción así:
<audio controls autoplay>
<source src="musica.ogg" type="audio/ogg">
<source src="musica.mp3" type="audio/mpeg">
Su navegador no soporta el elemento de audio.
</audio>Pero lo más efectivo, de nuevo, es recurrir a la potencia de Javascript. Cuando exportemos el juego a HTML podemos poner en la misma carpeta ficheros MP3, por ejemplo, y reproducirlos desde el juego de esta manera:
var sonido = new Audio('sonido.mp3');
sonido.play();Cualquier función o propiedad que admita el estándar oficial que siguen los navegadores web debería funcionar:
sonido.loop = true;