AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


7 résultats trouvés pour animation

Shoki

Animations simples en CSS3 - Sam 27 Aoû 2016 - 13:19



Animations simples en CSS3


Bien le bonjour, cher curieux ! Je poste mon premier tutoriel de codage pour... parler d'animations. Et attention, j'ai dit "animations", pas "transition" ou "transformations". D'ailleurs, vous n'aurez pas besoin de ces derniers pour comprendre ce tutoriel, je ne vais parler que des animations.

 
Tu peux pas donner un exemple au lieu de parler d'"animations" ?


En effet, ça serait plus pratique. Voici donc un petit exemple d'animation : clique ! N'est-ce pas magnifique ? En général, les animations se font avec des langages comme le JavaScript, mais ici nous allons en réaliser des simples rien qu'avec le CSS3 ! Tu veux faire la même chose ? Dans ce cas, il te suffit de suivre ce tutoriel !

 
Je précise que j'ai déjà fait ce tutoriel sur un autre forum, même si je vais remanier mes explications pour ici.
Au passage, je m'excuse s'il y avait déjà un tutoriel sur ça x:


 
Ne fonctionne pas sur les versions d'Internet Explorer (Microsoft Edge) antérieures à la 10 ! Bien veiller à mettre des préfixes. Tutoriel sur les préfixe : ici.


Comment ça marche ?


Reprenons notre petite animation de plus haut, à savoir celle-ci. Mais que se cache donc derrière ce carré qui change de couleur ? Regardons de plus près le CSS, ainsi que le HTML (il faut bien intégrer votre code quelque part, tout de même) :
Code:
/***CSS***/
/*Firefox 5.0*/
-moz-@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
/*Safari 4.0, Opera 15.0, Chrome 4.0*/
-webkit-@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
/*Opera 12.0*/
-o-@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
/*Standard*/
@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
div {
   width: 300px;
   height: 300px;
  /*Syntaxe avec super-propriété "animation"*/
  -moz-animation: nuxemple 3s linear 0s infinite alternate;
  -webkit-animation: nuxemple 3s linear 0s infinite alternate;
  -o-animation: nuxemple 3s linear 0s infinite alternate;
  animation: nuxemple 3s linear 0s infinite alternate;
}


<!-- HTML -->
<div></div>


Pourquoi je n'ai aucune class (ou id) dans mon HTML ? Tout simplement parce que j'ai sélectionné toutes les divs de mon code, donc ici la seule div que j'ai. Mais passons au CSS. Vous remarquerez qu'un drôle d'élément a fait son apparition et que la fin du CSS est incompréhensible. Mais pas de panique, je la décortique pour vous !

Partie avec le @keyframes


Je vais m'attarder ici uniquement sur la syntaxe "standard", tout simplement parce que c'est exactement la même chose pour les syntaxes préfixées (avec le préfixe en plus). Observons donc ceci :
Code:
@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}

Ma propriété ici est @keyframes, suivit du nom de l'animation (ici, nuxemple, mais vous pouvez lui donner n'importe quel nom, du moment que vous mettez exactement le même -à la lettre près- partout). Jusque-là, pas vraiment de problèmes. C'est la suite qui se complique. Ici, notre bloc changera quatre fois de couleur. C'est vrai, c'est évident, mais je suis sûr que les deux messieurs au fond sont en train de se demander comment ça se passe.
Imaginons, la durée de mon animation est de 100%. A 0%, donc au début, mon carré est bleu. A 25% de l'animation, il devient rouge. Puis à 25%, sa couleur vire au jaune et à 100% (à la fin donc), je me retrouve avec un carré vert. Simple, non ? Sachez tout de même que si vous ne spécifiez pas le nombre de fois où l'animation se répète, vous vous retrouverez avec un carré vert à la fin, puis de nouveau bleu et... et c'est tout. Par chance, il existe quelques astuces pour contrer cela, mais nous verrons ceci plus tard.

Vous organisez comme vous le sentez vos nombre de changement de couleur et pourcentages, en sachant que lorsque vous ne voulez que deux couleurs, il faut coder ceci :
Code:
@keyframes nuxemple {
from { background: red; }
to { background: yellow; }
}

Ici, mon élément passera de rouge à jaune, ce qui vous donne quelque chose de ce genre. Bien sûr, ici j'ai usé de ma petite tactique de triche pour ne pas que ça s'arrête brusquement.

 
J'ai pas envie de me contenter de changer uniquement la couleur de fond...

