epelpad

Terminar y publicar tu propio videojuego 2D desde 0 [5/5]

Buenas gente, y bienvenidos a la 5ta y ultima parte de este tutorial para hacer un juego desde 0!



Aquí están los links a las partes anteriores:








En la parte 4 lo dejamos en:
  • Effectos y Sonidos
  • Sistema de vida y barra de vida de los enemigos
  • Ataque de espada y Disparo de bala
  • Vida y barra de vida del player
  • Ataque del enemigo


En esta ocasión vamos a:
  • Agregar nuevos scripts y hacer cambios en los que ya teniamos
  • Hacer algún cambios menores en la scena
  • Crear la interfaz del ranking
  • Dar los toques finales y hacer la build

En esta ocasión el post va a ser un poco diferente a los anteriores. Ya que en la etapa final de un juego, es donde empiezan a aparecer los problemas de ultimo minuto, y se empiezan a ver las cosas a corregir, en esta ultima parte tuve que hacer MUCHAS pequeñas cosas. Y si hiciera el paso a paso para cada una serian 5 posts mas.

En vez de eso les voy a ir dejando resúmenes de las cosas que hice, y solo voy a explicar como hacer las cosas que sean nuevas. Aún así puede que me este salteando algo, así que si a la hora de seguir el tutorial les surge algún problema, es posible que me haya salteado algo yo, así que me mandan un mensaje, los ayudo a solucionarlo, y lo añado al post.

Empecemos!



Música para ambientar






Scripts


Estos son los nuevos Scripts que vamos a usar. Link en GoogleDrive.

Primero que nada, a los scripts que teniamos hechos les tuve que hacer varios cambios. Pueden comparar los que estan en la carpeta, con los que tienen ustedes para ir viendo los cambios.

Para facilitarles la tarea les dejo esta pagina que sirve para comparar scripts y marcar las diferencias:
https://www.diffchecker.com/

De los scripts nuevos les voy a ir explicando que va a hacer cada uno.

Ratio:
Este script lo tome el tutorial del canal Hagamos Videojuegos, de su tutorial para hacer un endless runner.

Desde entonces lo uso en casi todos mis proyectos. Lo que hace este script es simplemente mantener la proporción de la pantalla en en aspect ratio fijo(en nuestro caso vamos a mantenerla en 16:9), creando barras negras si la pantalla es mas ancha o alta.

Para eso agreguenlo a la cámara, y pongan de medida 1.77777778(muchos 7 y al final un 8).

Enemy Spawner:
Este script va a ser el encargado de ir creando enemigos a medida que los vamos matando.
Max Enemies(valor inicial 2) es la cantidad máxima de enemigos vivos a la vez, esta cantidad va a ir amuentando a medida que ganemos puntos.
Spawn Time(valor inicial 4), es que tan seguido aparecerán. Esta cantidad va a ir bajando a medida que hagamos mas puntos.
Spawn Points es donde vamos a poner los lugares donde queremos que aparezcan los enemigos.
Las ultimas dos variables no son para usar, es solo donde se almacenan las referencias a los enemigos vivos y muertos.

Creen un empty object llamado EnemySpawner y añadanle este script.

Game_Manager:
Este Script va a ser el encargado de llevar el control del puntaje. De indicar a todos cuando el juego termino, o de cuando empieza. De hacer aparecer las interfaces al final del juego. De guardar los puntajes en PlayerPrefs, y de cargarlos. Bueno de casi todo.

Creen un empty object llamado GameManager y añadanle este script. Las variables que podemos llenar por ahora son.

SadClip; pongan la canción "Knowing Purpose" que esta en la carpeta del drive anteriormente. O pueden usar la pagina que les recomende para crear un audio con tonalidad triste.

EnemySpawner; arrastren el objeto EnemySpawner aquí.

RandomNames; estos son los nombres que se van a usar cuando un jugador consiga un nuevo puntaje, y no ponga un nombre. Pueden poner la cantidad que deseen de nombres, y poner los nombres que se les ocurra:
posttutorial

También añadanle un AudioSource y ponganle el clip BackgroundMusic.



Cambios en la Scena


