Cómo hacer un juego web tú solo

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Nunca ha sido tan fácil hacer tu propio juego web, pero sigue siendo extremadamente difícil. ¿Qué juego deberías hacer? ¿Qué motor deberías elegir? Vamos a discutir cómo responder a estos problemas y formas de aprovechar la plataforma única que es la web.

This talk has been presented at JS GameDev Summit 2023, check out the latest edition of this JavaScript Conference.

FAQ

Matt Hackett es un desarrollador de juegos con experiencia desde los 12 años en QBasic. Publicó uno de los primeros juegos JavaScript puros en 2010 llamado Onslaught Arena y en 2016 lanzó Wizard's Lizard en Steam. Actualmente trabaja en su compañía Voladria y ha publicado un libro sobre cómo hacer un juego de video tú solo.

Es crucial limitar el alcance del proyecto para evitar la expansión del alcance, que puede complicar el desarrollo. Matt Hackett recomienda utilizar un enfoque de Producto Mínimo Viable (MVP) y adherirse a los pilares de diseño del juego para tomar decisiones consistentes que se alineen con los objetivos del juego.

Para gráficos, Matt menciona sitios como Kenny y OpenGameArt, donde se pueden encontrar sprites y otros recursos gráficos gratuitos. Para la música y efectos de sonido, recomienda plataformas como itch, freesound.org y freepd.com para obtener música libre de regalías.

Matt Hackett sugiere usar Phaser para juegos 2D por su ligereza y eficacia, y PlayCanvas para juegos 3D. También menciona la posibilidad de escribir juegos en JavaScript puro, especialmente para aquellos que prefieren un control total sobre el código sin usar bibliotecas o complementos.

Matt aconseja desarrollar un juego que realmente quieras jugar, ya que pasarás mucho tiempo probándolo durante el desarrollo. Esto no solo hace el proceso más agradable sino que también aumenta la probabilidad de completar el proyecto con éxito.

Matt recomienda plataformas como Itch.io para control total y flexibilidad en la distribución, y GitHub Pages para alojamiento gratuito. Estas opciones permiten a los desarrolladores lanzar y promocionar sus juegos de manera efectiva en la web.

Matt Hackett
Matt Hackett
27 min
28 Sep, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta charla te guía sobre cómo hacer un juego web tú solo, enfatizando la importancia de enfocarte en las tareas que te interesan y externalizar el resto. Sugiere elegir un motor de juegos que permita la distribución en la web y se alinee con tu comprensión y disfrute. La charla también destaca la importancia de encontrar diversión en el proceso creativo, gestionar el alcance, recortar características que no se alineen con la dirección del juego y iterar hasta llegar a la meta. Concluye discutiendo las opciones para publicar el juego en la web y aprovechar las características únicas de la web.

1. Introducción a la creación de un juego web

Short description:

Bienvenido a mi charla, Cómo hacer un juego web tú solo. Esta charla tiene como objetivo guiarte hacia esa línea de meta elusiva y ayudarte a lanzar tu propio juego web tú solo. Hacer un juego por ti mismo es difícil. Tienes que quitarte todos tus sombreros y considerar el proyecto desde un nivel alto. Una forma de ayudar con eso es externalizar ciertas partes de la creación del juego. La clave está en decidir cuándo hacer tus cosas tú mismo y cuándo no. Satisface tu necesidad.

