Cómo hacer juegos en línea

Información del autor

¿Alguna vez jugaste un juego en línea y pensaste: “Ojalá pudiera crear uno de estos. Tengo varias ideas geniales.”? Anteriormente, resultaba necesario aprender a escribir código en ActionScript 3, el cual es el idioma que potencia a Flash. Sin embargo, gracias a la ayuda de ciertos programas de desarrollo de juegos, poder contar con una experiencia en la escritura de código, ya no resulta un requisito necesario. Podrás crear juegos divertidos y complejos tan solo manipulando algunos objetos y utilizando la lógica, sin siquiera escribir una sola línea de código.

Parte 1

Parte 1 de 4:
Diseñar el juego

1
Redacta una descripción básica. Incluye las características del juego, y el objetivo que el jugador deberá cumplir. Sería bueno escribir un esquema básico acerca de lo que quieres hacer con el juego, de manera que puedas consultarlo mientras te ocupas en desarrollar el juego.
- Revisa este wikiHow este wikiHow, si deseas adquirir más información acerca de cómo escribir un documento sobre el diseño de juegos.
2
Dibuja algunos bosquejos. Realiza un dibujo básico que ilustre la apariencia que tendrán las pantallas del juego. No es necesario que tenga muchos detalles, pero deberás, al menos, tener una idea acerca de dónde ubicar los distintos elementos sobre la pantalla. Este paso resultará increíblemente útil cuando empieces a desarrollar la interfaz del juego más adelante.
3
Elige un método para la creación del juego. Tradicionalmente, resultaba necesario aprender a escribir código en el programa ActionScript 3 para poder crear juegos de Flash. Si bien todavía puedes tomar esa opción, existen algunos programas que se encuentran disponibles y que pueden hacer que la creación de juegos resulte una tarea más sencilla, además que, no necesitan que el usuario cuente con una experiencia en la escritura de código. Entre algunas de las opciones más populares, se encuentran:
- Stencyl. Esta es una herramienta más reciente, la cual te permitirá crear los juegos utilizando objetos y secuencias lógicas. Estos juegos luego pueden convertirse en proyectos de Flash, y se les puede subir en cualquier sitio web que admita juegos en el formato Flash.
- Construct2. Conforme Flash ha ido quedando relegado al pasado, este ha sido reemplazado por otros métodos para la creación de juegos. Uno de los métodos más recientes para la creación de un juego en línea es el HTML5. Por lo general, esto requiere un conocimiento extenso sobre la escritura de código, pero el programa Construct2 te permitirá crear los juegos utilizando objetos y secuencias lógicas, de una forma muy parecida a Stencyl.
- Flash Builder. Este es el método tradicional para la creación de juegos en el formato Flash. Este programa requiere una buena cantidad de conocimiento previo acerca de ActionScript, pero es uno de los lenguajes más sencillos para aprender los fundamentos básicos. Flash Builder tiene un costo, pero puedes utilizar el programa de código abierto “FlashDevelop” y así obtener una gran medida de la misma operatividad.

Parte 2

Parte 2 de 4:
Utilizar Stencyl

