Cómo Crear Un Juego Básico De Plataforma Unity

2023 Autor: Kayla Nelson | [email protected]. Última modificación: 2023-05-24 12:02

En este tutorial exclusivo de Appual, veremos cómo configurar Unity (con soporte WebGL) y crear su primer proyecto de juego. Para este tutorial, puede clonar otro juego en línea, pero si desea crear sus propios juegos de navegador, debe tener algo de experiencia en programación HTML5 / JavaScript (y tal vez C ++, si quiere ser elegante).

Crear juegos basados en navegador en Unity WebGL puede ser bastante gratificante: hay muchos sitios web de portales de juegos que dividirán los ingresos publicitarios contigo o te comprarán tus juegos directamente. Si tiene talento, puede ganar fácilmente varios miles de dólares al mes en participación en los ingresos publicitarios. Unity con WebGL es una de las mejores herramientas para esto, y con los complementos de WebVR, también puede brindar soporte de realidad virtual a sus juegos con bastante facilidad.

Entonces, si se pregunta cómo crear juegos Unity WebGL, ¡siga leyendo!

Requisitos

• Unidad
• Conocimientos de HTML5 / JavaScript
• (Opcional) buen editor de texto como NotePad ++

Para comenzar, descargue e instale Unity y asegúrese de instalar el componente de soporte de WebGL.

Cuando Unity se inicie por primera vez, tómese un minuto para acostumbrarse a la interfaz de usuario y los menús, especialmente el panel Jerarquía, que contiene todos los elementos de la escena actual. Básicamente, es la vista principal de cualquier cosa en la que estés trabajando, ya sea en el nivel del juego o en el menú principal.

También tienes la pestaña Juego (para probar el juego dentro del editor), y a la derecha está el panel Inspector. Aquí es donde se pueden editar los elementos, por ejemplo, luces, actores, etc.

Si hace clic en el botón Luz direccional en el menú Jerarquía, le dará mucha información sobre esta luz en particular, y podrá habilitar / deshabilitar las sombras proyectadas desde ella.

Finalmente, tiene la ventana Proyecto en la parte inferior, que solo mantiene la pestaña de los archivos que se utilizan para crear su proyecto.

Después de familiarizarse con la interfaz de usuario por un momento, continúe y guarde la escena actual. Vaya a Archivo> Guardar escena y se abrirá un cuadro de diálogo para una carpeta "Activos". Es una práctica estándar mantener las cosas organizadas en subcarpetas al desarrollar juegos, así que cree una subcarpeta llamada "Escenas" y guarde la escena en ella.

Ahora vamos a crear algo realmente simple: el tipo de juego de "plataformas", en el que nuestro personaje simplemente salta por las plataformas. Caer significa muerte. Haremos esto en 3D / vista en primera persona, por lo que el personaje realmente no modela; de hecho, solo usaremos un objeto simple de "esfera" para nuestro personaje, porque es el más simple de crear.

Entonces, en el panel Jerarquía, haga clic en "Crear" y edite estas propiedades:

• Posición {X: 0, Y: 2.5, Z: 0}
• Escala {X: 0.3, Y: 0.3, Z: 0.3}

Si presiona el botón "Reproducir", debería mostrar una esfera simple en la vista de cámara. Ahora queremos agregar gravedad y física de salto a nuestro "personaje".

Entonces, en el panel Inspector, agregue un componente a la esfera y elija Rigidbody; además, no queremos que la esfera gire, así que vaya a Constaints> elija todos los ejes en el área de Rotación.

Ahora necesitamos crear algún tipo de plataforma para que nuestro personaje no caiga interminablemente en el juego. Así que agregue un cubo y establezca el valor de Escala Y en 0.1 - ahora, si "juegas" la escena de nuevo, nuestro personaje debería "caer" en el cubo.

Ahora vamos a agregar algo de física, para que nuestro personaje "rebote" poco cuando golpee la plataforma del cubo. Necesitamos crear nuevo material de física y aplicarlo a la esfera, para que nuestro personaje tenga propiedades de rebote.

Cree una nueva subcarpeta en el directorio de Activos y asígnele el nombre "Materiales", y luego cree un nuevo material de física. Llámalo "Bouncy_blob" o como quieras.

Ahora, en el panel de inspección, agregue estos valores al material que rebota:

• Fricción dinámica: 10
• Ficción estática: 10
• Rebote: 1
• Combinación de fricción: máxima
• Rebote combinado: máximo

También deberíamos agregar material de física a la plataforma debajo de nuestra esfera; esto será para que nuestra esfera rebote con una altura creciente en cada rebote. Así que cree otro material y asígnele el nombre "Platform_bouncing", y asígnele los valores de:

• Fricción dinámica: 0.9
• Ficción estática: 0.9
• Rebote: 1
• Combinación de fricción: promedio
• Combinación de rebote: multiplicar

