+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Les animations (/showthread.php?tid=7598)
RE: Les animations - Argorate - 26-02-2016
J'utilise "Ulead GIF Animator 5", mais je pense qu'a cause de la semi transparence c'est assez has been dans notre contexte.
Je pense que SVG est inutile aussi, je préfère de loin la simplicité d'un css animation comme proposé par @lucard. Ce n'est donc pas du JS, c'est CSS donc c'est natif (comme SVG). Je pense que c'est assez performant.
Pour la vidéo, je pense que c'est difficilement pensable, puisque si je déclenche une vidéo en jeu, il y aura un temps de latence pour la charger (qui reste assez lourd).
Certains diront qu'on peut la précharger, mais ce n'est pas possible dans mon cas, puisqu'une action précise du joueur les déclencheront, donc ça doit se faire en temps reel, d'où le fait que je pense rester sur de l'anim. CSS/JS-script.
RE: Les animations - Xenos - 26-02-2016
Citation :éclater une image en plusieurs parties, et les faire se mouvoir les unes par rapport aux autres selon un mouvement simple et lentC'est faisable en CSS, ou en SVG (plus pratique pour ça je trouve).
Dessiner un canvas dans un canvas pourrait servir à dessiner une animation auto-générée (~GIF) dans le canvas du jeu (pour ceux qui passent par cette méthode). Ou pour découper une animation complexe (N canvas avec un objet animé par canvas, genre bras de robot, qu'on assemble dans un autre canvas [le robot] qu'on dessine dans le canvas final [la scène de bataille]).
CSS pour l'animation a l'avantage de pouvoir être personnalisé par l'utilisateur (tu peux leur permettre de faire & partager leur CSS stylisant leur personnage par exemple). SVG n'a pas cet avantage (plus dangereux car c'est du XML: on peut y inclure du JS, même si FF ne l'exécutera pas si ce fichier SVG est un @src d'un tag img) mais il permet de manipuler l'animation comme une ressource d'image alors que le CSS doit être rajouté à la page où l'animation apparait.
Oui, pour des courtes animations temps-réel, la vidéo... on oublie! (mais si on veut faire tordu: on peut surement générer la vidéo en JS, et l'intégrer à la page via les BlobURI... mais overkill au possible!).
RE: Les animations - L'Omniscient - 26-02-2016
Merci pour toutes ces infos, ça donne plein de pistes
Du coup pour une animation en CSS, je dessine image par image et je charge toutes les images pour les relier entre elles en CSS (avec un peu de JS pour agrémenter) c'est ça ?
Sinon je vais aussi regarder du côté du vectoriel, c'est quand même moins long que de faire du dessin image par image :p
Et sinon pour eessayer une animation avant de la coder, je peux envisager de faire ça sur Photofiltre ou Gimp ? Je sais pas si Ya moyen d'animer des png sur ces logiciels.
Du coup @lucard tu as fais des études de graphisme? Tu es graphiste de profession ?
RE: Les animations - Xenos - 26-02-2016
CSS, via @keyframes et transition, te permet de faire de l'animation entre deux propriétés CSS. Si tu peux ne faire qu'avec les propriétés, tant mieux.
Sinon, tu peux t'en servir pour position le background-image d'un élément en fonction du temps (& dans ce background-image, tu as N frames de l'animation, co^te à cîte). Le problème du JS (ou autre) chargeant 1 image PNG/frame réside dans l'éventuel temps de latence du téléchargement: le CSS (ou autre) change le background d'un élément pour l'image-frame suivante, le navigateur la télécharge, mais pendant ce téléchargement, le background de l'élément est vide.
On peut contrer ce problème:
• En testant si le navigateur télécharge toutes les ressources url() d'un CSS, même si elles ne sont pas affichées (et donc, il n'y aura pas de latence de téléchargement)
• En laissant la frame précédente en arrière-plan de la frame courante (mais là, ça peut coincer s'il y a de la transparence)
• En mettant toutes les frames dans une seule image PNG (et on déplace le background-position): c'est souvent utilisé, et pertinent pour de petites animations
• En cherchant si on peut déclarer des "ressources" au navigateur pour qu'il aille les chercher quand il charge la page (et on lui fait charger les PNG à ce moment-là plutôt qu'au moment de jouer l'animation)
RE: Les animations - Amadeous - 26-02-2016
Les animations CSS c'est lourd.
Photofiltre y'a un module gif animé (je ne crois pas png animé).
Gimp c'est Filtres > Animation > Rejouer l'animation.
RE: Les animations - Argorate - 26-02-2016
En quoi c'est lourd une anim CSS? (bien plus performante d'ailleurs qu'un .animate() JS EDIT: Jquery)
RE: Les animations - Amadeous - 26-02-2016
(26-02-2016, 05:45 PM)Argorate a écrit : En quoi c'est lourd une anim CSS? (bien plus performante d'ailleurs qu'un .animate() JS)
Par rapport à du gif animé.
RE: Les animations - @lucard - 26-02-2016
Je suis d'accord avec Argorate. Je ne trouve pas l'animation CSS lourde. Y-a quasiment rien.
Si ça rame c'est que l'image png est lourde.
On ne fait pas des animations en plein écran avec.
Pour te répondre Omniscient, j'ai fais des formations de vidéographiste et Infographiste 3D (général et Vfx)
Donc par conséquent je connais aussi bien la 2D.
Mais ce n'est plus exactement mon métier.
Amadeus tu compares un AIRBUS A320 à une 4L.
L'airbus est plus lourd, mais embarque plus de monde (couleurs) et va plus vite, plis loin.
La 4L est super légère. Tourne vite dans les virages, mais elle est vieille, et n'a que 4 places. Bref pour aller en ville c'est bien, pas plus.
Là le gif c'est bien, mais pas pour tout et partout.
Ps: pour avoir le code source des exemples que j'ai montrés, il suffit de cliquer sur leur titre. Le html et le CSS sont séparés.
RE: Les animations - Amadeous - 27-02-2016
Ouaip, je crois que je m'accroche à mon intérêt pour les gifs animés alors que je suis complètement has been. Je dois évoluer.
L'apng est enterré ou ça peut-être envisageable de travailler dessus?
RE: Les animations - Thêta Tau Tau - 27-02-2016
L'apng n'est pas supporté par chrome et IE, donc c'est inutilisable.