Crear un juego de tiro libre en baloncesto con Unity

Introducción

En este tutorial, aprenderá cómo crear un juego móvil en 3D usando C # y Unity. El objetivo del juego es anotar tantos puntos como sea posible. Aprenderá los siguientes aspectos del desarrollo de juegos de Unity:

• Configuración de un proyecto 3D en Unity
• Implementando controles de toque
• Integrando la física
• Creando prefabricados

1. Crea un nuevo proyecto de Unity

Abra Unidad y seleccione New Project en el menú File para abrir el nuevo diálogo del proyecto. Dile a Unity dónde quieres guardar el proyecto y configura el menú Set up defaults for: a 3D.

2. Configuraciones de compilación

En el siguiente paso, se le presenta la interfaz de usuario de Unity. Configure el proyecto para el desarrollo móvil eligiendo Build Settings en el menú File y seleccione su plataforma preferida. Elegí Android para este tutorial.

3. Dispositivos

Lo primero que debemos hacer después de seleccionar la plataforma a la que nos dirigimos es elegir el tamaño de las ilustraciones que usaremos en el juego. He enumerado los dispositivos más importantes para cada plataforma a continuación e incluí la resolución de pantalla y la densidad de píxeles del dispositivo.

iOS

• iPad: 1024px x 768px
• iPad Retina: 2048px x 1536px
• 3.5" iPhone/iPod Touch: 320px x 480px
• 3.5" iPhone/iPod Retina: 960px x 640px
• 4" iPhone/iPod Touch: 1136px x 640px

Android

Debido a que Android es una plataforma abierta, existen muchos dispositivos, resoluciones de pantalla y densidades de píxeles diferentes. Algunos de los más comunes se enumeran a continuación.

• Tablet Asus Nexus 7: 800px x 1280px, 216ppi
• Motorola Droid X: 854px x 480px, 228ppi
• Samsung Galaxy S3: 720px x 1280px, 306ppi

Windows Phone

• Nokia Lumia 520: 400px x 800px, 233ppi
• Nokia Lumia 1520: 1080px x 1920px, 367ppi

BlackBerry

• Blackberry Z10: 720px x 1280px, 355ppi

Recuerde que el código utilizado para este tutorial se puede utilizar para dirigirse a cualquiera de las plataformas anteriores.

4. Exportar Gráficos

Dependiendo de los dispositivos a los que te diriges, puede que necesites convertir la ilustración del juego al tamaño y resolución recomendados. Puede hacer esto en su editor de imágenes favorito. He utilizado la función Adjust Size... en el menú Tools en la aplicación Preview de OS X.

5. Interfaz de usuario de Unity

Antes de comenzar, asegúrese de hacer clic en el botón 3D en el panel Scene. También puede modificar la resolución que se muestra en el panel Game.

6. Interfaz Game

La interfaz de nuestro juego será directa. La captura de pantalla anterior le da una idea de la obra de arte que vamos a utilizar y cómo terminará viendose la interfaz del juego. Puede encontrar la ilustración y los recursos adicionales en los archivos fuente de este tutorial.

7. Lenguaje de programación

Puede usar uno de los tres lenguajes de programación cuando usa Unity, C#, UnityScript, una variación de JavaScript y Boo. Cada lenguaje de programación tiene sus pros y sus contras, y depende de usted decidir cuál prefiere. Mi preferencia personal va al lenguaje de programación C #, así que ese es el idioma que usaré en este tutorial.

Si decide utilizar otro lenguaje de programación, asegúrese de echar un vistazo a la Referencia de scripts de Unity para ver ejemplos.

8. Efectos de sonido

Utilizaré varios sonidos para mejorar la experiencia auditiva del juego. Los efectos de sonido utilizados en este tutorial se obtuvieron de as3sfxr y Soungle.

9. Modelos 3D

Para crear nuestro juego, primero necesitamos obtener nuestros modelos 3D. Recomiendo 3Docean para modelos de alta calidad, texturas y más, pero si está probando o todavía está aprendiendo, entonces los modelos gratuitos pueden ser un buen lugar para comenzar.

Los modelos de este tutorial se descargaron de SketchUp 3D Warehouse, donde puede encontrar una buena variedad de modelos de todo tipo.

Debido a que Unity no reconoce el formato de archivo de SketchUp, debemos convertir los archivos de SketchUp a un formato de archivo que Unity pueda importar. Comience por descargar la versión gratuita de SketchUp, SketchUp Make.

Abra su modelo 3D en SketchUp Make e ingrese Export > 3D Model en el menú File y elija Collada (*.dae) en la lista de opciones.

Elija un nombre, seleccione un directorio y haga clic en Export. Se creará un archivo y una carpeta para el modelo 3D. El archivo contiene los datos del objeto 3D y la carpeta de las texturas utilizadas por el modelo. Ahora puede importar el modelo en Unity como se explica en el siguiente paso.

10. Importar activos

Antes de comenzar a codificar, necesitamos agregar nuestros activos al proyecto de Unity. Puedes hacer esto de varias maneras:

• Seleccione Import New Asset en el menú Assets.
• Agregue los elementos a la carpeta de activos de su proyecto.
• Arrastre y suelte los activos en la ventana del proyecto.

Después de completar este paso, debe ver los activos en la carpeta Assets de su proyecto en el panel Project.

11. Crear escena

Estamos listos para crear la escena de nuestro juego arrastrando objetos al panel Hierarchy o Scene.

12. Fondo 2D

Comience arrastrando y soltando el fondo en el panel Hierarchy. Debería aparecer automáticamente en el panel Scene. Ajuste los valores Transform en el Inspector como se muestra en la siguiente captura de pantalla.

13. Aro

El objetivo del juego es tirar la pelota por el aro. Arrástrelo desde el panel Assets a la Scene y cambie sus propiedades Transform como se muestra en la captura de pantalla siguiente.

14. Luz

Como habrás notado, el aro de baloncesto está demasiado oscuro. Para solucionar esto, necesitamos agregar una Luz Light a nuestra escena. Vaya a GameObject > Create Other y seleccione Directional Light. Esto creará un objeto que producirá un rayo de luz. Cambie sus valores Transform como se muestra en la siguiente captura de pantalla para que ilumine el aro de baloncesto.

15. Colisionador de aro

Con el aro de baloncesto correctamente iluminado, es hora de agregar un colisionador para que la pelota no entre cuando golpee el área blanca.

Haga clic en el botón Add Component en el panel Inspector, seleccione Physics > Box Collider y modifique sus valores como se muestra en la siguiente captura de pantalla.

Verá un borde verde alrededor del aro de baloncesto en el panel Scene que representa el colisionador de cuadro que acabamos de agregar.

16. Física Material de rebote

Si lanzáramos una pelota al aro de baloncesto, sería detenido por el colisionador de cajas, pero se detendría sin rebotar como lo esperarías en el mundo real. Para remediar esto, necesitamos Physics Material.

Después de seleccionar Create > Physics Material en el menú Assets, debería ver que aparezca en el panel Assets. Cambié el nombre a BounceMaterial.

Cambie sus propiedades en el panel Inspector para que coincida con las de esta captura de pantalla siguiente.

A continuación, seleccione el colisionador de caja del aro de baloncesto y haga clic en el pequeño punto a la derecha del texto Material, aparecerá una ventana donde puede seleccionar physics material.

17. Colisionador de Basket

Usaremos otro colisionador para detectar cuando la pelota pasa a través del aro. Esto debería ser un colisionador de gatillo para asegurarse de que detecta la colisión sin interactuar con el cuerpo de física.

Cree un nuevo colisionador para el aro como se muestra en el paso 15 y actualice sus valores como se muestra en la siguiente captura de pantalla.

Esto colocará el colisionador debajo del anillo donde la bola no puede volver hacia arriba, lo que significa que se ha hecho una canasta. Asegúrese de marcar la casilla de verificación Is Trigger para marcarlo como un colisionador de disparo.

18. Colisionador de malla del Aro

Es hora de agregar un colisionador al anillo en sí. Debido a que necesitamos que la pelota pase por el centro del anillo, no podemos tener un colisionador de esfera o caja, en su lugar usaremos un Mesh Collider.

Un Mesh Collider nos permite usar la forma del objeto 3D como un colisionador. Como dice la documentación, Mesh Collider construye su representación de colisión a partir de la malla adjunta al GameObject.

Seleccione el aro del panel Hierarchy, haga clic en el triángulo a la izquierda para expandir su jerarquía, expanda group_17 y seleccione el elemento llamado Ring.

Agregue un colisionador como vimos en el paso 15, pero asegúrese de seleccionar Mesh Collider. Unity detectará automáticamente la forma del modelo y creará un colisionador para él.

19. Sonido al encestar

Para reproducir un sonido cuando la pelota golpea el aro, primero debemos unirlo. Selecciónelo desde la vista Hierarchy o Scene, haga clic en el botón Add Component en el panel Inspector y seleccione Audio Source en la sección Audio.

Desmarque Play on Awake y haga clic en el pequeño punto a la derecha, debajo del ícono de ajustes, para seleccionar el sonido que desea reproducir.

20. Bola

Vamos a centrarnos ahora en el baloncesto. Arrástrelo desde la carpeta Assets y colóquelo en la escena. No se preocupe por la posición de la pelota por ahora, porque la convertiremos en una Prefab más tarde.

Para hacer que la bola detecte cuando golpea el aro, necesitamos agregar un componente, un Sphere Collider para ser precisos. Seleccione la bola en la escena, abra el panel Inspector y haga clic en Add Component. De la lista de componentes, seleccione el Sphere Collider de la sección Physics y actualice sus propiedades como se muestra a continuación.

21. Bola RigidBody

Para detectar una colisión con la pelota de baloncesto, al menos uno de los objetos que colisionan debe tener un componente RigidBody conectado. Para agregar uno a la bola, seleccione Add Component en el panel Inspector y elija Physics > RigidBody.

Deje la configuración predeterminada y arrastre la bola desde el panel Hierarchy al panel Assets para convertirla en Prefab.

22. Aro Sprite

Para representar las cestas ya hechas por el jugador, usamos una versión 2D del aro de baloncesto. Arrástrelo desde el panel Activos y colóquelo en la escena como se muestra a continuación.

23. Puntuación de texto

Debajo del aro 2D, mostramos la cantidad de cestas que el jugador ha anotado hasta ahora. Seleccione GameObject > Create Other > GUI Text para crear un objeto de texto, colóquelo en la parte inferior del aro de baloncesto y cambie el texto en el panel Hierarchy a 0.

Puede incrustar una fuente personalizada importándola en la carpeta Assets y cambiando la propiedad Font del texto en el Inspector.

24. Medidor de fuerza

El medidor de fuerza es una barra que mostrará la fuerza utilizada para disparar la pelota. Esto agregará otro nivel de dificultad al juego. Arrastre los sprites del medidor de fuerza desde el panel Assets a la Scene y colóquelos como se muestra en la captura de pantalla siguiente.

25. Bola Sprite

También agregamos un indicador a la interfaz que muestra cuántas tomas le quedan al jugador. Para completar este paso, siga los mismos pasos que usamos para mostrar el puntaje actual del jugador.

26. Basket Script

Finalmente es hora de escribir un código. El primer script que crearemos es el script Basket que verifica si la pelota pasa por el ring o golpea el tablero.

Seleccione el aro y haga clic en el botón Add Component en el panel Inspector. Seleccione New Script y asígnele el nombre Basket. No olvides cambiar el idioma a C#. Abra el archivo recién creado y agregue el siguiente fragmento de código.

