lundi 8 janvier 2018

Présentation de Twine

Aujourd'hui on jette un œil sur un logiciel simple à utiliser et bien conçu, son nom c'est Twine, c'est un logiciel qui permet de créer des histoires interactive, autrement dit des jeux sous forme de texte avec des lien à cliquer, c'est un peu l'évolution des "livres dont vous êtes le héros", place à la vidéo...




quelques aide mémoire sur ce que l'on a vu dans la vidéo :

pour faire un lien vers un nouveau chapitre :
[[texte du lien]]

pour faire un lien vers un chapitre particulier
[[texte à cliquer|nom du chapitre]]

pour ajouter du texte après avec cliquer sur un texte
<<linkappend "texte à cliquer">> texte a ajouter<</linkappend>>

pour remplacer un texte par un autre après avoir cliquer
<<linkreplace "texte cliquable">>texte qui sera utiliser pour remplacer le texte cliquable<</linkreplace>>

définir une variable
<<set $nomdelavariable = valeurdelavariable>>

spécifier une taille de texte
@@font-size:24px;
texte qui sera de 24 pixel
@@

spécifier une couleur de texte
@@color:orange;
texte qui sera orange
@@

les noms de passage spéciaux vue dans la vidéo
StoryInit
est lacer au début de l'histoire donc ce que l'on y met est fait en tout premier

StoryCaption
ce que l'on y met est afficher dans la sidebar

PassageHeader
ce que l'on y met est ajouter en en-tête de chaque chapitre

PassageFooter
ce que l'on y met est ajouté en pied de page de chaque capitre

le code css que j'utilise dans le tutoriel :
a {
color: white;
  text-decoration: none;
}
a:hover {
color: white;
  text-decoration: none;
}
strong a {
  cursor: pointer;
color: #68d;
  font-weight: normal;
  transition-duration: 200ms;
}

strong a:hover {
color: #8af;
  text-decoration: underline;
}


11 commentaires:

VILLEMONT Jean a dit…

Bonne année 2018, meilleur vœux.
Un petit logiciel simple à utiliser.
j'ai regarder le langage et simple puisque
je l'utilise tous les jours ou presque.
Je créer des sites pour mon propre plaisir

Je pense faire quelque essai pour voir.
Bon week-end. :)

KamiGeek a dit…

bonne année et meilleurs vœux également ^_^
oui Twine est vraiment le logiciel simple pour créer ce genre d'histoire interactive et comme je l'ai dit dans la vidéo on peux détourner un peu son utilisation et s'en servir pour faire simplement des page web basique mais fonctionnelle

Luc Moreau a dit…

Merci pour vos tutos.
Est-il possible de linker des endroits précis d'une image ? Ce qui permettrait de prendre un objet dans une scène par exemple...

KamiGeek a dit…

alors en théorie oui, je n'ai pas encore essayer mais Twine génère une page HTML et on peu ajouter du html dans les passages donc on peux logiquement ajouter le code html des images map
je vais faire des test dans la semaines et si je trouve une façon simple de faire j'expliquerai ^_^

KamiGeek a dit…

bon le test était assez simple à faire donc oui on peux directement ajouter des image map dans les passages exemple :

https://zupimages.net/up/18/05/qse7.png

donc ici on ajoute dans le passage une image avec une url et on lui donne un nom pour l'identifier
puis on utilise la balise map pour dire l'image en question est une image map don avec des lien localisé dessus
ensuite on ajoute une ou plusieurs ligne avec la balise "area" pour définir des formes sur l'image, ces forme on des coordonnées dans l'exemple j'indique en coordonnées le point en haut à gauche et en bas à droite sur l'image et un rectangle cliquable se place à ces coordonnées donc ici un rectangle qui comment en 50 par 50 sur l'image et se finit à 100 en x et 100 en y pour se finir donc une zone de 50 pixel de large et de haut placer à 50 pixel du haut de l'image et du bord gauche de l'image, puis on indique dans data-passage le nom du passage à allez quand on clique sur la zone enfin on ferme la balise "map"
et cela fonctionne ^_^je conseil de te renseigner sur les images map on peux définir d'autre forme que des rectangle si ma mémoire est bonne ^_^

Luc Moreau a dit…

Génial !
Je me souvenais de mes premiers cours HTML et de l'image map...
Que Twine le permette c'est très bien. On peut donc faire un jeu très visuel.
Merci pour le commentaire.

Anonyme a dit…

Bonjour,

Je débute sur Twine/SugarCube et j'aurais voulu savoir comment mettre une couleur de lien différent pour le corps du jeu et le pied de page.

Merci d'avance !

KamiGeek a dit…

c'est faisable en utilisant les css, c'est à dire en modifiant la feuille de style de l'histoire qui est le document sui définit la mise en forme et les couleurs de l'histoire

c'est indiqué de manière succincte dans la doc de sugarcube ici : https://www.motoslave.net/sugarcube/2/docs/#css
mais cela manque d'exemple

pour spécifier un style à un éléments en particulier cela demande de connaitre un peu les selecteur css et définir des tag pour les passage
par exemple si on souhaite que les lien d'un passage qui à le tag couloir soit en orange on va utiliser la ligne css suivante :
body.couloir a [color:orange;}

cela demande toute de même la connaissance du langage css
je ne sais plus si j'ai montrer cela en exemple dans mes autres tuto sur twine

Unknown a dit…

Bonjour,
Merci pour ses tutos qui sont très intéressants.
Une petite question : j'ai intégré l'image de la carte du lieu où se déroule mon histoire dans un lien toujours visible en tête de chaque scène. Le joueur peut donc s'y référer tout au long du jeu. Problème, quelle balise utiliser pour faire un retour en arrière sur la scène en cours de jeu, quelle qu'elle soit, et non pas sur une scène spécifique comme par ex la scène de départ (ça, je sais faire)
Je ne sais pas si je suis compréhensible.
Merci.

KamiGeek a dit…

faire un lien pour revenir en arrière ?
il y a back et return, ce sont des macro voir ici :
https://www.motoslave.net/sugarcube/2/docs/#macros-macro-back
https://www.motoslave.net/sugarcube/2/docs/#macros-macro-return

et si je ne dit pas de bêtises back annule le passage actuel pour revenir en arrière alors que return ne va pas annuler le passage mais juste revenir en arrière (à vérifier)
il y a une fonction previous qui permet de savoir quel est le passage précédent voir ici : https://www.motoslave.net/sugarcube/2/docs/#functions-function-previous

Unknown a dit…

Merci, return est parfait. C'était tellement simple.
Bonne journée.