Cómo minimizar su juego HTML5 para la competencia Js13kGames

Lo que vas a crear

Como ya sabrán, la tercera edición de la competencia js13kGames está aquí: el inicio oficial está programado para el 13 de agosto, a las 13:00 CEST. Js13kGames es una competencia para desarrolladores de juegos HTML5 donde la parte divertida y desafiante de la compo es mantener todo tu juego por debajo de 13 KB..

Este artículo debe ser un excelente punto de partida si desea aprender cómo generar los activos y minimizar y comprimir el código, para que pueda cumplir con los requisitos de la competencia. También le proporcionaré herramientas que pueden ayudarlo en sus proyectos diarios si necesita mantener sus recursos ligeros..

¿Qué es exactamente el Concurso js13kGames??

La competencia js13kGames está dedicada a los desarrolladores de juegos HTML5 y programadores de JavaScript que desean probar sus habilidades en la batalla con otros desarrolladores, seguir las reglas, cumplir con la fecha límite y ganar algunos premios. La competencia se lleva a cabo desde el 13 de agosto hasta el 13 de septiembre; tiene todo el mes para codificar y enviar su participación. Sin embargo, no se permiten bibliotecas externas ni recursos como Google Fonts; Todo lo que quieras usar en tu juego debe caber en 13 kilobytes de un paquete ZIP. La competencia es gratuita para todos, pero el código fuente debe estar alojado en GitHub para que otros puedan aprender de él en el futuro.. 

El límite de 13 kilobytes es muy restrictivo, pero las limitaciones a menudo generan creatividad: hay que pensar cuidadosamente cómo implementar sus ideas, ya que cada byte realmente cuenta..

Por qué tomar parte?

El propósito principal de la compo es la diversión. La fecha límite ayuda a que sea divertido, porque tienes que terminar el proyecto en algún momento y no puedes seguir haciéndolo.. 

Participar en la competencia mejora su habilidad, lo ayuda a administrar su tiempo dedicado al proyecto y le brinda la oportunidad de cooperar con la comunidad. Además, existe la posibilidad de que puedas ganar muchos premios interesantes, ser conocido y, eventualmente, ganar una gran cantidad de dinero como desarrollador de juegos. Que más necesitas?

Consejos y trucos

Revisemos los consejos y trucos específicos que puede utilizar para minimizar el código fuente de su juego y todos los recursos utilizados, desde la minificación de JavaScript, pasando por el corte de tamaños de imagen, hasta el nivel de procedimiento y la generación de audio..

Consejos generales

Tiene un mes entero para programar su juego, por lo que no tiene que pasar noches de insomnio durante el fin de semana tomando café y bebidas energéticas para competir con otros. Puede trabajar a su propio ritmo, siempre que tenga el tiempo y cuando lo desee..

Debido a las estrictas restricciones en el tamaño del paquete final, es casi imposible utilizar cualquier marco. Por supuesto, si puede preparar un pequeño conjunto de funciones de ayuda que se ajusten al límite de 13 kilobytes, puede hacerlo.. 

Lo mismo ocurre con las imágenes: las capturas de pantalla de los juegos suelen ser más grandes que los juegos en sí, por lo que debes ser inteligente. De todos modos, es probable que genere todo por su cuenta, o use activos comprimidos muy pequeños; esa es la mejor manera de encajar todo el juego en el límite de tamaño.

Minificación de código JavaScript

El núcleo principal de su juego de JavaScript es el código fuente: puede generar absolutamente todo, sin usar ningún otro recurso como imágenes o sonidos, por lo que la optimización de este código es muy importante.. 

Lo más fácil es minimizar el código, lo que significa que se eliminará el espacio en blanco (tabulaciones, espacios, nuevas líneas, etc.), sin que se modifique el código..

Puede llevar esto más lejos utilizando otras herramientas que modificarán su código fuente original para comprimir su tamaño tanto como sea posible, usando nombres de variables más cortos y otros trucos similares. Como efecto secundario, estas herramientas también ocultarán el código fuente y lo harán ilegible. ofuscación. Una de las principales reglas de la competencia es que, de todos modos, debe tener una versión legible de su envío en GitHub, por lo que comprimir cada byte haciendo que el código del paquete comprimido sea ilegible es totalmente correcto..

Herramientas como Google Closure Compiler, YUI Compressor o UglifyJS, y servicios en línea como Compressor Rater, JSMini o JSObfuscate, pueden ayudarlo a comprimir su código tanto como sea posible. Usarlos para su ventaja.

Compresión de imagen

No habrá muchos archivos de imagen en tu juego si quieres encajarlos en 13 kilobytes, pero aún así, si quieres usar una imagen, tendrás que comprimirla lo más posible. Existen herramientas en línea como TinyPNG y Optimizilla, aplicaciones instalables como ImageOptim, herramientas de línea de comandos y scripts de compilación para hacer eso, por lo que podrá encontrar algo que se ajuste a su flujo de trabajo. 

También puedes codificar tu juego en baja resolución con imágenes pequeñas y luego escalar todo, o tirar todas las imágenes y generar todo en el lienzo desde cero.

Generación de Nivel Procesal

Dado el espacio limitado disponible, sería prudente pensar en aleatorizar los niveles en su juego. La mejor manera de mantener el alto valor de reproducción de su juego es generar sus niveles de manera procesal, de modo que en lugar de tener uno o dos niveles fijos, pueda ofrecer una experiencia diferente cada vez que se juegue el juego..

