Discussion :

[Invité4]

Bonjour,

dans un futur quand même assez lointain, c'est à dire en juillet, nous allons créer un système carte pour notre jeu de rôle en php.
Je tiens quand même à commencer à y réfléchir, voilà pourquoi je poste ce sujet.

Bref, il y a aura une image assez grande (la carte) (600x600px en PNG), plusieurs en fait mais seulement une sera affichée à la fois.
Dessus viendront se greffer d'autres images dynamiquement comme des personnages (autres joueurs), coffres et plus.

Bref, pour placer dynamiquement ces images sur la grande image, je pensais utiliser GD, mais j'imagine que le temps de calcul de serveur est monstrueux lorsque 50 personnes utilisent la carte en même temps (ajout des petites images avec transparence sur la carte et affichage).

Bref, je me demande si il existe d'autres alternatives en PHP ou simplement avec du JS ou du CSS.

Comme par exemple superposer des PNG transparents en JS ou en CSS ?
Ou une autre lib en PHP ?

Voilà, merci de vos futures réponses

[Djakisback]

Salut,

à priori je pense que tu peux superposer des images en les mettant dans des div et spécifiant le z-buffer.

Sinon si tu peux lancer des exécutables sur le serveur tu peux lancer imagemagick en ligne de commande (c'est chaud ^^, good luck) :
http://www.imagemagick.org/script/composite.php
Y a surement des autres progs plus simples.

Bye

[Invité4]

Oui, je connais un peu imagemagick, ça peut être pas mal.
Néanmoins mon hébergeur est un peu "frileux" avec les exec() et autres commandes php permettant de lancer des programmes.
Un mois ça marche, ensuite il décide de le désactiver, puis ça remarche... un peu comme gd, ils ont changé de serveur et depuis gd ne fonctionne plus.
Je suis en mutualisé, même si je vais sûrement bientôt devoir passer en dédié, je préfère éviter ce genre de manipulation.
Et est-ce plus rapide que gd ?

Peux-tu être plus précis sur le z-buffer ?
Car si je peux le faire en css, c'est tout ça de performances de serveur qui sont économisées.

[Djakisback]

Voilà un code fait à l'arrache :

<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:2; left: 206px; top: 111px;"><img src="smile3.png" width="18" height="18"></div>

<div id="Layer2" style="position:absolute; width:200px; height:115px; z-index:1; left: 206px; top: 90px;"><img src="fond.jpg" width="592" height="768"></div>

Ca marche sous IE, Firefox mais je sais pas ce qu'il en est des autres navigateurs.

[Invité4]

Ah c'est pas mal, donc z-index définit en fait la couche de superposition.
C'est vraiment excellent.

[ePoX]

Alors je ne sais pas trop comment font les créateurs de jeu en ligne tels que WC3 ou CS. Mais mon petit doigt me dit qu'il ne t'envoies pas les images génarées depuis le serveur.
Par contre ils balancent bonbon de coordonnées. Je n'en suis pas certains, mais avec un peu de bon sens on voit bien que c'est la solution la plus plausible.
Pour en revenir plus précisèment à ton problème, le mieux serait de générer des coordonnées pour chaque entité, et envoyé tout cela au client.
A partir de la on peut imaginer plsuieurs choses.
Tu généres l'affichage en CSS, du code html en fait, et le client rafrachit toutes les X secondes.
Tu envoies toutes les coordonnées necessaire à une anim flash, ou un client en Java ( ou plutot c'est ton anim flash, qui vas les demander :s )
Sinon tu peux utiliser Xmlhttprequest pour déplacer les elements en JS et sans recharger la page.

Pour l'histoire des z-index, à mon sens le problème ne se posent pas réélement. Car en faits tu vas avoir plusieurs calques les uns sur les autres.
Calque 1 : la carte
Calque 2 : Les chateaux ect
Calque 3 : Les monstres
Calques 4 : Les joueurs.

Disons qu'après la seule rééle contrainte que je voie c'est d'afficher le joueur par dessus tout le reste.

Sinon, moi perso je penche pour l'utilisation d'un flash car c'est plus conviviale et moins prise de tete pour la gestion multi plateforme que le xmlHttpRequest.
Pour ce qui est du CSS, sa rajoute encore un peu de taff à ton serveur, alors que ce taff peut très bien être géré par une appli client (cf flash ou Java).

bye

[Invité4]

Pour Flash, nous n'avons pas l'argent d'acheter une license.

Disons qu'après la seule rééle contrainte que je voie c'est d'afficher le joueur par dessus tout le reste.

Je ne vois pas pourquoi ? Avec le z-index, ça m'a l'air vraiment facile, il suffit de mettre un z-index plus grand que tous les autres.

Autrement je pense mettre la carte dans une iframe qui se rechargera à chaque tour d'actions.
Le jeu existe déjà et est déjà jouable, la carte sera un plus.
Les combats sont déjà basés au tour-par-tour, donc pourquoi pas la carte aussi.
Donc, on demande un déplacement, l'iframe se recharge, on voit si les joueurs dans la même zone se sont déplacés etc.

[ePoX]

Pour Flash, nous n'avons pas l'argent d'acheter une license.

L'internet ou on trouve tout et n'importe quoi n'est pas encore révolu !

Avec le z-index, ça m'a l'air vraiment facile, il suffit de mettre un z-index plus grand que tous les autres.

Sa utilise complètement les z-index le schéma que je t'ai décrit avec les calques ect. Mais je me disais que ce n'etait pas forcément necessaire de gérer le z-index de chaque entité au cas par cas. Il me semble, à tort peut être, que le seul z-index qui nous interesse rééllement c'est celui du joueur, qui doit pouvoir sa retrouver sur la carte à n'importe quel moment.

Pour en revenir cela :

Calque 1 : la carte
Calque 2 : Les chateaux ect
Calque 3 : Les monstres
Calques 4 : Les joueurs.

Avec un tel principe tu n'auras plus qu'à gérer les z-index de manière local à chaque calque.

Je te fais un exemple pour expliquer parce que j'ai un peu du mal à le décrire :/

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head></head>
<body>
<!-- La carte en png -->
<div style="width: 296px; height: 210px; position:absolute; top:0px; left:0px; background-color:Blue;">
    <!-- on pourrait y mettre une image -->
    <div style="width: 100px; height: 100px; position:absolute; top:5px; left:5px; background-color:Black; color:White; z-index:440;">
        qsdqsd
    </div>
</div>
<!-- Imaginnos que deds tu mettras tes joueurs -->
<div style="width: 296px; height: 210px; position:absolute; top:0px; left:0px; background-color:transparent;">
    <!-- joueur 1 -->
    <div style="width:50px; height: 50px; position:absolute; top:15px; left:15px; background-color:Gray; z-index:2;">
        -----
    </div>
</div>
</body>
</html>

[Invité4]

Ok, je vois pour les Z-Index.

Pour Flash, je ne crois pas qu'il existe de concepteurs gratuits ou opensource.