Bienvenido a mi charla, Cómo hacer un juego web tú solo. Aprecio que estés aquí y creo que nos vamos a divertir. Esta charla tiene como objetivo guiarte hacia esa línea de meta elusiva y ayudarte a lanzar tu propio juego web tú solo. Pero primero, un poco sobre mí. Mi nombre es Matt Hackett, he estado haciendo juegos por diversión en entornos como QBasic desde que tenía 12 años. En 2010, publiqué uno de los primeros juegos JavaScript puros llamado Onslaught Arena y fui uno de los primeros desarrolladores en tener un juego JavaScript en Steam en forma de Wizard's Lizard en 2016. Hoy en día, estoy trabajando en mi nueva compañía, Voladria, donde publiqué mi libro, Cómo hacer un juego de Video tú solo. También estoy trabajando en dos juegos nuevos, Witchmore y Pixelwasher, este último está siendo desarrollado completamente en JavaScript. Vamos a adentrarnos en mi charla, Cómo hacer un juego web tú solo. Para empezar, eres un productor. Hacer un juego por ti mismo es difícil. Es una bestia muy diferente a trabajar en un equipo donde puedes tener muchas personas diferentes con muchas habilidades diferentes. Probablemente tengas tus propias habilidades que estás ansioso por usar en tu proyecto. Estoy seguro de que muchos de ustedes son programadores, también probablemente diseñadores, artistas, músicos o escritores. Todos estos son roles divertidos de desempeñar, pero para hacer un juego web tú solo, tienes que quitarte todos tus sombreros y considerar el proyecto desde un nivel alto. Así que primero, piensa en ti mismo como un productor. Un productor es responsable de lanzar un proyecto. Tu trabajo es lanzar tu juego web. Lo que tienes que darte cuenta es que todo depende de ti. Cuando no estás impulsando tu juego hacia adelante, no se está haciendo. Así que es fácil sentirse abrumado como desarrollador solitario. Una forma de ayudar con eso es externalizar ciertas partes de la creación del juego. No tienes que hacer todos tus propios recursos, como sprites o modelos 3D o efectos de sonido y música y todo eso. Puedes hacer eso si quieres, o puedes encontrar recursos prehechos que puedas adaptar a tu proyecto. En mi caso, generalmente me gusta dibujar todos los gráficos yo mismo, como en mi juego Witchmore, pero para Pixelwasher, estoy usando toneladas de recursos que he comprado en lugares como Humble Bundle, donde he encontrado cientos de sprites encantadores listos para poner en mis juegos. La clave está en decidir cuándo hacer tus cosas tú mismo y cuándo no. En mi caso, tenía ganas de dibujar un montón de brujas y cosas relacionadas con la brujería, pero no tenía muchas ganas de dibujar un montón de arte de píxeles moderno para lavar. Lo que tenía eran toneladas de recursos quemándome el bolsillo. Ambos me estaban picando, que es nuestro próximo tema.

2. Consejos para el desarrollo de juegos en solitario

Short description:

Cuando trabajas por tu cuenta, concéntrate en las tareas que más te interesen y externaliza o encuentra formas alternativas de manejar el resto. Si quieres crear tus propios gráficos o efectos de sonido, hay numerosos recursos y herramientas en línea disponibles. Considera utilizar paquetes de activos o bibliotecas existentes para complementar tu propio trabajo. Al elegir un motor de juegos para juegos web, Phaser es una opción popular y confiable para juegos 2D, mientras que PlayCanvas se recomienda para juegos 3D. Alternativamente, puedes escribir tus juegos en JavaScript puro o crear un juego basado en el DOM para un proceso de desarrollo rápido y efectivo.

Satisface tu necesidad. ¿No es diferente cuando estás en un equipo, verdad? En un equipo, probablemente conozcas tu rol y lo que deberías estar haciendo. Por tu cuenta, mi consejo es encontrar las tareas que más te interesen y hacerlas tú mismo. Para las demás cosas, externalízalas o encuentra una forma de hacerlas que no consuma tanto tiempo.

Si realmente quieres crear tus propios gráficos, puedes y debes hacerlo. Nunca ha habido tantos tutoriales en línea para aprender arte, ni tantas aplicaciones gratuitas o de código abierto. Puedes usar Krita o The GIMP para imágenes 2D, o Blender para modelado 3D. Si no quieres crear tus propios gráficos, hay muchos lugares donde puedes obtener activos gratuitos. Mi favorito es Kenny. Aquí puedes encontrar cientos de sprites, tanto arte de píxeles como de alta definición,3D activos, gráficos de interfaz de usuario y más. Consulta también OpenGameArt para obtener muchos activos gratuitos que puedes usar ahora mismo.

De manera similar, si realmente quieres crear tus propios efectos de sonido o música, puedes y debes hacerlo. Los juegos web se benefician del elemento Audio, así como de la API de audio web, listos para hacer que tu juego suene genial. Si no quieres crear tus propios efectos de sonido o música, hay muchos lugares donde puedes obtener música libre de regalías, como itch, freesound.org o freepd.com. Así que concéntrate en las tareas que más te interesen, aquellas que realmente te emocionen abordar. Para las demás cosas, considera paquetes de activos u otras soluciones similares para cubrir los vacíos que no deseas hacer tú mismo.