Ahora, cuando presione el botón "Reproducir", notará que nuestro personaje rebota más alto en cada rebote.

Para agregar algo de color / textura a la plataforma, cree un nuevo material y haga clic en la pestaña "Albedo", luego dele color. Puede arrastrar y soltar este material en la plataforma y cambiará de color.

Para una perspectiva en primera persona, solo necesita arrastrar y soltar la cámara en el panel Jerarquía en nuestra esfera; esto hará que la cámara siga a nuestro personaje en todo momento. Esta premisa sigue siendo la misma para cualquier tipo de juego de Unity en primera persona, pero si estás creando un juego de FPS multijugador como Leader Strike, se vuelve un poco más avanzado, ya que tendrás varias cámaras configuradas por modelo.

En cualquier caso, es necesario editar la cámara como para:

• Posición {X: 0, Y: 1, Z: 0}
• Rotación {X: 90, Y: 0, Z: 0}
• Escala {X: 2.5, Y: 2.5, Z: 2.5}
• Banderas claras: color sólido
• Fondo: # 000
• Campo de visión: 80,3

Ahora, para darnos un sentido de "perspectiva" sobre la altura del salto, agregaremos el foco. Así que modifique los valores de Spotlight para:

Rotación {X: 90, Y: 0, Z: 0}

Ahora queremos programar los controles del juego, de modo que podamos usar nuestro mouse para controlar el movimiento del personaje. Necesitamos un guión para esto.

En el panel Proyectos, agregue una nueva carpeta y asígnele el nombre "Scripts". Ahora agregue JavaScript a la cámara y asígnele el nombre "InputController", y también agréguelo a la carpeta "Scripts" que acaba de crear. Ahora, cuando hace doble clic en el script, puede editar sus propiedades.

Cuando abre el script en el editor de script predeterminado de Unity, debería verse así:

Así que queremos que la variable "GameObject" haga referencia a nuestro personaje; para esto, simplemente puede volver a la vista de cámara de Unity y arrastrar / soltar nuestra esfera en el campo de entrada.

Ahora queremos asignar la mitad del ancho y alto de la pantalla a la función Inicio. Así que edite el script para que se vea así:

Así que ahora solo necesitamos los valores del mouse (para siempre que sea movido por el jugador). Necesitaremos llamar a la función Actualizar para lograr esto. Así que modifique el script en la variable Actualizar:

Para explicar bit, las variables X y Z son para el eje del controlador; queremos que manipulen la posición de nuestro personaje cuando enviamos la entrada del controlador al juego. Necesitamos hacer referencia a la variable Input.mousePosition, que nos da un vector 2D. Este vector 2D debe agregarse a nuestro seguimiento de coordinación, por lo que llamaremos a la función setHeroPosition con los valores como argumentos.

Así que crea un nuevo script, llámalo HeroController y adjuntarlo a nuestra esfera / personaje. Edite el script para que se vea así:

Ahora, cuando presionas el botón "Jugar", deberías poder navegar con el personaje por la plataforma con el mouse, ¡e incluso caerte de la plataforma! Nuestro objetivo final es crear un juego de plataformas similar a Short Life, por lo que profundizaremos un poco más en este juego en la próxima guía.

Eso concluye los conceptos básicos de la creación de un juego muy simple en Unity: en la siguiente parte de esta guía, veremos cómo agregar más escenarios al nivel, agregar el menú del juego y exportarlo todo al sitio web usando WebGL, para jugar. en el navegador.

Creación de plataformas procedimentales

Entonces, en la parte uno de este tutorial, acabamos de crear una plataforma básica en la que tu personaje puede rebotar (y caer a su perdición), pero para un verdadero juego de plataformas, necesitamos agregar plataformas adicionales. Pero no queremos agregar millones de plataformas; queremos que Unity cree plataformas automáticamente a medida que nuestro personaje rebota.

Para ello, necesitamos una plantilla de plataforma, también conocida como "prefabricada". Prefab es la abreviatura de prefabricado, y simplemente significa "prefabricado", generalmente una copia del objeto del juego que puedes reutilizar una y otra vez. De hecho, las casas prefabricadas pueden contener jerarquías de los objetos del juego, lo que significa que puede "prefabricar" una escena completa de los objetos del juego.

Entonces, lo que debe hacer es crear una nueva carpeta de activos llamada Prefabs, luego arrastre y suelte nuestra plataforma desde el panel Jerarquía a esta nueva carpeta. Los prefabricados serán reconocibles en el panel Jerarquía por el color azul.

Ahora, para instruir a Unity para que cree plataformas de procedimiento, necesitamos crear un script llamado GameManager y adjuntarlo a la cámara. Los scripts de GameManager contienen básicamente instrucciones importantes para que el motor las transmita al juego; en este caso, generará plataformas a medida que nuestro personaje avanza.

