Tabla de contenidos

Aprender WebGL y Babylon.js a su propio ritmo

no dude en visitar nuestra línea de golf en 3D con WebGL Programación y Babylon.js para principiantes en Zenva Academia. El curso cubre el marco Babylon.js y explica todo lo que necesita para empezar con el uso de esta fantástica biblioteca en proyectos nuevos o existentes.

¿Qué se puede esperar

En este tutorial, vamos a aprender cómo manipular Sprites. Sprites son la imagen / animación 2D, y vamos a utilizar para mostrar una imagen con canal alfa siempre frente a la cámara.

Hoy en día, los sprites se utiliza a menudo para mostrar personajes animados, para las partículas, o para simular objetos complejos en 3D como los árboles.


Resultado final

¿Cómo puedo hacer esto?

1- Gestor de Sprite

Si desea utilizar sprites, es necesario crear un “gestor de Sprite” a los recursos optimizar la GPU mediante la agrupación en un mismo lugar varias instancias de un sprite. Este entrenador es obligatorio, incluso si desea crear un sprite. Sólo tienes que escribir:
// Crear un sprite de spriteManagerTrees managervar = new BABYLON.SpriteManager ( «treesManagr», «Activos / Palm-arecaceae.png», 2000, 800, escena); 12 // crear un sprite managervarspriteManagerTrees = newBABYLON.SpriteManager ( «treesManagr», «Activos / Palm-arecaceae.png», 2000.800, escena);

al crear un gerente, usted tiene que decidir algunos parámetros:


  • Nombre: un nombre para este gerente
  • La URL de la imagen en 2D (la mayor parte del tiempo, se prefiere usar un formato de imagen que contienen canal alfa como PNG)
  • La capacidad de este gestor: el número máximo de instancias en este gerente (en nuestro ejemplo, podría crear 2.000 casos de árboles)
  • El tamaño de la celda, que corresponde al tamaño de la imagen, como veremos a continuación.
  • La escena real, para añadir este gerente a la escena

    Para dar otro ejemplo, mirada en este fragmento:
    var spriteManagerPlayer = nuevo BABYLON.SpriteManager ( «playerManagr», «Activos / Player.png», 2, 64, escena); 1varspriteManagerPlayer = newBABYLON.SpriteManager ( «playerManagr», «Activos / Player.png», 2,64, escena );

    Esta vez, sólo queremos 2 instancias, y nos dijo que el tamaño de nuestra sprites es 64. Esto es lo que nuestra imagen parezca:


    Cada imagen de un sprite debe estar contenido en un cuadrado de 64 píxeles, ni más ni menos.

    2- Crea una instancia

    Ahora que tenemos nuestro manager, podemos crear instancias de nuestra sprites vinculado a este entrenador. Creación de una instancia es tan fácil como:
    var = new playerInstance BABYLON.Sprite ( «jugador», spriteManagerPlayer); 1varplayerInstance = newBABYLON.Sprite ( «jugador», spriteManagerPlayer);!

    Voilà, tienes tu sprite está representada

    Si desea agregar parámetros a esta instancia, se puede manipular como cualquier otro mallas:
    player.position.y = -0.3;

    Pero porque es un sprite, puede utilizar parámetros específicos: se puede cambiar su tamaño, de su orientación:
    player.size = 0,3; player.angle = Math.PI / 4; player.invertU = -1; 123player.size = 0,3; player.angle = Math.PI / 4; player.invertU = -1;

    3 – Sprite animación

    Una de las ventajas de sprites es animaciones. Sólo tiene que cargar un archivo de imagen de gran tamaño que contendrá todas las imágenes animaciones, uno al lado de otro. Sólo tenga cuidado de respetar el tamaño de los cubos ya había indicado en el administrador (por ejemplo, 64 píxeles).

    Esto es lo que se ve una completa imagen de sprite como:


    Esto animará a nuestros jugadores en más de 40 posiciones, dependiendo de la situación (caminar, saltar, …). motor de Babilonia está leyendo de forma automática sprites en más de una línea, por lo que ya no funciona para usted  Si desea comenzar la animación, simplemente llamar a esta función:
    player.playAnimation (0, 40, verdadera, 100); 1player.playAnimation (0,40, es cierto, 100);

    Al llamar «ReproducirAnimación» con esos parámetros, nuestro jugador se animarán a partir de la trama 0 a 40 enmarcar. los terceros parámetros está indicando si bucle de animación o no. Y el último es el retraso entre dos marcos (más pequeña que sea, más rápido es la animación).

    Por último, si quieres ir a una imagen precisa (por ejemplo, la última, cuando el personaje no se mueve), simplemente llame a:
    player.cellIndex = 44;

    Mensajes relacionados

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *