{"id":2083,"date":"2021-06-17T14:12:27","date_gmt":"2021-06-17T13:12:27","guid":{"rendered":"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/?p=2083"},"modified":"2021-06-17T14:12:27","modified_gmt":"2021-06-17T13:12:27","slug":"virtual-shopping","status":"publish","type":"post","link":"https:\/\/blog.univ-angers.fr\/polytech_2A\/2021\/06\/17\/virtual-shopping\/","title":{"rendered":"Virtual Shopping"},"content":{"rendered":"<p>Bonjour \u00e0 tous et toutes !<\/p>\n<p>Nous sommes Maria et Sol\u00e8ne, deux \u00e9tudiantes en PeiP 2 A \u00e0 Polytech Angers et nous allons vous pr\u00e9senter le projet de conception r\u00e9alis\u00e9 durant notre 4i\u00e8me semestre d\u2019\u00e9tudes. <\/p>\n<p>Nous avons choisi de nous diriger vers la r\u00e9alit\u00e9 virtuelle. Notre projet s\u2019appelle Virtual Shopping : un magasin 3D dans lequel on peut faire ses courses. Ce projet s\u2019inscrit dans une d\u00e9marche d\u2019am\u00e9lioration de la prise en charge des personnes atteintes d\u2019Alzheimer : ces derni\u00e8res peuvent utiliser les technologies de r\u00e9alit\u00e9 virtuelle pour r\u00e9apprendre certains gestes du quotidien avant de les appliquer dans la vie r\u00e9elle. Ce sujet d\u2019\u00e9tude a aussi pour but d\u2019analyser les pr\u00e9f\u00e9rences des consommateurs : des personnes feront leurs courses dans ce magasin et devront choisir entre deux packagings diff\u00e9rents. Ceci servirait \u00e0 am\u00e9liorer le visuel des produits. <\/p>\n<p><strong>Avant de commencer le projet<\/strong><\/p>\n<p> Pour commencer le projet, on nous a fourni un magasin complet d\u00e9j\u00e0 \u00e9labor\u00e9 par une entreprise et achet\u00e9 par l\u2019\u00e9cole une trentaine d\u2019euros. Nous n\u2019avons pas eu besoin de le construire ni de faire les produits nous-m\u00eame. Cependant il n\u2019y avait dans ce magasin aucun programme pour faire une quelconque action : marcher, faire avancer le caddie, prendre des produits, etc. <\/p>\n<p>Nous avons d\u2019abord d\u00fb nous familiariser avec le logiciel Unity 3D. Pour cela, nous avons pris les cours et TP de M. Richard afin d\u2019apprendre comment g\u00e9rer la lumi\u00e8re, les fonctionnalit\u00e9s que l&#8217;on peut appliquer aux objets ou encore int\u00e9grer des programmes dans le jeu. <\/p>\n<p>Allure du logiciel et du magasin :<br \/>\n[Note : Au d\u00e9but du projet, il n\u2019y avait pas les avatars ni de menu dans le jeu]<br \/>\n<a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/Projet-rogn\u00e9.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/Projet-rogn\u00e9-300x155.png\" alt=\"Projet rogn\u00e9\" width=\"300\" height=\"155\" class=\"alignnone size-medium wp-image-2090\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Projet-rogn\u00e9-300x155.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Projet-rogn\u00e9-1024x531.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Projet-rogn\u00e9-500x259.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Projet-rogn\u00e9.png 1366w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>Se d\u00e9placer<\/strong><\/p>\n<p>La premi\u00e8re \u00e9tape du projet a \u00e9t\u00e9 d\u2019ajouter une fonctionnalit\u00e9 de d\u00e9placement. Pour cela, il faut mettre la cam\u00e9ra du jeu ( = nos yeux) en enfant du caddie. Ainsi, d\u00e8s que le caddie avance ou tourne, nos yeux en font de m\u00eame, ce qui donne la sensation que nous d\u00e9pla\u00e7ons le caddie. Enfin, il faut ajouter des lignes de code en C# sur le caddie pour permettre le d\u00e9placement avec les fl\u00e8ches du clavier.<\/p>\n<p><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/code11.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/code11-300x162.png\" alt=\"code1\" width=\"300\" height=\"162\" class=\"alignnone size-medium wp-image-2092\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/code11-300x162.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/code11-1024x554.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/code11-500x270.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/code11.png 1139w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/code2.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/code2-300x77.png\" alt=\"code2\" width=\"300\" height=\"77\" class=\"alignnone size-medium wp-image-2093\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/code2-300x77.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/code2-1024x265.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/code2-500x129.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/code2.png 1087w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Un autre programme a aussi \u00e9t\u00e9 ajout\u00e9 sur la cam\u00e9ra afin de pouvoir tourner la t\u00eate en d\u00e9pla\u00e7ant le curseur de la souris.<\/p>\n<p><strong>Prendre les produits<\/strong><\/p>\n<p>Pour la suite du projet, nous nous sommes concentr\u00e9es seulement sur le rayon avant milieu du magasin car il faut appliquer des scripts ( =programmes) sur chaque produit du magasin. Or il y en a pour des centaines voire des milliers de produits diff\u00e9rents. <\/p>\n<p>Afin d\u2019exploiter les produits dans une utilisation future, nous avons fait des scripts pour chaque produit diff\u00e9rent donnant son prix. Puis nous avons r\u00e9ussi \u00e0 programmer l\u2019action d\u2019attirer le produit \u00e0 nous lorsque l\u2019on clique droit dessus. Si le clic est prolong\u00e9, le produit tournera afin que nous puissions voir s\u2019il correspond \u00e0 celui mentionn\u00e9 sur la liste des courses. S\u2019il correspond, il tombera dans le caddie d\u00e8s que l\u2019on l\u00e2chera le clic droit. S\u2019il ne correspond pas, on peut le remettre \u00e0 sa place en appuyant sur la touche P ( =Poser). Chaque produit ajout\u00e9 dans le caddie fera augmenter le prix total des courses. <\/p>\n<p><strong>Afficher la trajectoire<\/strong><\/p>\n<p>Puisque le projet peut potentiellement servir \u00e0 aider les personnes atteintes d\u2019Alzheimer, il est judicieux de pouvoir enregistrer la trajectoire sur le logiciel afin de l\u2019analyser \u00e0 posteriori : la personne peut tr\u00e8s bien avoir fini ses courses et pris les bons produits mais avoir eu des d\u00e9placements bien trop compliqu\u00e9s et superflus pour \u00eatre jug\u00e9e apte \u00e0 faire ses courses seule de mani\u00e8re efficace.<br \/>\nNous avons d\u00e9cid\u00e9 d\u2019afficher le trac\u00e9 des d\u00e9placements dans le magasin en appuyant sur la barre espace du clavier.<br \/>\n<a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/Trajectoire-rogn\u00e9e.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/Trajectoire-rogn\u00e9e-300x146.png\" alt=\"Trajectoire rogn\u00e9e\" width=\"300\" height=\"146\" class=\"alignnone size-medium wp-image-2091\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Trajectoire-rogn\u00e9e-300x146.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Trajectoire-rogn\u00e9e-1024x500.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Trajectoire-rogn\u00e9e-500x244.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Trajectoire-rogn\u00e9e.png 1365w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>Afficher le menu<\/strong><\/p>\n<p>Pour finaliser le projet, nous avons \u00e9labor\u00e9 un menu avec le titre du projet et deux boutons.<br \/>\nUn bouton pour commencer le jeu et un bouton pour le quitter. Ces boutons deviennent gris clair lorsque l\u2019on passe le curseur dessus afin de signifier au joueur qu\u2019il s\u2019appr\u00eate \u00e0 cliquer sur tel ou tel bouton. Ils deviennent blancs une fois cliqu\u00e9s en attendant le chargement de l\u2019action qu\u2019ils sont cens\u00e9s effectuer ( notamment le bouton play qui peut \u00eatre assez long).<br \/>\n<a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/Menu-rogn\u00e9.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/Menu-rogn\u00e9-300x146.png\" alt=\"Menu rogn\u00e9\" width=\"300\" height=\"146\" class=\"alignnone size-medium wp-image-2089\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Menu-rogn\u00e9-300x146.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Menu-rogn\u00e9-1024x500.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Menu-rogn\u00e9-500x244.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/Menu-rogn\u00e9.png 1366w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>Cr\u00e9er une liste des produits<\/strong><\/p>\n<p>Comme dit pr\u00e9c\u00e9demment, ce projet servira aussi \u00e0 tester diff\u00e9rents packagings. Pour optimiser le d\u00e9veloppement de cette d\u00e9marche qui se fera plus tard, on nous a demand\u00e9 de faire un tableau Excel listant tous les produits avec une photo, un prix coh\u00e9rent et leur r\u00e9f\u00e9rence Unity.<br \/>\nPour optimiser la lecture de ce tableau, nous avons class\u00e9 les produits selon leur type : Boissons et liquides, Bonbons et g\u00e2teaux, Conserves, Fruits l\u00e9gumes patates, Viande poisson oeufs, Surgel\u00e9s, Produits laitiers, Hygi\u00e8ne, Jouets et jeux, Livres et enfin Divers. La liste des produits se pr\u00e9sente comme ceci :<br \/>\n<a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/excel.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2021\/06\/excel-300x216.png\" alt=\"excel\" width=\"300\" height=\"216\" class=\"alignnone size-medium wp-image-2094\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/excel-300x216.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/excel-415x300.png 415w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2021\/06\/excel.png 639w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>Conclusion<\/strong><\/p>\n<p>Ce projet nous a permis d\u2019explorer le monde des jeux vid\u00e9o et de la r\u00e9alit\u00e9 virtuelle. Nous avons d\u00e9couvert la programmation orient\u00e9e objet. Nous avons pu exercer nos comp\u00e9tences de communication, de programmation et de compr\u00e9hension d\u2019un logiciel au premier abord pas si simple. Le r\u00e9sultat final est conforme avec le cahier des charges car il r\u00e9pond aux objectifs \u00e9nonc\u00e9s. <\/p>\n<p>Plusieurs am\u00e9liorations sont cependant \u00e0 pr\u00e9voir.<br \/>\n&#8211; Nous avons un probl\u00e8me avec l&#8217;affichage du menu. En effet notre jeu ne fonctionne pas avec le menu (lorsque l&#8217;on appuie sur le bouton Play, des erreurs se lancent), donc il serait possible de l&#8217;am\u00e9liorer avec un menu qui fonctionne. (notre menu fonctionnait mais \u00e0 cause d\u2019une erreur que l\u2019on n\u2019a pas r\u00e9ussi \u00e0 r\u00e9gler, il ne marche plus)<br \/>\n-Il serait aussi int\u00e9ressant de programmer un g\u00e9n\u00e9rateur de liste de courses al\u00e9atoire afin qu\u2019aucune personne ext\u00e9rieure ne soit oblig\u00e9e de l\u2019\u00e9tablir.<br \/>\n&#8211; Afficher le prix total des aliments dans le caddie au cours de la partie serait un plus.<\/p>\n<p>Il faut \u00e9galement noter que les touches utilis\u00e9es sur ordi devront \u00eatre chang\u00e9es pour une utilisation sur manettes et casque de r\u00e9alit\u00e9 virtuelle.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bonjour \u00e0 tous et toutes ! Nous sommes Maria et Sol\u00e8ne, deux \u00e9tudiantes en PeiP 2 A \u00e0 Polytech Angers et nous allons vous pr\u00e9senter le projet de conception r\u00e9alis\u00e9 durant notre 4i\u00e8me semestre d\u2019\u00e9tudes. Nous avons choisi de nous &hellip; <a href=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/2021\/06\/17\/virtual-shopping\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":74932,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[344],"tags":[460,458,111,459,457],"class_list":["post-2083","post","type-post","status-publish","format-standard","hentry","category-344","tag-magasin","tag-maria-rachidi","tag-realite-virtuelle","tag-solene-guillaume","tag-virtual-shopping"],"_links":{"self":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/2083","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\/74932"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/comments?post=2083"}],"version-history":[{"count":0,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/2083\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/media?parent=2083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/categories?post=2083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/tags?post=2083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}