A continuación, elige un motor de juegos. Los motores de juegos más grandes del momento, como Unity y Godot, tienen exportación web. Estas exportaciones web a veces pueden generar archivos enormes, como cientos de megabytes por alguna razón, pero estos motores pueden ser opciones perfectamente válidas para crear juegos web. Para esta charla, centrémonos en plataformas centradas en la web. Digamos que eso significa que un motor es web-first y está construido en tecnología web o considera la web como su objetivo principal de desarrollo. Con esos parámetros en mente, hay muchas opciones excelentes, pero para juegos 2D, es difícil argumentar en contra de Phaser. Es ligero, es poderoso, ha estado presente durante años, hace todo lo que deseas y es utilizado por algunos de los nombres más importantes de la industria de los juegos. Además, está siendo mantenido activamente por Richard Davey, quien es una persona genial y un gran desarrollador. Para juegos 3D, echa un buen vistazo a PlayCanvas, también respaldado por desarrolladores geniales. Personalmente, me gusta escribir mis juegos a mano en JavaScript puro y simple. Sin bibliotecas, sin complementos, solo buenos momentos conmigo y mi editor de código. Sí, lo sé, eso es raro. También me gusta usar la API de 2DCanvas porque es agradable y limpia, y me encanta cómo me permite crear juegos de píxeles nítidos y nítidos, como los que se encuentran en mi nuevo juego Pixelwasher. Si eres más sabio que yo, puedes considerar hacer un juego basado en el DOM puro. Casi con seguridad tendrás que tocar el DOM un poco solo para configurar cualquier otra cosa que estés haciendo, pero aprovechar el DOM puede ser una forma inteligente de hacer tu juego de manera rápida y efectiva.

3. Elección de un Motor de Juego y Creación de un Juego que Disfrutes

Short description:

El DOM, o Modelo de Objetos del Documento, es poderoso. Elegir un motor de juego puede ser abrumador, pero no hay respuestas correctas o incorrectas. Al hacer un juego web, elige un motor que te permita distribuirlo en la web y que entiendas y disfrutes usar. Para las compilaciones de escritorio, hay herramientas como NWJS, Electron y Tori. Haz un juego que quieras jugar, ya que lo jugarás mucho durante el desarrollo. Es más fácil trabajar en un juego que disfrutes y en el que tengas conocimiento del dominio. Al hacer un juego web por ti mismo, elige un juego que quieras jugar o encuentra la diversión en el proceso creativo.

El DOM, o Modelo de Objetos del Documento, es poderoso. Tiene elementos de entrada, barras de desplazamiento, botones, casillas de verificación, eventos, hojas de estilo en cascada, animaciones llamativas y renderizado de texto. ¿Realmente quieres volver a implementar el texto de derecha a izquierda? Porque el DOM ya lo hace, tal como está.

Entonces, elegir un motor de juego puede ser abrumador, pero no hay respuestas correctas o incorrectas. Desde usar la exportación web de Unity o Godot, hasta escribir tu propio JavaScript básico como yo, todo está bien, siempre y cuando funcione para ti. Solo asegúrate de que tú y tu motor cumplan con estos dos requisitos. Primero, el motor te permite crear juegos que puedes distribuir en la web. Fácil. Segundo, el motor debe ser compatible contigo, es decir, que lo entiendas, comprendas cómo funciona y sea una herramienta cómoda para ti. Cuando un motor encaja contigo, estás feliz y listo para continuar con esa herramienta.

Ahora, una nota sobre la creación de compilaciones de escritorio. Si eliges un motor de juego completo como Godot, ya podrás exportar a la web y a otros destinos como el escritorio. Pero si optas por un motor web nativo o escribir JavaScript a mano, no te preocupes. Hay varias herramientas que puedes usar para crear compilaciones multiplataforma para tu juego. Entre ellas se encuentran NWJS, anteriormente conocido como Node Web Kit, que creo que usamos para el juego de un lagarto de mago, Electron y Tori. También hay muchas opciones para dispositivos móviles, pero prefiero centrarme en el escritorio.