Esta es una lista de los cambios menores que tuve que hacer en la scena, Estos cambios son cosas que ya hicimos antes, así que deberían ser capaces de hacerlos sin ser guiados paso a paso.

  • Creen 6 Empty Objects, y ponganlos fuera de pantalla, justo encima de los suelos que sobresalen.
  • En el objeto EnemySpawner, cambien SpawnPoints a 6 y arrastren cada objeto de los que crearon arriba a una de las casillas.
  • Seleccionen las paredes al borde de la escena, y añadanle un PlataformEffector2D, para que los monstruos puedan atravesar las paredes para entrar a la escena, pero que anda pueda salir.
  • Edite las animaciones del enemy, y en correr y saltar le puse la transparencia(el canal alpha) en 255, para que no sea transparente mientras corre.
  • Selecciono el objeto explosión dentro el Enemy, y le edito la animación, quitandole la activación del collider(sacando todo para que la animación no lo cambie en ningún momento). Fuera de editar la animación, le dejo el collider desactivado.
  • Seleccionen al Enemy, y en el inspector presionen prefab > apply arriba del todo(asumiendo que crearon un prefab del enemigo arrastrandolo a la carpeta prefabs). Luego borren al enemigo de escena
  • Arrastren el enemigo de la carpeta prefabs a la variable Enemy del EnemySpawner
  • Edit > ProjectSettings > Physics2D > Layer Collision Matrix > Desmarquen la casilla que choca Enemy con Enemy
  • Agrego AudioSource al Player
  • Le agrego los clips PlayerDying y hurted a las variables del script del player
  • Selecciono al Player y le creo una animación de morir(mas abajo el ejemplo). Le quito el loop a la animación.
  • En el animator creo una condición nueva "Die" y creo una transición de Any > PlayerDie con la condición Die.
  • Dejen el EnemySpawner desactivado
  • Dejen la barra de vida del Player desactivada
  • Muevan al player al centro de la pantalla y dejenlo mas arriba de la plataforma central para que caiga al empezar

Ejemplo de animación de muerte:
indie

Creen un Empty Object llamado Instructions.
Agreguen estas dos imagenes, y ponganlas dentro de ese empty object



Acomodenlas en el centro de la pantalla, una arriba y otra mas abajo. Pueden cambiar el color del Sprite, yo en mi caso les puse en amarillo:
taringa

Por cierto, la fuente utilizada en esas imagenes es "FrescoStamp" y la pueden descargar gratis aquí:
Dafont
Descarguenla ya que es la que vamos a usar dentro del juego.

Arrastren el objeto Instructions a la variable Instructions dentro de GameManager.

Creo que esos fueron todos los cambios menores. Pero como dije, fueron muchas cosas y quizás me falto agregar algo.




Interfaz del Ranking


Creen un Canvas en la scena. Cambien los siguientes valores:
Unity

Agreguen un panel de fondo rojo llamado Background

Ahora vamos a crear la interfaz para cuando el jugador hace un nuevo puntaje máximo:

Agueren un Text con los siguientes valores:
posttutorial

Como ven le cambie la fuente a la que les mencione mas arriba.
Marque best fit, esto es para que la letra sea tan grande como se lo permita el tamaño del objeto. Y lo marque entre 14-200.
Lo puse centrado / centrado
Donde dice RectTransform, hacen click en la imagen, y seleccionan la que son 4 flechas azules.
Add Component > Outline > 2 / -2
En texto le puse "Nuevo Record" y le cambie el color a rojo

Dupliquen este objeto y cambien el texto a 9999999999 y ponganle color blanco. A este nuevo objeto cambienle el nombre a Score
Agueguen un InputField, agrandenlo.CharacterLimit 6(para que no puedan poner nombres muy largos)
En el "Placeholder Text" pongan "Nombre..." y cambienle los valores como hicimos con el texto de arriba(best fit, centrado, cambien la fuente, etc)

El que dice "Text" es el texto que va a escribir el player, háganle los mismos cambios(pueden escribir algo para ir viendo como se ve, pero después bórrenlo). Cambien el nombre del objeto a Name.

Agreguen un botton, y lo mismo que con InputField. Agrandenlo, cambien el tipo de letra, tamaño, etc. Cambien su texto y pónganle "Continuar", pueden cambiar el color del botón también.
En el botón, donde dice OnClick(), presionen el +, arrastren el objeto GameManager. Cambien donde dice function:
GameManager > InputNewScore

Terminar y publicar tu propio videojuego 2D desde 0 [5/5]

Así tiene que verse al terminar:
Accion

Creen un empty object dentro del canvas(asegúrense que este en el centro), nombrenlo NewHighscore. Y arrastren todo lo del ranking dentro de este objeto(osea todo menos el Background).

Déjenlo desactivado.

Ahora vamos a crear la interfaz que muestra el ranking:

Creen una nueva Imagen, ponganla en el centro estirada.
Creen un texto(cambien todo como en los anteriores) Ponganle el texto "Puntajes" y dejenlo centrado arriba del todo.
Creen un nuevo texto, estirenlo hasta abajo con la herramienta T(arriba donde marca las herramientas, la ultima es la T, y es para transformar objetos de UI)indie

Estiren este nuevo texto hasta casi abajo del todo. Cambien todos los valores como hicieron con los anteriores. Y nombrenlo Positions.

En el texto ponganle 1 enter 2 enter etc hasta el 10
videojuego

ctrl + D para duplicarlo, y muevanlo hacia el costado(mantengan shift presionado para que no se mueva arriba o abajo). Este nuevo objeto nombrenlo "Names" y háganlo un poco mas ancho.

Cambien los números por Name, y cambienle el color.