1
Descarga e instala Stencyl. Stencyl es un programa de creación de juegos, el cual no requiere ningún tipo de conocimiento en la escritura de código. En lugar de eso, podrás usar una variedad de herramientas lógicas y así manipular los objetos en el juego.
- Podrás utiliza Stencyl de forma gratuita, solamente si deseas publicar el juego en línea. En la versión gratuita de Stencyl, aparecerá un logotipo al principio. Si obtienes la versión de pago, entonces podrás publicar el juego en otras plataformas.
2
Crea un nuevo juego. Al momento de iniciar Stencyl, se te mostrará una lista con tus juegos. Visualizarás varios juegos de muestra en la lista, a los cuales podrás acceder para observar su funcionamiento. Haz clic en el cuadro que tenga una línea punteada y el título “Click here to create a new Game” (Haz clic aquí para crear un juego nuevo) para empezar a trabajar en tu propio juego.
3
Selecciona un kit. Existirán diversos kits que contendrán elementos y objetos preconfigurados, los cuales podrán ayudarte a desarrollar y ejecutar tu juego de una forma rápida. Selecciona un kit en el caso de que así lo desees, o selecciona la opción “Blank Game” (Juego en blanco) si deseas elaborar tu propio juego.
- Podrás descargar los kits que otros usuarios crearon en línea.
4
Ingresa la información del juego. Antes de comenzar a crear el juego, necesitarás ingresar algunos datos.
- ”Name” (Nombre). Este será el nombre de tu juego. Podrás cambiarlo más adelante, según tus preferencias.
- ”Screen size” (Tamaño de pantalla). Este será el tamaño de la pantalla del juego, y esta opción es muy importante ya que influirá en el tipo de arte que utilizarás. Dado que lo más probable es que la gente llegue a jugar tu creación desde sus navegadores web, el tamaño de pantalla no deberá ser demasiado grande. Intenta con una anchura de 640 píxeles y una altura de 480 píxeles. Este será un buen tamaño para comenzar a trabajar.
5
Familiarízate con el diseño de la página. Al momento de cargar por primera vez el nuevo juego, el sistema te mostrará la pantalla del “Dashboard” (Panel). Este será el lugar donde podrás visualizar todas las escenas del juego y acceder a todos los recursos. También podrás cambiar la configuración del juego desde aquí. Pasarás la mayor parte del tiempo trabajando en el “Dashboard”.
- ”Scenes” (Escenas). Esta será la ventana principal del panel, y te mostrará el juego en sí y todos sus elementos. El juego consistirá de una serie de escenas.
- ”Resources” (Recursos). Está será una lista con todos los objetos y elementos presentes en el juego. Incluirá a los “actors” (actores), “backgrounds” (fondos), “scenes” (escenas), “logic” (secuencias lógicas), “sounds” (sonidos) y “tilesets” (conjuntos de baldosas). Los recursos se encontrarán organizados en un árbol al costado izquierdo de la pantalla.
- ”Settings” (Configuración). La opciones en “Game and Settings” (Juego y configuraciones) te permitirán modificar la mecánica del juego, incluyendo a los controles, la gravedad, los colisiones, las pantallas de carga y demás.
6
Personaliza al actor. Un actor es cualquier objeto que se mueva, o con el que se pueda interactuar dentro del juego (jugador, enemigo, puertas, etc). Necesitarás crear un actor para cada objeto del juego. Haz clic en la opción “Actor Types” (Tipos de actor) en el menú “Resources” (Recursos) para crear un actor. Selecciona el actor que desees de la lista (la lista se encontrará determinada según el kit que hayas elegido).
- Asigna el actor a un “Group” (Grupo), ya sea “Player” (Jugador) o “Enemy” (Enemigo). Esta acción ayudará a determinar las propiedades de colisión del actor. Selecciona el actor y abre el “Actor Editor” (Editor de actores). Haz clic en la pestaña “Properties” (Propiedades), y luego elige el grupo apropiado en el menú desplegable.
- Añade tipos de comportamiento (saltar, pisotear, caminar). Los “Behaviors” (Comportamientos) son los que le permiten al actor efectuar las acciones. Haz clic en la pestaña “Behaviors”, y luego haz clic en el botón “+ Add Behavior” (Añadir comportamiento) en la esquina inferior izquierda. Selecciona el comportamiento que desees de la lista, tal como “Walking” (Caminar), y luego haz clic en “Choose” (Seleccionar).
- Configura los controles. Si vas a crear un personaje de jugador, entonces probablemente querrás permitirle moverse dentro del juego. Cuando añadas el comportamiento “Walking” (Caminar), aparecerá una pantalla con los atributos del comportamiento “Walking”. Podrás utilizar los menús desplegables para elegir las teclas que moverán al actor hacia la izquierda y derecha. Si el kit que utilizas contuviese algún tipo de animación, también podrías asignarlas.
- Podrás añadir diferentes comportamientos y así personalizar las acciones del actor.
7
Crea una escena. La escena será lo que el jugador verá al momento de jugar. Constará del fondo, así como de cualquier otro objeto o actor que sean visibles. Haz clic en la opción “Scenes” (Escenas) en el árbol de “Resources” (Recursos) y luego haz clic en el cuadro enmarcado con líneas de guiones. Asígnale un nombre a la nueva escena y así podrás continuar.
- Fondo. El tamaño de la escena se ajustará de una forma automática, así que no tendrás que preocuparte por ello en esta etapa. Podrás elegir utilizar un color que sirva como fondo, sobre el cual colocarás las baldosas. Podrás elegir un color sólido o uno en degradado. Haz clic en la opción “Create” cuando hayas terminado. Esta acción abrirá el “Scene Designer” (Diseñador de escenas).
- Coloca las baldosas. El conjunto de baldosas que formen parte de tu kit, se cargarán en el lado derecho de la ventana. Haz clic en la herramienta “Pencil” (Lápiz) en el menú de la izquierda, y luego haz clic sobre el tipo de baldosa que desees utilizar. Luego, podrás colocar la baldosa encima de la escena. Haz clic y arrastra utilizando el ratón para colocar múltiples baldosas.
- Coloca a los actores. Haz clic en la pestaña “Actors” (Actores) ubicada encima del conjunto de baldosas, y podrás visualizar a los actores que se encuentren disponibles. Deberás haberlos creado anteriormente para que estos aparezcan en la lista. Haz clic sobre el actor que deseas colocar, y luego haz clic sobre el lugar de la escena donde quisieras que aparezca. Si mantienes presionada la tecla ⇧ Shift, el actor se ajustará a la rejilla.
- Añade la gravedad. Haz clic en la pestaña “Physics” (Física) ubicada en la parte superior de la pantalla, y luego ingresa un valor en el campo “Gravity (Vertical)” (Gravedad, vertical). Un valor de 85 simulará la gravedad del mundo real.
8
Prueba el funcionamiento del juego. Luego de crear la escena y colocar a algunos de los actores, podrás probar el funcionamiento del juego. Haz clic en el botón “Test Game” (Probar el funcionamiento del juego) ubicado en la parte superior de la pantalla y empieza a jugar hasta donde tengas desarrollado el juego. Podrás usar las teclas que configuraste al momento de crear a los actores y así controlar al personaje jugador.
- Busca cualquier aspecto que no funcione correctamente e intenta repararlo. Por ejemplo, ¿los enemigos se están comportando de una manera correcta? ¿Es posible llegar a derrotar a los enemigos? ¿Existe alguna plataforma que resulte inalcanzable o brechas que no puedan cruzarse? Regresa al área relevante en el editor de juegos y repara cualquier problema que encuentres. Es posible que esto te tome un buen tiempo, pero el resultado final hará que el juego sea mucho más entretenido y ejecutable.
9
Agrega más elementos. Luego de haber completado una primera escena que funcione correctamente y sea ejecutable, es hora de empezar a desarrollar el juego entero. Añade más niveles y obstáculos, y sigue examinando las adiciones que realices para asegurarte de que estas resulten entretenidas y funcionen apropiadamente.
10
Bloquea el sitio de tu juego. Si vas a subir el juego a un sitio que admita juegos en el formato Flash, o vas a subirlo a tu propio sitio web, entonces sería recomendable que actives la opción “Site Locking” (Bloqueo de sitio). Esto evitará que el juego se juegue en los sitios que no se encuentren habilitados en la lista.
- Abre “Game Settings” (Configuración del juego) desde el árbol de “Resources” (Recursos). Selecciona la sección “Loader” (Cargador). Escribe los sitios que deseas habilitar en el campo de “Site Lock” (Bloqueo de sitios), separados por una coma, sin espacios. Por ejemplo, {{kbd|newgrounds.com, kongregate.com}].
- Mientras te encuentres en esta pantalla, ingresa tu página de inicio en el campo “Your Home Page” (Tu página de inicio), en el caso de que cuentes con una. Esto permitirá a las personas que jueguen el juego, conectarse con tu sitio.
11
Exporta el juego en el formato Flash. Una vez que te encuentres satisfecho con el juego, podrás exportarlo en el formato Flash. Esto te permitirá subir el juego en sitios que admitan juegos en el formato Flash, o en tu propio sitio web. Haz clic en Publish (Publicar), selecciona Web y luego haz clic en Flash. Guarda el archivo en tu computadora, en una ubicación fácil de encontrar.
12
Publica el juego. Una vez que cuentes con el archivo Flash (.SWF), podrás subirlo al anfitrión de tu elección. Existe una gran variedad de sitios en línea que admiten juegos en el formato Flash, y es posible que algunos de estos incluso te permitan ganar dinero por las regalías de los anuncios en tu juego. También podrás subir el juego a tu propio sitio web, pero deberás asegurarte de contar con un ancho de banda propicio para soportar un número amplio de jugadores, en el caso de que tu juego se vuelva popular.
- Revisa este wikiHow para aprender a subir tu juego en tu propio sitio web.
- Si deseas subir tu archivo a sitios tales como Newgrounds o Kongregate, necesitarás crear una cuenta y luego realizar el proceso de subida en el sitio web. Los términos y condiciones serán distintos según el sitio.
- Si deseas publicar el juego a la “Stencyl Arcade” (Salón recreativo de Stencyl), podrás hacerlo dentro del programa Stencyl. Haz clic en Publish (Publicar), selecciona Stencyl, y luego haz clic en Arcade. El juego se subirá de una forma automática, así que asegúrate de encontrarte satisfecho con el nombre antes de realizar este paso. Stencyl Arcade tiene un límite de 8 MB de tamaño de archivo.

Parte 3

Parte 3 de 4:
Utilizar Construct 2

1
Descarga e instala Construct 2. Este programa te permitirá crear juegos en un formato HTML5, aplicando una muy poca cantidad de código. Deberás asignar algunas variables, pero todo esto lo realizará a través de los menús, y no necesitarás realmente escribir código.
- Construct 2 es un programa gratuito, aunque algunas características resultarán limitadas a menos que actualices a la versión de pago. La versión gratuita no es capaz de publicar el juego en cualquier otra plataforma que no sea HTML5.
2
Crea un nuevo proyecto. Cuando inicies Construct 2 por primera vez, notarás un menú de bienvenida. Haz clic en el enlace “New Proyect” (Nuevo Proyecto) para comenzar un nuevo juego. También serás capaz de visualizar un par de ejemplos que podrás utilizar para observar cómo se crean los juegos más básicos.
- Al momento de crear un nuevo proyecto se te ofrecerá una lista de plantillas. Para tu primer proyecto, probablemente sea resulte una buena idea empezar desde cero con un proyecto en blanco. Esto te permitirá dominar los fundamentos básicos sin que las plantillas interfieran con tu trabajo.
3
Modifica la configuración del proyecto. Verás una serie de elementos en el marco “Properties” (Propiedades) ubicado en el cuadro izquierdo de la ventana del proyecto. Podrás utilizar esta función para ajustar el tamaño de la pantalla e ingresar la información de tu juego y tu compañía.
4
Aplica un fondo. Haz doble clic sobre el diseño de la página. Selecciona la opción “Tiled background” (Fondo de baldosas) desde la sección “General”. Haz clic sobre el diseño de la página para colocar el fondo. Esto abrirá el editor de fondos. Deberás crear tu propio fondo utilizando algún programa de edición de imágenes, o deberás descargar las texturas desde una variedad de sitios en línea.
- Establece el fondo de forma según el tamaño del diseño de la página. Selecciona el objeto de fondo y cambia el tamaño desde el marco “Properties” (Propiedades).
- Cambia el nombre de la capa y bloquéala. Te será útil bloquear la capa para evitar moverla accidentalmente mientras colocas otros objetos. Haz clic en la pestaña “Layers” (Capas) en el lado derecho de la pantalla. Selecciona la capa, y haz clic en el ícono “Pencil” (Lápiz). Ponle el nombre “Background” (Fondo) a la capa, y luego haz clic en el botón “Padlock” (Candado) para así bloquear el fondo.
5
Crea una nueva capa. Dirígete a la pestaña “Layers” (Capas), y luego haz clic en el botón “+” para crear una capa. Cambia el nombre de la capa y ponle “Main” (Principal). Esta será la capa en dónde se encontrarán la mayoría de los objetos del juego. Asegúrate de que la capa principal se encuentre seleccionada, antes de continuar.
6
Añádele métodos de entrada al juego. En el programa Construct 2, los métodos de entrada deberán añadirse como objetos en el juego. Estos serán invisibles, y habilitarán el uso del teclado y del ratón a lo largo del proyecto.
- Haz doble clic sobre el diseño de la página y selecciona la opción “Mouse” (ratón) desde la sección “Input” (Método de entrada). Realiza el mismo proceso para introducir el objeto “Keyboard” (Teclado).
7
Añade los objetos. Es hora de empezar a añadir algunos de los objetos del juego al diseño de la página. Haz doble clic sobre el diseño de la página y selecciona la opción “Sprite” (Mapa pequeño de bits) desde la sección “General”. Utiliza los puntos de mira para elegir la ubicación donde desees colocar el mapa pequeño de bits. Esto abrirá el editor de imágenes, lo cual te permitirá cargar un pequeño mapa de bits ya existente, o crear uno nuevo.
- Cuando selecciones a los mapas de bits en el diseño del juego, la pestaña de propiedades del pequeño mapa de bits se cargará en el marco izquierdo. Cambia el nombre del mapa de bits, de forma que puedas identificarlo y revisarlo más fácilmente.
8
Añade comportamientos a los objetos. Cuando quieras añadir un comportamiento, haz clic sobre el objeto al cual desees añadirle un comportamiento y selecciónalo. Haz clic en el enlace “Add/edit” (Añadir/editar) en la sección “Behaviors” (Comportamientos) ubicada en el marco “Properties (Propiedades). Aparecerá una lista con todos los comportamientos disponibles.
- Los comportamientos son piezas de secuencias lógicas preconfiguradas, las cuales te permitirán agregar una operatividad de una forma rápida a tus objetos. Podrás elegir de entre una amplia variedad de comportamientos prestablecidos, los cuales podrán realizar una amplia cantidad de funciones. Por ejemplo, si deseas hacer que el piso sea sólido, asígnale el comportamiento “Solid” (Sólido). Si deseas que un personaje jugador se mueva en 8 direcciones, asígnale el comportamiento “8 direction movement” (Movimiento en 8 direcciones).
9
Cambia las propiedades de los comportamientos. Podrás editar los comportamientos existentes y así personalizar la manera en que los objetos trabajen. Podrás cambiar los valores y así modificar la velocidad, la dirección y otras propiedades.
10
Comprende el funcionamiento de los eventos. Los eventos son una lista de condiciones, y representan el motor del juego. Si las condiciones son propicias, entonces los eventos ocurren. Si las condiciones no son propicias, entonces los eventos no ocurren. Por lo general, la hoja de eventos se ejecuta 60 veces por segundo. A cada vez que se ejecuta, se le conoce como un “tick” (momento).
11
Crea un evento. Haz doble clic en la hoja “Event” (Evento) que se encontrará en blanco. Aparecerá una lista con todos los objetos disponibles. Selecciona el objeto para el cual desees crear un evento, o también podrías crear un evento “System” (Sistema).
- Selecciona el momento en el cual la acción deberá ocurrir. Luego de seleccionar el objeto, el programa te pedirá seleccionar el momento en el cual el evento deberá ocurrir. Podrás basarte en otros eventos, o en ciertos momentos específicos. La opción “Every tick” (A cada momento) querrá decir que la acción ocurrirá siempre.
- Añade una acción. El programa te pedirá seleccionar uno de tus objetos. Elígelo de una lista de acciones. Por ejemplo, si vas a crear un tirador descendente, y deseas que el personaje del jugador se encuentre siempre mirando hacia el ratón, entonces deberás crear una acción del tipo “Set angle toward position” (Fijar el ángulo hacia la posición) en cada momento o “tick” y asignar la acción al objeto “Player” (Jugador). Cuando se te soliciten las coordenadas, escribe “Mouse.X” para el eje X, y “Mouse.Y” para el eje Y. Esto mantendrá a la nave del jugador siempre apuntando hacia el cursor del ratón.
12
Añade más eventos y comportamientos. Estos conformarán el segmento principal del juego. Añadir y modificar los comportamientos y los eventos ayudarán a que tu juego sea único y divertido, y se convierta en uno que la gente querrá desesperadamente jugar. Experimenta con los distintos eventos e intenta diseñar el juego exacto que tengas en mente.
13
Añade algunas variables. Existen dos tipos de variables en el programa Construct 2: variables de ejemplo, y variables globales. Estas te permitirán configurar valores personalizados para tus objetos y el juego, tales como la salud, límites de tiempo, puntuaciones, y más.
- Variables de ejemplo. Las variables de ejemplo son variables que se asignan a los objetos simples. Estas se utilizan para cosas como, por ejemplo, la salud del enemigo y la del jugador. Podrás agregar variables de ejemplo luego de seleccionar un objeto haciendo clic en el enlace “Add/edit” (Agregar/editar) en la sección “Variables” ubicada en el marco “Properties” (Propiedades). Asígnale un nombre a la variable, el cual pueda mencionarse en un evento, así como un valor inicial.
- Variales globales. Las variables globales son variables que se asignan al juego entero. Estas se utilizan para cosas como, por ejemplo, la puntuación del jugador. Cuando desees crear una variable global, entonces abre la hoja de eventos y haz clic derecho sobre un espacio en blanco. Haz clic en “Add global variable” (Agregar variable global), asígnale un nombre, el cual pueda mencionarse en un evento, y luego ingresa un valor inicial.
14
Crea una interfaz. Al momento de crear una interfaz, por lo general, es mejor hacerlo en una nueva capa. Esto se debe a que la interfaz se moverá o cambiará muy rara vez, así que resulta una buena idea mantenerla en una capa bloqueada. En el marco “Properties” (Propiedades) de la nueva capa, fija la opción “Parallax” (Paralaje) en 0. Esto evitará que la capa se desplace al momento que la pantalla lo haga.
- Utiliza los cuadros “Text” (Texto) y las variables, para crear la interfaz. Podrás configurar los cuadros de texto y así mostrar la salud restante, la puntuación, las municiones, o cualquier otra cosa que el jugador necesite visualizar con regularidad.
15
Prueba el funcionamiento y revisa el juego. Cuando cuentes con algunos objetos en la pantalla, además de algunos eventos y comportamientos, podrás empezar a probar el funcionamiento del juego y añadir contenido. Haz clic en el botón “Play” (Jugar) de la parte superior de la pantalla, y así desarrollarás y probarás el funcionamiento del juego. Toma nota de cualquier cosa que no funcione adecuadamente, e intenta solucionarla, de forma que el juego se pueda jugar y resulte divertido.
16
Exporta el juego. Si el juego satisface tus expectativas, entonces podrás exportarlo para que lo puedas subir a algún sitio web y las personas puedan jugarlo. Cuando quieras exportar el juego, haz clic en el menú File (Archivo) y selecciona la opción Export (Exportar). Guarda el proyecto en una ubicación que te resulte fácil de encontrar.
17
Publica el juego. Existe una variedad de sitios que te permitirán subir juegos en formato HTML5 para que otras personas puedan jugarlos. También podrás subir el juego a tu propio sitio web. Revisa esta guía para obtener detalles acerca de cómo subir un juego a tu sitio web.