Justement, j'allai en venir à ce point-ci : on peut aussi faire bouger notre carré, comme ceci ! J'avoue avoir utilisé ma petite technique pour ne pas avoir un arrêt brutal. Et voici le petit code pour arriver à ce petit miracle :

Code:
/*Standard*/
@keyframes nuxemple {
  0% {background: blue; left: 0px; top: 0px;}
  25% {background: red; left: 100px; top: 0px;}
  75% {background: yellow; left: 100px; top: 100px;}
  100% {background: green; left: 0px; top: 0px;}
}

div {
   width: 300px;
   height: 300px;
      position: relative; /*PENSEZ A METTRE VOTRE ELEMENT EN POSITION RELATIVE, FIXE OU ABSOLUE SI VOUS VOULEZ QUELQUE CHOSE QUI BOUGE*/
  /*Syntaxe avec super-propriété "animation"*/
  animation: nuxemple 3s linear 0s infinite;
}


En plus de la propriété background, j'ai ajouté une des propriété pour déterminer une position (top, left, right, bottom). Puis j'ai mis mon petit carré en position relative (très important si vous souhaitez que votre bloc bouge, mais ça marche aussi en fixe et en absolue), et j'ai laissé la magie opérer !

 
Ouais, c'est joli ton truc, mais la second partie du code, c'est quoi ?

Justement, je vais l'expliquer de ce pas ~

Partie avec la (super)propriété animation


 
Je vais tout d'abord expliquer ce que j'appelle une super-propriété : c'est une propriété... qui réunit d'autres propriétés en une seule ! Exemple flagrant : margin. Au lieu de taper :
Code:
margin-top: 10px;
margin-right: 50px;
margin-bottom: 20px;
margin-left: 45px;

ce qui peut s'avérer barbant à la longue, on réunit ces quatre propriétés en une seule, margin, et on obtient ceci :
Code:
margin: 10px 50px 20px 45px; /*traduction : margin: haut droite bas gauche*/

Pratique pour économiser des lignes, non ? Il existes d'autres super-propriétés, comme background, padding et... animation.


Voici donc la seconde partie de notre CSS
Code:
animation: nuxemple 3s linear 0s infinite alternate;

Vu comme ça, c'est vraiment du charabia, n'est-ce pas ? Mais chaque valeur correspond à une propriété. Je vais donc remplacer toutes ces valeurs par leurs propriétés correspondantes :
Code:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction


Ça fait beaucoup à retenir, surtout que certaines on un nom assez obscure... Mais pas de panique, je vais vous expliquer à quoi correspond chaque propriété !

  1. animation-name :Ici, pas très compliqué à comprendre : le nom de l'animation (ici nuxemple)

  2. animation-duration : Là non plus, pas trop de difficultés : la durée de l'animation (5s, 700ms... valeur par défaut: 0). A DÉFINIR ABSOLUMENT. (ici 3s, soit 3 secondes)

  3. animation-timing-function : Là, c'est un peu plus obscure : il s'agit de la "vitesse" de l'animation (linear, ease... par défaut : ease. Plus de détails plus bas.) (ici linear)

  4. animation-delay : Là, pas vraiment difficile à comprendre non plus, c'est le délai de l'animation ; si elle commence au bout de 5s, 400ms... Valeur par défaut : 0s. (ici 0s, donc la valeur par défaut)

  5. animation-iteration-count : Un nom compliqué pour définir une chose simple : ceci définit le nombre de fois où l'animation va se "répéter" ; une fois ce nombre écoulé, l'animation s'arrête (si vous mettez "3", l'animation va se répéter 3 fois avant de s'arrêter). Par défaut, c'est une fois. Possibilité de mettre infinite en valeur pour qu'elle se déroule indéfiniment. (ici infinite)

  6. animation-direction : Un nom un peu flou ; cette propriété a deux valeurs : reverse et alternate. reverse va "inverser" l'animation (par exemple, mon bloc doit d'abord être bleu, puis rouge puis vert ; là il va d'abord être vert, puis rouge et enfin bleu) et alternate va "alterner" l'animation, grosso-modo la faire dans l'ordre défini (par exemple rouge, vert, bleu) puis inverser (bleu, vert, rouge si je reprends mon exemple) et ce, durant tout le temps de l'animation. Attention, si tu as, par exemple, définit que l'animation se déroulera trois fois, la première fois sera "normale", la seconde "alternée" et la dernière normale. (ici alternate)


Voici donc notre fameux code avec toutes ces propriétés :
Code:
div {
/*...*/
animation-name: nuxemple;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 0s; /*Je pouvais carrément enlever cette partie, car la valeur par défaut est 0*/
animation-iteration-count: infinite;
animation-direction: alternate
}