Vuelva a duplicar el objeto y muevanlo al costado. Nombrenlo Scores, y haganlo bastante mas ancho que Names. Cambienle el color, y a este cambienle "Horizontal Overflow" a Overflow.

Cambien name por muchos números en cada renglón para ver como se ve

Ahora pueden crear una nueva imagen, ponerla MUUUY finita, y usarla de renglón, duplican esta imagen y la van moviendo hacia abajo.
Dupliquen el text de arriba del todo(puntajes) y muevanlo hasta abajo del todo. Cambien el texto por "Tu: 9999999999"
plataforma

Finalmente dupliquen el boton que crearon en NewHighscore, y arrastren la copia fuera de NewHighscore para que sea visible.
Cambienle el nombre a Retry, ponganla a un costado, y cambien el texto por "Reintentar"
Cambien la variable OnClick por GameManager > Retry

Dupliquen de nuevo el boton, ponganlo del otro lado.
Renombrenlo Quit. Cambien el texto a "Salir"
Cambien la variable OnClick por GameManager > QuitGame

Creen un empty object en Canvas, fijense que este centrado. Nombrenlo "Ranking" y arrastren todo lo recién creado dentro.
Así deberia verse todo hasta ahora:
taringa

Finalmente seleccionen Ranking > Pestaña Animation > New Clip

Creen una animacion donde la escala del objeto Ranking es 0.1 en el primer frame, y 1 en el ultimo frame(el 30 mas o menos) también un poco antes del ultimo frame pongan el tamaño en 1.1 para que haga un leve efecto de rebote:
tutorial
Desactiven el Loop

Hagan lo mismo con el objeto NewHighscore.
Al terminar asegúrense de que ambos objetos estén desactivados
Finalmente desactiven el objeto Canvas
Para terminar vamos a arrastrar estos objetos a variables dentro de GameManager

  • CanvasUI: El objeto Canvas
  • RankingUI: El objeto Ranking
  • NewHighscoreUI: El objeto NewHighscore
  • NewScoreText: El objeto Score dentro de NewHighscore
  • PlayerName: El Text dentro del InputField
  • YourScore: El objeto al pie del Ranking que dice "Tu: 99999"
  • NameList: El objeto Names de Ranking
  • ScoresList: El objeto Scores de Ranking


juego





Terminar y Crear la Build


Llegados a este punto, deberíamos ser capaces de probar el juego:
Terminar y publicar tu propio videojuego 2D desde 0 [5/5]

En teoría no deberia haber errores. Si los hay es probable que sea mi culpa por olvidarme de algo.
Si les sale un error rojo, y dice algo así:
Accion

Es que falta arrastrar algo a una variable, si leen ahí les va a decir que es. Igualmente por cualquier error avísenme, puedan solucionarlo o no. Así lo arreglo acá!

Bueno, suponiendo que todo esta bien y sin errores. Salven la escena, y vayan a:
File > Build Settings... > AddOpenScenes > Build

Si todo esta bien, va a empezar el proceso para hacer la build en el directorio que le indiquen
indie

Ahí mismo pueden cambiar para hacer la build a otros lados, por ejemplo Android o Web. Pero casi siempre necesita algo mas de modificación en el juego.

Mas adelante quizás haga un Tuto sobre como exportar este mismo proyecto a otras plataformas.
También pensaba usar este mismo proyecto de base para otros, por ejemplo "Como usar Joystics" "Como jugar de a varios jugadores local", etc.

Si todo sale bien y no da errores, debería crearles un ejecutable, y una carpeta. Necesitan ambas cosas para poder jugar su juego.

Ya que esto finaliza el tutorial, les dejo en Google Drive, lmi carpeta del proyecto, pueden comparar con el suyo y ver si hay algún error o algo. Dentro también esta el juego pronto a jugar en Windows:
Carpeta del Proyecto y Juego en GoogleDrive

Y aquí pueden pasar y probarlo online en gamejolt:
Link al juego en Gamejolt

Aprovecho para comentarles que voy a empezar a poner mis tutoriales en mi blog, de manera mas ordenada y fácil. Ademas de tutos, voy a estar subiendo articulos, recomendaciones, y mis propios juegos.

Si les interesa el desarrollo de juegos, seguro les va a gustar el contenido del blog.
Link al blog de LazyDog

Bueno, con eso terminamos el tuto. Espero que algunos se hayan animado a hacerlo, y si lo hicieron y quieren compartirme sus trabajos, estoy a un MP de distancia videojuego

Abrazo!

7 comentarios - Terminar y publicar tu propio videojuego 2D desde 0 [5/5]

MasQyo +1
que genial, iré a ver tus post anteriores para seguir la linea
RichLazydog
Gracias! Espero que los disfrutes
kennikaiba +1
Me salte todas las partes, que picardía
+10
kennikaiba +1
Excelente trabajo amigo, hacer un videojuego es de mis proyectos pendientes, a favoritos y espero poder usarlo en un futuro