La razón por la que lo adjuntamos a la cámara es porque la cámara nunca se destruye y permanece constante, por lo que el guión nunca se destruye y permanece constante al estar adjunto a él.

Esto es lo que debe incluirse en el script:

Para explicar este bit de código, es necesario que creemos una referencia tanto al panel prefabricado como a la esfera (nuestro personaje), por lo que debes arrastrarlos y soltarlos en sus espacios específicos en tu editor.

Este código también contiene tres variables privadas: las líneas que comienzan con var privada. Estos instanciarán (referenciarán) el panel prefabricado de las siguientes maneras:

• Límite var privado: el flotador coloca el límite en el eje y, por lo que cuando nuestro personaje salte más alto que este límite, se creará un nuevo panel.
• Rotación de var privada: Quaternion; simplemente agrega la rotación necesaria para crear instancias de nuestras casas prefabricadas; sin embargo, estamos agregando la rotación = Quaternion.identify; porque esto indica al motor que no gire el objeto del juego. El objeto (nuestros paneles prefabricados) estará literalmente "perfectamente alineado" con el mundo.
• La última variable privada lastPlatformPosition recordará y guardará la posición de la última plataforma como un vector 3D (básicamente, las plataformas no desaparecerán detrás de ti, por lo que puedes retroceder por el mundo del juego si quieres).

En el siguiente fragmento de la secuencia de comandos, vamos a agregar una verificación para cada cuadro si nuestra esfera (personaje) está o no por encima del límite (que genera nuevas plataformas); si nuestro personaje está por encima del límite, aumentaremos el límite del límite. para crear un nuevo panel / plataforma más alto que el anterior.

Nuestro siguiente paso es agregar código que determina la siguiente posición del panel:

Estamos usando el bucle do while en este código para asegurarnos de que los valores X y Z del vector (su posición en el mundo del juego) no sean idénticos a los de las plataformas anteriores, por lo que nuestras plataformas generadas por procedimientos siempre aumentarán en altura.

Por supuesto, no queremos que estos valores se coloquen estrictamente; un poco de aleatoriedad es algo bueno; de lo contrario, solo estamos haciendo una escalera perfecta. Así que estamos usando la función Random. Range, entre los valores -1 y 2, para llamar valores aleatorios para X y Z. Puedes jugar con estos bits de números si quieres perder el tiempo.

Crear menú de juego

Hasta ahora, hemos creado un "juego" en el que puedes saltar con una altura creciente y mover el mouse para controlar la dirección. El problema es que si te caes de la plataforma, caerás sin cesar; necesitamos escribir el guión en el menú "muerte" / juego para empezar de nuevo.

Básicamente, escribiremos un guión que verifique si nuestra esfera (personaje) cae por debajo de la primera plataforma del juego. Si es así, el guión cargará una nueva escena.

Nuestro primer paso será comprobar si la esfera ha caído por debajo del umbral específico. Vaya al script de GameManager que hicimos anteriormente y busque la declaración if de la función de actualización.

Vamos a utilizar una declaración else if aquí, para comprobar si la posición de nuestra esfera está por debajo de -2,0 unidades de la posición Y; si es así, nuestra función privada gameOver … bueno, ese fragmento de secuencia de comandos se explica por sí mismo.

Ese último fragmento de secuencia de comandos es la función que se utilizará para manejar el estado de "juego terminado" y cargar nuestro menú de juego.

Esto recuerda a la clase Application de Unity: podemos llamar a la función LoadLevel para que aparezca una nueva escena, que en este caso es simplemente nuestro menú de juego; recuerda que básicamente todo en Unity son "niveles". Los menús principales (Iniciar juego - Opciones - Créditos - Etc.) son básicamente niveles / escenas con fragmentos de texto en los que se puede hacer clic. Algo así como las pantallas de carga de Skyrim, ¿eh? Son solo modelos 3D en un espacio mundial vacío con barra de carga.

En cualquier caso, necesitamos crear una escena a través de Archivo> Nueva escena, y darle el nombre Menú mientras la guardamos. Luego, agregaremos ambas escenas al proceso de construcción. Esto se hace a través de Archivo> Configuración de compilación.

Nuestra escena de menú debería estar todavía abierta, así que simplemente haga clic en el botón "Agregar actual" y agregue la escena a su Configuración de construcción; haga esto nuevamente con la escena de nivel.

Cuando morimos en el juego, el guión que creamos debería hacernos pasar del nivel del juego a la escena del menú.

Agregar el botón "Inicio" para los jugadores

Ahora, podemos jugar el juego en modo de prueba, pero a partir de ahora, los jugadores no tienen forma de comenzar el juego si tuviéramos que subir este juego a alguna parte. Entonces necesitamos crear un menú de juego que tenga un botón para iniciar el juego.

