{"id":305,"date":"2017-06-08T14:20:46","date_gmt":"2017-06-08T13:20:46","guid":{"rendered":"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/?p=305"},"modified":"2017-06-15T16:54:12","modified_gmt":"2017-06-15T15:54:12","slug":"le-jeu-interactif","status":"publish","type":"post","link":"https:\/\/blog.univ-angers.fr\/polytech_2A\/2017\/06\/08\/le-jeu-interactif\/","title":{"rendered":"Le Jeu Interactif"},"content":{"rendered":"<blockquote><p>  I \u00b0) <u>Pr\u00e9sentation de notre groupe et de notre projet<\/u><\/p><\/blockquote>\n<p>Nous sommes un groupe de trois \u00e9tudiants et dans le cadre de la 2\u00e8me ann\u00e9e du cycle pr\u00e9paratoire de <strong>l\u2019IstiA<\/strong>, nous avons d\u00fb choisir un projet de conception parmi les nombreux sujets propos\u00e9s.<\/p>\n<p>Nous avons choisi le d\u00e9veloppement d\u2019un <strong>jeu interactif<\/strong>. <a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/10679742_636350429796889_4490645709614329522_o.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/10679742_636350429796889_4490645709614329522_o-300x164.jpg\" alt=\"Jeu par Battle Interactive\" width=\"300\" height=\"164\" class=\"aligncenter size-medium wp-image-461\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/10679742_636350429796889_4490645709614329522_o-300x164.jpg 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/10679742_636350429796889_4490645709614329522_o-1024x561.jpg 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/10679742_636350429796889_4490645709614329522_o-500x274.jpg 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/10679742_636350429796889_4490645709614329522_o.jpg 1440w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Le principe d\u2019un jeu interactif est tr\u00e8s simple; c\u2019est un jeu vid\u00e9o classique mais durant lequel les contr\u00f4les sont assur\u00e9s par l\u2019utilisateur, non pas au moyen d\u2019une souris, d\u2019un clavier ou d\u2019une manette mais gr\u00e2ce \u00e0 ses actions physiques. <\/p>\n<blockquote><p>II \u00b0) <u>Le choix du Jeu <\/u><\/p><\/blockquote>\n<p>En premier lieu nous avons dress\u00e9 une liste des jeux pouvant correspondre aux jeux interactifs. En effet, il nous fallait des jeux comp\u00e9titifs et avec des objectifs sym\u00e9triques pour chacune des \u00e9quipes. Apr\u00e8s avoir \u00e9labor\u00e9 cette liste nous avons commenc\u00e9 \u00e0 r\u00e9fl\u00e9chir sur le jeu \u00e0 adapter pour notre projet,  Il nous fallait un jeu simple dans son d\u00e9roulement et dans ses r\u00e8gles de fa\u00e7on \u00e0 ne pas perdre trop de temps sur la programmation du jeu en lui m\u00eame.<\/p>\n<p>Nous avons rapidement pens\u00e9 au jeu Pong, figure embl\u00e9matique, puisque c\u2019est l\u2019un des premiers (1972) , des jeux vid\u00e9os.<\/p>\n<div id=\"attachment_459\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/pong.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-459\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/pong-300x168.png\" alt=\"Pong 1972\" width=\"300\" height=\"168\" class=\"size-medium wp-image-459\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/pong-300x168.png 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/pong-1024x576.png 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/pong-500x281.png 500w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/pong.png 1280w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-459\" class=\"wp-caption-text\">Pong 1972<\/p><\/div>\n<blockquote><p>III\u00b0)<u>D\u00e9roulement du Projet<\/u><\/p><\/blockquote>\n<p>Nous avons choisis, sur les conseils de notre tuteur de projet, <strong><a href=\"http:\/\/perso-laris.univ-angers.fr\/~lhommeau\/\">Mehdi Lhommeau<\/a><\/strong>, de travailler avec <a href=\"https:\/\/processing.org\/\">Processing<\/a>, logiciel permettant la gestion de l\u2019Arduino de mani\u00e8re claire, efficace et permettant de nombreuses fonctionnalit\u00e9s graphiques favorisant la programmation. De plus ce dernier est accompagn\u00e9 d\u2019une multitude d\u2019exemples et de conseils disponibles gratuitement sur leur site.<a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/t\u00e9l\u00e9chargement1.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/t\u00e9l\u00e9chargement1.jpg\" alt=\"t\u00e9l\u00e9chargement\" width=\"180\" height=\"180\" class=\"aligncenter size-full wp-image-460\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/t\u00e9l\u00e9chargement1.jpg 225w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/t\u00e9l\u00e9chargement1-150x150.jpg 150w\" sizes=\"auto, (max-width: 180px) 100vw, 180px\" \/><\/a> <\/p>\n<p>Nous avons commenc\u00e9 par la programmation d&#8217;un Pong, relativement classique mais qui nous a permit de prendre en main le logiciel. Nous avons tr\u00e8s rapidement poursuivi avec la cr\u00e9ation de l&#8217;interface, principalement de l&#8217;\u00e9cran d\u2019accueil ainsi que le Menu Pause.<br \/>\n<div id=\"attachment_509\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/ecran.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-509\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/ecran-300x180.jpg\" alt=\"Le jeu Pong que nous avons programm\u00e9\" width=\"300\" height=\"180\" class=\"size-medium wp-image-509\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/ecran-300x180.jpg 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/ecran-1024x614.jpg 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/ecran-500x300.jpg 500w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-509\" class=\"wp-caption-text\">Le jeu Pong que nous avons programm\u00e9<\/p><\/div><br \/>\nApr\u00e8s l&#8217;interface et le jeu en main, la partie la plus difficile se pr\u00e9sentait devant notre groupe : <strong>L&#8217;int\u00e9gration de <a href=\"https:\/\/www.arduino.cc\/\">l&#8217;Arduino<\/a> pour rendre ce jeu vid\u00e9o, interactif<\/strong>.<\/p>\n<blockquote><p>\nIV \u00b0) <u>L&#8217;Arduino<\/u>\n<\/p><\/blockquote>\n<p><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/arduino_official_Logo__.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/arduino_official_Logo__.png\" alt=\"arduino_official_Logo__\" width=\"180\" height=\"155\" class=\"alignleft size-full wp-image-457\" \/><\/a>Apr\u00e8s avoir acquis les bases de l\u2019Arduino, nous avons ax\u00e9 nos recherches sur les possibilit\u00e9s propos\u00e9es par ce dernier. De nombreux p\u00e9riph\u00e9rique sont compatibles avec l&#8217;Arduino (capteur de toucher, acc\u00e9l\u00e9rom\u00e8tre, \u00e9metteur-r\u00e9cepteur, buzzer) il nous fallait choisir le ou lesquels nous allions int\u00e9grer \u00e0 notre Pong. Notre choix s&#8217;est tr\u00e8s vite port\u00e9 sur <strong>l&#8217;acc\u00e9l\u00e9rom\u00e8tre<\/strong> et sur les <strong>\u00e9metteur_r\u00e9cepteurs<\/strong> qui nous permettrait de remplir nos objectifs. <\/p>\n<p><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/conrad.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/conrad.gif\" alt=\"conrad\" width=\"150\" height=\"150\" class=\"alignleft size-full wp-image-458\" \/><\/a>Nous avons donc commenc\u00e9 la recherche sur les sites de fournisseurs que notre tuteur nous avait fournis, compar\u00e9 les diff\u00e9rents avis puis notre choix s\u2019est port\u00e9 sur <a href=\"https:\/\/conrad.fr\">Conrad.fr<\/a>; Nous avons passer commande puis apr\u00e8s avoir re\u00e7u les diff\u00e9rents composants nous nous sommes attel\u00e9s a la programmation de ces derniers.<br \/>\n<div id=\"attachment_511\" style=\"width: 310px\" class=\"wp-caption alignright\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/20170608_145238.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-511\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/20170608_145238-300x180.jpg\" alt=\"Bloc acc\u00e9l\u00e9rom\u00e8tre\" width=\"300\" height=\"180\" class=\"size-medium wp-image-511\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/20170608_145238-300x180.jpg 300w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/20170608_145238-1024x614.jpg 1024w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/20170608_145238-500x300.jpg 500w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-511\" class=\"wp-caption-text\">Bloc acc\u00e9l\u00e9rom\u00e8tre<\/p><\/div><\/p>\n<p>M\u00eame si les diff\u00e9rents tutoriels et aides propos\u00e9s par <strong>Processing<\/strong>, <strong>Arduino<\/strong> ou d\u2019autres sources \u00e9taient tr\u00e8s vari\u00e9s et clairs, cette partie n&#8217;en resta pas moins la plus compliqu\u00e9e et la plus cons\u00e9quente de notre projet.L&#8217;int\u00e9gration des \u00e9metteurs r\u00e9cepteurs fut tr\u00e8s laborieuse et nous demanda beaucoup de temps, trop pour qu&#8217;on puisse la mener \u00e0 bien.<\/p>\n<p>Une fois cette partie termin\u00e9e, notre jeu \u00e9tait fonctionnel, certes reli\u00e9s \u00e0 un ordinateur mais fonctionnel.  <\/p>\n<div style=\"width: 584px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-305-1\" width=\"584\" height=\"329\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/vlc-record-2017-06-15-00h28m37s-vlc-record-2017-06-15-00h27m15s-20170608_144913.mp4-.mp4-.mp4?_=1\" \/><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/vlc-record-2017-06-15-00h28m37s-vlc-record-2017-06-15-00h27m15s-20170608_144913.mp4-.mp4-.mp4\">https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/vlc-record-2017-06-15-00h28m37s-vlc-record-2017-06-15-00h27m15s-20170608_144913.mp4-.mp4-.mp4<\/a><\/video><\/div>\n<blockquote><p>\nV\u00b0)<u>Cr\u00e9ation des p\u00e9riph\u00e9riques physiques du jeu<br \/>\n <\/u><\/p><\/blockquote>\n<p>Nous avons r\u00e9fl\u00e9chi et cr\u00e9e plusieurs prototypes, ces derniers ont \u00e9volu\u00e9s avec les diff\u00e9rentes contraintes li\u00e9 \u00e0 l\u2019avancement et les capacit\u00e9s de notre projet.<br \/>\nAu vu des capacit\u00e9s de notre acc\u00e9l\u00e9rom\u00e8tre  nous avons d\u00fb fixer un seul d\u00e9placement possible. Nous avons donc cr\u00e9\u00e9 un p\u00e9riph\u00e9rique limitant le d\u00e9placement tout en conservant l\u2019aspect ludique.<br \/>\n<div id=\"attachment_449\" style=\"width: 242px\" class=\"wp-caption alignright\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/vlc-record-2017-06-14-23h48m04s-base-1.avi-.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-449\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/vlc-record-2017-06-14-23h48m04s-base-1.avi-.gif\" alt=\"Version Finale\" width=\"232\" height=\"96\" class=\"size-full wp-image-449\" \/><\/a><p id=\"caption-attachment-449\" class=\"wp-caption-text\">Version Finale<\/p><\/div><div id=\"attachment_450\" style=\"width: 242px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/Sans-titre.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-450\" src=\"https:\/\/blog.univ-angers.fr\/istiaprojetsei2\/files\/2017\/06\/Sans-titre-266x300.jpg\" alt=\"Prototype 1\" width=\"266\" height=\"300\" class=\"size-medium wp-image-450\" srcset=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Sans-titre-266x300.jpg 266w, https:\/\/blog.univ-angers.fr\/polytech_2A\/files\/2017\/06\/Sans-titre.jpg 432w\" sizes=\"auto, (max-width: 266px) 100vw, 266px\" \/><\/a><p id=\"caption-attachment-450\" class=\"wp-caption-text\">Prototype 1<\/p><\/div><\/p>\n<p>Nous vous remercions de votre lecture, et d\u00e9posons ci-dessous le lien vers notre rapport de projet, plus complet et plus d\u00e9taill\u00e9 pour celles et ceux qui veulent en savoir plus.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I \u00b0) Pr\u00e9sentation de notre groupe et de notre projet Nous sommes un groupe de trois \u00e9tudiants et dans le cadre de la 2\u00e8me ann\u00e9e du cycle pr\u00e9paratoire de l\u2019IstiA, nous avons d\u00fb choisir un projet de conception parmi les &hellip; <a href=\"https:\/\/blog.univ-angers.fr\/polytech_2A\/2017\/06\/08\/le-jeu-interactif\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":31372,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"quote","meta":{"footnotes":""},"categories":[106],"tags":[81,137,43,127,120,133,78,139,138,140,135,82,80,27,104,134,136],"class_list":["post-305","post","type-post","status-publish","format-quote","hentry","category-106","tag-accelerometre","tag-anthony-gougeon","tag-arduino","tag-carte-arduino","tag-carte-electronique","tag-jeux-interactif","tag-jeux-video","tag-loisir","tag-lucas-davoy","tag-ludique","tag-mehdi-lhommeau","tag-pong","tag-processing","tag-projet","tag-projet-ei2","tag-sebastien-lagrange","tag-thibault-harel","post_format-post-format-quote"],"_links":{"self":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/305","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\/31372"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/comments?post=305"}],"version-history":[{"count":1,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/305\/revisions"}],"predecessor-version":[{"id":337,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/posts\/305\/revisions\/337"}],"wp:attachment":[{"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/media?parent=305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/categories?post=305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.univ-angers.fr\/polytech_2A\/wp-json\/wp\/v2\/tags?post=305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}