Chargement
Choisissez ce que vos visiteurs attendent à l'ouverture de votre projet, et configurez l'écran de lancement.
Les visiteurs n'attendent qu'une fois, au début. Ce que vous chargez à ce moment-là compte plus que tout le reste pour que votre projet donne l'impression de s'ouvrir vite.
Comment arrivent les fichiers
Un fichier arrive de l'une de ces trois façons :
- Préchargé : récupéré avant l'ouverture de la scène. L'écran de lancement l'attend. Utilisez ce mode pour tout ce qui est visible dans les premières secondes.
- Différé : la scène s'ouvre sans lui, et le fichier apparaît quand il arrive. Utilisez ce mode pour le contenu qui vient plus tard dans l'expérience.
- En streaming : lu directement depuis le réseau, jamais téléchargé en entier. Utilisez ce mode pour la vidéo et l'audio.
Seuls la vidéo et l'audio peuvent commencer à jouer avant d'être entièrement arrivés. Un modèle, une texture ou une police doit arriver en entier avant de pouvoir servir. En différer un signifie seulement que la scène s'ouvre sans l'attendre, et que le fichier apparaît quand il est prêt.
Réglage du projet et réglage par fichier
L'interrupteur Project preload, dans les réglages du projet, sert de valeur par défaut pour tous les fichiers. Chaque fichier peut le remplacer. Dans Project assets, survolez un fichier : deux boutons apparaissent sur sa ligne.
- Always preload : la scène attend toujours ce fichier, quoi que dise le projet.
- Always stream : la scène ne l'attend jamais. La vidéo et l'audio sont lus en streaming ; les autres fichiers sont différés.
- Si aucun des deux n'est activé, le fichier suit Project preload.
Cliquez de nouveau sur un bouton pour le désactiver. Tant que l'un des deux est activé, les boutons restent visibles sur la ligne.
Les nouveaux fichiers vidéo et audio démarrent avec Always stream activé, car attendre toute une vidéo avant d'ouvrir la scène n'apporte rien. Tous les autres nouveaux fichiers suivent le réglage du projet.
Le réglage de chargement appartient au fichier, pas aux objets qui l'utilisent. Deux objets qui partagent un fichier le chargent donc toujours de la même façon.
Un bon réglage de départ
Pour la plupart des projets :
- Préchargez les modèles et les textures de la première scène, ainsi que toute police affichée dès le début.
- Différez tout ce qui appartient aux scènes suivantes.
- Diffusez en streaming toute la vidéo et tout l'audio. C'est déjà le réglage par défaut.
Vos visiteurs attendent brièvement une seule fois, et ensuite l'expérience ne s'interrompt plus jamais pour charger.
Écran de lancement
Avant que votre scène n'apparaisse, les visiteurs peuvent voir deux écrans :
- un écran qu'ils touchent pour commencer ;
- un écran qui se remplit à mesure que les fichiers arrivent.
Configurez les deux dans les réglages du projet : l'arrière-plan, le logo, le bouton de démarrage et son libellé, les consignes d'accueil et le style du chargeur.
Les navigateurs ne jouent aucun son tant que le visiteur n'a pas interagi avec la page. Les autorisations AR fonctionnent de la même façon : elles ne sont accordées que pendant le toucher qui les a demandées. Sans bouton sur lequel appuyer, votre premier son ne joue pas, et la demande d'accès à la caméra risque de ne jamais apparaître.
Votre propre écran de lancement
L'écran de lancement intégré est un preset. Pour créer le vôtre, écrivez un script de lancement. Il contrôle les deux écrans. Il définit aussi son propre panneau de réglages : les personnes qui l'utilisent remplissent des champs au lieu de modifier du code.
init((ctx: PreloadContext) => {
// Déclare le panneau de réglages. Ce code s'exécute avant tout affichage : déclarer seulement, ne jamais dessiner.
ctx.on('describe', (p) => {
p.section('look', { en: 'Look' });
p.color('tint', { label: { en: 'Background' }, default: '#101014', section: 'look' });
p.text('caption', { label: { en: 'Caption' }, default: '', localized: true, section: 'look' });
p.boolean('hideWhenReady', { label: { en: 'Hide when ready' }, default: true });
});
ctx.on('launch', () => {
/* afficher l'écran que le visiteur touche pour commencer */
});
ctx.on('loading', () => {
/* afficher l'écran qui se remplit */
});
ctx.on('progress', ({ loaded, total, percent }) => {
/* mettre à jour votre propre barre de progression */
});
ctx.on('ready', () => {
/* tout est arrivé */
});
});
| Événement | Quand il se déclenche |
|---|---|
describe | le panneau de réglages est en cours de construction, dans le runtime et dans l'éditeur |
start | le runtime démarre |
launch | c'est le moment d'afficher l'écran que le visiteur touche |
loading | c'est le moment d'afficher l'écran qui se remplit |
progress | des fichiers arrivent : loaded, total, percent |
ready | tout ce qui est nécessaire est arrivé |
error | quelque chose s'est mal passé |
Les réglages peuvent être traduits : un même script de lancement fonctionne alors dans toutes les langues de votre projet.
Ce qui démarre votre scène doit être appelé depuis le gestionnaire de clic du bouton lui-même. Les autorisations d'orientation de l'appareil et de caméra ne sont accordées que pendant le toucher qui les a demandées. Si vous démarrez la scène à l'image suivante, vous les perdez.
Si votre script de lancement lève une erreur, c'est l'écran intégré qui s'affiche à la place.
Ce qui n'a pas besoin de se charger
- Une scène qui n'utilise pas la physique n'a pas à l'attendre.
- Les copies instanciées et les particules alourdissent à peine le téléchargement, quel que soit leur nombre.
Les visiteurs n'attendent jamais ce dont ils n'ont pas besoin. Pour en savoir plus : Pourquoi AR Clip.
Suivant : Paquets partagés — les paquets de code que vous pouvez importer.