La super-propriété raccourci bien le code, n'est-ce pas ? Néanmoins, sachez que ce code plutôt long a le même effet que la super-propriété.

   
C'est quoi les valeurs de "animation-timing-function" ? Avec des détails si possible.

Avant d'expliquer cela, il faut savoir qu'on retrouve ces timing-function dans les transitions
ease : Début rapide, ralenti sur la fin. Valeur par défaut.
linear : Vitesse constante sur toute la transition.
ease-in : Début lent, s'accélère de plus en plus.
ease-out : Début rapide, ralenti de plus en plus.
ease-in-out : Début et fin de la transition lents.


Après la théorie, la pratique !


Après une séance de décorticage, nous passons maintenant à... bah, la pratique. Mais soyez sans crainte, je vais vous aider pas à pas ~

Ce que nous allons donc faire, c'est un rond normalement violet qui va devenir rouge, rose jaune et orange. Et parce que j'aime bien compliquer les choses, notre rond va bouger. Dit comme ça, ça à l'air simple, mais attendez voir...

Je n'utilise pas les préfixes pour cet exemple, mais n'oubliez pas de les mettre !


Pour commencer, ouvrez votre feuille de style CSS ou de tout autre endroit où vous pourrez mettre le CSS. Une fois fait, nous allons ouvrir notre... aller, on a vu ça plus haut... ah, la dame du deuxième rang... Oui ! Exactement ! Nous allons donc introduire notre CSS par notre fameux @keyframes ! Mais pas que. Il vous faut aussi quelque chose d'important... Mais si, vous savez quoi. C'est pas suffisant le @keyframes, il faut... nommer l'animation ! Vous l'appelez comme vous le souhaitez, moi je vais l'appeler... nu-exo. On ne me juge pas, s'il vous plaît. Donc, notre CSS ressemble à ceci.

Code:
@keyframes nu-exo {

}


