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

«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

• SlowTree, un générateur de sprites 2D de végétation
  • Comment générer des sprites d'arbres
  • Et des buissons
  • Et plein d'autres choses d'autre encore
• Mises à jour d'Akagoria
  • Un sprite de sorcière !
  • Ça s'anime
  • Les captures d'écran
  • La suite
• Un site web pour Akagoria

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.

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

Ç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.

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.

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.

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.

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.

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.

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.

Aller plus loin

• Akagoria, la revanche de Kalista (250 clics)
• le tag gamedev (155 clics)
• SlowTree (157 clics)