Narration interactive et branches

Le concept

La narration interactive remplace la linéarité par un graphe d'états. Chaque nœud est une scène, les arêtes sont des choix. On la modélise comme une machine à états finis (FSM). En design XR, les branches représentent des voies d'exploration de l'espace. Le défi : assurer que toutes les voies mènent à une résolution satisfaisante.

Le code

// Interactive narrative: FSM with choices
let state = 'intro';
const story = {
  intro: {text:'Vous entrez dans la médina.', choices:[{label:'Aller au souk',to:'souk'},{label:'Aller au hammam',to:'hammam'}]},
  souk: {text:'Le souk est animé. Vous trouvez un zelligeur.', choices:[{label:'Parler',to:'zelligeur'},{label:'Repartir',to:'intro'}]},
  hammam: {text:'Vapeur et silence. Une vieille dame vous sourit.', choices:[{label:'La saluer',to:'end'},{label:'Repartir',to:'intro'}]},
  zelligeur: {text:'Il vous montre comment coder un motif.', choices:[{label:'Fin',to:'end'}]},
  end: {text:'Vous repartez, quelque chose a changé.', choices:[]},
};
function setup() { createCanvas(400, 280); }
function draw() {
  background(11,15,20);
  let s = story[state];
  fill(200); textAlign(LEFT); textWrap(WORD);
  text(s.text, 20, 40, 360);
  s.choices.forEach((c,i) => {
    fill(mouseY>120+i*44&&mouseY<156+i*44 ? [55,227,195]:[100,150,140]);
    text('› '+c.label, 20, 140+i*44);
  });
}
function mousePressed() {
  story[state].choices.forEach((c,i) => { if(mouseY>120+i*44&&mouseY<156+i*44) state=c.to; });
}

Pour aller plus loin

Explorez les autres cours gratuits sur la page Ateliers.