JeuWeb - Crée ton jeu par navigateur
Zone de brouillard sur une carte - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Zone de brouillard sur une carte (/showthread.php?tid=7846)

Zone de brouillard sur une carte - Air - 23-07-2017

Bonjour à tous,

Je suis actuellement sur la conception de ma carte et j'avoue que c'est le moment le plus difficile de mon projet et encore je n'ai pas abordé les déplacement de flotte.
Je souhaite mettre un brouillard de guerre sur cette carte. Dans ma base de données, je stock uniquement les cases visibles par le joueur.
Dans les grands lignes ma carte est en noir complet et je rends visible les cases stockés dans la table.

L'implémentation est plus compliqué. Je suis tombé sur l'article : https://toile.reinom.com/les-astuces-et-pieges-du-svg/ avec la partie

Je me dis que la partie clipPath et mask répondra à mon besoin. Sauf que j'ai aucune idée de comment faire.

Quelqu'un a t-il déjà essayé ces balises ? (je suppose que Xénos oui).
Avez-vous un exemple d'implémentation ?
Ainsi que les conseils sur leurs utilisations

Merci beaucoup.

RE: Zone de brouillard sur une carte - Air - 29-07-2017

Hello,

J'ai testé les balises clipPath et mask sans succès.

Je suis en train de tester une autres solution. Les zones découvertes par le joueur seront affichées par un polygone SVG.
Pour le moment je suis plutôt satisfait de ce choix.

Code PHP :
<?php 

<div id="map" style="width: 500px; height: 500px;">

    <div id="sectors">

        <div id="systems">

            <a href="#" style="top: 20px; left: 60px"><img src="http://game.asylamba.com/s13/public/media/map/systems/t5c6.png"  /></a>

        </div>



                <div style="position: absolute;top: 60px;left: 100px;width: 500px; height: 500px;"><image src="map3.jpg" /></div>

            <svg viewBox="0, 0, 500, 500" xmlns="http://www.w3.org/2000/svg">

                <polygon class="decouverte" points="60 20, 60 40, 80 40, 80 20" />

            </svg>

    </div>

</div>


RE: Zone de brouillard sur une carte - Xenos - 29-07-2017

Salut,

meerrde, j'avais vu ce topic, et je m'étais dit qu'en effet, il fallait que je détaille un peu plus l'exemple de brouillard SVG :/ Puis, vu que le topic est passé en "lu", je l'ai zappé -_-

Quoi qu'il en soit, tu pars sur la bonne piste: dans un premier temps, il ne faut envoyer au joueur que les zones qu'il a le droit de voir. S'il s'agit d'une carte constituée de cases, il ne faut donc envoyer au joueur (= afficher dans la page web) que les cases qu'il peut voir. Si tu envoyais toute la carte pour masquer ensuite des morceaux côté client (= en javascript ou en CSS) alors le joueur pourrait tricher, et retirer ce masque pour voir toute la carte. S'il s'agit d'une map continue (sans case), alors le principe reste le même, bien qu'il soit plus complexe: il ne faut envoyer au joueur que les données qui se trouvent dans sa zone de visibilité.

Ensuite, côté client, tu peux appliquer des effets esthétiques. Dans l'exemple de l'article, j'avais appliqué mask & clippath, le premier pour donner un effet de "dégradé" dans le brouillard, et le second pour que les zones dans le brouillard apparaissent comme "non cliquables".

Je peux essayer d'en retrouver le code original (ou d'en refaire rapidement un), histoire que ce soit plus parlant Smile

RE: Zone de brouillard sur une carte - Air - 29-07-2017

Pas de souci Xenos,

ça m'a permis de chercher de mon côté :-)

RE: Zone de brouillard sur une carte - Xenos - 29-07-2017

Finalement, cela me fait un peu ch*er de le faire... :/ Disons que, vu que t'es parti dans la bonne direction, je me contenterai juste de t'aiguiller sur le MDN https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking qui propose généralement de bons articles pour comprendre les API web (dont le SVG).
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath et https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask te donneront les détails de chacun de ces deux éléments. Après, tu peux jouer un peu avec si nécessaire (et n'hésite pas à partager les résultats, pour les prochains Wink )