La creación de 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 con usted o le comprarán sus juegos directamente. Si tiene talento, puede ganar fácilmente varios miles de dólares al mes en reparto de 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 te preguntas cómo crear juegos Unity WebGL, ¡sigue leyendo!
Requisitos
- Unidad
- Conocimientos de HTML5 / JavaScript
- (Opcional) Un buen editor de texto como Bloc de notas ++
Para comenzar, descargue e instale Unity, y asegúrese de instalar el componente de soporte de WebGL.
Cuando Unity se inicia por primera vez, tómate un minuto para acostumbrarte a la interfaz de usuario y los menús, especialmente el Jerarquía panel: 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 un nivel de juego o el menú principal.
También tienes el Juego pestaña (para probar el juego dentro del editor), y a la derecha está la Inspector panel. Aquí es donde se pueden editar los elementos, por ejemplo, luces, actores, etc.
Si hace clic en el Luz direccional en el menú Jerarquía, le dará un montón de información sobre esta luz en particular, y podrá habilitar / deshabilitar las sombras proyectadas desde ella.
Finalmente, tienes el Proyecto ventana en la parte inferior, que solo mantiene una pestaña de los archivos que se utilizan para crear su proyecto.
Después de familiarizarse un poco con la interfaz de usuario, continúe y guarde la escena actual. Ir Archivo> Guardar escena y 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 él.
Ahora vamos a crear algo realmente simple: un tipo de juego de 'plataformas', donde nuestro personaje simplemente salta por las plataformas. Caer significa muerte. Haremos esto en 3D / vista en primera persona, por lo que un personaje realmente no modela; de hecho, solo usaremos un objeto simple 'esfera' para nuestro personaje, porque es el más simple de crear.
Entonces en el Jerarquía panel, haga clic en 'Crear' y edite estas propiedades:
- Posición {X: 0, Y: 2.5, Z: 0}
- Scale { X: 0.3, Y: 0.3, Z: 0.3 }
Si presiona el ' Tocar ”, Debería mostrar una esfera simple en la vista de la cámara. Ahora queremos agregar gravedad y física de salto a nuestro 'personaje'.
Entonces en el Inspector panel, agregue un componente a la esfera y elija Cuerpo rígido - además, no queremos que la esfera girar , vaya a Constaints> elija todos los ejes en el Rotación zona.
Ahora necesitamos crear algún tipo de plataforma para que nuestro personaje no caiga sin cesar en el juego. Así que agrega un cubo y establece el Scale Y valor para 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' un poco cuando golpee la plataforma del cubo. Necesitamos crear un nuevo material de física y aplicarlo a la esfera, para que nuestro personaje tenga propiedades de rebote.
Cree una nueva subcarpeta en el Bienes directorio y asígnele un nombre como 'Materiales', y luego cree un nuevo material de física. Llámalo 'Bouncy_blob' o como quieras.
Ahora en el Inspección panel, agregue estos valores al material hinchable:
- 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 un 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 un 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 Jerarquía panel 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 Golpe de líder , Se vuelve un poco más avanzado, ya que tendrá varias cámaras configuradas por modelo.
En cualquier caso, debe editar la cámara así:
- Posición {X: 0, Y: 1, Z: 0}
- Rotation { X: 90, Y: 0, Z: 0 }
- Scale { 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 una sensación de 'perspectiva' sobre la altura del salto, agregaremos un foco. Así que modifique los valores del foco para:
- Rotation { 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 Proyectos panel, agregue una nueva carpeta y asígnele el nombre 'Scripts'. Ahora agregue un JavaScript al 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 medio 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). Tendremos que llamar a la función Actualizar para lograr esto. Así que modifique el script bajo la variable Actualizar:
Para explicar un poco, 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 una 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 Corta vida , 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 un menú de juego y exportarlo todo a un sitio web usando WebGL. , para jugar en un navegador.
Creación de plataformas procedimentales
Entonces, en la primera parte 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 un millón de plataformas, queremos que Unity automáticamente crear plataformas 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 de un objeto de 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 podría 'prefabricar' una escena completa de objetos del juego.
Entonces, lo que debe hacer es crear una nueva carpeta de activos llamada Prefabricados , luego arrastre y suelte nuestra plataforma desde el Jerarquía panel en esta nueva carpeta. Las casas prefabricadas 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 un poco este 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: float coloca un límite en el eje y, por lo que cuando nuestro personaje salta mayor más allá de este límite, se creará un nuevo panel.
- Rotación de var privada: Quaternion; simplemente agrega una rotación necesaria para crear una instancia de nuestras casas prefabricadas; sin embargo, estamos agregando 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 variable privada final 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 secuencia de comandos, agregaremos una marca 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, lo haremos elevar 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 un hacer mientras bucle en este código para garantizar que los valores X y Z del vector (su posición en el mundo del juego) no sean idénticos a las plataformas anteriores, por lo que nuestras plataformas generadas por procedimientos siempre aumentarán en altura.
Por supuesto, no queremos que estos valores sean estrictamente colocado: un poco de aleatoriedad es algo bueno; de lo contrario, solo estamos haciendo una escalera perfecta. Entonces usamos el Rango aleatorio función, entre valores -1 y 2, para llamar valores aleatorios para X y Z. Puedes jugar un poco con estos números si quieres perder el tiempo.
Crear un 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, te caerás sin cesar; necesitamos escribir un guión en un menú de 'muerte' / juego para comenzar de nuevo.
Básicamente, escribiremos una secuencia de comandos que compruebe si nuestra esfera (personaje) cae por debajo 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 de un umbral específico. Entra en el GameManager guión que hicimos anteriormente y busque el Si declaración de la actualizar función.
Vamos a utilizar un si no declaración aquí, para verificar 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 juego terminado Will ... bueno, ese fragmento de guión se explica por sí mismo.
Ese último fragmento de secuencia de comandos es la función que se utilizará para manejar un estado de 'juego terminado' y cargar nuestro menú de juego.
Esto recuerda a Unity Solicitud clase: podemos llamar al Nivel de carga función para abrir una nueva escena, que en este caso, es simplemente nuestro menú de juego - recuerde 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 una barra de carga.
En cualquier caso, necesitamos crear una escena a través de Archivo> Nueva escena y dale el nombre Menú mientras lo guarda. Luego, agregaremos ambas escenas al proceso de construcción. Esto se hace a través de Archivo> Configuración de compilación .
Nuestra escena del menú debería estar abierta, así que simplemente haga clic en el botón 'Agregar actual' y agregue la escena a su Configuración de construcción - haz esto de nuevo con la escena del 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 un botón de 'Inicio' para los jugadores
Ahora, podemos jugar el juego en un modo de prueba, pero a partir de ahora, los jugadores no tienen forma de comenzar el juego si tuviéramos que cargar este juego en algún lugar. Entonces, necesitamos crear un menú de juego que tenga un botón para iniciar el juego.
Así que cambie a la escena del menú del juego y agregue este bit a la cámara ( en el panel Inspector, recuerde pt. 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 hexadecimal - entonces 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 quieres 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 IU de la misma manera que agregamos elementos 3D, a través del Jerarquía panel. Así que adelante y crea un Botón UI , y verá algunos elementos nuevos en el Jerarquía panel:
- EventSystem
- Lona
- Botón
- Texto
Para romper esto - el lona 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, ya que responderá a las preguntas que usted haga. Es mejor dejarlo para los scripts de IA). 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 hacerlo un poco más elegante, puede eliminar la 'imagen de origen' del botón y establecer un color para ella. Y para cambiar el texto del botón, simplemente edite el Texto elemento a algo como 'INICIAR JUEGO', y asígnele un tamaño de fuente de alrededor de 16.
Para hacer el botón se puede hacer clic , agregaremos una función al script UIController en el Botón elemento. Simplemente agregue este código a continuación:
Aplicar esta función a los botones Inspector ajustes, y en el Botón (secuencia de comandos) configuración del componente, simplemente agregaremos una función que se ejecuta cuando el jugador hace clic en nuestro botón Inicio. Así que simplemente agregue una función al Al hacer clic() evento 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 el botón Inspector ajustes. En la configuración del componente Button (Script), podemos ejecutar una función cada vez que un 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 un juego de navegador WebGL
Abra la configuración de compilación y elija WebGL como su plataforma de destino. Ahora haga clic en el Plataforma de cambio botón y, finalmente, haga clic en el Construir y dale un título a tu 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, hay 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ños demos 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