Dans cet article, nous vous expliquons comment créer les éléments graphiques liés à la mécanique Calendrier. Ces éléments sont personnalisables et doivent être importés dans l'onglet "Apparence" et "Contenu" de votre page de jeu.

Vous pouvez télécharger le fichier Photoshop (.psd) regroupant tous les éléments graphiques. Nous vous expliquons également comment modifier facilement chaque élément. Si vous le souhaitez, il est possible d’utiliser d’autres logiciels (Canva, Figma, etc.) pour créer vos propres éléments graphiques, à condition de respecter les dimensions indiquées ci-dessous.

Le template Photoshop se compose de 2 plans de travail représentant la vue Desktop et la vue Mobile de la mécanique de jeu. Les différents éléments composant la mécanique de jeu sont modifiables depuis la vue Desktop.

La vue Mobile permet uniquement la prévisualisation du rendu de la mécanique sur un Mobile.

La vue mobile ne doit pas être modifiée directement dans le .psd template.

La mécanique de jeu est intégrée par-dessus l’arrière-plan de votre page. Vous pouvez prévoir un espace dédié à la mécanique du jeu dans votre arrière-plan.

Tous les éléments personnalisables sont disponibles dans le groupe de calques bleu :

À MODIFIER / EXPORTER contient 5 calques. Ces 5 calques sont des objets dynamiques que vous pouvez ouvrir et modifier via un double-clic.

Nous vous proposons 3 variantes de fond de jeu possibles :

Avec ce mode, notez que le même visuel sera utilisé au format mobile. Assurez-vous que le fond que vous importez inclut les visuels des cases en mode "fermé", car c'est ce visuel que l'utilisateur verra en arrivant sur la page du Calendrier, que ce soit sur web ou sur mobile.

🖥️ Desktop :

Il faut comprendre que le fond du jeu est composé d’une seule image incluant toutes les cases fermées.

Vous pouvez modifier le nombre de cases, leurs formes, leurs tailles et leurs positions. Il doit être exporté avec les visuels des cases fermées visibles.

📱Mobile :

Il n’y a pas de visuel de fond du jeu spécifique à créer pour la version mobile. Le fond du jeu est identique pour les deux affichages. Le fond du jeu s’affiche dans sa globalité par dessus le fond mobile pendant quelques secondes.

Il est ensuite automatiquement zoomé pour passer en full screen avec un scrolling horizontal permettant de naviguer dans le visuel. Vous ne pouvez donc pas intégrer de textes dans le fond mobile de ce module car il sera très rapidement masqué par le visuel du calendrier.

Si vous souhaitez avoir un rendu différent entre Desktop et Mobile, c'est possible, c'est une option qu'il faudra avoir désactivé dans l'éditeur : "Appliquer le placement des cases à toutes les vues". Vous pourrez ainsi uploader un visuel de fond de jeu différent entre les vues.

Le but étant d'effectuer un scroll de haut en bas plutôt que de gauche à droite (cf option précédente).

🖥️ Desktop :

Cf ci-dessus. Les spécificités sont similaires en Desktop.

📱 Mobile :

Il faudra alors un second fond de jeu que vous pourrez uploader en plus sur Mobile. Les cases fermées devront être les unes en dessous des autres, afin d'effectuer un scroll de haut en bas plutôt que de gauche à droite.

Taille recommandée : 640x de large, la hauteur est variable mais au delà de 960x de haut il y aura du scroll pour atteindre le bas du calendrier

Dans le cas où vous ne souhaitez pas avoir de visuels de cases différents en fonction du statut "fermé" et "ouvert", vous pouvez alors vous orienter vers un fond sans case.

L'idée est de pouvoir positionner les cases du Calendrier où l'on souhaite sans avoir un positionnement pré-défini par un fond de jeu.

Une opacité sera alors automatiquement appliquée aux cases lorsque celles-ci sont ouvertes par vos participants.

Exemple :

Arrière plan de la page Calendrier :

Ils correspondent à l’intérieur des cases présentes dans le fond du jeu. Ils s’affichent une fois que le joueur clique sur les cases.

Vous pouvez créer jusqu'à 50 contenus de cases différentes.

Vous pouvez réutiliser les mêmes contenus de cases pour plusieurs cases qui ont la même forme.

Pour un rendu optimal leurs formes et leurs tailles doivent correspondre à celles des cases fermées de votre fond du jeu.

Vous devez les exporter séparément au format .png / .svg / .gif

📱 Uniquement pour la partie Mobile lorsque que le toggle "Appliquer le placement des cases à toutes les vues" est désactiver.

Vous pourrez ajuster la dimension des cases sur Mobile via le curseur pour qu'elles s'adaptent exactement au fond de jeu en Mobile.

Les dimensions des cases seront donc identiques.

Les visuels des intérieurs des cases ne doivent pas être superposé lors de la configuration pour que les zones cliquables ne se chevauchent pas. Vous devez donc placer les visuels des cases fermées suffisamment espacés lors de la conception graphique.

Il y a plusieurs animations d’ouverture des cases disponibles lors de l’intégration :

Animations d'ouvertures :

Elle sera identique pour toutes les cases. Vous pouvez également sélectionner une couleur pour la partie intérieure des cases. Elle s’appliquera comme un filtre et sera visible pour les animations de type “volets” et “portes”

Vous pouvez ajouter une animation supplémentaire sur le fond de jeu directement dans l'éditeur pour favoriser le côté immersif, soit le défilement d'une image préalablement choisi soit donner un effet neige ❄️ en choisissant les couleurs que vous souhaitez faire défiler.

Cette méthode rogne automatiquement l’espace vide autour des assets.

Pour la production de graphismes diffusés via Adictiz Box, nous recommandons de travailler avec :

Découvrez des exemples de scénarisation du module ci-dessous et dans notre espace "Inspiration".