Instanciación de Prefabs en 1.2.0

La instanciación de prefabs es el proceso de crear objetos y componentes a partir de un archivo .bin/.glb.

Dado que el nuevo método de instanciación se basa en el concepto de multiescena, te recomendamos echar un vistazo rápido a nuestro artículo del blog sobre multiescena primero.

Antes de 1.2.0 

La instanciación de un “prefab” estaba disponible a través del método append (ahora en desuso):

1const promises = [];
2for (let i = 0; i < 100; ++i) {
3    promises.push(await engine.scene.append('Zombie.bin'));
4}
5await Promise.all(promises);

Esta API viene con limitaciones:

• La escena necesita ser descargada y procesada 100 veces
• Cada Zombie.bin crea nuevos meshes, textures y materials

¡Veamos cómo Wonderland Engine 1.2.0 ayuda a resolver esos problemas!

Instanciación 

Cualquier escena cargada a través de loadScene puede ser el destinatario de una instanciación:

1const mainScene = await engine.loadMainScene('Scene.bin');
2const zombie = await engine.loadPrefab('Zombie.bin');
3
4// Crear una horda de zombis
5for (let i = 0; i < 100; ++i) {
6    const {root} = mainScene.instantiate(zombie);
7}

Dado que el resultado es una instancia Object3D, puedes modificar la jerarquía de la siguiente manera:

1const {root} = mainScene.instantiate(zombie);
2// `root` es el padre Object3D de todo el gráfico de escena `Zombie.bin`
3root.setScalingLocal([0.5, 0.5, 0.5]);

Puedes llamar a instantiate() en escenas activas e inactivas. Mientras que el ejemplo anterior demuestra cómo usarlo en una escena activa, la instanciación en una escena inactiva funciona de la misma manera:

1const zombie = await engine.loadPrefab('Zombie.bin');
2const zombieHead = zombie.findByName('Head')[0];
3zombieHead.addComponent(LookAtComponent);
4
5const nextScene = engine.load('NextScene.bin');
6
7// Solo una vez instanciado, LookAtComponent.onActivate()
8// y LookAtComponent.start() se invocan.
9nextScene.instantiate(zombie);

GLTF 

La instanciación no se limita al formato de escena de Wonderland Engine (.bin), sino que también se puede usar con glTF:

1const avocado = await engine.loadGLTF('Avocado.glb');
2
3// Haz una ensalada de aguacates
4for (let i = 0; i < 100; ++i) {
5    const {root} = scene.instantiate(avocado);
6}

Los prefabs glTF también tienen métodos adicionales para gestionar extensiones. Para obtener más información, echa un vistazo a la API PrefabGLTF.

Nota Sobre Recursos 

Como se menciona en el artículo del blog sobre multiescena, los recursos se mueven a la instancia engine al cargar. Esto permite que múltiples escenas hagan referencia a los mismos recursos, sin duplicar la memoria.

Los componentes creados a través de instanciación por lo tanto:

• Hacen referencia a los mismos recursos
• Eliminar un recurso hará que la instancia haga referencia a una entrada nula

Avanzando Más 

Aquí hay algunos enlaces para ayudarte a comenzar a usar la instanciación en tus proyectos:

• Ejemplo de instanciación de prefabs en GitHub
• API de JavaScript Scene.instantiate

¡Estamos ansiosos por ver cómo la comunidad aprovechará la instanciación para crear experiencias increíbles!