Parte 4

Parte 4 de 4:
Escribir el código desde cero

1
Descarga un IDE (Integrated Development Enviroment, o “Entorno de desarrollo integrado”, en español) de programación, el cual admite el formato HTML, tal como Game Maker Studio. Algunos de estos programas se encuentran disponibles de una manera gratuita, aunque muchos de los mejores Entornos de desarrollo integrado pueden llegar a costar unos cientos de dólares.
2
Aprende a utilizar el IDE. Aprender a programar en un entorno resulta increíblemente importante. La memorización de la mayoría de las secuencias más comunes de código, y el aprendizaje acerca de cómo implementar las cosas apropiadamente, puede tomar semanas o incluso meses. ¡Sé paciente y verás que, a la larga, valdrá la pena!
3
Crea tu juego una vez que te sientas listo. Un gran punto de partida podría ser la elaboración de un documento de diseño, o anotar algunas ideas. La programación de un juego puede llegar a tardar meses, o, en el caso de que realmente te encuentres decidido a crear un juego exitoso, esta puede durar incluso uno o dos años.
4
Prueba el funcionamiento del juego. Asegúrate de intentar realizar cosas alocadas o inesperadas, de forma que puedas poner en evidencia tantos fallos en el juego como puedas. También intenta determinar si la mecánica del juego se ajusta a tus preferencias, o si necesitas revisar algo y hacer algunas modificaciones.
5
¡Publícalo! Publica el juego en línea en algún sitio web, tal como Kongregate. Deberás encontrarte listo para recibir cualquier tipo de crítica constructiva, y es posible que luego desees actualizar el juego, de forma que satisfaga los deseos de la comunidad de jugadores.