En la clase anterior estuvimos aprendiendo cómo exportar nuestro proyecto a formato de libro electrónico. En esta clase aprenderemos como preparar nuestro proyecto para subirlo a la web.

Como siempre, veremos la forma más simple de hacer las cosas. Descargaremos primero la plantilla web, que se puede encontrar en https://github.com/ByFernanz/ficdownjs-webplayer. Haga click en el botón verde que dice: clone or download, y luego entre las opciones que le salen elija Download ZIP.

Se descargará un archivo llamado ficdownjs-webplayer-master.zip. Luego de descomprimir el archivo encontrará lo siguiente dentro de la carpeta descomprimida:

De estos vamos a trabajar solo con tres: index.html, story.md y ficdownjs-play.js (está en la carpeta js).

Abriremos el archivo story.md con un editor de texto plano (como el blog de notas), borraremos todo su contenido y pegaremos nuestra historia y guardaremos. Otra manera que funciona igual es renombrar nuestra historia como story.md y sustituirla con la que ya tenemos en la carpeta.

Para poder probar si nuestra historia funciona, si nos encontramos en una pc con el navegador chrome, podemos instalar la extensión web server for chrome. Al abrir la extensión presionaremos el botón CHOOSE FOLDER, y buscaremos la carpeta donde están los archivos index.html y story.md.

Luego presionaremos el enlace donde dice WEB SERVER URLs: http://127.0.0.1:8887.

Si quieres cambiar el título que se ve en la pestaña del navegador, solo debes abrir el archivo index.html con un editor de texto plano y donde dice: <title>Mi historia en Ficdown</title> pon el nombre que quieras pero sin borrar lo que está encerrado entre los símbolos <>.

Por defecto las transiciones son estilo Twine, es decir, cada vez que se muestra una escena desaparece la anterior. Si quieres optar por una transición estilo Ink, es decir, que se conserva cada escena una encima de la otra usando un scroll vertical, como si fuera un historial de las escenas visitadas, entra a la carpeta js y edita el archivo ficdown-play.js.

Verás dos lugares donde aparece false. Si el primero lo cambias a true, obtendrás un scroll vertical. El segundo es para habilitar el modo de depuración, muy similar al modo depuración que se mira cuando se exporta a EPUB. Te doy el mismo consejo que en la clase anterior: mientras estés probando y modificando el juego no hay problema en dejarlo activado, pero si vas a distribuirlo recuerda dejar siempre el modo depuración en false.

También, como habrás intuido, aquí puedes modificar el nombre del enlace con el que empieza el juego y el mensaje final cuando se acaba. Si crees tener tu juego listo, veamos cómo subirlo a la web de itch.io.

Subir nuestro juego a itch.io

Itch.io es un sitio web para publicar, vender y descargar videojuegos independientes. Si no lo has hecho ya, debes crearte una cuenta en https://itch.io/register. No entraré en detalles, porque el registro es similar a cualquier página web.

Cuando ya estés logueado, en la barra superior has click en dashboard. Luego has click en el botón rojo create new project. Te aparecerán varios campos:

En Title pon el título de tu juego.

En Project URL aparecerá el enlace que compartirás para que otros puedan jugar. Puedes quedarte con el que genera o modificarlo a tu gusto.

En Classification elije juegos.

En Kind of project elije HTML.

En Pricing te sugiero marcar no payments. Se refiere al precio que cobrarás por tu juego. Es mejor que no cobres nada por él si quieres que realmente la gente lo pruebe. Ya veremos más adelante en el curso el porqué.

Luego verás un botón rojo: upload files para subir a la web el proyecto comprimido en .zip. Para comprimir la carpeta puedes usar winrar o cualquier otro software de comprensión de tu preferencia.

Cuando subas el proyecto deberás marcar la casilla This file will be played in the browser.

En Embed options, has click donde dice Embed in page y selecciona Click to launch in fullscreen.

Marca las casillas Mobile friendly y enable scrollbars.

En description debes poner la información que servirá de guía al jugador para saber de qué va tu juego y si hay que seguir algunas instrucciones al comenzar.

En Genre deberás elegir Interactive Fiction.

Cuando estés listo presiona el botón rojo save and view page.

Si quieres probar el juego, presiona el enorme botón naranja run game.

Por ahora el juego solo puedes verlo tú. Para cambiar esto vuelve a la página principal de itch.io, has click en dashboard. Verás allí tu juego encerrado en un cuadrado y en el borde inferior estos enlaces: edit, analitycs, widget. Has click en edit. Ve al final de la página y donde dice Visibility & access selecciona público.

Hay más cosas que puedes hacer en esta página como agregar un cover a tu juego o anexar capturas de pantalla del gameplay.

Luego de guardar los cambios más abajo verás el link view page que te mostrará la página de tu juego. Ya solo tienes que enviarle el enlace que te da el navegador a todos aquellos que deseen jugarlo.


Con esta clase se cierra la parte básica del curso. Para las siguientes clases se recomienda usar un ordenador, aunque se podrán seguir sin problema desde el móvil, sin lugar a dudas será mucho más cómodo desde una computadora.

En la próxima clase veremos cómo preparar nuestro entorno de trabajo para las clases venideras.


<<CLASE ANTERIOR


¿Quieres saber más? ¡Déjate atrapar por las redes!

Comparte este artículo: