+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Les réalisations de la communauté (https://jeuweb.org/forumdisplay.php?fid=39)
+--- Forum : Jeux en développement (https://jeuweb.org/forumdisplay.php?fid=53)
+--- Sujet : The Magic Institute - le jeu de magie gratuit par navigateur (/showthread.php?tid=1056)
RE: The Magic Institute - le jeu de magie gratuit par navigateur - Argorate - 13-10-2014
je n'utilise pas de canvas ici, ça serait sans doute plus lourd de faire un traitement custum que le comportement par défaut.
Je vais voir en augmentant la taille de l’image source.
RE: The Magic Institute - le jeu de magie gratuit par navigateur - Xenos - 13-10-2014
Alors, si ce sont des éléments DOM transformés en CSS, il existe une propriété permettant de forcer un rendu "plus joli" lors des redimensionnements. Faut aller chercher du coté des propriétés CSS dont j'ai oublié le nom, mais dont les valeurs sont du type "optimize-speed".
RE: The Magic Institute - le jeu de magie gratuit par navigateur - Argorate - 13-10-2014
Bon voilà, j'ai corrigé les ombres, et ajouter le fond semi transparent sur tout le menu, j'ai également mis en place la jauge du tour, qui remplit le fond progressivement derrière les jauges de vie, le nom etc (en bleu) et en jauge/orange pour symboliser le joueur sélectionné auquel s'applique le menu, ça donne donc ça:
![[Image: 7.jpg]](http://www.themagicinstitute.fr/images/slider/7.jpg)
(ctrl + F5 pour vider le cache)
RE: The Magic Institute - le jeu de magie gratuit par navigateur - @lucard - 14-10-2014
Citation :et en jauge/orange pour symboliser le joueur sélectionné auquel s'applique le menu
J'aurais laissé un fond noir en semi-transparence (en plus du fond noir semi-transparent) pour les persos qui ne sont pas sélectionnés.
et en bleu (en semi-transparence encore) le perso choisi...
Si le "menu.select" est bleu, alors "perso.select" devrait aussi être en bleu.
Ça serait plus en adéquation. Non ?
RE: The Magic Institute - le jeu de magie gratuit par navigateur - Argorate - 14-10-2014
En fait le fond est noir comme avant, mais il se remplit en bleu avec le temps, symbolisant le cooldown du prochain tour, et donc en orange/jaune (animation css3) pour le perso selectionné
RE: The Magic Institute - le jeu de magie gratuit par navigateur - @lucard - 14-10-2014
dans ce cas là, ça change pas grand chose. Je préfère voir "de transparent" à " bleu" sans passé par une autre couleur.
Code :
@keyframes BgAnimColor {
0% {background: transparent;}
100% {background: blue;}
}(ce n'est que mon avis personnel)
RE: The Magic Institute - le jeu de magie gratuit par navigateur - Xenos - 14-10-2014
Note:
transparent est une couleur noire de base, équivalente à rgba(0,0,0,0) ce qui peut être problématique si on veut l'animer vers rgba(0,0,255,1). Deux composantes seront en réalité animées: le canal bleu (la couleur sera de plus en plus bleue) et le canal alpha (la couleur sera de plus en plus opaque).
[Histoire de pas faire des topics de 100m de long en enchainant les réponses]
Non, "transparent" ne fait pas des trucs inattendus, il est juste une couleur, noire, transparente. Sachant cela, rien n'interdit de l'utiliser.
"black-transparent" aurait été plus explicite, mais si on lit les specs, y'a rien d'inattendu
iffle:
RE: The Magic Institute - le jeu de magie gratuit par navigateur - Argorate - 14-10-2014
Oui, faut jamais utilisé "transparent" ça fait des trucs inattendu
Et j'ai effectivement diminué la transparence, car ça n'était pas "bleu", mais deux couche de semi transparent, ça fait bcp, du coup en diminuant a 0.5, c'est mieux !
RE: The Magic Institute - le jeu de magie gratuit par navigateur - @lucard - 15-10-2014
en fait, pour le coup ça n'avait pas d'importance car on avait déjà un fond en noir à demi transparent... mais en relisant le post précédent je me suis aperçu qu'il ne s'agissait pas d'animer la couleur, mais simplement le width...
donc "transparent", dans le cas précédent, ça fonctionnait (car bg noir) mais en l’occurrence on s'en fout royal puisqu'il ne s'agit pas de cela.
iffle:dans le cas présent il faut animer : "opacity" (optionnel) et "width".
opacity : 0→0.3
width : 0→100%
RE: The Magic Institute - le jeu de magie gratuit par navigateur - Argorate - 15-10-2014
En fait la jauge augmente de bas en haut, donc j'anime le height, mais c'est l'idée.