Así que cambia a la escena del menú del juego y agrega este bit a la cámara (en el panel Inspector, ¿recuerdas el punto 1 de este tutorial?).

• Banderas claras: color sólido
• Fondo: # 000
• Ancho: 200
• Altura: 60

Esto nos dará un fondo negro sólido para nuestro menú de juego, esto se hace en valores RGB, no en hexadecimal, por lo que el azul sería 001, el verde es 010, el rojo es 100, etc. Podría explicártelo, pero todo lo que necesitas. hacer es Google "selector de RGB" si desea un color específico.

Continuando, necesitamos agregar nuestro botón para comenzar el juego. Esto se hace a través de elementos de la interfaz de usuario; básicamente, podemos agregar elementos de la interfaz de usuario de la misma manera que agregamos elementos 3D, a través del panel Jerarquía. Así que adelante, cree el botón de IU y verá algunos elementos nuevos en el panel Jerarquía:

• EventSystem
• Lienzo
• Botón
• Texto

Para desglosar esto, el lienzo es nuestro contenedor para todos los elementos de la interfaz de usuario, y podemos hacerlo receptivo (por receptivo me refiero a "escalar al tamaño de la pantalla", no receptivo como si respondiera las preguntas que usted hace.. En cualquier caso, vamos a cambiar la posición del botón a esto:

• Rect Transform {Pos X: 0, Pos Y: 0, Pos Z: 0}
• Rect Transform {Ancho: 200, Alto: 60}

Para hacer esto un poco más elegante, puede eliminar la "imagen de origen" del botón y configurar el color. Y para cambiar el texto del botón, simplemente edite el elemento Text a algo como "INICIAR JUEGO", y asígnele un tamaño de fuente alrededor de 16.

Para hacer que se pueda hacer clic en el botón, agregaremos una función al script UIController en el elemento Button. Simplemente agregue este fragmento de código a continuación:

Aplique esta función a la configuración del Inspector del botón, y en la configuración del componente Botón (Script), simplemente agregaremos una función que se ejecuta cuando el jugador hace clic en nuestro botón Inicio. Así que simplemente agregue la función al evento On Click () y arrastre / suelte el botón Iniciar juego en el campo de entrada. Finalmente, seleccione la función recién creada del script UIController (UIController. StartGame)

Podemos aplicar esta función en la configuración del Inspector del botón. En la configuración del componente Button (Script), podemos ejecutar la función cada vez que el jugador hace clic en ella. Para esto, agregamos una nueva función al evento On Click (), haciendo clic en el icono +. Ahora podemos arrastrar y soltar el botón en el campo de entrada. Luego seleccionamos la función que acabamos de escribir del script UIController (UIController. StartGame).

Cómo exportar / publicar como juego de navegador WebGL

Abra la configuración de compilación y elija WebGL como su plataforma de destino. Ahora haga clic en el botón Cambiar plataforma y, finalmente, haga clic en el botón Construir y asigne el título de su juego. Después de que se compile, se exportará / guardará como un archivo. HTML, que se puede abrir / ver en cualquier navegador compatible con WebGL. Aunque si quieres publicar tu juego, existen dos métodos para lograrlo:

• Sube tu juego a algún tipo de host de archivos (Dropbox, Google Drive, etc.), luego comparte el enlace. Esto es útil para pequeñas demostraciones que desea mostrar a amigos o clientes potenciales (sitios web de portales de juegos que comprarán su juego o establecerán un ingreso compartido de anuncios con usted).
• Sube tu juego a un servidor FTP de tu propiedad e incorpóralo en un formato como este:.

Puede modificar esos valores de iframe y hacer varias cosas diferentes con ellos. Por ejemplo, agregar un iframe como allowfullscreen = true permitiría que el juego de su navegador pasara a pantalla completa.

Recursos adicionales:

Recomendaría no intentar publicar este juego que hicimos en este tutorial en el portal de juegos de plataforma; te verás realmente tonto sin pulirlo un poco primero.

Una forma de hacer que tu juego se vea mucho mejor, especialmente si no eres particularmente bueno creando modelos 3D, es utilizar recursos gratuitos (o pagos). Aquí hay algunas bibliotecas que vale la pena consultar:

• Unity Asset Store (tienda de recursos oficial de Unity; aquí también hay muchas opciones gratuitas)
• Sketchfab: modelos 3D de Unity
• Deviantart: modelos Unity 3D
• Mundos procedimentales: activos de Unity
• GameArt2D: Freebies (principalmente activos basados en sprites / píxeles)

Hay muchísimos recursos por ahí, solo debes tener cuidado y leer las letras pequeñas: algunos activos gratuitos pueden usarse en proyectos comerciales, otros solo te permiten utilizar sus recursos si tu juego es gratuito.