Los mejores ejemplos en esa categoría son los roguelikes que usan laberintos y mazmorras para sus niveles. Puede generar un vasto mundo a partir de solo unas pocas piezas pequeñas, y puede ser diferente cada vez que inicie el juego. Gracias a este enfoque, tus jugadores no se aburrirán demasiado rápido..

Generación de audio

Agregar audio a tu juego mejora la experiencia en general, pero con las canciones que generalmente pesan 5 MB o más, ¿cómo puedes incluir cualquiera en tu entrada de js13k? Jsfxr al rescate!

En lugar de reducir un MP3, puedes generar tu propia música y efectos de sonido. Jsfxr es un puerto de JavaScript de la biblioteca sfxr, y fue ampliamente utilizado por los participantes de la competencia del año pasado, lo que significa que está probado en la batalla y ofrece excelentes resultados.

Sistema de compilación

Además de las herramientas ya mencionadas, puede ayudarse a sí mismo automatizando algunas de las tareas que tiene; Los sistemas de compilación como Grunt o Gulp pueden facilitar la preparación de todos sus activos.. 

Si eres un fanático de Gulp, hay una gran variedad de tareas de construcción para elegir: Jack Rugile sugiere un combo de Gulp de gulp-uglify + gulp-htmlmin + gulp-zip + gulp-filesize mientras que Csaba Csecskedi agrega gulp-imagemin a esta coleccion. No tiene que usarlo si no se siente cómodo con Gulp o simplemente quiere trabajar como antes, pero este conjunto puede mejorar su flujo de trabajo general para su entrada a js13kGames.

Código repetitivo

El único requisito estructural además del límite de tamaño es que debe tener el index.html archivo en el directorio principal del paquete, todo lo demás es opcional. Puede estructurar su código a su gusto, incluir carpetas para JavaScript, CSS y archivos de imagen por separado, o simplemente colocar todo dentro del archivo HTML y olvidarse de todo lo demás. Puede hacer todo a mano, o usar browserify, mejorar su CSS usando LESS o SASS, o incluso borrar su código con ESLint. (Eso es lo que Florent Cailhol preparó en su repositorio experimental de js13k en GitHub). Nuevamente: todo esto podría ayudarlo, pero nada de eso es necesario..

Elija el tipo correcto de juego

Esto podría ser obvio, pero no se olvide de elegir cuidadosamente un tipo de juego adecuado para que quepa en 13 kilobytes, ya que algunos de los juegos son más difíciles de construir (y de mantenerlos pequeños) que otros. No estoy diciendo que no puedas crear un shooter en primera persona en 3D, estrategia en tiempo real, simulador de ciudad, juego de carreras en 3D, administrador de semáforos, o incluso juego de bloques amarillos desnudos como lo hicieron algunos desarrolladores locos en los últimos años, pero la gran la mayoría de las entradas son sobre juegos simples con una mecánica básica que envuelve el juego, algunas imágenes generadas y, a veces, sonidos simples.

Recuerde que terminar cualquier cosa es mejor que tener un proyecto enorme e inacabado que la gente nunca verá. Siga la iniciativa Un juego al mes, respete la fecha límite e intente terminar su inscripción a tiempo. Manténgalo pequeño tanto en alcance como en tamaño; Si está satisfecho con el prototipo funcional y tiene espacio libre disponible, siempre podrá agregar nuevas funciones al juego más adelante. Pula el proyecto lo más que puedas y podrás ganar la competencia creando juegos como SpacePi o Radius Raid.

Aprender de otros

Estos son los consejos y técnicas básicos que pueden ayudarte a programar tu juego para la competencia js13kGames, pero no tienes que usarlos. Hay muchas herramientas que puedes usar en tu juego para mantenerlo en el límite de tamaño; Depende de tus preferencias. Sin embargo, si no tienes experiencia, lo mejor que puedes hacer es aprender de los demás..

Puede consultar el código fuente de las entradas de los años anteriores, jugar a los juegos y ver lo que es posible dentro del límite, revisar las publicaciones del blog que explican las experiencias de las personas, leer su código fuente y aprender de él. Haga preguntas a través de las redes sociales, discuta sus ideas y problemas con otros. Esa es la belleza de una competencia, no estás solo; puede cooperar con otros, formar equipos y mejorar sus habilidades en poco tiempo.

Resumen

Todas las herramientas y servicios enumerados en este artículo deberían ayudarlo a prepararse para la competencia js13kGames. Es importante no fijar su atención solo en las herramientas; También debes ver lo que otros están haciendo, aprender de sus experiencias y ser parte de la comunidad.. 

Si tiene diferentes maneras de prepararse para la competencia, ¡compártalas en los comentarios! Vamos a beneficiarnos, aprender y ayudarnos unos a otros. Después de todo, la competencia comenzó a ser divertida y entretenida, con un poco de aprendizaje en el camino..

Recursos

Echa un vistazo a estos recursos adicionales para la competencia:

  • 13 pasos simples para crear diapositivas compo desde onGameStart 2012
  • Arcade Audio for js13kGames por Jack Rugile
  • Triskaidekaphobia, un juego creado para promover js13kGames
  • Normas y requisitos oficiales.
  • Lista de los jueces y premios de este año.
  • Entradas de 2012 y 2013.
  • Gamedev.js Boletín semanal con actualizaciones de compo
  • Hashtags de Twitter: # js13k o # js13kGames
  • Otras iniciativas que vale la pena mencionar: js1k, Ludum Dare, 1GAM
  • Encuentra mermeladas y competiciones: compohub.net, indiegamejams.com