Je crée mon jeu vidéo E06 : génération procédurale de végétation

Posté par . Édité par palm123 et Benoît Sibaud. Modéré par Benoît Sibaud. Licence CC by-sa
Tags :
51
24
nov.
2013
Jeu

«Je crée mon jeu vidéo» est une série d'articles sur la création d'un jeu vidéo, depuis la feuille blanche jusqu'au résultat final. On y parlera de tout : de la technique, du contenu, de la joie de voir bouger des sprites, de la lassitude du développement solitaire, etc. Vous pourrez suivre cette série grâce au tag gamedev.

Dans l'épisode 05, on a discuté d'un sujet qui n'avait rien à voir et qui a généré quelques trolls, ce qui est assez cocasse pour un jeu vidéo dans un univers med-fan. Cette fois, on va parler de génération procédurale de végétation et aussi un peu d'animation de sprite. Avec quelques captures d'écran pour montrer le résultat de tout ça intégré dans le jeu !

Sommaire

Vous avez peut-être déjà entendu parler de SpeedTree. Non ? C'est un générateur de végétation en 3D qui permet de générer quantités d'arbres, d'arbrisseaux ou de plantes marines qu'on retrouve après dans des jeux vidéos ou dans des films. La particularité de cet outil est qu'il permet de générer aléatoirement et de manière procédurale toute cette végétation à partir de quelques paramètres de départ. Un outil dans Unity permet grosso-modo de faire le même genre de chose. Je vous présente donc SlowTree qui fait la même chose en 2D et en beaucoup moins impressionant.

SlowTree, un générateur de sprites 2D de végétation

Déjà, avant de commencer, précisons pourquoi avoir créé cet outil. La carte d'Akagoria va sans doute être très grande et va nécessiter de la meubler et de la décorer avec une bonne quantité de sprites en tout genre. Il paraît alors impossible de devoir créer à la main tous ces sprites qui, pour beaucoup, devront se ressembler plus ou moins, notamment tout ce qui relève de l'environnement naturel. Donc, l'idée vient alors naturellement de générer ces sprites à l'aide d'un programme.

Comment générer des sprites d'arbres

Générer des sprites n'est pas chose aisée, surtout en vue de haut. La première question qui vient est : comment faire pour que ce qu'on va dessiner ait l'air d'un arbre, sans que ça ne fasse trop simpliste et/ou moche ? De suite, on se dit qu'on va faire un gros cercle vert, parce que vue du haut, ça doit être à peu près ça. Je n'ai pas conservé d'archive de cette étape mais autant vous dire que non, ça ne ressemble pas à un arbre.

