Erentis, l'académie de magie - [L'Ile du Coeur]

[L'Omniscient]

Erentis, l'académie de magie

https://www.ile-du-coeur.com/

Principe:
Vous incarnez un magicien dans une école de magie et devez apprendre à maîtriser vos pouvoirs dans ce RPG en tour pas tour façon point & click.

Description complète:
Non-spécifié

Mots-clef:
Moyen-Âge, Monde Fantastique, RPG, Gestion, Combats, MMO, 1vs1, Jeu solo, Tour par tour, Temps réel, Compatible mobile

---

Durée d'une session de jeu	1 heure
Fréquence de jeu	Non-spécifié
Financement	Non-spécifié
Technologies utilisées	HTML, CSS, Javascript, PHP, MySQL, JQUERY, Ajax, Websockets,
L'équipe de création	Crée par Arnaud Degouy, rejoint en mai 2020 par Blidnight

---

Compte de test: Non-spécifié

[Xenos]

Sympa comme nouvelle direction

Je ne suis pas sûr d'avoir compris le point sur "la fonction ZOOM": les utilisateur ne vont pas faire le zoom dans la page, c'est sûr que non. Si tu veux ajuster à la taille de l'écran, charge à ton CSS de le faire, et à tes images d'être en définition correcte pour ne pas être trop pixellisée/floues.

SI j'ai bien suivi, on a donc des "cours" avec plusieurs autres joueurs connectés en même temps? S'il n'y a aucun autre joueur, on peut quand même jouer?

[L'Omniscient]

Oui je songe à mettre mon cadre global en max width max height %, j'ai juste peur que ça déplace mal certain éléments.

Oui, ce sont des cours avec d'autres joueurs, et oui on peut faire les cours même sans autres joueurs. Je voulais juste amener un côté social où on se sent avec d'autres joueurs, et on peut discuter avec eux pendant les cours. (J'aime bien cette présence humaine qu'il y a dans les MMO, on ne se sent pas seul). Et ça donne une impression que le monde ne tourne pas qu'autour de soi je trouve. Je réfléchis encore à l'intégration d'un tchat. Récemment je me suis dis que le système de Dark Soul était vraiment intéressant : on interagit avec des gestes et on ne peut pas parler. Ca supprime d'office tous les toxics / trolls / harceleurs / spammeurs / insultes / flame qui peuvent vraiment nuire à l'ambiance et à l'immersion. (Et faut pas se leurrer, yen aura forcément un certain pourcentage, ne serait-ce qu'en combat contre un autre joueur si le perdant a la rage ou que le gagnant nargue le perdant :p) Et ca ajoute un côté mystérieux et autre monde. L'autre élément dans Dark Soul, c'est qu'on peut écrire des messages avec des mots pré-écris, là aussi c'est intéressant, ça devient des genre d'énigmes, et c'est vachement intéressant en terme de traduction et de lier des joueurs de différentes nationalités. A voir comment ça peut s'intégrer.

[L'Omniscient]

Quelqu'un saurait comment fonctionne la fonction zoom du navigateur ? Elle fonctionne magnifiquement bien, et c'est magnifiquement propre. c'est juste une horreur d'adapter correctement tous les éléments indépendamment à tous les navigateur u_u J'aimerais me calquer sur sa méthode d'agrandissement pour mon code.

[Xenos]

Hum, je ne suis pas sûr que tu partes sur la bonne approche: tu n'es pas censé te reposer sur la fonction de zoom (ctrl+molette, c'est ce dont tu parles?) du navigateur pour que l'utilisateur adapte ton site à sa taille d'écran: c'est le navigateur qui doit être capable de comprendre ton site (donc, à toi de le "coder proprement", en termes de CSS) pour qu'il puisse en faire l'adaptation au contexte de l'utilisateur (contexte qui inclus la taille de l'écran, et le zoom désiré par l'utilisateur).

Sinon, pour répondre à la question du zoom, t'as bien la balise de meta viewport, mais c'est pas une bonne application <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

[L'Omniscient]

J'ai modifié l'index de mon site pour mieux présenter les différents projets (qui ne sont pas encore présentés mis à part le premier).
Et j'ai ajouté un petit article par la même occasion, qui explique les projets en cours, et avec l'illustration de l'académie de magie Erentis (faites pas attention à la perspective).

http://www.ile-du-coeur.com/

Concernant le zoom, en fait la manière dont le zoom agrandit fonctionne parfaitement bien. J'ai essayé de coder en CSS l'ajustement auto, mais vraiment, je ne sais même pas si c'est possible de faire quelque chose de correct... Si la largeur change, les images qui doivent être réglées en hauteur ne sont pas redimensionnées... Du coup les portes ne sont plus sur les lignes et plus à la bonne taille. Je ne crois pas pouvoir avoir l'exact même rendu en fonction des redimensionnements, du coup j'aimerais me caler sur le système qu'utilise le zoom pour redimensionner (JS ou CSS si jamais c'est possible). Est-ce qu'il s'agit d'un agrandissement/réduction de pixels ?

[Xenos]

J'ai rien compris à pourquoi tu galères.
IMO, tu dois pouvoir faire qqc comme https://xenos.reinom.com/skye-birthday au scroll près (je n'aurai peut-être pas dû le laisser sur les écrans PC en fait)
Le principe étant simplement de fixer une hauteur proportionnelle à ta largeur, suivant le ratio de l'image (ie: width: 100vw; height: 75vw pour un 4:3 si j'ai pris le ratio dans le bon sens)

[L'Omniscient]

Moi je comprends pas comment le positionnement peut te paraître si simple en CSS xD

Là, le premier problème que j'ai, c'est que l'image de fond n'a pas un ratio correct si je met le width ou le height en %, ou alors faudrait que je mette pas l'image en cover, mais dans ce cas, le cadre va continuer à s'agrandir, ainsi que mes images dans le cadre, mais pas l'image de fond (donc la porte va devenir beaucoup plus grande).

Le zoom du navigateur conserve les bons ratios du fond et la bonne position des éléments.

[Xenos]

Il m'est avis déjà que "cover" n'est pas ce que tu cherches: l'image sera croppée si le container n'est pas du bon ratio. C'est plutôt "contain" que tu voudrais.

Ceci mis à part, ton background, tu le fous à 100% 100% de son container (donc pas de ratio au niveau du background, c'est le conteneur qui fixera le ratio: pas de cover ni de contain du coup), puis tu fous ton container à width:100vw (par exemple, pour couvrir la pleine largeur) et son height tu le fous à Xvw de sorte que X = 100 / ratio de l'image (aka pour 16/9e de ratio d'image, pas d'écran hein on s'en balek, X = 100 * 9/16 => X = 56.25 => height: 56.25vw.
Après, tu mets ce container en "position: relative" et tu peux placer des éléments dedans en position: absolute, et en % (ie: placer un élément au centre de l'image = position:absolute; left: calc(50% - largeur de l'élément / 2); top: calc(50% - hauteur de l'élément / 2);

Je pense qu'on devrais déplacer çà dans un topic à part d'ailleurs, si cela te convient, je le ferai.

[L'Omniscient]

Tes conseils étaient parfaits, mon resize fonctionne exactement comme je le voulais, merci beaucoup !
Tu peux séparer le sujet, ça peut en aider d'autres ^^

Ca avance lentement mais sûrement, bientôt on pourra pêcher du poisson :p