Créer une ville tel que Grepolis

[Seth]

Bonjour à tous,

cela fait quelque temps que je vois des jeux se développer avec des villes 2D qui ont comme particularité que l'on peut cliquer sur les bâtiments tel que sur le jeu Grepolis. J'aimerai savoir quel est la méthode à employer pour faire ce genre de choses et le langage.

Si vous avez même un lien sur une possible explication, ça m'intéresse !

bonne journée !

Seth

[Sephi-Chan]

Il s'agit d'images positionnées en CSS, avec un peu de Javascript pour réagir au survol (par exemple pour lancer une animation, mettre le bâtiment en surbrillance, etc.) et au click.

[Xenos]

Salut,

pas nécessairement: Isometry fonctionne sans JS, en SVG pur (via des ancres et une navigation classique).

On peut faire de même en HTML/CSS sans JS. L'effet de survol (un glow par exemple) n'est rajouté que par le CSS, sous la forme d'un .building-class:hover { filter: url('#svg-filter-id'); } (bien qu'un filtre non-SVG puisse aussi être utilisé). Pour le clic, on peut soit faire du JS et de l'AJAX et réinventer les iframes, soit faire une navigation classique (en changeant de page: faites simple pour vos premières versions!) soit avec un éventuel brin de JS et une iframe (qui remplace aisément l'AJAX avec l'avantage de créer un browsing context dédié, donc d'éviter que les IDs ne se marchent dessus, et la possibilité d'ouvrir ladite frame dans un onglet dédié).

[Seth]

Avec le css je vois comment faire, mais sur ce genre de jeu, rien n'est dans le css (quoi d'après ce que j'ai vu, je peux très bien me tromper).

Pouvez vous me donner un lien de tuto' sur le SVG dans le même style svp ?

merci pour vos réponses

[Xenos]

Tu peux regarder les sources des pages de Isometry

Sinon, pour le SVG:
https://toile.reinom.com/exemples-svg/
https://toile.reinom.com/les-astuces-et-pieges-du-svg/


Pour la question du CSS, si les mecs de Grepolis veulent jouer les burnés et tout gérer à leur sauce dans un super moteur 2D canvas customisé et tout, c'est leur problème. T'as probablement pas les ressources humaines, et pas les besoins marketing qu'ils ont (faut pas se leurrer: toutes ces technos [IMO bidon] où on atomise les pages en micro-éléments/où on gère le moindre pet de pixel à coup de JS, c'est pour pouvoir dresser des statistiques de fou sur ses joueurs et monétiser à fond). On peut se passer de ce genre de bricole sans aucun problème, et placer son styling en CSS, à condition, évidemment, de ne pas faire du canvas dans tous les sens.


Mes trois récents jeux, par exemple, ne gèrent pas les stylings en JS (très peu en tous cas): seuls les propriétés de styling dépendantes des valeurs float/int in-game sont gérées en JS. Le reste du styling (l'oeuf en gris par exemple quand il est dans un nid) est géré en CSS. La solution consistant simplement à laisser le JS stocker la donnée "est dans un nid" sur le DOM node, et à laisser le CSS appliquer le styling qu'on veut. L'atout majeur étant qu'un simple rechargement du CSS permet de voir ses modifications (F9, via le plugin Firefox "CSS Reloader"). Cela aide au développement (puisqu'on n'a pas à refaire tout le niveau pour voir le changement) et à la maintenance (puisque le styling n'est plus fondu au milieu du JS).
https://xenos.reinom.com/nest-eggs/
https://xenos.reinom.com/coast-harbor/
https://xenos.reinom.com/dragon-eggs/

[Sephi-Chan]

Merci pour le sermon, Ô grand prêtre.

[Xenos]

De rien...

Bon maintenant, vous signez et vous adhérez à la secte, ou vous vous cassez parce que j'ai du pain spiritique sur la planche

(Sermon mis à part, cela reste valide: rien ne t'oblige à faire comme Grepolis qui gère tout en JS+canvas, car tu peux réaliser de très bons jeux sans, via HTML/CSS/SVG)

[Seth]

J'ai fini tous les niveaux de ton jeu, sympas.
merci pour vos réponses.

Je vais devoir apprendre le svg, ça m'a l'air d'être très puissant et très sympathique.