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 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: al crear un gerente, usted tiene que decidir algunos parámetros: Para dar otro ejemplo, mirada en este fragmento: 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: Voilà, tienes tu sprite está representada Si desea agregar parámetros a esta instancia, se puede manipular como cualquier otro mallas: Pero porque es un sprite, puede utilizar parámetros específicos: se puede cambiar su tamaño, de su orientación: 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: 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:
¿Cómo puedo hacer esto?
// 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);
var spriteManagerPlayer = nuevo BABYLON.SpriteManager ( «playerManagr», «Activos / Player.png», 2, 64, escena); 1varspriteManagerPlayer = newBABYLON.SpriteManager ( «playerManagr», «Activos / Player.png», 2,64, escena );
var = new playerInstance BABYLON.Sprite ( «jugador», spriteManagerPlayer); 1varplayerInstance = newBABYLON.Sprite ( «jugador», spriteManagerPlayer);!
player.position.y = -0.3;
player.size = 0,3; player.angle = Math.PI / 4; player.invertU = -1; 123player.size = 0,3; player.angle = Math.PI / 4; player.invertU = -1;
player.playAnimation (0, 40, verdadera, 100); 1player.playAnimation (0,40, es cierto, 100);
player.cellIndex = 44;
Mensajes relacionados