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

[starmindfr]

Bonjour pas mal en effet c'est plus pratique que mon script actuel qui traite en différé avec php!

Pas mal ton exemple, j'ai vu qu'il est possible de facilement modifier les tailles pour l’intégrer dans la page, je regarde un peut le code voir comme tout cela fonctionne merci

Tu permet que j’intègre ca dans le jeu en recopiant les sources ?

Sinon actuellement je traite toutes les "pieces" dans un meme png, au contraire tu as un png par piece, c'est plus simple / rapide au final de faire comme ca ?

[Xenos]

La rapidité d'exécution ne doit être envisagée comme un problème qu'au lancement, pas en amont.

En d'autres mots, mieux vaut un code propre et lent pour la machine qu'un code dégueulasse mais plus vite exécuté, car les codes propres pourront toujours être "compilés" par la suite. Ton temps est plus précieux que celui de la machine, donc, vise des sources propres, pas des sources rapides

[starmindfr]

Oui je comprend bien,je vais reprendre l'ensemble des conseils pour tout mettre au propre des que l'ensemble de la page est terminé

[Sephi-Chan]

2015 sera l'année du passage à HTTP/2, qui rend les techniques d'optimisation caduques (concaténation, sprites, sous-domaines, etc.). Dans quelques mois, les modules pour Nginx et Apache seront sortis et on pourra profiter de tout ça puisque la plupart des navigateurs sont déjà compatibles ou en passe de l'être.

[starmindfr]

Intéressant merci

[starmindfr]

Sinon pour en revenir au changement de visuel du mechas par CSS y a t'il une méthode pour que ca marche depuis un png comportant tous les éléments ou suis je obligé de passer par des png séparés ?

Actuellement je passe par des background comme :

Code PHP :

<?php 

background:url('http://mechaswar.com/images/tilesets/3.png') no-repeat scroll -1886px -696px;width:366px;height:328px; 

[@lucard]

tu peux utiliser une images plus petite.

sinon ajouter

img.MECHA{

zoom:0.5;        /*pour IE et Webkit*/

-moz-transformcale(0.5);         /*pour Mozilia*/

-moz-transform-origin: 0 0;

-o-transformcale(0.5);         /* pour Opera */

-o-transform-origin: 0 0;}

mais ça risque parfois de pas faire "propre" avec des borders

Mise à jour : http://codepen.io/CyrilLevallois/pen/NPerYx

[starmindfr]

Pas mal en effet merci je vais tester ca

[Xenos]

reduire la taille de l'objet en dessous des 328px sans rogner l'image

C'est background-size qu'il me semble te manquer. A voir si tu veux utiliser le raccourcis syntaxique de background, façon:

<bg-image> <position> / <bg-size> <repeat-style> <attachment>

Note le <bg-size> pour spécifier la taille de l'image dans le background. Ce qui n'a rien à voir avec <width> et <height>, qui définissent la taille de l'objet HTML, et non du background qu'il contient.

[starmindfr]

J'ai tenter bg-size et bg-position helas le probleme c'est que je prend les coordonnées x,y de depart "dans le png" et les infos de width / height en px servent a delimiter la fin de la zone a prendre pour le background. Ca donne 4 valeurs en taille fixe / px et pas moyen de retraiter en % derriere.

Par contre le "zoom" devrait fonctionner j'avais du me tromper dans la cible du zoom.
Edit : en effet ca passe bien. Ca demande pas mal de boulot pour pointer les bonnes pieces mais plus besoin de faire x png

un ptit test rapide je n'ai pas eu le temps de finir / mettre au propre / reprendre les positions : http://mechaswar.com/mechlabv0.html

Sinon merci @lucard ca s'integre bien avec tes découpages de png je n'ai plus qu'a "mapper" les valeurs des selects dans le code du jeu et c'est terminé