Ce tutoriel vous guidera étape par étape pour afficher correctement un calque (overlay), obtenu suite au précédent tutoriel, sur Wplace à l'aide d'un script.
1. Le fonctionnement
Afin d'afficher le calque, il est nécessaire d'installer un script d'overlay qui va permettre de gérer les calques et propose d'autres fonctionnalités intéressantes.
Les scripts nécessitent une extension pour navigateur afin de fonctionner. En effet, ils s'agissent plus précisémment de "userscript" qui ne peuvent pas être exécutés nativement par le navigateur. Nous allons donc utilisée une extension appelée Tampermonkey afin d'installer le script.
Cette extension permet va nous permettre d'injecter le code nécessaire sur Wplace pour afficher votre calque en transparence par-dessus la carte.
⚠️ Prérequis
- Un navigateur compatible (Chrome, Edge, Firefox, Safari, Opera, etc...).
- L'image de votre modèle convertie et prête à être utilisée.
2. Installation du script
Tout d'abord, installez l'extension Tampermonkey en vous rendant sur leur site puis en cliquant sur "Aller au magasin". Une fois sur la page de l'extension sur la boutique de votre navigateur, cliquez sur le bouton pour l'ajouter à votre navigateur.
Nous allons utiliser le script Skirk Marble. Ce script est une reprise d'un autre script populaire, mais avec davantage de fonctionnalités et bien plus complet.
Le script est disponible sur GitHub. Rendez-vous dans l'onglet "Releases" de son dépôt GitHub. Descendez jusqu'à trouver le fichier SkirkMarble.user.js et cliquez dessus.
Si l'installation de Tampermonkey s'est réalisée correctement, vous serez redirigé vers une page Tampermonkey : cliquez simplement sur le bouton "Installer" afin d'ajouter le script à Tampermonkey.
Allez dans les paramètres d'extensions, trouvez Tampermonkey et cliquez sur "Détails". Cherchez et activez l'option "Autoriser les scripts utilisateurs".
3. Configuration
Afin de configurer le script, rendez-vous sur Wplace.live. Une fenêtre apparaîtra à l'écran : c'est l'interface du script. Naviguez dans les paramètres afin de personnaliser l'outil selon vos préférences (opacité, grille, etc.).
Interface du script sur Wplace
4. Ajout du calque et positionnement
Nous pouvons désormais passer à l'ajout du calque :
- Cliquez sur la carte à l'endroit où vous souhaitez positionner le calque (correspondant au coin supérieur gauche de votre calque).
- Une fois la sélection faite, appuyez sur le bouton "Detect" afin remplir les coordonnées de votre point.
- Les coordonées étant remplies, cliquez sur "Upload Template" et sélectionnez votre calque.
- Enfin, cliquez sur "Create" afin de créer le calque sur la carte.
💡 Bon à savoir
- Vous pouvez déplacer un calque après sa création en refaisant la manipulation (il doit porter le même nom et ne doit pas avoir été modifié).
- Vous pouvez gérer l'ensemble de vos calques via le bouton "Manage" (renommer, télécharger, s'y rendre, supprimer et l'activer ou non !).
Le script dispose de plusieurs fonctionnalités utiles, comme une barre de progression du calque, un compteur de pixels manquants, un indicateur de mauvaise couleurs et bien plus encore ! Nous vous laissons découvrir tout son potentiel par vous-même. 😉
Ordre des étapes
Vous disposez maintenant d'un outil pour vous aider à dessiner vos pixels-art, quels que soient leurs dimensions.
En cas de tout problème, nous sommes là pour vous aider ! Contactez-nous via notre formulaire de contact sur notre page À propos.