dimanche 4 février 2018

Twine : Réponses aux questions - Imagemap et Tableaux

Aujourd'hui je répond à des questions qui m'ont été posé sur twine, donc on va voir comment réaliser des imagemap, des tableaux, des champs de saisie et des boutons dans Twine, place à la vidéo...





10 commentaires:

Luc Moreau a dit…

Merci pour ce tuto.
Dans la balise area elle-même peut-on modifier une variable sans "data-passage" et donc en restant sur le passage où l'on est ?
Sinon peut-on passer par un passage où là, juste la variable est modifiée puis un retour se fait au passage précédent sans affichage (et donc par un passage invisible) ?

KamiGeek a dit…

je vais faire quelques test, j'ai bien compris l'idée et en effet ce serai utile ^_^ donc je vais tester et si je trouve une méthode simple j'expliquerai ^_^

KamiGeek a dit…

encore une fois c'était rapide ^_^"
donc oui sugarcube ajoute en fait quelques attributs html, data-passage pour indiquer un passage vers lequel envoyer le joueur mais il y a aussi data-setter qui permet de modifier des variable on peux donc ajouter dans la balise area data-setter="$variable += 2" pour que par exemple la variable $variable augmente de 2 à chaque clic mais l'attribut data-passage semble être obligatoire pour que cela fonctionne mais rien n’empêche de rediriger vers le passage actuel donc imaginons par exemple on à un passage "configuration" qui affiche une image map avec pleins de zone définit avec la balise area, on a des balise qui renvoie sur d'autre passage avec data-passage="passagedujeu" et on a quelques zone qui doivent que modifier des variable et pour cest area on indique data-passage="configuration" donc le passage actuel et on ajoute data-setter="$mavariable += 1" ou data-setter="$mavariable -= 1"
ainsi on peux faire des flèche cliquable pour augmenter ou diminuer ou redéfinir des variables

Luc Moreau a dit…

Merci de votre réponse.
J'ai fait un petit jeu avec Twine mais je n'ai pas besoin du volet de gauche et préférerais avoir un plein écran. Y a t-il une possibilité ?

KamiGeek a dit…

oui bien sur, pour retirer le volet de gauche dans sugarcube voilà la méthode :
tu clic sur la flèche en bas à droite du nom de ton projet pour ouvrir le déroulant et tu clic sur le lien tout en haut : "Modifier le Javascript de l'Histoire", une fenêtre s'ouvre "Javascript" ici tu ajoute ceci :

$('#ui-bar').remove();
$(document.head).find('#style-ui-bar').remove();

et tu ferme la fenêtre, quand tu lancera ton histoire le volet de gauche ne sera plus là, si tu souhaite remettre il te suffit d'allez effacer les deux ligne dans la fenêtre javascript ^_^

Luc Moreau a dit…

Merci beaucoup. Merci pour ta réactivité aussi !
ça marche. Une question encore... Dans mon jeu j'utilise des images map. Je pensais mettre mes images sur google drive. Mais le lien donné par ce drive est ignoré par Twine le jeu alors affiche un petit carré à la place de l'image... j'ai même essayé de mettre le fichier html sur google drive (avec les images dans le même dossier) mais un lien sur ce fichier dans un email n'ouvre que le code source du fichier html au lieu de l'ouvrir avec un navigateur...
(google drive ne propose même pas de l'ouvrir dans google chrome !)
Dans ton tuto l'image du chat vient d'un cloud et semble t-il le lien, là, se fait bien. Solution ? Merci de tes conseils.

KamiGeek a dit…

j'utilise le service http://www.zupimages.net/
c'est gratuit sans inscription, il n'y a pour le moment aucune limitation de durée de stockage, on upload donc les images dessus et pour chaque image zupimages fournit plusieurs lien pour afficher l'image dans un forum, dans du html etc et un des lien est le lien direct vers l'image qui peut être utiliser dans Twine...
je parle de zupimages parce que je l'utilise mais il existe d'autre hébergeur d'image qui fournissent des liens direct vers les images cependant en trouver un qui ne supprime pas les images après une période c'est rare ^_^"
et par contre pour le fichier html il y a ce service : http://philome.la/
donc les image sur zupimages, le html sur philome.la et toute l'histoire est en ligne
sinon il y a également des service d’hébergement de page web gratuit comme sur lesquels tu peux mettre à la fois le html et les images :
http://www.webou.net/
https://www.hebfree.org/
http://www.hebergratuit.com/
https://www.virtual-info.info/cart.php?gid=1
à vérifier je ne les ai pas tester, il y a aussi la possibilité d'héberger tes fichiers sur l'espace web de ton FAI si il en propose un, free doit le faire http://www.free.fr/assistance/52.html , orange aussi : https://pages.perso.orange.fr/
suivant la box internet que tu dispose ou si tu dispose d'un NAS tu peux envisager d'auto héberger ton histoire vue que c'est juste une page html et quelques images voir plus mais généralement une histoire twine ce n'est pas très lourd ^_^

Luc Moreau a dit…

Merci. Je vais tester tout ça.

Luc Moreau a dit…

Bonjour,

J'essaye d'afficher une image avec Twine l'image fait 1600x900 ce qui exactement la résolution de mon écran. En utilisant align="left" ou align="top" avec ou sans guillemets Twine affiche l'image avec une marge noire en haut et a gauche et donc avec une barre scrolling en bas et a droite avec ou sans F11. Comment faire pour un plein écran exact ?
Merci.

KamiGeek a dit…

en fait il y a des marge de mise en page dans les page de sugarcube pour rendre la page plus agréable, on peux voir le html utilisé par sugarcube ici :
http://www.motoslave.net/sugarcube/2/docs/html.html
et les fichiers css utilisé par sugarcube ici :
http://www.motoslave.net/sugarcube/2/docs/css.html
connaissant cela on peux voir que le contenu des passage s'affiche dans un div #story" et donc il doit probablement posséder une marge en haut donc pour la retirer on va dans les css de l'histoire donc dans "Modifier la feuille de style de l'histoire" et on ajoute
#story {margin:0; padding:0;}
pour retirer les marges externe et interne du div #story, ainsi les images mises dans un passage collerons au bord haut de la fenêtre du navigateur, je pense que cela retire aussi la marge de gauche mais je ne sais pas si il y as un truc à gauche du passage qui aurai ses propre marge, je ne crois pas il faut tester