{"id":307,"date":"2017-06-15T15:58:37","date_gmt":"2017-06-15T14:58:37","guid":{"rendered":"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/?p=307"},"modified":"2017-06-15T16:15:15","modified_gmt":"2017-06-15T15:15:15","slug":"virtual-city","status":"publish","type":"post","link":"https:\/\/blog.univ-angers.fr\/polytech_2A\/2017\/06\/15\/virtual-city\/","title":{"rendered":"Virtual City"},"content":{"rendered":"<p>Matthieu MOREAU &#8211; Matthieu HIRON<br \/>\nEncadr\u00e9 par Paul RICHARD<\/p>\n<div id=\"attachment_486\" style=\"width: 594px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/Vue-sur-le-parc.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-486\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/Vue-sur-le-parc-1024x399.png\" alt=\"Vue sur le parc\" width=\"584\" height=\"227\" class=\"size-large wp-image-486\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Vue-sur-le-parc-1024x399.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Vue-sur-le-parc-300x117.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Vue-sur-le-parc-500x195.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Vue-sur-le-parc.png 1641w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/a><p id=\"caption-attachment-486\" class=\"wp-caption-text\">Vue sur le parc<\/p><\/div>\n<p> Notre projet consistait \u00e0 cr\u00e9er une <strong>ville virtuelle<\/strong> \u00e0 l\u2019aide d\u2019un logiciel de jeu cr\u00e9ation de jeu : unity 3D. Le but \u00e9tait de cr\u00e9er un joueur suivant un parcours pr\u00e9cis. Sur ce parcours, on trouve une ribambelle d&#8217;\u00e9v\u00e9nements. Le joueur qui suit le parcours peut regarder o\u00f9 il veut \u00e0 l\u2019aide d\u2019un casque de r\u00e9alit\u00e9 virtuelle. A la fin du parcours, il doit se rappeler quels \u00e9v\u00e9nements il a rencontr\u00e9 et leur ordre d\u2019apparition. Cette activit\u00e9 est tr\u00e8s utile pour les personnes atteintes de maladies entra\u00eenant une perte de m\u00e9moire aussi bien \u00e0 court terme qu\u2019\u00e0 long terme. On pense notamment \u00e0 la maladie d&#8217;Alzheimer par exemple.<\/p>\n<div id=\"attachment_480\" style=\"width: 594px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/Screen-au-pif.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-480\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/Screen-au-pif-1024x399.png\" alt=\"On y trouve m\u00eame un a\u00e9roport !\" width=\"584\" height=\"227\" class=\"size-large wp-image-480\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Screen-au-pif-1024x399.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Screen-au-pif-300x117.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Screen-au-pif-500x195.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Screen-au-pif.png 1641w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/a><p id=\"caption-attachment-480\" class=\"wp-caption-text\">On y trouve m\u00eame un a\u00e9roport !<\/p><\/div>\n<p> La conception de notre projet s\u2019est effectu\u00e9e en 3 grandes phases : <\/p>\n<p><strong>DOCUMENTATION<\/strong><br \/>\n Dans un premier temps, nous avons eu une longue phase de documentation et de recherche sur l\u2019utilisation du logiciel Unity que nous ne connaissions pas du tout. Nous avons notamment regard\u00e9 de nombreux <strong>tutoriels<\/strong> pour d\u00e9couvrir aussi bien le fonctionnement g\u00e9n\u00e9ral du logiciel que certaines fonctionnalit\u00e9s plus sp\u00e9cifiques. Nous avons \u00e9galement fait quelques recherches au cours de la conception du projet lorsque que nous avions besoin de fonctions particuli\u00e8res pour la programmation en C#. <\/p>\n<p><strong>ETUDE<\/strong><br \/>\n Une fois que nous avions les bases du logiciel, nous savions ce qui \u00e9tait r\u00e9alisable avec ce dernier. Nous avons pu \u00e9tablir un plan de la ville que nous voulions cr\u00e9\u00e9e. Ce plan a toutefois \u00e9t\u00e9 adapt\u00e9 au fil de la conception puisqu&#8217;il \u00e9tait parfois difficilement applicable en r\u00e9alit\u00e9. Ensuite, nous avons cherch\u00e9 sur \u201cl\u2019Asset Store\u201d d\u2019Unity des packs de b\u00e2timents, v\u00e9hicules, personnages\u2026 <\/p>\n<div id=\"attachment_491\" style=\"width: 310px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/Sch\u00e9ma-ville.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-491\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/Sch\u00e9ma-ville-300x225.jpg\" alt=\"Repr\u00e9sentation en couronnes de la ville que nous voulons cr\u00e9\u00e9e\" width=\"300\" height=\"225\" class=\"size-medium wp-image-491\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Sch\u00e9ma-ville-300x225.jpg 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Sch\u00e9ma-ville-400x300.jpg 400w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Sch\u00e9ma-ville.jpg 960w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-491\" class=\"wp-caption-text\">Repr\u00e9sentation en couronnes de la ville que nous voulons cr\u00e9\u00e9e<\/p><\/div>\n<p><strong>CONCEPTION<\/strong><br \/>\n La phase de conception s\u2019est d\u00e9roul\u00e9e en 2 partie : <strong>une partie cr\u00e9ation de la ville et une partie programmation<\/strong> afin d\u2019animer les v\u00e9hicules, le parcours du joueur, les \u00e9v\u00e8nements\u2026 Cette phase a \u00e9t\u00e9 plut\u00f4t intuitive, m\u00eame pour la programmation en C#. Une fois cette phase finie, nous avons donc un joueur qui suivait un parcours \u00e0 travers la ville et qui pouvait observer tout autour de lui. Nous allons aborder un peu plus en d\u00e9tail l\u2019aspect du d\u00e9veloppement.<\/p>\n<div id=\"attachment_483\" style=\"width: 310px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/Screen-au-pif-21.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-483\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/Screen-au-pif-21-300x116.png\" alt=\"Le centre ville\" width=\"300\" height=\"116\" class=\"size-medium wp-image-483\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Screen-au-pif-21-300x116.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Screen-au-pif-21-1024x399.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Screen-au-pif-21-500x194.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Screen-au-pif-21.png 1642w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-483\" class=\"wp-caption-text\">Le centre ville<\/p><\/div>\n<p> La conception de la ville s\u2019est effectu\u00e9e gr\u00e2ce aux \u201cassets\u201d sur Unity. Certains sont gratuits mais plus la qualit\u00e9 augmente, plus les assets sont co\u00fbteux. Nous avons choisi de nous diriger vers des <strong>textures low-poly<\/strong>, des mod\u00e8les 3d avec peu de polygones, car c\u2019est plus simple \u00e0 concevoir et assembler, ce qui nous facilite le travail \u00e9tant donn\u00e9 que nos comp\u00e9tences \u00e9taient plut\u00f4t basiques au d\u00e9part. Cela limite l\u2019aspect r\u00e9aliste du projet mais ce n\u2019\u00e9tait pas un des objectifs premiers.<br \/>\nNous sommes partis d\u2019un mod\u00e8le de ville que nous avons obtenu d\u2019un Asset et nous l\u2019avons modifi\u00e9 et avons ajout\u00e9 certains aspects pour la rendre plus r\u00e9aliste et plus compatibles avec nos id\u00e9es. <\/p>\n<div id=\"attachment_485\" style=\"width: 594px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/vue-du-dessus.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-485\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/vue-du-dessus-1024x553.png\" alt=\"Phase de d\u00e9veloppement sous Unity - On y voit les contours de la ville\" width=\"584\" height=\"315\" class=\"size-large wp-image-485\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/vue-du-dessus-1024x553.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/vue-du-dessus-300x162.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/vue-du-dessus-500x270.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/vue-du-dessus.png 1920w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/a><p id=\"caption-attachment-485\" class=\"wp-caption-text\">Phase de d\u00e9veloppement sous Unity. On peut remarquer les montagnes install\u00e9es autour<\/p><\/div>\n<p> Pour finir, nous avons install\u00e9 un \u201cjoueur\u201d symbolis\u00e9 par un point de vue fix\u00e9 \u00e0 un scooter. Nous avons choisi un scooter pour que le d\u00e9placement de notre joueur soit plus rapide et puisse ainsi d\u00e9couvrir plus de parties de notre ville. La programmation \u00e9tait plut\u00f4t intuitive et rapide \u00e0 l\u2019aide des diff\u00e9rents scripts \u00e0 notre disposition. <\/p>\n<div id=\"attachment_482\" style=\"width: 594px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/Syst\u00e8me-de-noeuds1.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-482\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/Syst\u00e8me-de-noeuds1-1024x554.png\" alt=\"Illustration du syt\u00e8me de noeud, la technique pour programmer les d\u00e9placements du scooter\" width=\"584\" height=\"315\" class=\"size-large wp-image-482\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Syst\u00e8me-de-noeuds1-1024x554.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Syst\u00e8me-de-noeuds1-300x162.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Syst\u00e8me-de-noeuds1-500x270.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Syst\u00e8me-de-noeuds1.png 1920w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/a><p id=\"caption-attachment-482\" class=\"wp-caption-text\">Illustration du syt\u00e8me de noeud, la technique pour programmer les d\u00e9placements du scooter<\/p><\/div>\n<p>Une fois le trajet du joueur d\u00e9finit, il restait \u00e0 positionner les diff\u00e9rents <strong>\u00e9v\u00e8nements<\/strong> comme une cabine t\u00e9l\u00e9phonique qui sonne, un chien qui aboie, sur le chemin et d\u00e9clencher le dit-\u00e9v\u00e9nement au passage du joueur.<br \/>\nPar manque de temps, nous n&#8217;avons pas pu rendre notre jeu jouable au casque de r\u00e9alit\u00e9 virtuelle. Il n&#8217;est jouable que sur pc mais nous avons pour objectif de continuer son d\u00e9veloppement afin de le rendre le plus efficace possible, le but ultime \u00e9tant de pouvoir le tester avec des personnes malades. <\/p>\n<p><strong>Voici le trajet du joueur en bonne qualit\u00e9 :<\/strong><br \/>\n<iframe loading=\"lazy\" title=\"Virtual city - Projet Ei2\" width=\"584\" height=\"329\" src=\"https:\/\/www.youtube.com\/embed\/4x3EeKCN9Y0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>Vous l\u2019aurez compris, c\u2019est un v\u00e9ritable <strong>\u201cSerious Game\u201d<\/strong> que nous avons eu l\u2019occasion de d\u00e9velopper. Remerciements \u00e0 Monsieur Richard po<\/a>ur son aide pr\u00e9cieuse qui nous a permis de r\u00e9aliser ce projet. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Matthieu MOREAU &#8211; Matthieu HIRON Encadr\u00e9 par Paul RICHARD Notre projet consistait \u00e0 cr\u00e9er une ville virtuelle \u00e0 l\u2019aide d\u2019un logiciel de jeu cr\u00e9ation de jeu : unity 3D. Le but \u00e9tait de cr\u00e9er un joueur suivant un parcours pr\u00e9cis. &hellip; <a href=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/2017\/06\/15\/virtual-city\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":41343,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[106],"tags":[110,111,108,112,109],"class_list":["post-307","post","type-post","status-publish","format-standard","hentry","category-106","tag-3d","tag-realite-virtuelle","tag-unity","tag-ville","tag-virtual-city"],"_links":{"self":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/users\/41343"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/comments?post=307"}],"version-history":[{"count":1,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/307\/revisions"}],"predecessor-version":[{"id":502,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/307\/revisions\/502"}],"wp:attachment":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/media?parent=307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/categories?post=307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/tags?post=307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}