Ahora te sugiero hacer el juego que quieras jugar. Jugarás tu juego mucho mientras lo creas. Es mucho más fácil hacer esto si realmente quieres jugar el juego que estás creando. A veces puedes tener una idea increíble para un juego web que estás seguro de que podría ser popular, pero está fuera del tipo de juegos que te gusta jugar. Adelante y haz esos juegos si eso es lo que te motiva, pero en mi experiencia, son más difíciles de trabajar porque tienes menos conocimiento del dominio y generalmente son menos divertidos para ti pasar tiempo con ellos. Si estás haciendo un juego de rompecabezas, tendrás que intentar esos rompecabezas una y otra vez mientras los diseñas, por lo que es mejor que disfrutes de eso. Si estás agregando un mecanismo de salto, tendrás que jugar repetidamente con el salto para que se sienta bien, por lo que es mejor que disfrutes de los juegos de saltos. Si estás agregando una misión complicada, como en un RPG, tendrás que jugar repetidamente las etapas de la misión una y otra vez para probarlas durante el desarrollo. Así que espero que pienses que es una misión divertida. Dado que debes realizar estas tareas cientos o incluso miles de veces durante el desarrollo, es preferible que las disfrutes. Serás un desarrollador más feliz y es más probable que termines tu proyecto. Por lo tanto, cuando estés haciendo un juego web por ti mismo, te recomiendo hacer un juego que quieras jugar. A menos que quieras encontrar la diversión, que es una parte complicada del proceso creativo. A veces conoces la premisa del juego, pero no estás totalmente seguro de cuál es esa fuerza impulsora que hace que el juego sea difícil de dejar.

4. Encontrar Diversión y Gestionar el Alcance

Short description:

Cuando intentas encontrar la diversión, haz que tu juego sea como un juguete, tomando inspiración de la vida real. Sumérgete en la diversión de tu juego y déjate llevar. Mejora el mecanismo principal y gestiona el alcance para evitar la Expansión del Alcance. Utiliza el MVP y los pilares de diseño del juego para mantener el enfoque en la dirección de tu juego.

Cuando intentas encontrar la diversión, te recomiendo ver tu juego como un juguete. Y podrías convertir casi cualquier cosa en un juguete divertido. Algunos de los mejores juguetes toman inspiración de la vida real, como pelotas saltarinas, pescar, chocar autos, cocinar o hacer explotar cosas. Haz juguetes de cualquiera de esas cosas y podrías tener un juego divertido entre manos.

Además, me gusta recomendar sumergirse en la diversión de tu juego. Como desarrollador, estás creando un juego web por ti mismo, tu juego debe atraerte, al único desarrollador, de vez en cuando. Deberías encontrarte con ganas de jugar. Deberías encontrarte trabajando en un error, pero distrayéndote por lo genial y divertido que es tu juego. Si eso no sucede nunca, intenta volver atrás y enfocarte en encontrar la diversión.

Una vez que hayas encontrado la diversión, mejora el mecanismo principal. Encuentra lo más divertido y dale vida con animaciones, efectos de sonido, música y todos los detalles que podamos agregar a nuestros juegos web. Ahora, una batalla contra el jefe. Gestionar el alcance. Tu alcance es tu juego concebido en su totalidad. Dado que estás creando un juego web por ti mismo, es especialmente importante mantener tu alcance bajo porque solo tú estás trabajando en el juego y tus recursos son limitados. Así que cuidado con este jefe del desarrollo de juegos que se acerca, la Expansión del Alcance, el terror de todos los desarrolladores de juegos. La Expansión del Alcance se refiere a la tendencia natural de un proyecto a aumentar su alcance con el tiempo. Constantemente surgen nuevas ideas a medida que el juego avanza, los jugadores ofrecen comentarios increíbles que generan más trabajo y, antes de que te des cuenta, has aumentado tu alcance. La Expansión del Alcance es el enemigo de ti, el productor de juegos web, cuyo trabajo es lanzar este juego. Aquí tienes algunas herramientas para ayudarte a combatir a este jefe brutal. MVP se refiere al producto mínimo viable. En el contexto de los juegos, intenta pensar en el juego mínimo indispensable que debes construir para crear tu tráiler, demostrar tu juego o simplemente obtener comentarios sobre si funciona o no. Construye solo eso y nada más hasta el próximo hito. Los pilares de diseño del juego proporcionan dirección a un proyecto. Tus pilares deben ayudarte a responder preguntas críticas sobre la dirección de tu juego. Mi pilar principal de diseño de juego en Pixelwasher es, se trata solo de lavar píxeles, eso es todo, solo píxeles. ¿Qué debería agregar? ¿Quizás un mecanismo de hambre? Bueno, ¿eso te ayuda a lavar píxeles? ¿No? Entonces, no hay mecanismo de hambre. ¿Debería el jugador poder correr? ¿Eso te ayuda a lavar píxeles? Bueno, si pudiera correr más rápido, podría lavar más píxeles. Entonces, sí, puedes correr. Si no estás seguro de qué camino tomar, consulta los pilares de diseño de tu juego para ayudarte a responder preguntas sobre el diseño de tu juego.

