Proceso de creación de un Videojuego | Enlaces de Descarga (Versión PC - Android)
Que tal querida comunidad de Steemit, el día de hoy quiero compartirles un proyecto que realice hace poco tiempo con fines de aprendizaje con un par de compañeros. En pocas palabras nos dimos la tarea de crear un videojuego en parodia a nuestra universidad, el cual es del tipo “Runner” y el objetivo del personaje principal es sobrevivir durante la mayor distancia posible, además de recolectar la mayor cantidad de monedas en el proceso, conocidas dentro del mismo como “unidades de crédito” la cual es la moneda usada para pagar los semestres y materias de la institución.
Lo hemos llamado “Survive the Semester” o Sobrevive el semestre, a pesar de verse sencillo, este proyecto conllevo el uso de habilidades y conocimiento en programación, diseño, física y matemática, lo cual nos sirvió mucho de aprendizaje y a pulir nuestras habilidades. Sin más preámbulos les explicare como fue el proceso y al final les dejare los enlaces de descarga, espero que lo disfruten.
Concepción de la idea
Al momento de decidir crear un videojuego es vital tener una idea de lo que se quiere hacer, en caso de no poseer una pasaremos al segundo paso, el cual consta de concretar una reunión con tu grupo de trabajo para valorar y evaluar la opinión e ideas que todos pongan sobre la mesa.
Una vez concebida la idea principal es necesario reforzarla, realizando una investigación sobre el tema en concreto en el cual se basara tu videojuego, cosas tales como, el género, historia, plataformas, contexto, lenguaje de programación, tipo de arte, entre muchas otras.
En nuestro caso decidimos crear algo básico y divertido que pudiéramos ofrecer de manera gratuita en nuestra institución y al mismo tiempo ser reconocidos por nuestro trabajo, por esta razón nos decantamos por una parodia de nuestra universidad creando un “Runner”, el cual se basa simplemente en el recorrido de un mapa sin objetivos concretos.
Creación de los diseños
Por ser uno de nuestros primeros proyectos decidimos crear todo el arte en dos dimensiones “2D” con un toque semi pixelado tocando lo retro. Para esto usamos un programa llamado Aseprite en su versión 1.1.6.
Fuente
Como una de las razones de este proyecto era darnos a conocer se decidió que los personajes del videojuego seriamos sus creadores, creando así tres personajes cada uno personalizado y con su respectivo nombre.
Si, ese soy yo. Con la chaqueta de mi amada selección Vinotinto.
Como han de saber mi especialidad es diseñar en 3D, así que fue un verdadero aprendizaje el crear los diseños en 2D ya que era la primera vez. Sin embargo es como dibujar con Paint, suelen decir que la practica hace al maestro, así que es cuestión de ir puliendo tu habilidad. Dicho esto, debemos crear una secuencia de diseños de nuestro personaje para sus diferentes movimientos y así luego poder crear una animación fluida con estas imágenes, en mi caso he creado una para el estado “estático”, una para el estado “salto”, una para el estado “deslizamiento” y ocho para el estado “correr”. Deben tener presente que sus diseños sean proporcionados, es decir, tengan la misma altura, el mismo grosor y estar atentos a detalles como por ejemplo, que no les quede uno más cabezón que el otro (algo que me sucedió, pero que luego corregí).
Luego creamos las plataformas o el suelo por donde nuestro personaje tendrá que correr, saltar y deslizarse. Acá podemos ser creativos y crear desde algo similar al concreto hasta incluso nubes. Además de esto creamos para este proyecto cuatro objetos más, uno será la moneda que nos dará puntos a lo largo del mapa y los otros tres serán los poderes o potenciadores que podrá obtener nuestro personaje para sobrellevar su travesía.
Atraes las monedas hacia ti por un periodo de tiempo.
Atraes los potenciadores hacia ti por un periodo de tiempo.
Te permite volar por un periodo de tiempo.
Por ultimo creamos un diseño para el menú principal, para el cual tomamos como referencia una fotografía de la institución, dejando de lado logos y nombres para evitar problemas legales.
Fuente
Construcción de la escena
En esta etapa usamos el programa Unity, el cual es un software gratuito que nos permite crear aplicaciones y video juegos en 2D, 2.5D y 3D. Este se puede trabajar mediante dos lenguajes de programación C Sharp (C#) o JavaScript (JS).
Fuente
Este programa posee muchas herramientas a la hora de preparar y construir nuestro videojuego, pero nos vamos a centrar en las más importantes, las cuales son:
Hierarchy (Jerarquía): En esta ventana se nos listaran todos los objetos que tenemos en la escena, sean visibles o no, tales como cámaras, luces, personajes, entre otros. Además también podemos crear nuevos objetos en esta.
Scene (Escena): En esta ventana podremos observar, mover, rotar y seleccionar los objetos que tengamos en la escena, es decir, acá vamos a construir la escena a nuestro gusto.
Project (Proyecto): En esta ventana visualizaremos todas las carpetas de nuestro proyecto, en las cuales tendremos diseños, texturas, animaciones, entre otras. Desde acá halamos todo lo que necesitemos a nuestra escena.
Inspector: en esta sección veras los detalles del objeto que tengas seleccionado tales como posición, tipo de objeto, parámetros a modificar, entre otros.
Game (Juego): En esta ventana podrás visualizar el videojuego en ejecución y jugarlo a modo de prueba para encontrar fallos, te permite trabajarlo con diferentes resoluciones para así ver como se adapta.
A la hora de iniciar la construcción debemos crear ciertos objetos en nuestra escena, tales como:
una cámara principal (Suele aparecer por defecto en la escena).
Un objeto vacío para almacenar nuestros códigos.
Un objeto (Punto de inicio o nacimiento) el cual posicionaremos en el lugar en el cual va a aparecer nuestro personaje al iniciar el juego.
Un objeto como punto de nacimiento para las plataformas que irán apareciendo.
Una plataforma base para que nuestro personaje se posicione al aparecer.
Un plano el cual le daremos dimensiones que cubra toda la cámara, para luego colocarle una imagen y sea nuestro fondo de escenario.
Luego de esto vamos a configurar la animación de nuestro personaje, para esto abrimos la ventana “Animator”. Luego creamos un estado para cada secuencia de animación estático, saltar, correr y deslizar. Los cuales trabajaremos con tres variables velocidad, EnSuelo y Deslizar así sabremos cuando está corriendo, cuando esta saltado o deslizándose. En la siguiente imagen veremos cómo son las transiciones.
Una vez lista las animaciones pasamos a crear las colisiones, ya que necesitamos que nuestro personaje detecte el suelo por el cual corre. Para esto simplemente seleccionamos el objeto en este caso primero el personaje y luego las plataformas, en la ventana “Inspector” vamos a darle añadir componente o “add componet”, copiamos “Collider” encontraremos varios con diferentes formas usaremos el que más nos convenga para nuestro objeto, aunque con fines de hacer pruebas podemos usar el cuadrado "Box Collider 2D".
Programación
En esta última etapa creamos lo que está detrás del telón, aquello que le da vida y acción a nuestro juego, el código. Lo principal es darle movimiento a nuestro personaje principal y que ejecute las acciones deseadas cuando presionemos determinada tecla. Unity para hacer esto nos brinda dos programas que vienen consigo, uno se llama MonoDevelop (el cual es el que uso) y VisualStudio.
Para que no se haga tan extenso obviare algunas cosas en el código como la declaración de variables o los controles para dispositivos móviles y me centrare netamente en el movimiento generado para jugarlo en un computador y la generación de plataformas, pero acá abajo les mostrare todos los archivos de código que se usaron en el proyecto (en la columna a la izquierda).
ControlPersonaje.cs
void Update()
{
if (!EstaParado)
{
RB2D.velocity = new Vector2(VelocidadMovimiento, RB2D.velocity.y);
//Saltar
if ((Input.GetKey(KeyCode.UpArrow) || Input.GetMouseButton(0))
{
if (!Deslizar)
{
if (EnSuelo)
{
ContadorTiempoSalto = TiempoSalto;
RB2D.velocity = new Vector2(RB2D.velocity.x, FuerzaSalto);
EstaSaltando = true;
}
if (ContadorTiempoSalto > 0 && EstaSaltando)
{
RB2D.velocity = new Vector2(RB2D.velocity.x, FuerzaSalto);
ContadorTiempoSalto -= Time.deltaTime;
}
}
}
if (Input.GetMouseButtonUp(0) || Input.GetKeyUp(KeyCode.UpArrow))
{
ContadorTiempoSalto = 0;
EstaSaltando = false;
}
//Deslizar
if (ContadorTiempoDeslizamiento < TiempoDeslizamiento && !Deslizar)
{
ContadorTiempoDeslizamiento += Time.deltaTime;
}
if (Input.GetKey(KeyCode.DownArrow) || Input.GetMouseButton(1))
{
if (ContadorTiempoDeslizamiento > 0) {
Deslizar = true;
RB2D.velocity = new Vector2 (RB2D.velocity.x + VelocidadDeslizamiento, RB2D.velocity.y);
ContadorTiempoDeslizamiento -= Time.deltaTime;
}
if(ContadorTiempoDeslizamiento < 0 || ContadorTiempoDeslizamiento == 0)
{
Deslizar = false;
}
}
if (Input.GetKeyUp(KeyCode.DownArrow) || Input.GetMouseButtonUp(1))
{
Deslizar = false;
}
Animador.SetFloat("Velocidad", RB2D.velocity.x);
Animador.SetBool("EnSuelo", EnSuelo);
Animador.SetBool("Deslizar", Deslizar);
}
else
{
if (Input.GetKeyUp(KeyCode.RightArrow) || Input.GetMouseButtonUp(0))
{
Camara.GetComponentInChildren<Fondo>().enabled = true;
EstaParado = false;
}
}
}
Quizás para algunos parezca un poco complicado, así que les explicare un poco su función. La función de correr se activa con la variable EstaParado, si su estado es “False” el personaje empezara a correr. Al inicio del juego esta es “True” y cuando presionamos Click Izquierdo o la flecha derecha esta pasara a “False”, este valor se modifica automáticamente a “True” cuando el personaje muere.
Luego tenemos la variable EstaSaltando si esta es “False” al presionar Click Izquierdo o Flecha arriba nos permitirá saltar y mientras estemos en el aire esta se cambiara a “True”. Retorna a su valor original cuando tocamos el suelo.
Por ultimo tenemos la acción deslizar que se activa con el Click derecho o la Flecha abajo y también posee una variable llamada Deslizar que funciona de la misma manera que la de saltar. Cabe resaltar que cada proceso excepto el de correr poseen un contador, esto con el fin de no saltar o deslizarse de manera infinita. Finalmente enviamos los datos de las variables a las variables externas de animación para que ejecuten el movimiento.
GenerarPlataforma.cs
void GeneracionPlataformas()
{
if (transform.position.x < PuntoGenerador.position.x) {
int CantidadPlataformas = Random.Range (2, 6);
for (int i = 0; i < CantidadPlataformas; i++)
{
float PosicionY = AlturaEstandar [Random.Range (0, 6)];
Distancia = Random.Range (DistanciaMin, DistanciaMax);
SelectorPlataformas = Random.Range (0, Plataformas.Length);
transform.rotation = Quaternion.Euler (transform.rotation.x, transform.rotation.y, Rotacion);
transform.position = new Vector3 (transform.position.x + AnchoPlataformas [SelectorPlataformas] + Distancia, PosicionY, transform.position.z);
Instantiate (Plataformas [SelectorPlataformas], transform.position, transform.rotation);
}
}
}
Ahora para la generación de plataformas aleatoria primero debemos verificar que la posición donde se va a generar la siguiente plataforma está lo suficientemente lejos de la anterior, luego se le da una longitud aleatoria, además que esta aparezca a una altura y distancia aleatoria bajo un rango establecido para que no salga de la escena. Seguidamente le asignamos a nuestro punto de nacimiento valores neutros de posición y rotación para que nuestra plataforma aparezca bien posicionada, por ultimo con el comando “Instantiate” haremos que aparezca nuestra plataforma directamente de una carpeta predeterminada donde la debemos tener almacenada. Con eso ya podremos ejecutar nuestro juego, abajo les anexo una imagen de como se ve el juego.
Bueno amigos espero que les haya gustado este proyecto, acá abajo les dejare los enlaces de descarga para que lo prueben y me den su opinión, acepto cualquier sugerencia u opinión de su parte. Más adelante estaré subiendo proyectos desde cero para aquellos interesados en este tema y que deseen aprender más sobre esta maravillosa área. Les agradezco que se hayan tomado el tiempo para pasar por acá y ver mi post, un abrazo y hasta la próxima.
I gave you some lovin! How 'bout you give me some too?
thanks!
Muchas grracias por compartir, gran aportación. Intentaré probarla. Soy curador de OCD y quiero nominar tu post a nuestra compilación "OCD International Daily". Esto puede atraer más atención a tu blog y quizás algunos votos extra. Responde a este post si aceptas la nominación.
Esta chulada de post fue descubierta por el equipo de OCD!
Responde a este comentario si aceptas y estas dispuesto a dejarnos compartir esta joya! Al aceptar tienes la oportunidad de recibir recompensas adicionales y una de tus fotografías en este artículo podría ser usada en una de nuestras compilaciones diarias.
Si quieres conocer más sobre nosotros o descubrir otras gemas, puedes seguirnos en @ocd. La transparencia es primero.
Si quieres saber más sobre OCD en español puedes leer aquí.. Y recuerda que puedes votar por @ocd-witness.
Acepto con gusto, gracias por su gran trabajo.
@elteamgordo gran trabajo! gracias por reconocer y por supuesto que le damos upvote!
@originalworks
The @OriginalWorks bot has determined this post by @hadro to be original material and upvoted it!
To call @OriginalWorks, simply reply to any post with @originalworks or !originalworks in your message!
Buenísimo tú post amigo, se ve que crear un vídeo juego siempre tiene su proceso @reveur ven
Gracias amigo. Lo es, pero si es algo que te gusta el trabajo es entretenido.
Este va para ocd, saludos.
Gracias amigo, saludos.
Excelente @hadro! te felicito!! Se me hace muy interesante y muy creativo de tu parte! Saludos a Venezuela !! un gran abrazo!
Muchas gracias amigo, siempre tratando de brindarle el mejor contenido a la comunidad. Saludos