Embedded Files
Un stickers permet d'afficher une vidéo ou image sur les Home des quests ou sur la carte des rallyes. Ces stickers peuvent apparaitre et disparaitre en temps réel et servir de bouton de selection.
Toutes les classes décrites ici s’appliquent aussi bien aux cas des phases quest qu’à celui des phases rallye (avec carte). Seule les phases quest seront illustrées ici.
1- Placement des stickers
1- Placement des stickers
Par défaut, chaque sticker adopte la taille de son image ; les stickers s’accumulent en ligne depuis le coin supérieur gauche de l’écran :
Les stickers peuvent être disposés suivant une grille prédéfinie ; par défaut, cette grille possède 8 lignes et 8 colonnes.
Pour positionner un sticker, ajoutez-lui une classe utilisateur définissant une colonne (de “col-1” pour la première colonne à “col-8” pour la dernière colonne), et/ou une classe utilisateur définissant une ligne (de “row-1” à “row-8”).
Classes utilisées :
- Oeuf: “col-5 row-3”
- Père Noël: “col-6 row-5”
- Cheval: “col-3 row-5”
- Statue: pas de classes utilisateur
Remarque : lorsqu’un sticker est ainsi positionné, son image est déformée pour adopter le format 4/3 (128px * 96px / 256px * 192px en retina). Dans le cas d’un sticker sans image, ce format est adopté avant même l’utilisation des classes de positionnement.
2- Centrage des stickers
2- Centrage des stickers
Pour centrer les stickers, utilisez les classes “col-center” et “row-center”.
Classes utilisées : “col-center row-3”
Classe stickerButton
À des fins de test, la classe stickerButton permet d’adopter un style de bouton (rouge et bien visible), au format de la grille par défaut.
Classes utilisées : “col-5 row-3 stickerButton”.
3- Personnalisation des grilles
3- Personnalisation des grilles
La grille 8*8 est la grille par défaut ; il est cependant possible d’utiliser des grilles divisant l’écran en 1, 2, 3… jusqu’à 10 lignes et colonnes. Les classes correspondantes sont du type “col-X-Y” et “row-X-Y”, où X est le nombre de subdivisions de l’écran (en colonnes ou en lignes, resp.) et Y le numéro de la colonne ou de la ligne choisie.
Les colonnes correspondant aux classes “col-4-1”, “col-4-2”, “col-4-3” et “col4-4”.
Les lignes correspondant aux classes “row-3-1”, “row-3-2” et “row-3-3”.
De plus, comme dans le cas par défaut, les classes “col-*-center” et “row-*-center” permettent de centrer le sticker dans le cas où le nombre de colonnes/lignes est pair.
Il est évidemment possible de combiner les classes “row” et “col” à son goût. Il est possible de définir des stickers carrés en combinant les classes : “col-4-*” + “row-3-*” ou “col-8-*” + “row-6-*”.
A gauche, un bel oeuf dans un sticker carré, grâce aux classes “col-4-3 row-3-2”.
4- Superposition des stickers
4- Superposition des stickers
Par défaut, les stickers passent en-dessous de tous les éléments UI.
Dans le cas où des stickers sont superposés, utilisez les classes “z-index-X” avec X dans [0;10] pour organiser la superposition des stickers. Par défaut, les stickers sont au z-index correspondant à la classe “z-index-0”.
Utilisation de la classe “z-index-1” sur un sticker oeuf.
Report abuse