5. Cortar Funciones y Dar Forma a tu Juego

Short description:

Como desarrollador de juegos en solitario, es importante quitarte todos los sombreros y tomar decisiones difíciles sobre qué funciones y contenido eliminar. Puedes tener ideas geniales, pero si no se alinean con el alcance de tu juego o no respaldan tu MVP y los pilares de diseño del juego, es mejor dejarlas ir. Asume el papel de productor y usa una motosierra para cortar profundamente y dar forma a tu juego.

Y recuerda esto, eres un productor. Quítate todos los sombreros. En algún momento, al hacer un juego web por ti mismo, probablemente hayas cometido el error que yo he cometido tantas veces, que es mantener uno de mis sombreros favoritos durante demasiado tiempo. A veces dibujo demasiados sprites geniales que quiero usar, otras veces agrego un montón de efectos de sonido que encontré, o he diseñado un nivel ingenioso que quiero incluir. Pero analiza detenidamente algunas de estas cosas para ver si realmente funcionan con el juego dentro de tu alcance, o si necesitas quitarte el sombrero, dejar que el productor en ti tome el control y eliminarlo. Y cuando cortes, corta profundamente. Probablemente tengas funciones y contenido que crees que son realmente geniales, y probablemente lo sean. Pero cuando estás haciendo un juego web por ti mismo, no hay nadie más que te diga que no, así que a veces tienes que hacerlo tú mismo. Es difícil. Encuentra cualquier cosa que hayas construido que no respalde tu MVP o los pilares de diseño de tu juego, y que sea innecesaria, y elimínala. Desecha tu bisturí y tu hacha, saca tu motosierra. Corta profundamente para ayudarte a dar forma a tu juego.

6. Iterando hasta la línea de meta

Short description:

Terminar es una de las partes más difíciles del desarrollo de juegos. Siempre manténlo jugable y mantén un código constantemente enviable. No rompas tu compilación ni agregues nada que rompa otras partes de tu juego. Guarda las características superfluas para una secuela y concéntrate en terminar tu juego actual. Mata a tus favoritos y muévelos a la lista de secuelas. Ahora, envíalo. Lo has logrado, buen trabajo.

A continuación, itera hasta la línea de meta. Terminar es una de las partes más difíciles del desarrollo de juegos. En esta etapa, has alcanzado ese peligroso estado del 90% de avance donde de alguna manera todavía queda el 90% del juego por hacer. Me gusta pensar en terminar como el jefe final, tomando la forma de un enjambre gigante compuesto por toneladas de errores, criaturas y pequeños monstruos malvados. Siempre hay un millón de tareas pequeñas que debes completar para terminar completamente un juego. Cuando estás haciendo un juego web por ti mismo, estas tareas pueden agotarte porque hay muchas y solo eres uno.

Aquí hay algunas formas en las que me gusta enfrentar a este jefe final en solitario. En primer lugar, siempre manténlo jugable. Mira, okay, sé que algunos de ustedes no tienen idea de quién soy. ¿Por qué debería escuchar a este tipo, verdad? Bueno, si no me escuchas a mí, escucha al legendario desarrollador de Doom y Quake. Cita, siempre mantén un código constantemente enviable, John Romero. Además, aquí hay una lista de cosas que no hago mientras lucho contra el jefe final del enjambre. No rompas tu compilación. No agregues nada que rompa otras partes de tu juego. No agregues características hambrientas que se sientan incompletas y pidan más trabajo. No agregues algo que no esté al nivel actual de pulido de todo lo demás en el juego. Y básicamente, todo esto se reduce a no tender trampas para tu futuro yo.

