Embedded Files
1 - Création d'un marqueur
1 - Création d'un marqueur
Les marqueurs du cloud mesurent par défaut 60x40px (si vous êtes équipés d'iPad Retina vous pouvez créer vos images en 120x80px ils s'afficheront en meilleure résolution). À vous d’adapter la taille de votre marqueur si vous souhaitez qu’il soit plus petit ou plus gros.
Pour pouvoir intégrer votre marqueur personnalisé vous devez le créer en 3 « états » (voir exemples ci-dessous) :
Normal
Sélectionné
Effectué
❓ASTUCE : Vous pouvez ajouter, sur un fichier séparé, une ombre en .png qui s'affichera automatiquement derrière vos marqueurs.
2 - Les fichiers nécessaires
2 - Les fichiers nécessaires
Le dossier de votre marqueur personnalisé doit donc contenir :
- Les 3 états de votre marqueur (png)
- L’ombre (png)
- Le fichier markers.json permettant de paramétrer l’emplacement du marqueur (attention à ne pas en modifier le nom)
3 – Le fichier markers.json
3 – Le fichier markers.json
{ "boussole": { "normal": { "image": "boussole-bleu-clair.png", "height": 60, "width": 40, "hotspot": { "top": 60, "left": 20 }, "shadow": { "image": "shadow.png", "height": 100, "width": 100, "hotspot": { "top": 82, "left": 41 } } }, "normalSelected": { "image": "boussole-bleu-fonce.png" }, "disabled": { "image": "boussole-gris-clair.png" } }}Commentaires :
Commentaires :
"image": "boussole-bleu-clair.png",- Nom de l’image du marqueur : entrez le nom exact de l'image png du marqueur, qui doit se situer dans votre dossier global (conservez bien les guillemets)
"height": 60,"width": 40,- Taille de votre image sur la carte : les valeurs sont représentées en pixels. Ici, le marqueur mesurera 60px de haut, et 40px de large.
"hotspot": { "top": 60, "left": 20},- Emplacement du point de repère de votre marqueur : indique à quelle endroit placer le point de repère du marqueur sur votre image.
Dans notre cas nous souhaitons placer ce point de repère à la pointe de la goutte > Descendre de 60px, puis décaler de 20px à partir de la gauche (soit la moitié de la largeur)
"shadow": { "image": "shadow.png",- Nom de l'image de votre ombre
"normalSelected": { "image": "boussole-bleu-fonce.png"- Nom de l’image du marqueur – état sélectionné
"disabled": { "image": "boussole-gris-clair.png"Pour intégrer plusieurs marqueurs personnalisés, il suffit de dupliquer la séquence autant de fois que nécessaire, en les séparant par une virgule (cf code ci-dessous), puis de modifier les informations.
{ "MarqueurBoussole": { "normal": { "image": "boussole-bleu-clair.png", "height": 60, "width": 40, "hotspot": { "top": 60, "left": 20 }, "shadow": { "image": "shadow.png", "height": 100, "width": 100, "hotspot": { "top": 82, "left": 41 } } }, "normalSelected": { "image": "boussole-bleu-fonce.png" }, "disabled": { "image": "boussole-gris-clair.png" } }, "MarqueurDrapeau": { "normal": { "image": "drapeau-bleu-clair.png", "height": 60, "width": 40, "hotspot": { "top": 60, "left": 20 }, "shadow": { "image": "shadow.png", "height": 100, "width": 100, "hotspot": { "top": 82, "left": 41 } } }, "normalSelected": { "image": "drapeau-bleu-fonce.png" }, "disabled": { "image": "drapeau-gris-clair.png" } }}4 – Intégration dans le cloud
4 – Intégration dans le cloud
- Une fois votre dossier complet, compressez-le dans un zip.
- Glissez le zip dans les médias de votre jeu
- Sélectionnez votre marqueur dans les paramètres de carte
- Retrouvez votre marqueur dans l’éditeur de carte
Report abuse