{"id":488,"date":"2016-09-10T12:18:13","date_gmt":"2016-09-10T11:18:13","guid":{"rendered":"http:\/\/oneiricworlds.com\/fr\/?p=488"},"modified":"2016-11-12T10:43:19","modified_gmt":"2016-11-12T09:43:19","slug":"pollution-dans-la-grande-mer","status":"publish","type":"post","link":"https:\/\/oneiricworlds.com\/fr\/2016\/09\/pollution-dans-la-grande-mer\/","title":{"rendered":"Pollution dans la Grande Mer"},"content":{"rendered":"<p>Salut,<\/p>\n<p>Ca fait un moment que je n&rsquo;ai pas post\u00e9 un article (plus ou moins) technique. Alors aujourd&rsquo;hui, je vais parler d&rsquo;un ajout r\u00e9cent dans le jeu: l&rsquo;eau pollu\u00e9e.<\/p>\n<p style=\"text-align: center;\"><em><a href=\"http:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2016\/09\/20160716_171238.png\" rel=\"attachment wp-att-340\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-340\" src=\"http:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2016\/09\/20160716_171238-1024x552.png\" alt=\"20160716_171238\" width=\"840\" height=\"453\" \/><\/a>L&rsquo;eau pollu\u00e9e sur la Grande Mer<\/em><\/p>\n<h3>I &#8211; Qu&rsquo;est-ce que l&rsquo;eau pollu\u00e9e?<\/h3>\n<p>C&rsquo;est tr\u00e8s simple: c&rsquo;est une eau tr\u00e8s sombre (noire) qu&rsquo;il ne faut pas traverser. Si le joueur y va, \u00e7a le blesse, s&rsquo;il y reste, \u00e7a le tue. Dans le jeu, l&rsquo;eau pollu\u00e9e encercle les zones des chapitres 1, 2 et 3.<\/p>\n<p>&nbsp;<\/p>\n<h3>II &#8211; Pourquoi ajouter de l&rsquo;eau pollu\u00e9e?<\/h3>\n<p>Il y a plusieurs id\u00e9es derri\u00e8re cet ajout:<\/p>\n<p><strong>1 &#8211;<\/strong> Le 1er but est de pouvoir cr\u00e9er des <strong>\u00ab\u00a0zones interdites\u00a0\u00bb<\/strong>, au moins au d\u00e9but du jeu. C&rsquo;est assez classique dans les jeux d&rsquo;aventure: le joueur n&rsquo;est pas autoris\u00e9 \u00e0 explorer l&rsquo;int\u00e9gralit\u00e9 du monde, car il pourrait vite \u00eatre perdu et ne pas trop savoir o\u00f9 il doit aller.<\/p>\n<p>Ainsi, en cr\u00e9ant une zone pollu\u00e9e tout autour des 1\u00e8res \u00eeles du jeu, le joueur n&rsquo;a acc\u00e8s qu&rsquo;\u00e0 une petite partie du monde lorsqu&rsquo;il d\u00e9marre le jeu.<\/p>\n<p><strong>2 &#8211;<\/strong> Ensuite, l&rsquo;eau pollu\u00e9e a une <strong>utilit\u00e9 dans le sc\u00e9nario<\/strong>. Sa pr\u00e9sence a une raison d&rsquo;\u00eatre, et aussi des cons\u00e9quences sur les \u00eates vivants, notamment les animaux (vous avez pu avoir un aper\u00e7u dans la d\u00e9mo).<\/p>\n<p><strong>3 &#8211;<\/strong> Enfin, j&rsquo;ai choisi de l&rsquo;eau pollu\u00e9e plut\u00f4t que d&rsquo;autres types de \u00ab\u00a0murs invisibles\u00a0\u00bb (par exemple, j&rsquo;avais notamment pens\u00e9 \u00e0 une grande barri\u00e8re de corail pour stopper le joueur) parce qu&rsquo;\u00e0 un moment du jeu, il faut que cette <strong>zone bloquante puisse dispara\u00eetre<\/strong> pour laisser le joueur passer. De plus, il faut que ce soit relativement l\u00e9ger en temps de calcul CPU, et utiliser d&rsquo;immenses objets 3D maill\u00e9s (comme des coraux) tout autour du monde ferait ramer le jeu \u00e0 coup s\u00fbr.<\/p>\n<p>&nbsp;<\/p>\n<h3>III &#8211; Comment ajouter de l&rsquo;eau pollu\u00e9e?<\/h3>\n<p>Techniquement, c&rsquo;est un point compliqu\u00e9, car le monde est immense et je veux cr\u00e9er un \u00ab\u00a0anneau\u00a0\u00bb de pollution autour de plusieurs \u00eeles, donc \u00e7a doit \u00eatre un objet de plusieurs kilom\u00e8tres (par rapport \u00e0 l&rsquo;\u00e9chelle du jeu).<\/p>\n<p>Comme tout objet du jeu, cette zone pollu\u00e9e \u00e0 une apparence visuelle, mais aussi des propri\u00e9t\u00e9s de collision ou d&rsquo;autre types. J&rsquo;ai donc travaill\u00e9 sur ces 2 aspects.<\/p>\n<p>&nbsp;<\/p>\n<h4>Apparence \/ Rendu \/ Shader<\/h4>\n<p>Concernant l&rsquo;apparence visuelle, j&rsquo;avais une id\u00e9e bien pr\u00e9cise en t\u00eate, donc j&rsquo;ai cr\u00e9\u00e9 un shader particulier:<\/p>\n<ul>\n<li>Je voulais quelque chose qui bouge lentement et qui ait une apparence\u00a0 tr\u00e8s <strong>\u00ab\u00a0liquide\u00a0\u00bb<\/strong>. Donc j&rsquo;ai cr\u00e9\u00e9 un shader bas\u00e9 sur plusieurs textures de bruit raccordables. Ces textures bougent l&rsquo;une par rapport \u00e0 l&rsquo;autre et sont mix\u00e9es avec des \u00e9chelles et des directions de mouvement diff\u00e9rentes.<\/li>\n<li>Je voulais comme couleur un <strong>noir pur<\/strong> qui tranche clairement avec le bleu de l&rsquo;oc\u00e9an, donc je n&rsquo;ai pas impl\u00e9ment\u00e9 de calcul de luminosit\u00e9.<\/li>\n<li>Je voulais des <strong>bords tr\u00e8s nets<\/strong>, comme s&rsquo;il s&rsquo;agissait de t\u00e2ches d&rsquo;huile sur l&rsquo;eau, donc j&rsquo;ai utilis\u00e9 une approche \u00ab\u00a0alpha cutout\u00a0\u00bb sur la texture r\u00e9sultante.<\/li>\n<li>Je voulais <strong>\u00e9viter les r\u00e9p\u00e9titions de textures<\/strong> \u00e9videntes. Pour \u00e7a, j&rsquo;ai cr\u00e9\u00e9 des textures immenses que j&rsquo;ai fusionn\u00e9es avec des \u00e9chelles dont les facteurs sont premiers entre eux, ce qui produit un motif assez unique sur une longue distance.<\/li>\n<li>Je voulais que la <strong>cr\u00e9ation<\/strong> du mesh et l&rsquo;uv mapping dans Blender soient le <strong>plus facile possible<\/strong> (je dois cr\u00e9er des kilom\u00e8tres de ce truc): j&rsquo;ai cr\u00e9\u00e9 des formes simples, et j&rsquo;utilise un uv mapping <strong>automatique<\/strong>.<\/li>\n<\/ul>\n<p style=\"text-align: center;\"><a href=\"http:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2016\/09\/20160910_waterRing1.jpg\" rel=\"attachment wp-att-343\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-343\" src=\"http:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2016\/09\/20160910_waterRing1-1024x583.jpg\" alt=\"20160910_waterring1\" width=\"840\" height=\"478\" \/><\/a><em>Une section d&rsquo;eau pollu\u00e9e dans Blender. Je peux facilement d\u00e9former le volume, et appliquer ensuite un uv mapping automatique sans trop d&rsquo;efforts.<\/em><\/p>\n<p style=\"text-align: center;\"><em><a href=\"http:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2016\/09\/20160910_waterRing1bis.jpg\" rel=\"attachment wp-att-358\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-358\" src=\"http:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2016\/09\/20160910_waterRing1bis-1024x584.jpg\" alt=\"20160910_waterring1bis\" width=\"840\" height=\"479\" \/><\/a><\/em><\/p>\n<p style=\"text-align: center;\"><em>La puissance de l&rsquo;uv mapping automatique.<\/em><\/p>\n<ul>\n<li>Mais en m\u00eame temps, je voulais que les bords de la zone pollu\u00e9e se <strong>dissolvent en t\u00e2ches de plus en plus petites<\/strong> au fur et \u00e0 mesure qu&rsquo;on s&rsquo;\u00e9loignait du centre. J&rsquo;ai donc choisi d&rsquo;utiliser les couleurs des sommets comme param\u00e8tre de transparence (alpha), et de mixer ce param\u00e8tre avec la texture finale: au centre de la zone pollu\u00e9e, les sommets sont blancs, et la texture est bien visible. Sur les bords, les sommets sont noirs, et la texture est invisible. La transition entre ces points est faite automatiquement gr\u00e2ce \u00e0 l&rsquo;interpolation lin\u00e9aire des propri\u00e9t\u00e9s des sommets. Mais, gr\u00e2ce au rendu \u00ab\u00a0alpha cutout\u00a0\u00bb, on n&rsquo;a pas un d\u00e9grad\u00e9 \u00e9vanescent, mais bien des zones pollu\u00e9es nettes de plus en plus petites.<\/li>\n<\/ul>\n<p style=\"text-align: center;\"><a href=\"http:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2016\/09\/20160910_waterRing2.jpg\" rel=\"attachment wp-att-344\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-344\" src=\"http:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2016\/09\/20160910_waterRing2-1024x582.jpg\" alt=\"20160910_waterring2\" width=\"840\" height=\"477\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><em>Les couleurs des sommets dans Blender: opacit\u00e9 maximum au centre, transparence maximum \u00e0 l&rsquo;ext\u00e9rieur.<\/em><\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2016\/09\/20160910_waterRing3.jpg\" rel=\"attachment wp-att-345\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-345\" src=\"http:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2016\/09\/20160910_waterRing3-1024x546.jpg\" alt=\"20160910_waterring3\" width=\"840\" height=\"448\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><em>&#8230;r\u00e9sultant dans le jeu en une pollution opaque au centre (sur la droite ici), et des t\u00e2ches de plus en plus \u00e9parse sur l&rsquo;ext\u00e9rieur (\u00e0 gauche ici), en limite de zone.<\/em><\/p>\n<ul>\n<li>De plus, \u00e0 un moment du jeu, je veux que le joueur puisse faire dispara\u00eetre cette zone pollu\u00e9e pour explorer l&rsquo;int\u00e9gralit\u00e9 du monde. Il faut donc que j&rsquo;int\u00e8gre un certains nombre de param\u00e8tres qui permettront l&rsquo;<strong>animation<\/strong> de la quantit\u00e9 d&rsquo;eau pollu\u00e9e. Il faut que cette animation soit continue et qu&rsquo;elle n&rsquo;entre pas en conflit avec les autres param\u00e8tres.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4>Collision et propri\u00e9t\u00e9s<\/h4>\n<p>Quand j&rsquo;ai cr\u00e9\u00e9 cette zone de pollution, je me suis pos\u00e9 beaucoup de questions sur le gameplay:<\/p>\n<p><strong>1 &#8211;<\/strong> Est-ce que le joueur peut nager au travers? Si ce n&rsquo;est pas le cas, \u00e7a signifie que je vais devoir mettre un \u00ab\u00a0mur invisible\u00a0\u00bb pour l&#8217;emp\u00eacher d&rsquo;aller plus loin. Je ne veux pas, car \u00e7a va \u00e0 l&rsquo;encontre du sentiment de libert\u00e9 que je veux instiller dans le jeu.<\/p>\n<p>Cela signifie donc qu&rsquo;il faut que le joueur prenne des d\u00e9g\u00e2ts en rentrant dans la zone pollu\u00e9e. Et donc, je dois mettre en place un calcul de collision assez pr\u00e9cis. Je ne peux pas utiliser les mesh colliders (maillages) car ils ne pr\u00e9sentent pas assez de d\u00e9tails, et ce serait tr\u00e8s perturbant pour le joueur de prendre des d\u00e9g\u00e2ts en limite de zone pollu\u00e9e, l\u00e0 o\u00f9 la pollution est invisible, mais o\u00f9 il est pourtant dans la zone du mesh. En tant que joueur, je d\u00e9testerai \u00e7a.<\/p>\n<p>Donc j&rsquo;ai du coder un test de collision \u00ab\u00a0pixel perfect\u00a0\u00bb. J&rsquo;ai du trouver un moyen pour savoir si le joueur est sur une t\u00e2che pollu\u00e9e. J&rsquo;ai envisag\u00e9 d&rsquo;\u00e9chantillonner l&rsquo;\u00e9cran sur la position de joueur avant de l&rsquo;afficher pour savoir si la position \u00e9tait pollu\u00e9e ou pas, mais \u00e7a remettait en cause les ordre d&rsquo;affichage des objets, \u00e7a ne garantissait pas la justesse du test (s&rsquo;il y a un objet devant?), et \u00e7a ne marchait plus si un jour j&rsquo;envisageais de changer l&rsquo;apparence de la zone pollu\u00e9e. Donc j&rsquo;ai choisi de recalculer le shader de l&rsquo;eau pollu\u00e9e sur le CPU, avec les m\u00eames param\u00e8tres. Au final j&rsquo;ai donc cod\u00e9 2 fois le shader, sur GPU et sur CPU. J&rsquo;\u00e9tais assez stress\u00e9 au niveau des pr\u00e9cisions de calcul (architectures diff\u00e9rentes&#8230;), mais, pour le moment, les r\u00e9sultats sont suffisamment pr\u00e9cis.<\/p>\n<p><strong>2 &#8211;<\/strong> Mais affecter des dommages au personnage n&rsquo;est pas suffisant: je dois m&rsquo;assurer que le joueur ne pourra pas traverser, m\u00eame s&rsquo;il a plein d&rsquo;\u00e9nergie et beaucoup de pommes. Comment faire \u00e7a? \u00c7a m&rsquo;oblige \u00e0 calculer une largeur minimum pour cette zone pollu\u00e9e afin de m&rsquo;assurer math\u00e9matiquement que le joueur ne pourra pas passer, quelques soient ses ressources.<\/p>\n<p><strong>3 &#8211;<\/strong> Et enfin, j&rsquo;ai \u00e9galement un probl\u00e8me avec la tortue: que se passe-t-il si le joueur veut traverser \u00e0 dos de tortue? Est-ce que \u00e7a tue la tortue? Je n&rsquo;aimais pas cette id\u00e9e l\u00e0, alors j&rsquo;ai fait en sorte que la tortue refuse d&rsquo;y aller tout simplement. D\u00e8s que la tortue approche de la zone, tout mouvement en direction de la zone pollu\u00e9e est amorti. C&rsquo;\u00e9tait un peu technique \u00e0 mettre en place, car il faut r\u00e9cup\u00e9rer la normale au bord le plus proche pour filtrer les mouvements; ce n&rsquo;est pas imm\u00e9diat.<\/p>\n<p>Bien s\u00fbr, il s&rsquo;agit ici d&rsquo;une sorte de mur invisible, qui va \u00e0 l&rsquo;encontre de la philosophie de \u00ab\u00a0libert\u00e9\u00a0\u00bb du jeu. Mais \u00e7a a tout de m\u00eame du sens au niveau du jeu: la tortue nous ob\u00e9it, mais pas si on met sa vie en danger. Dans ce cas, \u00e7a me parait suffisamment logique pour \u00eatre accept\u00e9 des joueurs. De plus j&rsquo;ai rendu la chose encore plus claire en faisant en sorte que la tortue signale le probl\u00e8me. Et une fois de plus, \u00e7a n&#8217;emp\u00eache pas le joueur de traverser tout seul s&rsquo;il le souhaite, mais c&rsquo;est son choix, pas celui de la tortue.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2016\/09\/20160910_104836.png\" rel=\"attachment wp-att-349\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-349\" src=\"http:\/\/oneiricworlds.com\/en\/wp-content\/uploads\/2016\/09\/20160910_104836-1024x572.png\" alt=\"20160910_104836\" width=\"840\" height=\"469\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><em>La tortue ne veut pas aller l\u00e0. Elle craint pour sa vie.<\/em><\/p>\n<p>&nbsp;<\/p>\n<p>Voil\u00e0 pour le post du jour! C&rsquo;est toujours beaucoup plus long que ce \u00e0 quoi je m&rsquo;attends. J&rsquo;esp\u00e8re que vous aurez trouv\u00e9 \u00e7a int\u00e9ressant! N&rsquo;h\u00e9sitez pas \u00e0 me donner votre avis!<\/p>\n<p>&nbsp;<\/p>\n<p>PS: A l&rsquo;heure actuelle, je n&rsquo;ai pas mod\u00e9lis\u00e9 l&rsquo;int\u00e9gralit\u00e9 de la zone pollu\u00e9e. Je suis s\u00fbr que vue l&rsquo;\u00e9chelle finale de la zone, d&rsquo;autres probl\u00e8mes vont survenir (pr\u00e9cision des calculs avec les grandes distances, z fighting, &#8230;)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Salut, Ca fait un moment que je n&rsquo;ai pas post\u00e9 un article (plus ou moins) technique. Alors aujourd&rsquo;hui, je vais parler d&rsquo;un ajout r\u00e9cent dans le jeu: l&rsquo;eau pollu\u00e9e. L&rsquo;eau pollu\u00e9e sur la Grande Mer I &#8211; Qu&rsquo;est-ce que l&rsquo;eau pollu\u00e9e? C&rsquo;est tr\u00e8s simple: c&rsquo;est une eau tr\u00e8s sombre (noire) qu&rsquo;il ne faut pas traverser. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":495,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,7],"tags":[],"class_list":["post-488","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-dev"],"_links":{"self":[{"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/posts\/488","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/comments?post=488"}],"version-history":[{"count":13,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/posts\/488\/revisions"}],"predecessor-version":[{"id":522,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/posts\/488\/revisions\/522"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/media\/495"}],"wp:attachment":[{"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/media?parent=488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/categories?post=488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/tags?post=488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}