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;
}


6 commentaires:

Jean VILLEMONT 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.