Mise en scène : salles larges et animations

Comment un lieu bouge : un lieu plus large que l’écran, avec une caméra qui suit le héros ; des animations d’accessoires dont les images déclenchent sons et effets ; et les réglages du joueur, qui changent la façon dont tout cela se joue (animations réduites, vitesse du texte, volumes). Cette page est la référence de layout.width, de la commande camera, de PropDef.anims, de play, de stopAnim, des événements de frame et de settings.

La mise en scène en un coup d’œil

La sous-partie « Voix » de l’ancien guide du contenu, qui se trouvait dans ce chapitre, est désormais dans Voix.

Lieux larges et caméra

Forme

Un lieu fait 640 × 400 unités logiques. Donnez à son layout une width (960, 1280… : dossier « Room width » de l’éditeur du Studio, ou dans le fichier de layout du lieu, game/layout/<lieu>.json dans un projet créé, games/<id>/layout/<lieu>.json dans le dépôt du moteur) et peignez son décor aussi large, 800 px de haut et la largeur en proportion ; l’outil assets la garde. Le lieu défile alors, et la caméra suit le héros. Les positions restent des coordonnées du monde : un accessoire à x 900 est dans la partie droite du lieu.

Des commandes déplacent la caméra :

Valeurs et défaut

• width : 640 en l’absence (pas de défilement).
• ms : la durée du panoramique, facultative.
• Entrer dans un lieu remet la caméra à suivre le héros.

Contraintes

La caméra est dans l’état (camera : son bord gauche, et si elle suit) : une sauvegarde la restitue. Le solveur l’ignore. « Réduire les animations » (le réglage, ou le prefers-reduced-motion du système) rend chaque panoramique instantané.

Exemple minimal

// in a rule of a room whose layout has width: 1280
{ verb: 'look', a: 'far_stalls', do: [{ camera: { to: 'far_stalls', ms: 900 } }, 'The far stalls.', { camera: 'follow' }] }

Comportement sur un champ inconnu

La commande camera n’accepte que les formes ci-dessus ; TypeScript signale une autre forme dans un lieu typé.

Depuis

Lieux larges et caméra : 1.5.0 « Picture ». Une caméra qui zoome aussi selon la zone de marche et se déplace verticalement : 3.4.0 (voir La scène).

La géométrie (où peut aller la caméra, les zones qui la font zoomer) est aussi décrite dans Géométrie.

Animations d’accessoires et événements de frame

Forme

props: {
  garde_manger: { name: 'garde-manger', states: { ferme: 'home/r1c3', ouvert: 'home/r1c4' }, initial: 'ferme',
    anims: { secoue: { frames: ['home/r1c4', 'home/r1c3', 'home/r1c4', 'home/r1c3'], fps: 12, at: { 1: [{ sfx: 'loquet' }] } },
             halo: { frames: ['home/g1', 'home/g2'], fps: 4, loop: true } } },
},
on: [{ verb: 'open', a: 'garde_manger', do: [{ play: ['garde_manger', 'secoue'] }, 'Fermé.'] }],

Une animation (PropAnim, src/engine/core/types/content.ts) a :

Valeurs et comportement

• { play: [accessoire, nom] } montre les images l’une après l’autre à fps et exécute les commandes de at quand cette image est atteinte (un son sur la bonne image, un drapeau, une réplique). La commande attend la fin de l’animation, puis l’accessoire reprend l’image de son état.
• Une animation loop tourne toute seule jusqu’à { stopAnim: accessoire }, et play ne l’attend pas. Son at ne joue que des sons et des secousses (sfx, shake), à chaque tour de boucle : une machine qui claque à l’image 4, c’est glow: { frames: […], loop: true, at: { 4: [{ sfx: 'clank' }] } }.
• Les poses des personnages ont les mêmes événements de frame : { anim: ['hero', 'saut'], ms: 600, at: { 2: [{ sfx: 'boum' }] } } exécute les commandes quand la pose atteint cette image, au fps du personnage.

Contraintes

Le validateur refuse un drapeau ou une réplique dans le at d’une animation loop : la boucle ne finit jamais, l’état ne se poserait jamais.

Comportement sur un champ inconnu

TypeScript le signale sur un accessoire typé ; le moteur ne le lit pas.

Depuis

Animations d’accessoires et événements de frame (at) : 1.5.0 « Picture ». L’état d’une animation en boucle n’est que de la présentation et n’est pas sauvegardé : après un chargement, l’accessoire montre l’image de son état jusqu’à ce qu’une commande relance la boucle (voir État et sauvegardes).

Réglages

Forme

settings: true dans game.ts ajoute une entrée Réglages au menu pause.

Valeurs et défaut

Chaque ligne fait défiler sa valeur :

Les préférences restent dans le navigateur, hors sauvegarde : localStorage <jeu>.settings, et <jeu>.lang pour la langue. Une nouvelle partie ou un chargement ne les change pas.

Les libellés des lignes sont des textes d’interface de ui : settings, textSpeed, textSize, reduceMotion, readableFont, volumeMusic, volumeSfx, volumeVoice, captions, verbKeys, language, et les valeurs slow, normal, fast, large. Chacun a une valeur anglaise par défaut quand il est absent (la liste complète est dans Habillage et polices).

Contraintes

Sans settings: true, pas d’entrée Réglages ; les animations réduites suivent quand même la préférence du système.

Depuis

settings : 1.5.0 « Picture ». Sous-titres : 3.4.0. Touches des verbes : 4.3.0.

Ce que le joueur voit de ces réglages, et ce qu’ils apportent à l’accessibilité, est dans Les réglages, côté joueur et Accessibilité.

Identifiants liés

• stage, walkZones avec zoom, transition : La scène.
• anim (poses des personnages), shake, sfx : Commandes du jeu.
• skin.fonts.readable, les textes de ui : Habillage et polices.