Aquí hay otro consejo que me gusta usar. Guárdalo para la secuela. Probablemente tengas una lista enorme de tareas que necesitan hacerse. Me gusta agregar otra lista, llamada algo como Tareas de la Secuela, donde muevo los elementos por hacer que son geniales, pero que están frenando el proyecto actual. Cuando estás haciendo un juego web por ti mismo, no hay nadie que te diga que no, así que según mi experiencia, terminas teniendo más ideas de características y contenido superfluos de las que podrías tener en un equipo. Algunas de las ideas probablemente están fuera del alcance, pero se vuelven preciosas para ti y te cuesta separarte de ellas. El célebre autor Stephen King recomienda matar a tus favoritos, así que escúchalo. Mata a tus favoritos, mata a tus favoritos, incluso cuando rompa el corazón de tu pequeño escritor egocéntrico, mata a tus favoritos. Así que para estos favoritos tuyos, muévelos a la lista de Guárdalo para la secuela. Diles adiós, pero solo por ahora. Esto también puede motivarte a terminar tu juego actual, para que luego puedas enfocarte en esas tareas de la secuela. Ahora, envíalo. Lo has logrado, buen trabajo.

7. Publicando tu juego en la web

Short description:

Ahora publica tu juego en la web. Si estás buscando opciones gratuitas, Itch.io es la plataforma recomendada para juegos independientes. Itch te brinda control total y te permite decidir la división de ingresos. Considera ofrecer una versión gratuita en Itch y una versión de pago en Steam. Además, GitHub Pages puede alojar tus repositorios de forma gratuita.

Ahora publica tu juego en la web. Estoy seguro de que algunos de ustedes tienen sus propios servidores web, así que solo suban los archivos de su juego y listo. Si estás buscando algunas opciones gratuitas, tengo lo que necesitas. Itch.io, para aquellos que no lo saben, es la plataforma de nivel de entrada para juegos independientes. No hay nada mejor. Itch te brinda, como desarrollador, control total. Plataformas como Apple y Steam son conocidas por tomar el 30% de las ventas, mientras que Itch te permite decidir la división. Muy recomendado. En Itch estarás en buenas manos, porque aquí es donde se ofrecen demos gratuitas de juegos increíbles como Vampire Survivors y Pixelwasher. El patrón emergente entre los juegos independientes exitosos parece ser ofrecer una versión gratuita en Itch y una versión de pago en Steam. Como un consejo rápido, aquí tienes un consejo de marketing. Si quieres intentar elevar tu juego del que nadie ha oído hablar, intenta colocarlo junto a un superventas de platino. Es muy efectivo. Además de Itch, también está GitHub Pages, que alojará uno de tus repositorios de forma gratuita. Aquí es donde alojo los niveles de desarrollo de juegos que se juegan en Valadria.com, de los que hablaremos en la siguiente sección.

8. Aprovechando las características web

Short description:

Dado que estamos haciendo un juego web, aprovechemos algunas de las características únicas de la web. Las páginas de compartir abiertas permiten a los usuarios compartir fácilmente sus experiencias de juego en las redes sociales. Otra forma de mejorar un juego web es permitir a los usuarios descargar imágenes resultantes, que se pueden compartir en varias plataformas. Por último, considera crear un juego web que permita a los usuarios crear y compartir sus propios niveles, aunque ten cuidado con las limitaciones de longitud de URL.

Dado que estamos haciendo un juego web, aprovechemos algunas de las características únicas de la web. Ahora, obviamente, un juego web puede ser inherentemente en línea y tener características multijugador, pero no tiene por qué ser así. La mayoría de los juegos web que hago son para un solo jugador, y algunos de ellos solo se pueden descargar. Pero todos los juegos web pueden aprovechar la web para ayudar a promocionarlos o hacerlos más interesantes. Así que veamos algunas formas en que podemos hacerlo.

Páginas de compartir abiertas. Este primer ejemplo es probablemente el más obvio. Es simplemente abrir una página web, pero esto es maravillosamente trivial con un juego web. Como ejemplo, veamos The Game Dev Tears. ¿Puedo ver una muestra de manos, alguien ha visto The Game Dev Tears antes? ¿Nadie? ¿Porque estoy solo en mi habitación? De acuerdo, entendido. The Game Dev Tears fue visto por más de un millón de personas, así que hice The Game Dev Tears Maker, que es una especie de juego web. Te permite arrastrar diversas tareas de desarrollo de juegos y clasificarlas como desees. En cualquier momento, puedes hacer clic en el ícono de compartir, lo que abrirá una página web en lo que sea que Twitter sea ahora, prellenada con cualquier texto que desees. Fácil y aumenta en gran medida la moralidad potencial de un juego.

