[MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans!

[Xenos]

Pas sûr d'avoir tout suivit, mais des formes géométriques avec des bordures, cela me semble être du SVG (en <embed/> si besoin)

[starmindfr]

pas evident le png vu que le bord incliné gauche est different du droit il faut jongler avec un centre a repeter en fonction de la taille d'ecran ?

pour le svg je me méfie des problemes de compatibilité, je tenterais demain voir si je trouve un bout de code qui passe bien sous IE

En tout cas merci @lucard le html passe bien.

[Xenos]

Niveau compatibilité, SVG se défend quand même vachement bien... Il n'y a que IE8 et moins qui ne le considèrent pas.
IE8, c'est 2.60% de part de marché. Pour un élément de décoration, ca me semble franchement négligeable.

[starmindfr]

oui je testerai sinon petit bug etrange l'image de fond - carte est un jpg avec un usemap, et des que l'image est chargée les 3/4 des backgrounds disparaissent dont le fameux bandeau j'ai verifier les z-index et enlever les couleurs transparentes rien n'y fait, c'est comme si la superposition avec le jpeg désactivait les ::before / after

edit : cela semble lier au "position" si je met en absolute tout re apparait mais evidemment tout est en vrac apres

[starmindfr]

Bonjour

En svg j'ai donc trouvé ce genre de code :

Code PHP :

<?php 

<svg width="0" height="0">



   <clipPath id="clipShape">

  <polygon points="960 2,960 53,624 54,594 85,362 86,325 53,3 51,2 3">

      </polygon>

  </clipPath>

</svg> 

[Xenos]

SVG est à la fois une image, qui peut donc s'adapter à la taille que tu souhaites, et aussi un élément de DOM (s'il a été incrusté dans le code HTML).
Je suis pas sûr d'avoir compris le but du jeu, mais voici quelques cas:
• Etirer l'image SVG sur la largeur de l'écran → {CSS background-image + background-size + width} || {tag <img/> dont le @src pointe sur le fichier image SVG + CSS width} || {tag SVG au @width=100% + SVG preserve-aspect ratio none}
• Répéter l'image sur la largeur de l'écran → {CSS background + background-repeat + width}
• Répéter l'image sur la largeur de l'écran, un nombre entier de fois (ne pas couper en deux un triangle par ex) → { CSS border-image}
• Répéter le triangle dans l'image SVG → SVG patterns

[starmindfr]

Bonjour merci

donc j'ai fait un svg ici et j'ai intégré le code dans le jeu ca marche bien sur firefox : http://mechaswar.com/test75.html

mais pas moyen sous IE 10 je n'ai pas très bien compris le embed.

A noter que c'est directement la mise en forme du cadre qui ne marche pas, sans aller chercher le code de resize.

[@lucard]

[starmindfr]

Intéressant @lucard mais ca ne passe pas chez moi en IE

PS : j'ai deja l'ensemble pas mal fonctionnel aussi sous firefox, j'ai basculer ton profil jeu sur l'affichage de test (il faut rouvrir la fenetre)

Sinon sous IE j'ai réussit a afficher un début (la forme est la mais pratiquement hors de la fenêtre en haut a droite) en truquant et le code n'est plus compatible Firefox ...

Ca revient a mettre en plus une forme "rectangulaire" dans le svg assez grande genre 1000*1000 et lui appliquer les points définis juste au dessus, sans passer par le css :

Code PHP :

<?php 

<svg width="0" height="0"



viewPort="0 0 0 0" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<defs>

<clipPath id="myClip">

<polygon id='poly' points="960 0,960 50,620 50,600 80,360 80,340 50,0 50,0 0"  >

</polygon>

</clipPath>

</defs>

<rect x="0" y="0" width="1000" height="1000"

clip-path="url(#myClip)"/>

</svg> 

[starmindfr]

edit : ha bha forcement les bordures fluos c'est pas gagné sur une forme polygonale en 2 parties :p