1

using UnityEngine;

2

using System.Collections;

3

4

public class Basket : MonoBehaviour

5

{

6

    public GameObject score; //reference to the ScoreText gameobject, set in editor

7

    public AudioClip basket; //reference to the basket sound

8

9

    void OnCollisionEnter() //if ball hits board

10

    {

11

        audio.Play(); //plays the hit board sound

12

    }

13

14

    void OnTriggerEnter() //if ball hits basket collider

15

    {

16

        int currentScore = int.Parse(score.GetComponent().text) + 1; //add 1 to the score

17

        score.GetComponent().text = currentScore.ToString();

18

        AudioSource.PlayClipAtPoint(basket, transform.position); //play basket sound

19

    }

20

}

En este script, establecemos dos variables públicas que representan objetos en Scene y en la carpeta Assets. Vuelva al editor y haga clic en el pequeño punto a la derecha de las variables para seleccionar los valores descritos en los comentarios.

Tocamos un sonido cuando la pelota golpea el aro de baloncesto y verificamos si la pelota pasa por el aro. El método Parse convertirá el texto del objeto del juego GUI Text a un número para que podamos incrementar el puntaje y luego establecerlo nuevamente como texto usando toString. Al final, tocamos el sonido de basket.

27. Shoot Script

La clase Shoot maneja el resto de la interacción del juego. Vamos a romper el contenido del script para que sea más fácil de digerir.

Comience seleccionando la Camera y haga clic en el botón Add Component en el panel Inspector. Seleccione New Script y asígnele el nombre Shoot.

28. Variables

En el siguiente fragmento de código, he enumerado las variables que usaremos. Lea los comentarios en el fragmento de código para obtener más información.

1

using UnityEngine;

2

using System.Collections;

3

4

public class Shoot : MonoBehaviour

5