Comenzando con The Game Dev Tears como ejemplo, una vez que hayas llorado tus lágrimas, puedes descargar una imagen resultante. Aquí tienes un ejemplo, lo completaré rápidamente. Luego podemos hacer clic en el botón de descarga, encontrar el archivo, abrirlo y ahí lo tenemos. Nuestras lágrimas en un glorioso formato de imagen. Esto se hace con la increíble API de lienzo. Puedes crear un elemento de imagen, luego dibujar lo que quieras en él usando un contexto 2D. Luego convierte esa imagen en data, y obliga a tu usuario a descargarla usando tu extraña trampa web de elección. Estas imágenes luego se pueden publicar en las redes sociales o subir a todas partes, aumentando nuevamente la variedad potencial de tu juego.

Por último, tengamos una gran fiesta de URL tonta. En este ejemplo, estamos utilizando mi juego web Indie Game Sim. Este juego fue hecho en javascript escrito a mano y está disponible para jugar en la web, así como en Steam. Entonces, Indie Game Sim es un juego de plataformas de desplazamiento lateral, pero también te permite crear tus propios niveles. Estos se desarrollan en el juego como una conversación entre tú y un monstruo, pero también puedes compartir estos niveles con amigos. Incluso hay un subreddit donde los jugadores han publicado algunos niveles espeluznantes, pero la verdadera pesadilla son estas URL gigantescas. Esto me hizo curioso por saber cuánto pueden ser las URL, y no hay mucho acuerdo entre los principales navegadores. Chrome e Internet Explorer tienen un límite de alrededor de 2k, Firefox de 65k y Safari de 80k.

9. Conclusion and Resources

Short description:

Puedes hacer un juego web tú solo. Enfócate en satisfacer tus propias necesidades. Elige un motor de juegos que te guste. Crea el juego que quieres jugar. Encuentra la diversión. Gestiona el alcance del proyecto. Itera hasta llegar a la meta. Lánzalo y aprovecha la web. Gracias por asistir a mi charla. Para obtener más recursos, visita mi libro, sitio web, canal de YouTube y podcast.

Entonces, lo que entiendo de esto es que podrías hacer un juego mucho más grande y más tonto en Safari. Probablemente podrías poner todo tu juego en esas URL. Permitir a los usuarios transferir data de esta manera es una implementación económica que permite compartir contenido generado por el usuario de manera muy económica. Normalmente, podrías necesitar una database y una authentication y, antes de darte cuenta, tu juego se saldría del alcance. Pero la web nos brinda herramientas geniales como el hackeo de URL, así que ¿por qué no meter un montón de caracteres allí y permitir que tus jugadores compartan data?

En resumen, puedes hacer un juego web tú solo. Siguiendo estos pasos, podrías tener éxito. Ten en cuenta que eres un productor. Enfócate en satisfacer tus propias necesidades. Elige un game engine que te guste. Crea el juego que quieres jugar. Encuentra la diversión. Gestiona el alcance del proyecto. Itera hasta llegar a la meta. Lánzalo y aprovecha la web.

Quiero agradecerte por asistir a mi charla. Para profundizar en la creación de tu propio juego, consulta mi libro, Cómo hacer un Video Juego tú solo. Para obtener una gran cantidad de artículos y videos gratuitos sobre desarrollo de juegos, visita mi sitio web, bladria.com, y mi canal de YouTube, Make the Game, y mi podcast, Make the Game with Matt Hackett. Si tienes alguna pregunta, estaré disponible en la sala de discusión en JS Game Dev Summit, o puedes encontrarme en BlueSky y en los restos carbonizados de Twitter. Buena suerte escalando esta montaña que es el game development, y nos vemos en sus resbaladizas pendientes.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Remix Flat Routes – Una Evolución en el Enrutamiento
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – Una Evolución en el Enrutamiento
Top Content
Remix Flat Routes is a new convention that aims to make it easier to see and organize the routes in your app. It allows for the co-location of support files with routes, decreases refactor and redesign friction, and helps apps migrate to Remix. Flat Folders convention supports co-location and allows importing assets as relative imports. To migrate existing apps to Flat Routes, use the Remix Flat Routes package's migration tool.
Construyendo Experimentos Divertidos con WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Construyendo Experimentos Divertidos con WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
¡Mejora el Rendimiento de Tus Juegos WebGL Unity!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
¡Mejora el Rendimiento de Tus Juegos WebGL Unity!
Top Content
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
Haciendo Juegos Increíbles con LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Haciendo Juegos Increíbles con LittleJS
Top Content
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
Cómo No Construir un Videojuego
React Summit 2023React Summit 2023
31 min
Cómo No Construir un Videojuego
Top Content
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.