Je laisse un espace exprès pour pouvoir mettre la suite du code. Une fois ceci fait, il nous faut mettre des propriétés à l'intérieur. Rappelez-vous, nous (enfin, je) voulons un rond violet qui devient successivement rouge, rose, jaune et orange. Nous allons donc utiliser... les pourcentages vus au début.
Code:
@keyframes nu-exo {
0% {background: #A93A8C;}
32% {background: #E80101;}
64% {background: #F476A9;}
76% {background: yellow;}
100% {background: #F6620C;}
}

Comme vous pouvez le voir, j'ai mit un peu ce que je voulais dans les pourcentages, mais sachez que vous devez obligatoirement avoir 0% au départ et 100% à la fin. Si vous préférez avoir 3 couleurs, 6 couleurs ou même une dizaine, adaptez les pourcentages en fonction de ce que vous souhaitez. Rappelez-vous que pour deux couleurs, le code est le suivant :
Code:
@keyframes nu-exo {
from {propriété: valeur;}
to {propriété: valeur;}
}


Je veux pas mettre du rose, c'est pas viril...

Pas de problème ! Si vous souhaitez avoir d'autres couleurs, vous avez deux choix : soit utiliser les noms de couleurs anglais (red, yellow, green, blue...) ou, beaucoup moins limité, les couleurs hexadécimales. Comme il est impossible de savoir à vu de nez ce que fera #56AEBC par exemple, vous pouvez aller sur ce site et choisir vos couleur en toute tranquillité ~ Vous pourrez également constater que les couleurs que j'ai prise pour cet exemple sont effectivement du violet, du rouge, du rose et du orange, et que la couleur que j'ai "composé" totalement au hasard (à savoir #56AEBC) correspond à du bleu.
Mais revenons. Dans la fameuse seconde partie du code, nous allons donner une class à notre rond (pour moi, ça sera "rond". Effectivement, je ne vais pas chercher très loin xD) et nous allons lui mettre des propriétés :

Code:
.rond {
width: 150px;
height: 150px;
border-radius: 150px; /*arrondi les bords et forme ici un rond*/
background: #A93A8C; /*important si vous ne voulez pas vous retrouver avec un rond invisible à la fin de l'animation*/
animation-name: nu-exo;
animation-duration: 3s; /*vous pouvez mettre plus longtemps. Sachez qu'il est important de définir une durée !*/

Il ne reste plus qu'à intégrer tout ça dans le HTML...

Code:
<div class="rond"></div>
<!-- Si ça vous chante, vous pouvez écrire un mot d'amour dans votre cercle ~ -->


Pour le moment, nous avons ceci. Vous pouvez constater que, effectivement, l'animation s'arrête au bout d'un moment.  Niveau code, nous avons cela :
Code:
/*CSS*/
@keyframes nu-exo {
0% {background: #A93A8C;}
32% {background: #E80101;}
64% {background: #F476A9;}
76% {background: yellow;}
100% {background: #F6620C;}
}

.rond {
width: 150px;
height: 150px;
border-radius: 150px;
background: #A93A8C;
animation-name: nu-exo;
animation-duration: 3s;

<!-- HTML -->
<div class="rond"></div>


... Dites, on n'aurait pas oublié quelque chose, par hasard ? ... Mais oui, notre rond doit bouger ! Pour cela, il nous suffit de mettre notre élément en position relative (ou absolute ou fixe) si vous voulez que ça bouge ~  Ensuite, nous retournons dans notre CSS et nous allons donner du mouvement au bloc. Pour cela, rien de plus simple, il suffit d'utiliser les propriétés top, bottom, left ou right suivi d'une valeur en pixels. Un peu comme ici :

Code:
@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}

.rond {
      position: relative;
   width: 150px;
   height: 150px;
      border-radius: 150px;
      background: #A93A8C;
  animation-name: nu-exo;
  animation-duration: 3s;
}


Et nous avons ceci ! Pas mal, non ? ... Comment ça, il y a un détail qui gêne ? L'arrêt brutal ? Nous allons donc masquer cela en utilisant certaines propriétés précédemment vues ! Pour plus de clarté, je vais utiliser la super-propriété puis montrer ce que ça donne avec les propriétés séparées. Nous avons donc une première astuce qui s'ouvre à nous : utiliser infinite. Ce qui nous donnerait :
Code:
animation: nu-exo 3s ease-in-out 0s infinite;
/*OU*/
animation-name: nu-exo;
animation-duration: 3s;
animation-timing-duration: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;


Ce qui donne ça. Si ça ne vous va toujours pas, vous pouvez toujours taper ceci :
Code:
animation: nu-exo 3s ease-in-out 0s infinite alternate;
/*OU*/
animation-name: nu-exo;
animation-duration: 3s;
animation-timing-duration: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;


Et pourquoi à un endroit ça va plus vite qu'un autre ? Je vais expliquer ça en donnant un exemple tout bête. Imaginez que votre animation soit un facteur qui doit livrer ses courriers/colis/lettres dans un temps limite, ici 1 minute, soit 100%. Il commence donc à 0%, soit au début, et dépose son premier colis à 32% du temps. Bon, il a le temps, ça va. Le second paquet, il a pris plus de temps et du coup, il le livre quand il est à 64% du temps. Du coup, il va accélérer et à 76% du temps, il a livré le troisième colis. Lui restant plus de temps que prévu, notre facteur va livrer son quatrième et dernier colis pile à la fin du temps limite ; il a donc rempli sa mission de tout livrer en une minute. L'animation, c'est pareil. L'élément a un certains temps que vous définissez pour compléter l'animation en entier. Et suivant les pourcentages que vous lui attribuez, elle va aller plus ou moins vite par endroit.

Et voilà, notre animation est finie ! Rien ne vous empêche cependant de rajouter quelques petites touches personnelles. Personnellement, en rajoutant tous les préfixes et tout le tralala, j'ai obtenu ceci :

Code:
/*CSS*/
/*Firefox 5.0*/
-moz-@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
/*Safari 4.0, Opera 15.0, Chrome 4.0*/
-webkit-@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
/*Opera 12.0*/
-o-@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
/*Standard*/
@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
.rond {
      position: relative;
   width: 150px;
   height: 150px;
      border-radius: 150px;
      background: #A93A8C;
      -moz-animation: nu-exo 3s ease-in-out 0s infinite alternate;
      -webkit-animation: nu-exo 3s ease-in-out 0s infinite alternate;
      -o-animation: nu-exo 3s ease-in-out 0s infinite alternate;
  animation: nu-exo 3s ease-in-out 0s infinite alternate;
}


<!-- HTML -->
<div class="rond"></div>


C'est donc la fin de ce tutoriel. Je ne vous ai ici appris que les bases, mais sachez qu'en creusant un peu, vous pourrez faire de belles choses ! Attention toutefois à ne pas en abuser, vous pourrez faire mal aux yeux de ceux qui regarde votre carré magique ~ Néanmoins, voici les différents points importants à retenir :

• N'oubliez pas de donner un nom à votre animation ;
• Peut importe le nombre de % que vous mettez, une animation doit toujours commencer par 0% et finir par 100% ;
• Pour une animation ne comprenant que deux couleurs (ou autre), écrire
Code:
@keyframes nomAnimation {
from {propriété: valeur;}
to {propriété: valeur;}
}

• Si vous voulez que votre élément bouge durant l'animation, n'oubliez pas de le mettre en position relative, absolue ou fixe ;
• Suivant vos %, l'animation n'ira pas forcément à la même vitesse d'un endroit à l'autre ;
• Arrivé à sa fin, l'animation s'arrête brutalement. Si vous voulez contrer ça, utilisez des méthodes telles que
Code:
animation-iteration-count: infinite;

• Si vous voulez raccourcir au maximum votre code, utilisez la super-propriété animation, qui s'écrit :
Code:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

(remplacer les propriétés par des valeurs)

A vous de jouer maintenant !

Sparrow-style

Index - Jeu 4 Juin 2015 - 16:29

Animations - Index





En cliquant sur un tag (mot précédé du dièse "#") indiqué dans chaque tutoriel vous afficherez tous les messages du forum comportant eux aussi le même tag.


Animation de déplacement aller-retour
Voir le tutoriel
Ouvrir un gif animé
Voir le tutoriel

Invité

Animation de déplacement aller-retour - Dim 14 Déc 2008 - 16:56

{#}animation{/#}

Tag animation sur Never Utopia - graphisme, codage et game design 49834b25371e9n-tuto52

Yop!

Donc ce tuto servira surtout aux débutants qui cherchent à faire une animation aller-retour (pas de jeux de mots vaseux svp, merci xD ).
J'utilise Photoshop CS2 et Imageready CS2, donc du coup ce sera un peu différent pour les utilisateurs des versions suivantes mais n'hésitez pas à poser vos questions !
Good luck!

Tag animation sur Never Utopia - graphisme, codage et game design 18593960348007_i498173_tutoanimaallerretour
Tag animation sur Never Utopia - graphisme, codage et game design 12535804894140_i498174_Tutoanimaallerretourmilieu
Tag animation sur Never Utopia - graphisme, codage et game design 5228721785529_i498175_tutoanimaallerretourfin


Postez vos rendus ;p
Phoenix Wright, membre de la confrérie des yaourts pourris

Tag animation sur Never Utopia - graphisme, codage et game design Icone_10
icône entourée = icône "avec des ronds" = icône trajectoire

gogeta1995

Animation effet pluie - Sam 16 Aoû 2008 - 23:29



cheers voilà mon tout premier tuto :
Le résultat Final :

Spoiler:


Le tuto :

Spoiler:


Laisser vos com's :lol!: n'oublié pas de me présenter vos créa avec ce tuto car sa me fait plaisir :lol!:

tivolien

Animation effet reflet - Jeu 31 Juil 2008 - 7:09



Tag animation sur Never Utopia - graphisme, codage et game design 08073105460958772330906

Le résultat final:


Tag animation sur Never Utopia - graphisme, codage et game design 08073105483958772330913

J'avoue que je ne suis pas l'inventeur de ce tuto,
mais en cherchant justement apres un tuto du genre
ce que je trouvait me semblait assez complexe
voila pourquoi je l'ai refais à ma sauce si l'on peut dire

Wasp

Ouvrir un .gif animé - Lun 28 Juil 2008 - 12:18



Vous ne savez pas probablement comment ouvrir votre gif via Photoshop parce que tout simplement c'est pas la même chose qu'ouvrir un simple fichier... Enfin bon, personnellement, j'ai rencontré ce problème & peut-être qie vous aimeriez ausi savoir comment vous y prendre... Hé bie,tata Ryu va vour aider U_U

C'est assez simple mais il faut le savoir :
- ouvrez Photoshop.Direction le menu "Fichier".
Fichier > Importation > Image vidéo dans des calques
- C'est fait pour les vidéos (types .avi etc.) alors vous vous retrouvez donc avec une fenêtre qui ne vous propose pas votre gif (selon votre version de photoshop, il est possible que le gif soit déjà visible. Dans ce cas, tant mieux pour vous). Pour régler ça, dans le compartiment "Nom de fichier" Insérez ces caractères *.* ) & faites charger.... Lààà,vous voyez,vous avez votre fichier qui apparaît ! Il vous suffit ensuite d'ouvrir ledit gif :)


Yataaaa !

tivolien

Animation effet neige - Ven 25 Juil 2008 - 12:40


Tag animation sur Never Utopia - graphisme, codage et game design Part-o10Tag animation sur Never Utopia - graphisme, codage et game design Part_t10


Revenir en haut

La date/heure actuelle est Mar 19 Mar 2024 - 6:40