{

6

    public GameObject ball; //reference to the ball prefab, set in editor

7

    private Vector3 throwSpeed = new Vector3(0, 26, 40); //This value is a sure basket, we'll modify this using the forcemeter

8

    public Vector3 ballPos; //starting ball position

9

    private bool thrown = false; //if ball has been thrown, prevents 2 or more balls

10

    private GameObject ballClone; //we don't use the original prefab

11

12

    public GameObject availableShotsGO; //ScoreText game object reference

13

    private int availableShots = 5;

14

15

    public GameObject meter; //references to the force meter

16

    public GameObject arrow;

17

    private float arrowSpeed = 0.3f; //Difficulty, higher value = faster arrow movement

18

    private bool right = true; //used to revers arrow movement

19

20

    public GameObject gameOver; //game over text

21

29. Aumenta la gravedad

A continuación, creamos el método Start en el que establecemos la fuerza de gravedad en -20 para hacer que la bola caiga más rápido.

1

void Start()

2

{

3

    /* Increase Gravity */

4

    Physics.gravity = new Vector3(0, -20, 0);

5

}

30. Comportamiento del medidor de fuerza

Para manejar las interacciones con el motor de física, implementamos el método FixedUpdate. La diferencia entre este método y el método Update habitual es que FixedUpdate se ejecuta en función de los pasos de la física en lugar de cada fotograma, lo que puede causar problemas si el dispositivo es lento debido a una escasez de memoria, por ejemplo.

En el método FixedUpdate, movemos la flecha del medidor de fuerza usando la variable right para detectar cuándo invertir el movimiento de la flecha.

1

    void FixedUpdate()

2

    {

3

        /* Move Meter Arrow */

4

5

        if (arrow.transform.position.x < 4.7f && right)

6

        {

7

            arrow.transform.position += new Vector3(arrowSpeed, 0, 0);

8

        }

9

        if (arrow.transform.position.x >= 4.7f)

10

        {

11

            right = false;

12

        }

13

        if (right == false)

14

        {

15

            arrow.transform.position -= new Vector3(arrowSpeed, 0, 0);

16

        }

17

        if ( arrow.transform.position.x <= -4.7f)

18

        {

19

            right = true;

20

        }

31. Dispara a la pelota

El baloncesto se lanza cuando el jugador toca la pantalla. Cada vez que se toca la pantalla, primero verificamos si ya hay una pelota en el aire y si el jugador tiene tiros disponibles. Si se cumplen estos requisitos, actualizamos los valores, creamos una nueva instancia de la pelota y la lanzamos usando el método addForce.

1

/* Shoot ball on Tap */

2

3

        if (Input.GetButton("Fire1") && !thrown && availableShots > 0)

4

        {

5

            thrown = true;

6

            availableShots--;

7

            availableShotsGO.GetComponent().text = availableShots.ToString();

8

9

            ballClone = Instantiate(ball, ballPos, transform.rotation) as GameObject;

10

            throwSpeed.y = throwSpeed.y + arrow.transform.position.x;

11

            throwSpeed.z = throwSpeed.z + arrow.transform.position.x;

12

13

            ballClone.rigidbody.AddForce(throwSpeed, ForceMode.Impulse);

14

            audio.Play(); //play shoot sound

15

        }

32. Retirar la bola

En el siguiente bloque de código, probamos si la pelota llega al piso y la quitamos cuando lo hace. También nos preparamos para el próximo lanzamiento reiniciando las variables.

1

/* Remove Ball when it hits the floor */

2

3

        if (ballClone != null && ballClone.transform.position.y < -16)

4

        {

5

            Destroy(ballClone);

6

            thrown = false;

7

            throwSpeed = new Vector3(0, 26, 40);//Reset perfect shot variable

33. Verificar tiros disponibles

Después de quitar la pelota, verificamos que el jugador tenga disparos. Si este no es el caso, finalizamos el juego y llamamos a restart.

1

/* Check if out of shots */

2

3

            if (availableShots == 0)

4

            {

5

                arrow.renderer.enabled = false;

6

                Instantiate(gameOver, new Vector3(0.31f, 0.2f, 0), transform.rotation);

7

                Invoke("restart", 2);

8

            }

9

        }

10

    }

34. restart

El método restart se ejecuta dos segundos después de que el jugador se quede sin disparos, reiniciando el juego invocando LoadLevel.

1

    void restart()

2

    {

3

        Application.LoadLevel(Application.loadedLevel);

4

    }

5

}

35. Prueba

Es hora de probar el juego. Presione Command-P para jugar en Unity. Si todo funciona como se espera, entonces estás listo para los pasos finales.

36. Configuración del reproductor

Cuando esté satisfecho con su juego, es hora de seleccionar Build Settings en el menú File y hacer clic en el botón Player Settings. Esto debería mostrar la Player Settings en el panel Inspector, donde puede establecer los parámetros para su aplicación.

Los ajustes son de aplicación e incluyen el creador o la compañía, resolución de la aplicación y modo de visualización, modo de reproducción, compatibilidad del dispositivo, etc. La configuración variará según la plataforma y los dispositivos a los que se dirige su aplicación y también cumplirán los requisitos de la tienda que publica en mente.

37. Iconos e imágenes Splash

Usando la obra de arte que creó anteriormente, ahora puede crear un icono agradable y una imagen de bienvenida para su juego. Unity le muestra los tamaños requeridos, que dependen de la plataforma para la que está construyendo.

38. Compila y juega

Una vez que su proyecto esté configurado correctamente, es hora de revisar las Build Settings y hacer clic en el botón Build. Eso es todo lo que se necesita para construir tu juego para probar y / o distribuir.

Conclusión

En este tutorial, hemos aprendido sobre modelos 3D, colisionadores de malla, materiales de física, detección de colisiones y otros aspectos del desarrollo de juegos de Unity. Te animo a experimentar con el resultado y personalizar el juego para que sea tuyo. Espero que les haya gustado este tutorial y lo haya encontrado útil.