C’est décembre, et c’est toujours le mois Vorple — la surcouche d’Inform qui permet d’exécuter le jeu dans une page web, et d’utiliser des fonctions JavaScript et du CSS pour ajouter des fonctionnalités. Et justement, l’article d’aujourd’hui porte sur ce que vous pouvez faire en CSS avec Vorple de façon très basique.
Avec le même avertissement que pour l’article sur Twine et le CSS : CSS est un outil puissant et on peut faire des choses très avancées, mais ma connaissance du CSS est limitée, alors je ne peux vous montrer que les choses de base ! (Et un cours de CSS complet ne serait pas pertinent ici. Il en existe déjà beaucoup sur la toile.) Ça suffit par contre pour donner une certaine esthétique à votre jeu ; voyez par exemple Neon Vertex pour une idée du résultat.
Préparatifs
Tout d’abord, il vous faudra créer un fichier CSS afin d’y mettre, vous l’aurez deviné, votre CSS. Créez un fichier avec l’extension « .css » (par exemple, « styleperso.css »). Si vous utilisez Inform 6, il faudra le sauver dans le dossier de votre projet (celui qui contient « play.html ») et ajouter à « play.html » ceci :
<link rel="stylesheet" type="text/css" href="styleperso.css">
juste en dessous de :
<link rel="stylesheet" type="text/css" href="interpreter/vorple.css">
Si vous êtes sur Inform 7, il vous faudrait normalement placer le fichier CSS dans le dossier « .materials » de votre projet et écrire la ligne suivante dans votre source :
Release along with the style sheet "styleperso.css".
Malheureusement, à cause d’un bug, cela ne fonctionne pas avec 6L38. Dans ce cas, il faut placer votre fichier CSS directement dans le template Vorple : monprojet.materials/Templates/Vorple. Il faut ensuite ouvrir le fichier « (manifest).txt » situé au même endroit et ajouter la même ligne qu’avec Inform 6, au même endroit. Il vous faudra aussi ajouter « styleperso.css » à la fin du fichier manifeste, là où tous les autres sont listés.
Quand une nouvelle version de Vorple sort et vous mettez votre projet à jour, vous remplacerez l’ancien template Vorple par le nouveau. N’oubliez pas de garder votre fichier CSS de côté et de le remettre après avoir mis à jour ! Sinon, vous risquez de perdre votre CSS personnalisé.
Si vous avez du mal à ajouter votre propre fichier CSS, vous pouvez aussi directement modifier les règles par défaut dans « vorple.css ». Cependant, le même avertissement que ci-dessus est valable : si vous remplacer le template par une nouvelle version, il ne faudra pas oublier vos modifications et les reporter à la main dans le nouveau « vorple.css ».
Enfin, avant de commencer avec les quelques effets que j’ai pu glaner, une technique qui permet de voir quelles règles CSS s’appliquent à tel ou tel élément de la page. C’est très simple, et vous permettra d’avancer par vous-même.
Ouvrez votre jeu Vorple dans un navigateur (à partir d’un site ou en lançant votre serveur local, comme on vous l’expliquait la semaine dernière), et passez la souris sur une zone que vous voulez changer. Faites un clic droit et, normalement, votre navigateur vous propose une option pour regarder de plus près l’élément HTML correspondant. sur Chrome, c’est « Inspecter » ; sur Firefox, c’est « Examiner l’élément ». Un panneau s’affiche avec la structure HTML du document, avec à côté la liste des règles CSS qui s’appliquent à l’élément que vous avez choisi et qui font qu’il a cet aspect. Ainsi, si vous voulez changer l’apparence d’un élément, examinez-le, localisez la règle qu’il faut changer, puis ajoutez-la dans votre fichier CSS !
Changer la police de caractères
Si vous utilisez la technique précédente, vous pourrez voir que la police est définie sur l’élément body.
Pour remplacer la police, il vous faut donc écrire une nouvelle règle pour cet élément dans votre fichier CSS. SI l’on voulait du Georgia, par exemple :
body {
font-family: Georgia, serif;
}
Le problème est que l’on est de base limité à des polices communes, comme le Georgia, le Times New Roman ou le Verdana.
Une première solution à ça est d’utiliser les Google Fonts, des polices de caractère que Google met à disposition gratuitement et librement pour tout le monde. Pour les utiliser, allez dans « play.html » (I6) ou dans « (manifest).txt » (I7) et ajoutez avant les autres CSS une ligne du type :
<link href='https://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet'>
Le navigateur ira chercher la police (ici, « Aldrich ») sur le site de Google et le chargera dans la page de votre jeu. Il ne vous reste plus qu’à l’utiliser dans votre CSS.
body {
font-family: "Aldrich", sans-serif;
}
Cependant, le calcul de Google n’est pas désintéressé : avec un tel lien, Google sait qu’un utilisateur a besoin d’une police sur votre page, et peut essayer de reconnaître l’utilisateur (avec son adresse IP, etc.) et savoir qu’il est sur votre page… Pas forcément la meilleure solution, donc !
Il est également possible d’utiliser une police que vous avez téléchargée sur l’internet. Après avoir mis les fichiers dans votre projet (il faut les ajouter au template et à la fin du manifeste pour Inform 7), il vous faudra ajouter une directive @font-face dans le CSS. Un bon site où trouver des polices est Font Squirrel (vérifiez bien que la licence de la police autorise son utilisation dans le CSS et dans les applications). Généralement, le CSS nécessaire est inclus dans le téléchargement et vous n’avez plus qu’à le recopier. Sinon, vous pouvez utiliser le générateur. C’est un sujet compliqué, je m’arrête donc ici.
Finalement, il est souhaitable que la commande du joueur utilise aussi la nouvelle police. Ajoutez la même règle à « input » pour que les caractères tapés par le joueur aient le même aspect :
input {
font-family: "Aldrich", sans-serif;
}
Changer la couleur des caractères
Pour changer la couleur des caractères, revenez dans « body » et dans « input », et ajoutez :
color: #03d4c3;
Bien sûr, remplacez #03d4c3 par ce que vous voulez ; tapez « color picker » dans un moteur de recherche et vous trouverez des dizaines de sites qui vous permettent de trouver ce qu’il faut mettre pour avoir la bonne couleur.
Changer la couleur des liens
Si comme moi vous utilisez pas mal d’hyperliens à l’intérieur de votre jeu, vous aurez peut-être envie de changer leur couleur afin qu’ils se mélangent harmonieusement aux autres couleurs (fond et reste du texte). Pour cela, ajoutez dans votre fichier CSS un règle pour a (un lien hypertexte est <a href="…">) :
a {
color: #e3b4db;
}
Vous pouvez également créer des règles pour a:visited à la place de a (pour le style appliqué aux liens qui ont été cliqués) et a:hover (pour le style appliqué quand la souris survole l’hyperlien) pour les adapter au style de votre jeu.
Changer la couleur du fond
La zone principale de Vorple est découpée en plusieurs parties, et si vous voulez avoir un fond uniforme avec la même couleur, il faut changer plusieurs valeurs à la fois. Ceci est fait avec la règle suivante :
#output, label, body, input {
background-color: #000;
}
Cette règle fait un fond tout noir ; changez le « #000 » pour obtenir une autre couleur.
Changer la taille de la zone principale
Vous pouvez modifier la taille de la zone où apparaît la zone principale pour qu’elle prenne plus ou moins de place. En réalité, il s’agit d’un sujet compliqué car il faut prendre en compte les différentes tailles d’écran possibles ; les marges devraient être plus petites sur mobile afin qu’il y ait plus de place pour le contenu, par exemple. En revanche, une chose simple que l’on peut faire est de spécifier une largeur maximale de la zone de texte pour empêcher qu’elle soit trop grande (ou au contraire autoriser une taille plus grande que par défaut). Il suffit d’ajouter la règle suivante :
#output {
max-width: 550px;
}
Notez que si vous voulez changer l’aspect de la zone principale, par exemple pour ajuster les marges ou rajouter un cadre, vous pouvez le faire avec les mêmes outils (margin, padding, border, box-shadow, etc.) que dans le tutoriel de CSS pour Twine 2 : je vous y renvoie donc !
Mettre une image de fond
Il peut être intéressant de mettre une image de fond à votre jeu, derrière la zone où le joueur tape le texte, afin de créer une certaine ambiance. Il est recommandé de choisir une image suffisamment grande pour pouvoir s’adapter à tous les écrans ! Pour changer le fond, ajoutez la règle suivante (ou bien complétez la règle body de tout à l’heure) :
body {
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size:cover;
}
La première ligne donne l’adresse de l’image, en chemin relatif par rapport à votre fichier CSS (encore une fois, il faut l’ajouter au template et à la fin du manifeste) ; la deuxième dit que vous ne voulez pas que l’image soit répétée (si l’écran est plus grand que l’image, le navigateur répète l’image pour remplir tout l’espace) ; la troisième dit que vous la voulez centrée horizontalement et verticalement ; la quatrième dit que l’image ne doit pas bouger si vous faites défiler la page (de sorte à ce que la zone centrale avec le texte soit la seule à bouger si vous descendez plus bas dans la page) ; la cinquième, enfin, dit que votre image doit toujours être adaptée de sorte à ce qu’elle soit plus grande que la fenêtre.
La dernière option veut dire que si votre image n’a pas le même format que le navigateur, elle sera coupée dans le sens qui est trop long afin de recouvrir tout la fenêtre ; mais comme vous l’avez centrée, ça revient à couper les bords de l’image, ce qui je pense est acceptable. Si vous voulez au contraire que l’image remplisse toujours tout l’espace, même si ça veut dire l’étirer dans un sens, écrivez plutôt background-size : 100% 100%;, ce qui assurera que les bords de l’image remplissent entièrement l’espace.
Mettre une image de fond à la zone de texte
Il peut être intéressant de mettre une image de fond derrière votre zone de texte — par exemple, un parchemin, ou des étoiles, ou un bord fleuri, ou une image qui se voit relativement peu (pour ne pas gêner la lecture). Pour cela, revenez dans votre élément #output, et écrivez une règle similaire à celle écrite précédemment :
#output {
...
background-image: url("parchemin.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: 100% 100%;
}
Ici, il me semble que background-size ne devrait pas être cover (ou contain, qui refuse de couper l’image et la réduit plutôt, ce qui crée une zone blanche) ; en effet, si vous avez une image de parchemin, les rebords sont importants et vous voulez qu’ils soient bien alignés avec votre zone de texte centrale. Ainsi, le réglage « 100% 100% », qui assure que l’image est étirée pour bien coller à la zone de texte, me semble plus judicieux ; à vous de faire une image de parchemin suffisamment grande pour que l’étirement ne se voie pas. Sinon, il existe d’autres moyens plus compliqués (comme avoir une image différente pour les bords du parchemin et pour son corps). Je vous laisse chercher sur le sujet !
C’est tout pour le moment !
N’hésitez pas à aller plus loin que ce tutoriel, en examinant les éléments par exemple ! Le meilleur moyen de commencer en CSS, c’est d’expérimenter ! J’espère que vous arriverez à donner à votre jeu l’aspect qu’il mérite, qui en jette et qui donne envie d’y jouer. Et vous pouvez toujours poster des captures d’écran de votre projet en commentaire ! 😉
1 Ping