Workshops on related topic

Crea un Juego Con PlayCanvas en 2 Horas
JSNation 2023JSNation 2023
116 min
Crea un Juego Con PlayCanvas en 2 Horas
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más.
Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas
Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.
PlayCanvas de principio a fin: la versión rápida
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas de principio a fin: la versión rápida
Top Content
Workshop
João Ruschel
João Ruschel
En esta masterclass, construiremos un juego completo utilizando el motor PlayCanvas mientras aprendemos las mejores prácticas para la gestión de proyectos. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la gestión de activos, scripting, audio, depuración, y mucho más.
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
WorkshopFree
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
Introducción a WebXR con Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introducción a WebXR con Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
En este masterclass, te presentaremos los conceptos básicos de la construcción de experiencias de Realidad Mixta con WebXR y Babylon.js.
Aprenderás lo siguiente:- Cómo agregar objetos de malla 3D y botones a una escena- Cómo utilizar texturas procedurales- Cómo agregar acciones a objetos- Cómo aprovechar la experiencia predeterminada de Realidad Cruzada (XR)- Cómo agregar física a una escena
Para el primer proyecto en este masterclass, crearás una experiencia interactiva de Realidad Mixta que mostrará estadísticas de jugadores de baloncesto a fanáticos y entrenadores. Para el segundo proyecto en este masterclass, crearás una aplicación WebXR activada por voz utilizando Babylon.js y Azure Speech-to-Text. Luego, desplegarás la aplicación web utilizando el alojamiento de sitios web estáticos proporcionado por Azure Blob Storage.
Managers Are From Mars, Devs Are From Venus
TechLead Conference 2024TechLead Conference 2024
111 min
Managers Are From Mars, Devs Are From Venus
Workshop
Mo Khazali
Mo Khazali
Una Guía para Desarrolladores sobre Cómo Comunicar, Convencer y Colaborar Efectivamente con los Stakeholders
Es una historia tan antigua como el tiempo: la colaboración entre desarrolladores y stakeholders de negocios ha sido durante mucho tiempo un desafío, con una falta de comunicación clara que a menudo deja a ambas partes frustradas. Los mejores desarrolladores pueden comprender profundamente las necesidades de sus contrapartes de negocios, comunicar efectivamente la estrategia técnica sin perder a la audiencia no técnica y convencer al negocio de tomar las decisiones correctas. Trabajando en una consultoría, he fallado y tenido éxito en arquitectar y “vender” visiones técnicas, aprendiendo muchas lecciones en el camino.Ya sea que trabajes en una empresa de productos, seas consultor/freelancer, o quieras aventurarte más allá de ser solo un desarrollador, la capacidad de convencer y comunicar claramente con los stakeholders puede diferenciarte en la industria tecnológica. Esto se vuelve aún más importante con el auge de GenAI y el mercado de desarrolladores cada vez más competitivo, ya que la resolución de problemas y la comunicación efectiva son clave para posicionarte.En esta masterclass, compartiré ejemplos del mundo real, tanto buenos como malos, y te guiaré a través de poner la teoría en práctica mediante dojos.
Masterclass de Codificación en Vivo de Juegos Pequeños
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Masterclass de Codificación en Vivo de Juegos Pequeños
Workshop
Frank Force
Frank Force
Sumérgete en el cautivador mundo del desarrollo de microjuegos con Frank Force en este interactivo masterclass de codificación en vivo. Diseñado tanto para desarrolladores experimentados como para curiosos principiantes, esta sesión explora los desafíos únicos y las alegrías de crear juegos y demos con restricciones extremas de tamaño.