Twine
Twine est un outil pour crééer des histoires interactives et non-linéaires
Twine est un outil open-source conçu pour créer des histoires interactives et non-linéaires, similaires aux célèbres « livres dont vous êtes le héros ».
- Interactives : Le lecteur est amené à faire des choix qui influencent le déroulement de l'histoire.
- Non-linéaires : En fonction des choix du lecteur, l'histoire peut évoluer de différentes manières, offrant plusieurs chemins et dénouements possibles.
L'utilisation du numérique pour écrire ces histoires permet d'exploiter l'hypertextualité, c'est-à-dire la possibilité d'établir des liens permettant de naviguer automatiquement entre différentes parties du texte.
Les histoires créées avec Twine peuvent être publiées sous forme de fichiers HTML, compatibles avec tous les navigateurs Internet, même hors ligne.
Accédez à Twine : http://twinery.org/
- prise en main de Twine et première création
- Tuto en vidéo
-
Documentation Harlowe : https://twine2.neocities.org. On peut même prévisualiser certaines commandes.
| Fonction | Syntaxe | Exemple |
| Ajouter un lien vers un passage | [[Nom du passage]] |
[[choisir d'entrer dans le véhicule]] Si le passage n’existe pas, il sera créé automatiquement. Lorsqu’un joueur cliquera sur la phrase, il sera dirigé vers le passage du même nom. |
| Ajouter un lien avec un texte différent | [[Texte affiché->Nom du passage]] |
On peut remplacer le tiret et le signe supérieur par une barre verticale | [[choisir d'entrer dans le véhicule ->histoire1]] ou [[choisir d'entrer dans le véhicule|histoire1]] |
| Ajouter une image ou un GIF |
<img src="URL" width="50%"> ou <img src="https://exemple.com/image.jpg" width="640"> |
width est la largeur, en pourcentage ou en pixels. Vous utiliserez alors l'url de l'image (qui doit se terminer de préférence par .jpg ou .png, éventuellement .gif. <img src= "https://upload.wikimedia.org/wikipedia/commons/ thumb/c/c1/Twine_2.9.2_screenshot.png/1024px-Twine_2.9.2_screenshot.png" width="50%">
|
| Ajouter une vidéo YouTube/Vimeo |
Cliquez sur le bouton « partager » d’une vidéo en ligne (youtube, vimeo...), puis copier le code d’intégration |
<iframe src="https://player.vimeo.com/video/554773552"></iframe> <iframe title="vimeo-player" src="https://player.vimeo.com/ video/554773552?h=83ae5a166f" width="640" height="360" frameborder="0" allowfullscreen></iframe> |
| Permettre au joueur d’entrer un texte (variable) | (set:$variable to (prompt: "Question", "Valeur par défaut")) | (set:$prenom to (prompt: "Votre prénom:", "Tapez ici")) |
| Remplacer du texte par un autre au clic | (click-replace: "texte")[nouveau texte] | (click-replace:"plaqueminier")[arbre à kakis] |
| Mise en forme du texte |
**gras** //italique// ~~barré~~ <u>souligné</u> |
Vous êtes **vraiment** ~~ridicule~~ //surprenant//! |
Mise en forme
Le code couleur hexadécimal
Le code couleur hexadécimal est une manière de représenter des couleurs en utilisant une combinaison de six chiffres et lettres. Ce système est basé sur le modèle de couleur RVB (Rouge, Vert, Bleu), où chaque couleur est définie par trois paires de caractères hexadécimaux :
- La première paire représente la quantité de rouge.
- La deuxième paire représente la quantité de vert.
- La troisième paire représente la quantité de bleu.
Chaque paire peut varier de 00 (aucune intensité) à FF (intensité maximale). Par exemple, le code #FF5733 correspond à une teinte de rouge orangé, où le rouge est à pleine intensité (FF), le vert est modéré (57), et le bleu est faible (33).
Intégrer des couleurs dans Twine
- Ouvrez votre projet Twine.
- Accédez à l'éditeur CSS de votre histoire.
- Utilisez les codes hexadécimaux pour définir les couleurs de fond, de texte, de liens, etc.
Exemple :
- Fond de page : Orange vif (#FF5733)
- Texte : Blanc (#FFFFFF)
- Liens (<a>) : Vert clair (#33FF57)
Code CSS à insérer :
Intégrez les couleurs dans Twine :
body {
background-color: #FF5733;
color: #FFFFFF;
}
a {
color: #33FF57;
}
Images
Utilisez des images libres de droit (filtrez votre recherche en ajustant les paramètres de licence) ou hébergez vos propres images
Créer une image avec une IA
En utilisant Perchance.org pour générer des images, vous pouvez ajouter une dimension visuelle unique à vos histoires interactives sur Twine, captivant ainsi davantage vos lecteurs.
- Accédez à Perchance
- Créez Votre Image : Utilisez les outils de génération d'images pour créer des visuels qui complètent votre histoire. Vous pouvez ajuster les paramètres pour obtenir le résultat souhaité.
- Ouvrez votre projet Twine.
- Ajoutez l'image à votre histoire en utilisant l'éditeur de passages. Vous pouvez insérer l'image directement dans le texte ou l'utiliser comme arrière-plan.
- Utilisez le code HTML suivant pour intégrer l'image :
<img src="nom-de-votre-image.png" alt="Description de l'image">
exemples