Alors, on essaie d'améliorer. On se dit que, quand on était enfant, on faisait une sorte de nuage vert pour dessiner le feuillage. Donc, deuxième étape, faire un nuage vert. On définit le nombre de «faces» qu'on souhaite, puis on va tracer successivement des courbes de Bézier entre des points tirés au hasard (la distance au centre est au hasard entre un min et un max défini par l'utilisateur, mais les angles par rapport au centre sont réguliers). Et ma foi, ça commence à ressemble à quelque chose.

Première version d'un arbre

On ajoute un peu d'ombre, grâce à un gradient radial pour donner un peu de volume à ce sprite.

Seconde version d'un arbre

Ça ne se voit peut-être pas mais le feuillage est transparent, pour permettre à un objet (ou un personnage) qui serait dessous d'apparaître légèrement. La transparence est évidemment plus prononcée sur les bords qu'au milieu, où le feuillage est censé être plus dense.

En tout cas, ça commence à rendre pas trop mal. Mais on sent qu'il manque quelque chose, que ça manque de dynamisme. Alors m'est venue une idée. Quand on se figure un arbre, il n'est pas homogène, c'est d'ailleurs pour ça qu'il y a cette forme de nuage qui n'est pas régulière. Les branches forment elle-même des sous-arbres qui pourraient apparaître, sous forme de boules un peu plus marquées. J'ai alors généré des boules, dont j'ai marqué le bord extérieur pour les rendre visible.

Troisième version d'un arbre

Là, on a une bien meilleure impression de volume et de fouillis dans ce feuillage. Me voilà donc satisfait du résultat. Reste à en générer plusieurs. À l'aide de l'outil slowtree, il est désormais possible de générer des planches complètes avec de nombreux arbres que l'on pourra placer sur la carte finale. En les tournant, on aura l'impression d'avoir des centaines d'arbres tous différents.

Une planche d'arbres

J'ai généré aussi un tronc d'arbre et des branches, mais je n'en parle pas parce que je n'en suis pas encore satisfait. On peut en distinguer quelques unes sur les bords extérieur. L'idée est de pouvoir aussi générer des arbres morts où il ne reste que les branches.

Et des buissons

Nous savons désormais générer des feuillages d'arbre, la question qui vient est : ne peut-on pas s'en servir pour générer des feuillages de buissons ? Et bien si ! Les différences entre un arbre et un buisson sont assez évidentes : moins de boules, moins de face dans le nuage, et moins de distance entre le rayon minimum et le rayon maximum. On réduit également la taille et on obtient de jolis petits buissons. L'outil slowbushes est donc capable, avec les mêmes base qu'avant de générer des planches de buissons.

Une planche de buissons

Et plein d'autres choses d'autre encore

Ceci n'est que le début de la génération procédurale de sprites. Dans les idées à venir, j'ai commencé à me pencher sur la génération de rocher et de caillou. J'en suis pour l'instant à l'étape où j'ai ma forme de base avec une ombre. Je n'ai pas encore trouvé comment donner du dynamisme pour que les rochers rendent bien. Un autre problème qui se pose est de définir à la génération une forme de collision pour ces rochers. Pour les arbres, la forme de collision a été approximé au cercle du tronc (mais comme on ne le voit pas, ce n'est pas très grave si ce n'est pas exact), ce qui permet donc au personnage d'aller sous l'arbre mais de buter contre le tronc. Pour les arbustes, j'ai fait à peu près pareil en approximant par un cercle. Comme la différence entre le rayon minimum et le rayon maximum est petite, ça marche assez bien.

J'ai aussi dans l'idée de faire varier les arbres générés, en essayant de générer ce qui pourrait ressembler à des conifères. Ou en variant la couleur, du vert foncé au jaune ou au rouge (les couleurs d'automne actuellement visibles dehors sont inspirantes).

Enfin, il faut absolument que j'améliore la ligne de commande en mettant des options plutôt que de devoir recompiler quand on change un paramètre.

Mises à jour d'Akagoria

Un sprite de sorcière !

Naha a fourni un sprite de sorcière pour remplacer le militaire ! Il devient ainsi le premier contributeur extérieur d'Akagoria. Un grand merci à lui. Il a prévu d'améliorer ce sprite mais il faut avouer qu'il a déjà fait du bon boulot.

Kalista

Adieu donc le militaire et bienvenue à Kalista la sorcière qui prend enfin forme.

Ça s'anime

Autre avancée importante, Akagoria permet désormais d'avoir des animations, grâce à l'excellent projet Nanim qui, rappelons-le, a été créé par devnewton.

L'intégration fut assez facile, plus que je ne l'aurais cru. Tout d'abord, le format des nanim est décrit dans un fichier Protocol Buffers, ce qui permet non seulement de connaître sa structure mais également de générer, grâce à protoc, un parseur dans le langage de son choix : Java, C++ ou Python. En C++, on a ainsi deux fichiers à intégrer que j'ai encapsulés dans ma propre classe Nanim.

Pour l'intégration dans le système à entités, j'ai créé un composant Animated qui contient une instance de Nanim et le nom de l'animation courante. Puis j'ai créé deux systèmes. Le premier système, Movement lit un composant Movement qui décrit le mouvement d'une entité (pour l'instant, seule la sorcière possède ce composant) et qui donne le nom de l'animation à utiliser. Les noms des animations, tels qu'ils apparaissent dans le fichier nanim, suivent donc une certaine convention pour être compatibles avec ce système. Le second système, Animation fait avancer l'animation. Il calcule donc l'image courante à utiliser pour afficher l'entité. Ce calcul est fait en grande partie dans la classe Nanim pour cacher les détails liés aux fichiers générés par Protocol Buffers.

Ensuite, il faut créer l'animation. Avec Nanim Studio et les sprites de Naha, c'est alors un jeu d'enfant. En même pas vingt minutes, j'ai obtenu plusieurs animations pour ma sorcière : une animation pour la marche en avant, une animation pour la marche en arrière et une animation pour la position statique.

On compile et hop, ça marche !

Les captures d'écran

Après ça, j'ai donc sorti la version 0.0.2 et j'ai réalisé quelques captures d'écran.

Kalista avec des arbres et des buissons

Sur cette première capture, on distingue Kalista en train de marcher (l'animation rend mal sur une capture, vous avez remarqué ?). On peut également voir deux arbres et des buissons issus de planches générées par SlowTree, ce qui donne une bonne idée de leur taille relative par rapport à Kalista.

Kalista sous un arbre

Cette seconde capture illustre la transparence sur les arbres. Kalista se cache sous l'arbre mais on peut tout de même la voir, ce qui est exactement l'effet que je recherchais. J'imagine déjà le joueur dans une forêt assez dense, en train d'être poursuivi par des créatures, mais étant presque incapable de les distinguer à cause des feuillages. La forêt sera un territoire dangereux dans Akagoria : qui sait ce qui va s'y cacher ?

La suite

Pour la suite, j'ai ordonné à peu près la feuille de route et la prochaine étape sera l'implémentation du multi-niveau sur la carte. J'y reviendrai dans un prochain épisode !

Un site web pour Akagoria

Allez, dernière nouveauté pour la route. Le jeu dispose dorénavant d'un site web : www.akagoria.org/ ! Il est très austère pour l'instant, mais c'est voulu. Je ne voudrais pas qu'on puisse penser que ce jeu est terminé ou presque terminé. Donc le site est moche pour bien faire comprendre que le travail est en cours. J'y mettrai des captures d'écran au fur et à mesure des avancées.

  • # #

    Posté par . Évalué à 2.

    Bravo !

    • [^] # Re: #

      Posté par . Évalué à 2.

      Ouaip et merci de partager ton travail ;-)

      kentoc'h mervel eget bezan saotred

      • [^] # Re: #

        Posté par . Évalué à 4.

        Tout le plaisir est pour moi (sans compter que ça me force un peu à avancer).

  • # Bravo !

    Posté par . Évalué à 10.

    J'aime bien ton générateur de salade :)

    Tous les contenus que j'écris ici sont sous licence CC0 (j'abandonne autant que possible mes droits d'auteur sur mes écrits)

    • [^] # Re: Bravo !

      Posté par . Évalué à 4.

      Hey, mais c'est pas bête ! Je pourrai m'en servir pour mettre des salades dans les jardins !

  • # Et le branches

    Posté par (page perso) . Évalué à 2.

    Je sais je suis perfectionniste, mais je trouve que tes arbres manque de branche.

    On voit le personnage par transparence a travers les arbres et on voit pas les branche qui porte ces feuilles ?

    Et personnellement pour moi un arbre il y a plus de branche que de feuille.

    • [^] # Re: Et le branches

      Posté par . Évalué à 4.

      Et personnellement pour moi un arbre il y a plus de branche que de feuille.

      Ça dépend des arbres et des saisons. En été, on ne voit quasiment aucune branche vu de haut. En hiver, on ne voit que ça. Il suffit d'aller faire un petit tour sur Google Maps pour s'en rendre compte.

      De toute façon, comme je l'ai dit, ça fait partie des améliorations prévues. Mais pareil, il faut que je trouve comment faire ça bien (si quelqu'un a un pointeur, je prend). Dans mon premier essai, les branches rendait très mal, et elle n'avait pas de ramification.

      • [^] # Re: Et le branches

        Posté par . Évalué à 1. Dernière modification le 24/11/13 à 16:08.

        J'ai un pointeur !
        Si je le déréférence, ça dit :

        Déjà un truc qui rend moche avec les branches actuelles, c'est qu'elles sont super pointues.

        • [^] # Re: Et le branches

          Posté par . Évalué à 2.

          S'il n'y avait que ça de moche dans mes branches ! Oui, elles sont horribles, c'est pour ça que je ne les ai pas montrées seules dans l'article.

      • [^] # Re: Et le branches

        Posté par . Évalué à 5.

        Avec un L-Système ?

        • [^] # Re: Et le branches

          Posté par . Évalué à 3.

          Merci pour ce lien ! J'ai parcouru vite fait «The Algorithmic beauty of plants» (premier lien de la bibliographie) et il a l'air d'y avoir plein de choses intéressantes là dedans.

  • # nanimstudio

    Posté par (page perso) . Évalué à 3.

    Je profite de cette publicité gratuite pour annoncer la sortie de Nanimstudio 1.3: http://devnewton.bci.im/projects/nanim

    Je fais évoluer ce logiciel en fonction de mes besoins et des demandes que l'on m'adresse!

    http://devnewton.bci.im

  • # Quelques suggestions

    Posté par (page perso) . Évalué à 2.

    J'aime bien tes arbres. Par contre, je trouve que s'ils sont bien assortis avec le sprite de Kalista (traits arrondis, couleurs en dégradés), ça colle moins avec les textures du sol (herbe, sable, eau). Peut-être aussi modifier un peu les "frontières" entre l'herbe et le sable, le sable et l'eau, etc. : les traits anguleux font un peu bizarres à côté des arbres tout arrondis.

    Une dernière remarque à propos des grottes qu'on peut voir sur le site : d'après la video, je suppose que le gris représente les parois de la grotte, donc quelque chose d'infranchissable. Or je trouve que ce n'est pas évident au premier coup d'oeil (j'ai d'abord cru qu'il y avait de la terre sur une partie du sol, et de la pierre sur l'autre, mais qu'on pouvait marcher sur les deux) : peut-être mettre un gris plus foncé, pour qu'on voit bien qu'il n'est pas sur le même plan que la terre ?

    Sinon, tout cela a l'air très prometteur. Bravo !

    • [^] # Re: Quelques suggestions

      Posté par . Évalué à 2.

      Alors, je te rassure tout de suite, le tileset utilisé pour le fond est un truc bricolé à l'arrache, ce n'est pas le tileset définitif. J'ai un groupe d'étudiants qui travaille sur la génération de carte et ils ont dans leurs objectifs de proposer un tileset plus riche (un peu plus que types de zones). Les couleurs seront un peu plus pastels. Les zones infranchissables seront mieux marquées, pour l'instant ils pensent utiliser des rayures, il faut voir ce que ça donne. A priori, ça sera intégré vers mars je dirais, le temps que je mette mon nez dans leur code et que j'en fasse quelque chose d'exploitable.

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.