<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet title="XSL formatting" type="text/xsl" href="http://helmut.dev-blog.fr/feed/rss2/xslt" ?><rss version="2.0"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:wfw="http://wellformedweb.org/CommentAPI/"
  xmlns:content="http://purl.org/rss/1.0/modules/content/">
<channel>
  <title>{dev} Blog - .NET - CSharp</title>
  <link>http://helmut.dev-blog.fr/</link>
  <description>Développement et industrie du jeu vidéo</description>
  <language>fr</language>
  <pubDate>Tue, 27 Dec 2011 11:51:08 +0100</pubDate>
  <copyright></copyright>
  <docs>http://blogs.law.harvard.edu/tech/rss</docs>
  <generator>Dotclear</generator>
  
    
  <item>
    <title>Passage en revue de trois livres sur XNA</title>
    <link>http://helmut.dev-blog.fr/post/2009/01/17/Passage-en-revue-de-trois-livres-sur-XNA</link>
    <guid isPermaLink="false">urn:md5:4b3212b822a36e816555a0bcd75a9df0</guid>
    <pubDate>Sat, 17 Jan 2009 21:01:00 +0100</pubDate>
    <dc:creator>Helmut</dc:creator>
        <category>Articles</category>
        <category>.NET - CSharp</category><category>Microsoft</category><category>Xbox 360</category><category>XNA</category>    
    <description>&lt;p&gt;Le net regorge de ressources pour les développeurs et XNA n'est pas une exception. Par contre, on a tendance à oublier d'autres média, tels que les livres. Je vous propose de passer en revue les quelques livres dont je dispose, certains proposant des informations intéressantes que l'on ne trouve nul part ailleurs. Notons déjà que ces livres ne sont pas destinés à vous apprendre à programmer en C#, donc si vous êtes un total débutant en quête d'XNA, il va d'abord falloir passer sérieusement par la case C#.&lt;br /&gt;
&lt;br /&gt;
Quant à l'article, c'est dans la suite que cela se passe.&lt;br /&gt;
&lt;br /&gt;
&lt;img src=&quot;http://helmut.dev-blog.fr/public/livres/livres.jpg&quot; alt=&quot;livres.jpg&quot; style=&quot;display:block; margin:0 auto;&quot; /&gt;&lt;/p&gt;    &lt;p&gt;Avant de commencer ce petit tour, plusieurs constats sont à faire, histoire de ne pas vous effrayer. Premièrement, si il existe des dizaines de livres sur XNA en anglais, il n'en existe absolument aucun dans la langue de Molière, au grand damne des anglophobes. Ceci est surement du à la popularité plutôt faible d'XNA dans les communautés de développement francophones, aucun auteur/éditeur n'étant assez aventureux pour publier en français.&lt;br /&gt;
Autre point&amp;nbsp;: il existe parfois 2 à 3 éditions pour un même livre. Il faut donc prendre garde. Ceci est du à la rapide évolution qu'a eu XNA avant d'arriver à l'aboutissement qu'est la version 3. Certains livres sont donc éditer pour chacune des versions d'XNA, voir parfois des versions intermédiaires comme des beta ou CTP. Si cela ne posera aucun problème pour des livres focalisés sur XNA 2 ou 3, les projets XNA 2 fonctionnant normalement avec XNA 3, ce n'est pas le cas de XNA 1, et encore moins des betas de celui ci. En effet, des changements majeurs ont eu lieux, et certains livrent sont basés sur des pré-versions, afin de pouvoir sortir en même temps que la version finale du framework (c'est un fait courant dans la publication de livres, les éditeurs de logiciels fournissant d'ailleurs souvent ces pré-versions aux auteurs lorsqu'elles ne sont pas publiques).&lt;br /&gt;
Dernier point&amp;nbsp;: qui dit livre en anglais, dit importation nécessaire. Les livres techniques en import ont parfois une place dans les grands magasins, mais ce n'est pas le cas pour XNA, la meilleure solution étant de les commander, notamment en ligne. Et pour cela, rien de mieux que &lt;em&gt;amazon.fr&lt;/em&gt; qui propose la grande majorité de ces ouvrages (les plus importants en tout cas) et à des prix qui n'ont rien à envier leur équivalent en dollars.&lt;br /&gt;
Trêves de commentaires, passons donc à ces livres.&lt;br /&gt;&lt;/p&gt;
&lt;hr /&gt;


&lt;p&gt;&lt;br /&gt;
&lt;img src=&quot;http://helmut.dev-blog.fr/public/livres/1.gif&quot; alt=&quot;1.gif&quot; style=&quot;display:block; margin:0 auto;&quot; /&gt;&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Professional XNA Programming: Building Games for Xbox 360 and Windows with XNA Game Studio 2.0&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;Par &lt;a href=&quot;http://benjaminnitschke.com/&quot; hreflang=&quot;en&quot;&gt;Benjamin Nitschke&lt;/a&gt;&lt;br /&gt;
ISBN-13: 978-0470261286&lt;br /&gt;
Il s'agit de la seconde édition de ce livre. Pas de troisième édition envisagée.&lt;br /&gt;
&lt;br /&gt;
&lt;strong&gt;Un petit mot sur l'auteur :&lt;/strong&gt; Benjamin Nitschke est un développeur d'origine allemande, MVP DirectX/XNA. Il fait parti des fondateurs du studio &lt;a href=&quot;http://www.exdream.com/&quot; hreflang=&quot;en&quot;&gt;exDream&lt;/a&gt; dans lequel il exerce la fonction de Lead Programmer. exDream est à l'origine de la série de jeux  de stratégie Arena Wars, dont le premier a la particularité d'avoir été le premier jeu commercial réalisé en code managé (C# via MDX). Benjamin a également réalisé les starter kit 3D (racing et shooter) du Creator Club.&lt;br /&gt;
&lt;br /&gt;
&lt;strong&gt;Le contenu du livre :&lt;/strong&gt; ce livre se concentre essentiellement sur la 3D, mais consacre quelques chapitres à la 2D et d'autres aspects d'XNA, histoire de couvrir tous les aspects du framework. Il commence donc avec une mise en bouche sur la 2D, et propose de réaliser un Pong et deux casse-briques en 2D, en passant en revu les aspects nécessaires. Avant de passer à la programmation, l'auteur discute de problèmes de conception, tels que d'imaginer un gameplay et de mettre à plat ses idées. Concernant la façon dont la programmation est abordée, elle est faite suivant une méthodologie &lt;em&gt;agile&lt;/em&gt;, principalement via des &lt;em&gt;tests unitaires&lt;/em&gt; omniprésents dont l'auteur est très friand. Ce livre n'est donc déjà pas adressé aux débutants, mais plutôt aux professionnels et il faut adhéré aux tests unitaires. Tout le code n'est pas expliqué et certaines parties sont présentées comme des challenges à réaliser soi-même, même si le code source du livre est disponible au cas où. Le livre passe ensuite à la 3D et se concentre sur la réalisation d'un moteur 3D réutilisable, et qui sera d'ailleurs réutilisé et enrichi au fil des chapitres, passant par un shoot'them up à un jeu de course (très similaire aux starter kit d'XNA, normal, c'est Benjamin qui les a fait). Une bonne partie du livre est consacrée aux effets (shader), notamment en expliquant le principe de bump mapping et ses différentes techniques, pour ensuite attaquer des effets de post-processing (flou artistique etc). Dans sa seconde édition, le livre est désormais compatible XNA 2 (contre la beta du 1 pour la première édition, donc attention) et présente des chapitres additionnels pour réaliser un jeu de rôle, mais pas d'un point de vue programmation, ce sont plus des chapitres sur le design.&lt;br /&gt;
&lt;br /&gt;
&lt;strong&gt;Critique du livre :&lt;/strong&gt; le livre se veut abordable pour tout développeur, mais il rentre très vite dans des détails où la connaissance des API 3D est parfois requise. De plus, il ne couvre pas tous le code nécessaire, demandant au lecteur de ne pas être passif. Si cela est un plus pour ceux qui veulent apprendre d'eux mêmes sur les bases du livres, c'est un véritable frein aux débutants ou ceux qui ont besoin d'un code commenté pour le comprendre. Ces derniers seront d'autant plus freinés par la légion de &lt;em&gt;tests unitaires&lt;/em&gt; que l'auteur emploi, ce qui peut devenir vraiment très lourd pour qui n'adhère pas aux méthodologies agile (la réalisation de jeux ne s'y prêtant pas toujours). Ceci rend l'exploitation du livre par des débutants complètement contre intuitive. Pour le reste du contenu, XNA est couvert dans tous ses aspects (son, réseaux, contrôle, composants, ...) ce qui rend le livre plutôt complet et intéressant à réaliser, notamment pour qui aimerait programmer le jeu de course ou le shoot'em up (ou un moteur réutilisable, tout simplement). Toutefois, les points expliqués précédemment demandent au lecteur d'être véritablement motivé et compétent pour venir à bout de tous ses chapitres.&lt;br /&gt;&lt;/p&gt;
&lt;hr /&gt;


&lt;p&gt;&lt;br /&gt;
&lt;img src=&quot;http://helmut.dev-blog.fr/public/livres/2.jpg&quot; alt=&quot;2.jpg&quot; style=&quot;display:block; margin:0 auto;&quot; /&gt;&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;XNA 2.0 Game Programming Recipes: A Problem-solution Approach&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;Par &lt;a href=&quot;http://www.riemers.net/&quot; hreflang=&quot;en&quot;&gt;Riemer Grootjans&lt;/a&gt;&lt;br /&gt;
ISBN-13: 978-1590599259&lt;br /&gt;
Première édition, la seconde devant arriver fin mars 2009 (ISBN-13: 978-1430218555) et sera conforme à XNA 3.&lt;br /&gt;
&lt;br /&gt;
&lt;strong&gt;Un petit mot sur l'auteur :&lt;/strong&gt; Riemer Grootjans est un thèsard à l'Université de Bruxelles (en Belgique donc) en ingénierie électronique. Il a réalisé beaucoup de tutoriels autour de DirectX, qu'il a ensuite porté sur XNA, ce qui lui a valu le titre de MVP. A ce titre, son site web est une mine d'or avec beaucoup d'articles sur des concepts de base de la 3D (génération de terrains en autre). Son livre reflète beaucoup son passé actif sur Direct 3D.&lt;br /&gt;
&lt;br /&gt;
&lt;strong&gt;Le contenu du livre :&lt;/strong&gt; 100% consacré à la 3D, principalement aux méthodes de base de rendu, le livre ressemble étrangement à un livre Direct 3D. Normal pourra-t-on dire, étant donné l'actif de l'auteur. On se retrouve donc avec un contenu qui n'est pas vraiment focalisé sur XNA en lui même. Pour ce qui est de la 3D, tout comme le site de Riemer, les infos sont très complètes et intéressantes pour qui souhaite réaliser un moteur 3D propre et comprendre toutes les ficelles derrières des rendus efficaces. On passe donc par des rendus de base en 3D, à la génération de terrain (via heightmap et avec interpolation de vertices), en passant par des algorithmes de culling, de calcul de collision entre triangles, etc. Les shader ne sont pas laissés en reste mais se concentrent surtout sur l'éclairage de votre moteur de rendu de terrains fraîchement créé, en y ajoutant lumières et ombres. A la fin du livre, vous vous retrouverez avec un moteur de rendu de terrains complet d'un point de vu technique, mais vous n'aurez pas réalisé un jeu. A vous de voir comment y intégrer des modèles, et surtout le design du jeu. L'auteur fait aussi un petit effort pour couvrir quelques aspects d'XNA, et faisant deux chapitres plutôt maigres sur le son et le réseau.&lt;br /&gt;
&lt;br /&gt;
&lt;strong&gt;Critique du livre :&lt;/strong&gt; Son principal atout en fait peut être aussi sa faiblesse. Il est consacré uniquement au rendu de terrains, et il le fait très bien. De ce point de vu, il est complet et intéressant en présentant des algorithmes efficaces. Mais malheureusement, cela n'en fait pas un livre sur XNA a proprement parlé, mais un livre plus ou moins général sur la 3D. Le livre ne couvre pas vraiment les autres aspects du framework et ce n'est pas la timide tentative des deux derniers chapitres qui y changera quelque chose. On se retrouve donc avec un bon bouquin sur le rendu de terrain, mais aucunement sur le développement de jeu (aucune programmation de design n'étant traitée) et encore moins un vrai livre sur XNA. Ce livre sera donc intéressant pour tout développeur intéressé par la 3D et ses secrets, mais il ne le sera pas pour les débutants ou ceux qui pensaient qu'ils auraient réalisé un jeu à la fermeture du livre.&lt;br /&gt;&lt;/p&gt;
&lt;hr /&gt;


&lt;p&gt;&lt;br /&gt;
&lt;img src=&quot;http://helmut.dev-blog.fr/public/livres/3.jpg&quot; alt=&quot;3.jpg&quot; style=&quot;display:block; margin:0 auto;&quot; /&gt;&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Building XNA 2.0 Games: A Practical Guide for Independent Game Development&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;Par &lt;a href=&quot;http://skasoftware.wordpress.com/&quot; hreflang=&quot;en&quot;&gt;James E. Silva&lt;/a&gt;&lt;br /&gt;
ISBN-13: 978-1430209799&lt;br /&gt;
Première édition, seconde en approche pour avril 2009 (ISBN-13: 978-1430218692).&lt;br /&gt;
&lt;br /&gt;
&lt;strong&gt;Un petit mot sur l'auteur :&lt;/strong&gt; James est un ingénieur logiciel diplomé de New York. Dans l'univers du jeu vidéo, c'est un développeur amateur. Sa popularité a explosé lorsqu'il a gagné le concours de développement de jeux Dream Build Play de Microsoft en 2007 avec son jeu &lt;a href=&quot;http://fr.youtube.com/watch?v=im8pSPeUorY&quot; hreflang=&quot;fr&quot;&gt;The Dishwasher: Dead Samurai&lt;/a&gt; qu'il a développé en solo (seul les musiques ont nécessité une intervention externe). Son jeu sortira sous peu sur le Xbox Live Arcade.&lt;br /&gt;
&lt;br /&gt;
&lt;strong&gt;Le contenu du livre :&lt;/strong&gt; ce livre vous propose tout simplement de réaliser le moteur de The Dishwasher. Pas en aussi poli et complet, mais déjà un moteur 2D très moderne, loin des sprites et autres tileset. Avant tout, ce livre se veut &quot;clé en main&quot; pour XNA. C'est à dire qu'il est sensé se suffir à lui même pour apprendre à programmer un jeu avec XNA. Il commence donc par une introduction au langage C#, pour les débutants les plus complets. Attention toutefois, cette introduction est assez light (un seul chapitre ne pouvant être suffisant) et demandera donc des notions de programmation, et surtout de développement orienté objet. Passé cela, le livre propose donc de réaliser un moteur 2D, en passant d'abord par un éditeur de cartes. Cet éditeur pourra gérer plusieurs couches de rendu, des collisions basées sur une grille, mais aussi basées sur des lignes, afin de ne pas être limité à des carrés. Puis les choses deviennent sérieuses, avec la réalisation d'un éditeur de personnages, permettant de créer des animations basées sur un squelette 2D, très intéressant. Le tout sera appuyé par le moteur 2D en lui même. Animation interpolées, nombreux shader pour des effets en tout genre (tout en restant simple), moteur de particules, IA, scripts et réseau&amp;nbsp;! Tous les aspects d'XNA, en dehors de la 3D, sont couverts et à la clôture du livre, vous avez un jeu 2D très au point techniquement. L'auteur a une approche assez différente des autres livres. XNA étant destiné aux développeurs amateurs souhaitant avant tout se divertir, l'auteur prend le point de vu de l'amateur, reniant donc tout aspect professionnel dans le livre. Exit donc toutes méthodologies, ou approche rigide. A ce titre, la lecture en devient parfois humoristique et relève parfois du &quot;cowboy-coding&quot;, tout en restant propre et efficace.&lt;br /&gt;
&lt;br /&gt;
&lt;strong&gt;Critique du livre :&lt;/strong&gt; le livre idéal pour les débutants, mais aussi une lecture très agréable pour les autres, de par le parti prit de l'auteur. Complet par rapport à XNA (3D exceptée), sa lecture se fait avec plaisir et son contenu est très abordable tout en proposant la réalisation d'un moteur 2D pointu aux standards d'aujourd'hui. Ce livre montre bien que l'on peut réaliser des jeux très simples mais très efficaces en tant qu'amateur et sans grande ambition. Une lecture vivement recommandée pour qui est motivé à faire de même, sans prise de tête.&lt;/p&gt;</description>
    
    
    
          <comments>http://helmut.dev-blog.fr/post/2009/01/17/Passage-en-revue-de-trois-livres-sur-XNA#comment-form</comments>
      <wfw:comment>http://helmut.dev-blog.fr/post/2009/01/17/Passage-en-revue-de-trois-livres-sur-XNA#comment-form</wfw:comment>
      <wfw:commentRss>http://helmut.dev-blog.fr/feed/rss2/comments/39</wfw:commentRss>
      </item>
    
  <item>
    <title>SP1 de VS2008 et de .NET 3.5 en version finale</title>
    <link>http://helmut.dev-blog.fr/post/2008/08/12/SP1-de-VS2008-et-de-NET-35-en-version-finale</link>
    <guid isPermaLink="false">urn:md5:8ccada8b2d06691d268c096196bb0b02</guid>
    <pubDate>Tue, 12 Aug 2008 17:15:00 +0200</pubDate>
    <dc:creator>Helmut</dc:creator>
        <category>News</category>
        <category>.NET - CSharp</category><category>Microsoft</category><category>Windows</category>    
    <description>    &lt;p&gt;&lt;a href=&quot;http://helmut.dev-blog.fr/post/2008/05/14/Les-SP1-pour-Visual-Studio-2008-et-NET-35-sont-de-sortie-en-version-beta&quot; hreflang=&quot;fr&quot;&gt;En beta depuis mai dernier&lt;/a&gt;, les SP1 pour Visual Studio 2008 et le framework .NET 3.5 sont désormais disponibles en version finale.&lt;br /&gt;
&lt;br /&gt;
Au menu&amp;nbsp;:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Les corrections de bugs habituelles&lt;/li&gt;
&lt;li&gt;Un meilleur designer pour les applications WPF&lt;/li&gt;
&lt;li&gt;Un support pour SQL Server 2008 (passé en RTM récemment)&lt;/li&gt;
&lt;li&gt;De nouveaux outils d'accès aux données (ADO.NET Entity Framework, Data Services et Entity Designer)&lt;/li&gt;
&lt;li&gt;Des performances accrues pour les applications WPF et la machine .NET&lt;/li&gt;
&lt;li&gt;Ajout du composant Ribbon, pour la réalisation de ruban dans le style d'Office 2007 (compatible C++ via une version MFC)&lt;/li&gt;
&lt;li&gt;Le support de Silverligth 2 beta 2&lt;br /&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Pour télécharger ces SP1, &lt;a href=&quot;http://www.microsoft.com/downloads/details.aspx?FamilyID=27673c47-b3b5-4c67-bd99-84e525b5ce61&amp;amp;DisplayLang=fr&quot; hreflang=&quot;fr&quot;&gt;c'est par ici&lt;/a&gt;. A noter que si vous avez installé les versions beta, il vous faudra de préférence &lt;a href=&quot;http://www.microsoft.com/downloads/details.aspx?FamilyId=A494B0E0-EB07-4FF1-A21C-A4663E456D9D&amp;amp;displaylang=en&quot; hreflang=&quot;en&quot;&gt;nettoyer votre installation via cet outil&lt;/a&gt;.&lt;br /&gt;
&lt;br /&gt;
Les infos détaillées sur ces SP1 sont &lt;a href=&quot;http://msdn.microsoft.com/en-us/vstudio/products/cc533447.aspx&quot; hreflang=&quot;fr&quot;&gt;disponibles ici&lt;/a&gt;.&lt;/p&gt;</description>
    
    
    
          <comments>http://helmut.dev-blog.fr/post/2008/08/12/SP1-de-VS2008-et-de-NET-35-en-version-finale#comment-form</comments>
      <wfw:comment>http://helmut.dev-blog.fr/post/2008/08/12/SP1-de-VS2008-et-de-NET-35-en-version-finale#comment-form</wfw:comment>
      <wfw:commentRss>http://helmut.dev-blog.fr/feed/rss2/comments/26</wfw:commentRss>
      </item>
    
  <item>
    <title>Tour d'horizon de C# 3 avec XNA 3</title>
    <link>http://helmut.dev-blog.fr/post/2008/05/14/Tour-dhorizon-de-C-3-avec-XNA-3</link>
    <guid isPermaLink="false">urn:md5:eade215a1b85ac6031f4ab4331a0e189</guid>
    <pubDate>Wed, 14 May 2008 15:03:00 +0200</pubDate>
    <dc:creator>Helmut</dc:creator>
        <category>News</category>
        <category>.NET - CSharp</category><category>Xbox 360</category><category>XNA</category><category>Zune</category>    
    <description>    &lt;p&gt;Jusque là, XNA était conçu pour Visual Studio 2005 et ciblait le .NET Framwork 2. Avec l'arrivée de la CTP de XNA 3, le framework passe à Visual Studio 2008 qui, lui, introduit la version 3 du langage C# que vous pourrez utiliser dans vos jeux. L'occasion donc de faire un petit rappel concernant C# 3.&lt;br /&gt;
Cette nouvelle version du langage apporte quelques nouveautés pour faciliter l'écriture de votre code.&lt;br /&gt;
Nick Gravelyn, l'auteur des connus &lt;a href=&quot;http://nick.gravelyn.com/tile-engine-series/&quot; hreflang=&quot;en&quot;&gt;tutoriels vidéos pour réaliser son Tile Engine&lt;/a&gt;, propose un petit tour d'horizon de ces facilités d'écriture, toutes compatibles avec XNA sur 360 et Zune. Au menu donc:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://nick.gravelyn.com/2008/05/11/lets-talk-c-features-pt-1/&quot; hreflang=&quot;en&quot;&gt;Les propriétés automatiques&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://nick.gravelyn.com/2008/05/13/lets-talk-c-features-pt-2/&quot; hreflang=&quot;en&quot;&gt;Les initialiseurs d'objets&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://nick.gravelyn.com/2008/05/13/lets-talk-c-features-pt-3/&quot; hreflang=&quot;en&quot;&gt;Les inférences de types&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://nick.gravelyn.com/2008/05/14/lets-talk-c-features-pt-4/&quot; hreflang=&quot;en&quot;&gt;Les extensions de méthodes&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;br /&gt;
Il ne manque que les lambda expressions pour être exhaustif.&lt;br /&gt;
&lt;br /&gt;
Visual Studio 2008 apporte aussi le &lt;em&gt;.NET 3.5&lt;/em&gt;, que vous pourrez donc utiliser pour vos jeux mais si vous ciblez la plateforme Zune ou Xbox 360 (non supportée dans la CTP), n'oubliez pas de vous restreindre à l'usage de classes et méthodes compatibles &lt;em&gt;.NET Compact Framework&lt;/em&gt;.&lt;br /&gt;
Notons que C# 2 est compatible avec C# 3 (tout comme .NET 2 et 3, et XNA 2 et 3), vous n'aurez donc pas à modifier vos projets pour les recompiler sous VS2008 (contrairement à ce qu'est C# 2 par rapport à C# 1).&lt;/p&gt;</description>
    
    
    
          <comments>http://helmut.dev-blog.fr/post/2008/05/14/Tour-dhorizon-de-C-3-avec-XNA-3#comment-form</comments>
      <wfw:comment>http://helmut.dev-blog.fr/post/2008/05/14/Tour-dhorizon-de-C-3-avec-XNA-3#comment-form</wfw:comment>
      <wfw:commentRss>http://helmut.dev-blog.fr/feed/rss2/comments/12</wfw:commentRss>
      </item>
    
  <item>
    <title>Les SP1 pour Visual Studio 2008 et .NET 3.5 sont de sortie en version beta</title>
    <link>http://helmut.dev-blog.fr/post/2008/05/14/Les-SP1-pour-Visual-Studio-2008-et-NET-35-sont-de-sortie-en-version-beta</link>
    <guid isPermaLink="false">urn:md5:a8234074bacd347dac272fc8de1317ee</guid>
    <pubDate>Wed, 14 May 2008 12:07:00 +0200</pubDate>
    <dc:creator>Helmut</dc:creator>
        <category>News</category>
        <category>.NET - CSharp</category><category>Microsoft</category><category>Windows</category>    
    <description>    &lt;p&gt;Microsoft vient de lâcher dans la nature les SP1 pour son IDE Visual Studio 2008 et son Framework .NET 3.5.&lt;br /&gt;
Au programme, beaucoup de &lt;em&gt;bug fix&lt;/em&gt; et pas mal de nouvelles &lt;em&gt;features&lt;/em&gt;, notamment du côté &lt;em&gt;ASP.NET&lt;/em&gt; et persistance de données avec l'intégration du &lt;em&gt;Entity Framework&lt;/em&gt; pour &lt;em&gt;ADO.NET&lt;/em&gt; et &lt;em&gt;LINQ&lt;/em&gt; ainsi que le support du futur &lt;em&gt;SQL Server 2008&lt;/em&gt;.&lt;br /&gt;
Les performances des applications .NET ont également été améliorées, principalement au niveau du temps de démarrage de grosses applications. WPF reçoit aussi son lot d'améliorations avec un meilleur designer et permet désormais d'intégrer complètement DirectX dans vos interfaces.&lt;br /&gt;
&lt;br /&gt;
Scott Guthrie, développeur chez Microsoft, &lt;a href=&quot;http://weblogs.asp.net/scottgu/archive/2008/05/12/visual-studio-2008-and-net-framework-3-5-service-pack-1-beta.aspx&quot; hreflang=&quot;en&quot;&gt;détail les nouveautés de ces SP1&lt;/a&gt; plus en profondeur et répond à vos questions dans les commentaires de son blog.&lt;br /&gt;
Brian Harry, quant à lui, liste &lt;a href=&quot;http://blogs.msdn.com/bharry/archive/2008/04/28/team-foundation-server-2008-sp1.aspx&quot; hreflang=&quot;en&quot;&gt;les améliorations des version Team Foundation&lt;/a&gt; de Visual Studio.&lt;br /&gt;
&lt;br /&gt;
Si vous optez pour ces betas, il vous faudra passer au SP1 de Vista (si vous êtes sous Vista) et désinstaller le Toolkit et le SDK de Silverlight 2 car ceux ci ne sont pas supportés, ils seront très prochainement mis à jour.&lt;br /&gt;
&lt;br /&gt;
Vous pouvez télécharger les différentes betas de ces SP1 en suivant les liens suivants:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Pour &lt;a href=&quot;http://www.microsoft.com/downloads/details.aspx?FamilyId=23516C63-2DB2-4E7F-AABA-32B12D6E025C&amp;amp;displaylang=en&quot; hreflang=&quot;en&quot;&gt;.NET 3.5&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Pour &lt;a href=&quot;http://www.microsoft.com/downloads/details.aspx?FamilyId=CF99C752-1391-4BC3-BABC-86BC0B9E8E5A&amp;amp;displaylang=en&quot; hreflang=&quot;en&quot;&gt;Visual Studio 2008&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Pour &lt;a href=&quot;http://www.microsoft.com/downloads/details.aspx?familyid=DCB535BE-C32E-474C-9F64-282A2849ACC5&amp;amp;displaylang=en&quot; hreflang=&quot;en&quot;&gt;Team Foundation Server&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Les versions finales de ces SP1 arriveront courant de l'été.&lt;/p&gt;</description>
    
    
    
          <comments>http://helmut.dev-blog.fr/post/2008/05/14/Les-SP1-pour-Visual-Studio-2008-et-NET-35-sont-de-sortie-en-version-beta#comment-form</comments>
      <wfw:comment>http://helmut.dev-blog.fr/post/2008/05/14/Les-SP1-pour-Visual-Studio-2008-et-NET-35-sont-de-sortie-en-version-beta#comment-form</wfw:comment>
      <wfw:commentRss>http://helmut.dev-blog.fr/feed/rss2/comments/11</wfw:commentRss>
      </item>
    
  <item>
    <title>Afficher du texte à l'écran avec XNA</title>
    <link>http://helmut.dev-blog.fr/post/2008/04/27/Afficher-du-texte-a-lecran-avec-XNA</link>
    <guid isPermaLink="false">urn:md5:dfe42330d91b3554d1dfa3eb8025eef1</guid>
    <pubDate>Wed, 30 Apr 2008 00:49:00 +0200</pubDate>
    <dc:creator>Helmut</dc:creator>
        <category>Articles</category>
        <category>.NET - CSharp</category><category>Microsoft</category><category>XNA</category>    
    <description>&lt;p&gt;XNA ne permet pas d'écrire directement du texte sur vos scènes. Il propose tout de même des classes pour faciliter tout ceci. Ce tutoriel vous explique comment cela fonctionne et les différentes façons d'y parvenir.&lt;br /&gt;
&lt;br /&gt;
Bonne lecture.&lt;br /&gt;&lt;/p&gt;    &lt;h2&gt;Ecrire avec XNA&amp;nbsp;: méthode &quot;fichier descripteur&quot;&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
Ecrire en XNA n'est rien de compliqué. Pour faire vos premiers pas, créez un nouveau projet (ou ouvrez un projet existant, si vous êtes sur de votre coup).&lt;br /&gt;
Dans l'explorateur de solutions, au niveau du &lt;strong&gt;Content&lt;/strong&gt; de votre projet, faites un clic droit et &lt;strong&gt;ajoutez un nouvel élément&lt;/strong&gt;. Choisissez le type &lt;strong&gt;Sprite Font&lt;/strong&gt;, renommez le à votre guise et validez. Pour cet exemple, j'ai nommé mon &lt;em&gt;Sprite Font&lt;/em&gt; &quot;testFont.spriteFont&quot;.&lt;br /&gt;
Dès lors, un fichier &lt;a href=&quot;http://fr.wikipedia.org/wiki/XML&quot; hreflang=&quot;fr&quot;&gt;XML&lt;/a&gt; s'ouvre à vous. Il s'agit d'un fichier descripteur de police de caractères (&lt;em&gt;Font&lt;/em&gt;).&lt;br /&gt;
&lt;br /&gt;
&lt;strong&gt;Explication&lt;/strong&gt;&amp;nbsp;: pour écrire du texte à l'écran, XNA peut piocher dans les polices de caractères installées sur votre PC (voir votre répertoire &lt;em&gt;Windows/Fonts/&lt;/em&gt;). XNA va alors convertir votre police en graphisme compatible avec lui-même et afficher le résultat à l'écran car il ne peut pas utiliser directement une police Windows (TrueType Font ou OpenFont). Tout ceci, XNA le fait sans que vous vous en rendiez compte.&lt;br /&gt;
&lt;br /&gt;
Le fichier &lt;em&gt;XML .spriteFont&lt;/em&gt; est là pour indiquer à XNA quelle police vous voulez utilisez, mais aussi la taille qu'elle devra avoir et son style (gras, italique, ...). Voici son contenu et à quoi correspondent les différents champs.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;xml&quot;&gt;&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;color: #808080; font-style: italic;&quot;&gt;&amp;lt;!--
Le nom de la police que vous souhaitez (Arial, Comics, Time New Roman...)
--&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;lt;FontName&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;testFont&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;lt;/FontName&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/pre&gt;

&lt;p&gt;Remarquez que la valeur par défaut est le nom que vous lui avez donné. Dans notre cas, testFont n'est évidement pas une police réelle. Changeons la, en &lt;em&gt;Arial&lt;/em&gt; par exemple.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;xml&quot;&gt;&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;lt;FontName&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;Arial&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;lt;/FontName&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/pre&gt;

&lt;p&gt;Voilà pour ce qui est du champ le plus important. Voyons les autres champs.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;xml&quot;&gt;&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;color: #808080; font-style: italic;&quot;&gt;&amp;lt;!--
La taille de votre police, comparable à celle dans un éditeur de texte.
--&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;lt;Size&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;14&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;lt;/Size&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&amp;nbsp;
&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;color: #808080; font-style: italic;&quot;&gt;&amp;lt;!--
L'espacement entre chaque lettre (en pixel). A laisser à zéro si vous souhaitez l'espacement par défaut de la police.
--&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;lt;Spacing&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;0&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;lt;/Spacing&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&amp;nbsp;
&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;color: #808080; font-style: italic;&quot;&gt;&amp;lt;!--
Défini si vous voulez utilier le crénage de la police ou non. Le crénage est la façon dont certains caractères se chevauchent légèrement (comme le W qui peut monter un peu sur le A).
Mettez à true si vous voulez que le crénage de la police soit utilisé. Mettez false dans les autres cas.
--&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;lt;UseKerning&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;true&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;lt;/UseKerning&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&amp;nbsp;
&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;color: #808080; font-style: italic;&quot;&gt;&amp;lt;!--
Le style de la police.
Pour un police normale, mettez &amp;quot;Regular&amp;quot;.
Pour du gras &amp;quot;Bold&amp;quot;, pour de l'italique &amp;quot;Italic&amp;quot;
Attention à respecter les majuscules.
--&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;lt;Style&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;Regular&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;lt;/Style&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/pre&gt;

&lt;p&gt;La dernière partie du XML sert à définir quel espace de la &lt;a href=&quot;http://fr.wikipedia.org/wiki/Ascii&quot; hreflang=&quot;fr&quot;&gt;table ASCII&lt;/a&gt; vous souhaitez couvrir. Par défaut, le fichier est configuré pour supporter les caractères d'indices 32 à 126, c'est à dire les caractères alphabétiques, numériques et les ponctuations, mais aucun accent. Pour supporter tous les caractères, il faut aller jusqu'au caractère d'indice 255 en modifiant l'XML comme suit.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;xml&quot;&gt;&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;lt;Start&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;color: #ddbb00;&quot;&gt;&amp;amp;#32;&lt;/span&gt;&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;lt;/Start&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;lt;End&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;color: #ddbb00;&quot;&gt;&amp;amp;#255;&lt;/span&gt;&lt;span style=&quot;color: #009900;&quot;&gt;&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;lt;/End&lt;span style=&quot;font-weight: bold; color: black;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/pre&gt;

&lt;p&gt;Notre police est fin prête à être utilisée.&lt;br /&gt;
Pour utiliser ce nouveau &lt;em&gt;Sprite Font&lt;/em&gt;, nous avons besoin de déclarer un objet de type de &lt;strong&gt;SpriteFont&lt;/strong&gt;. Pour l'exemple, on le déclarera en donnée membre, au côté du &lt;em&gt;SpriteBatch&lt;/em&gt; et du &lt;em&gt;GraphicsDeviceManager&lt;/em&gt;.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
SpriteFont font;&lt;/pre&gt;

&lt;p&gt;Ensuite, pour charger notre police via notre fichier descripteur, on utilise la méthode habituelle du &lt;em&gt;Content Pipeline&lt;/em&gt; (dans la méthode &lt;em&gt;LoadContent&lt;/em&gt;).&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;font &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; Content.&lt;span style=&quot;color: #0000FF;&quot;&gt;Load&lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt;&amp;lt;&lt;/span&gt;SpriteFont&lt;span style=&quot;color: #008000;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #808080;&quot;&gt;&amp;quot;testFont&amp;quot;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;/pre&gt;

&lt;p&gt;Il ne nous reste plus qu'à écrire avec notre police (dans la méthode &lt;em&gt;Draw&lt;/em&gt;). Ecrire avec XNA nécessite un SpriteBatch car notre police sera en interne une texture.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;spriteBatch.&lt;span style=&quot;color: #0000FF;&quot;&gt;Begin&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;
spriteBatch.&lt;span style=&quot;color: #0000FF;&quot;&gt;DrawString&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;font, &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// notre SpriteFont&lt;/span&gt;
    &lt;span style=&quot;color: #808080;&quot;&gt;&amp;quot;Hello world!&lt;span style=&quot;color: #008080; font-weight: bold;&quot;&gt;\n&lt;/span&gt;Wééé des accents!&amp;quot;&lt;/span&gt;, &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// le texte à afficher ( \n représente un saut de ligne)&lt;/span&gt;
    &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; Vector2&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;100&lt;/span&gt;, &lt;span style=&quot;color: #FF0000;&quot;&gt;100&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;, &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// la position en pixel où on souhaite afficher le texte&lt;/span&gt;
    Color.&lt;span style=&quot;color: #0000FF;&quot;&gt;Black&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;; &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// la couleur du texte&lt;/span&gt;
spriteBatch.&lt;span style=&quot;color: #0000FF;&quot;&gt;End&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;/pre&gt;

&lt;p&gt;&lt;img src=&quot;http://helmut.dev-blog.fr/public/tuto2/font.png&quot; alt=&quot;Résultat d&amp;#039;écriture&quot; style=&quot;display:block; margin:0 auto;&quot; /&gt;&lt;br /&gt;
&lt;br /&gt;
Vous pouvez créer autant de fichiers descripteurs que de polices nécessaires.&lt;br /&gt;
Il est aussi possible de télécharger des polices de caractères exotiques mais toutes ne sont pas compatibles.&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;La méthode&amp;nbsp;: &quot;Font Bitmap&quot;&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
Comme je vous l'ai expliqué, en interne, XNA transforme votre police en texture et en affiche le contenu. La méthode de cette partie consiste à &quot;sauter&quot; l'étape du fichier descripteur en donnant directement à XNA une texture. Une texture de police (ou &lt;em&gt;Font Bitmap&lt;/em&gt;) se présente comme ceci.&lt;br /&gt;
&lt;br /&gt;
&lt;img src=&quot;http://helmut.dev-blog.fr/public/tuto2/arial.png&quot; alt=&quot;Arial Font Bitmap&quot; style=&quot;display:block; margin:0 auto;&quot; /&gt;&lt;br /&gt;
&lt;br /&gt;
Règles de construction d'un &lt;strong&gt;Font Bitmap&lt;/strong&gt;&amp;nbsp;:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Les lettres doivent être disposées sur un fond magenta pur (#FF00FF).&lt;/li&gt;
&lt;li&gt;Il y doit avoir un espacement entre chaque caractère.&lt;/li&gt;
&lt;li&gt;La couleur noire sera considérée comme transparente à l'affichage.&lt;/li&gt;
&lt;li&gt;Il doit y avoir 16 caractères par ligne.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Une fois que vous avez votre image (vous pouvez prendre celle du dessus pour tester), vous pouvez l'ajouter à votre projet via le &lt;em&gt;Content Pipeline&lt;/em&gt; (clic droit/ ajouter élément existant sur &lt;em&gt;Content&lt;/em&gt;). Il y a juste une chose particulière à faire&amp;nbsp;: préciser à XNA qu'il s'agit d'une police et non du texture banale. Pour ce faire, sélectionné votre fichier image dans l'explorateur de solution et regardez ses propriétés. A la ligne &lt;strong&gt;Content Processor&lt;/strong&gt;, il faut mettre &lt;strong&gt;Sprite Font Texture&lt;/strong&gt;.&lt;br /&gt;
&lt;br /&gt;
&lt;img src=&quot;http://helmut.dev-blog.fr/public/tuto2/prop.png&quot; alt=&quot;Propriétés&quot; style=&quot;display:block; margin:0 auto;&quot; /&gt;&lt;br /&gt;
&lt;br /&gt;
Ensuite, on charge notre &lt;em&gt;SpriteFont&lt;/em&gt; exactement de la même manière sauf que l'on charge notre &lt;em&gt;Asset&lt;/em&gt; du &lt;em&gt;Font Bitmap&lt;/em&gt; au lieu du fichier descripteur.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;font &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; Content.&lt;span style=&quot;color: #0000FF;&quot;&gt;Load&lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt;&amp;lt;&lt;/span&gt;SpriteFont&lt;span style=&quot;color: #008000;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #808080;&quot;&gt;&amp;quot;arial&amp;quot;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;/pre&gt;

&lt;p&gt;Et voilà! Le résultat est le même que pour la première méthode vu que l'on a utilisé la police Arial dans les deux cas.&lt;br /&gt;
&lt;br /&gt;
Vous l'avez surement remarqué, il est très long et embêtant de créer soi même une police en Bitmap. Heureusement, les gars derrière XNA ont mis à notre disposition un outil permettant de pondre tout seul un Bitmap tout prêt à partir de n'importe quelle police installée sur son PC. Ce logiciel n'est pas fourni en standard avec XNA mais &lt;a href=&quot;http://creators.xna.com/Headlines/utilities/archive/2007/04/26/Bitmap-Font-Maker-Utility.aspx&quot; hreflang=&quot;en&quot;&gt;il est disponible sur le site officiel&lt;/a&gt; et à compiler soi même. Je vais épargner cette peine, je l'ai &lt;a href=&quot;http://helmut.dev-blog.fr/tuto2/ttf2bmp.7z&quot; hreflang=&quot;fr&quot;&gt;compilé pour vous&lt;/a&gt; (7zip nécessaire pour décompresser).&lt;br /&gt;
&lt;br /&gt;
&lt;strong&gt;Quels sont les avantages de cette méthode?&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Pouvoir utiliser n'importe quelle police.&lt;/li&gt;
&lt;li&gt;Créer sa propre police, ou table de symboles (si vous avez besoin d'icone dans vos textes par exemple).&lt;/li&gt;
&lt;li&gt;Mettre des effets sur une police en modifiant la texture (mettre du relief, des dégradés, etc).&lt;/li&gt;
&lt;li&gt;Ne pas s'encombrer avec des TTF ou autres lorsque l'on redistribue son code source.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;br /&gt;
Vous savez désormais tout ce qu'il y a à savoir à propos de l'affichage de texte avec XNA.&lt;/p&gt;</description>
    
    
    
          <comments>http://helmut.dev-blog.fr/post/2008/04/27/Afficher-du-texte-a-lecran-avec-XNA#comment-form</comments>
      <wfw:comment>http://helmut.dev-blog.fr/post/2008/04/27/Afficher-du-texte-a-lecran-avec-XNA#comment-form</wfw:comment>
      <wfw:commentRss>http://helmut.dev-blog.fr/feed/rss2/comments/8</wfw:commentRss>
      </item>
    
  <item>
    <title>Votre premier jeu avec XNA 2.0: Pong!</title>
    <link>http://helmut.dev-blog.fr/post/2008/04/22/Votre-premier-jeu-avec-XNA%3A-Pong</link>
    <guid isPermaLink="false">urn:md5:6192f512fd1f6a92fca60c4414efb6e6</guid>
    <pubDate>Fri, 25 Apr 2008 18:20:00 +0200</pubDate>
    <dc:creator>Helmut</dc:creator>
        <category>Articles</category>
        <category>.NET - CSharp</category><category>2D</category><category>Microsoft</category><category>Pong</category><category>Xbox 360</category><category>XNA</category>    
    <description>&lt;p&gt;Voici le premier tutoriel que je vous propose: faire votre propre Pong. C'est probablement le jeu le plus simple à programmer et cela a l'avantage de servir de bonne introduction au XNA.&lt;br /&gt;
Je vous propose donc un petit tour d'horizon du XNA, et plus particulièrement des bases du système de rendu 2D, car ce Pong sera en 2D. Vous aurez aussi un topo sur le &lt;em&gt;Content Pipeline&lt;/em&gt; et nous finirons avec l'ajout de sons à votre Pong en passant par un petit projet XACT.&lt;br /&gt;
Ce tutoriel se veut volontairement simpliste et perfectible, mais vous aurez des bases pour la suite. L'important est de vous familiariser avec XNA.&lt;br /&gt;
De bonnes bases en C# sont recommandées, je ne vais pas vous apprendre le C#. Si vous souhaitez apprendre à programmer en C#, je ne peux que vous orienter vers cette &lt;a href=&quot;http://helmut.dev-blog.fr/post/2008/04/21/XNA/C/NET-les-sites-et-livres-a-retenir&quot; hreflang=&quot;fr&quot;&gt;liste de liens et de livres&lt;/a&gt;.&lt;br /&gt;
&lt;br /&gt;
&lt;img src=&quot;http://helmut.dev-blog.fr/public/tuto1/pong.jpg&quot; alt=&quot;Pong screenshot&quot; style=&quot;display:block; margin:0 auto;&quot; /&gt;&lt;/p&gt;    &lt;h2&gt;Sommaire&lt;br /&gt;&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://helmut.dev-blog.fr/post/2008/04/22/#p1&quot; hreflang=&quot;fr&quot;&gt;Introduction&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://helmut.dev-blog.fr/post/2008/04/22/#p2&quot; hreflang=&quot;fr&quot;&gt;C'est parti&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://helmut.dev-blog.fr/post/2008/04/22/#p3&quot; hreflang=&quot;fr&quot;&gt;Importer vos images&amp;nbsp;: introduction au Content Pipeline&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://helmut.dev-blog.fr/post/2008/04/22/#p4&quot; hreflang=&quot;fr&quot;&gt;Affichons notre premier sprite&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://helmut.dev-blog.fr/post/2008/04/22/#p5&quot; hreflang=&quot;fr&quot;&gt;Afficher les barres et la balle&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://helmut.dev-blog.fr/post/2008/04/22/#p6&quot; hreflang=&quot;fr&quot;&gt;Gérer les commandes et bouger les barres&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://helmut.dev-blog.fr/post/2008/04/22/#p7&quot; hreflang=&quot;fr&quot;&gt;Faisons avancer cette balle&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://helmut.dev-blog.fr/post/2008/04/22/#p8&quot; hreflang=&quot;fr&quot;&gt;Gestion des collisions&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://helmut.dev-blog.fr/post/2008/04/22/#p9&quot; hreflang=&quot;fr&quot;&gt;Buts et score&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://helmut.dev-blog.fr/post/2008/04/22/#p10&quot; hreflang=&quot;fr&quot;&gt;Du son avec XACT&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://helmut.dev-blog.fr/post/2008/04/22/#p11&quot; hreflang=&quot;fr&quot;&gt;Terminé!&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Introduction&lt;a name=&quot;p1&quot;&gt;&lt;/a&gt;&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
Si vous avez suivi &lt;a href=&quot;http://helmut.dev-blog.fr/post/2008/04/19/Introduction-framework-XNA&quot; hreflang=&quot;fr&quot;&gt;mon introduction au XNA&lt;/a&gt; et installé les logiciels nécessaires, alors vous êtes prêt à démarrer.&lt;br /&gt;
Dans mes tutoriels, j'utiliserai Visual Studio 2005 Professional mais si vous avez une version C# Express, que ce soit le 2005 ou le 2008, les menus sont strictement identiques, vous ne devriez pas vous perdre.&lt;br /&gt;
&lt;br /&gt;
Allons-y, démarrer &lt;em&gt;XNA Game Studio 2.0&lt;/em&gt; (en tant qu'administrateur, si vous êtes sous Vista), et créez un nouveau projet via &lt;strong&gt;Fichier / Nouveau / Projet&lt;/strong&gt;. Dans les types de projets, vous aurez un dépliant &lt;strong&gt;Visual C#&lt;/strong&gt; qui contient une section &lt;strong&gt;XNA Game Studio 2.0&lt;/strong&gt;. Là, choisissez un projet de type &lt;strong&gt;Windows Game (2.0)&lt;/strong&gt; et dans le champ &lt;em&gt;Nom&lt;/em&gt;, mettez le nom de votre projet. Celui-ci n'a pas trop d'importance et peut être changé, mettez-y &quot;MonPong&quot; par exemple.&lt;br /&gt;
Vous pouvez également spécifier un emplacement d'enregistrement autre que celui par défaut.&lt;br /&gt;
&lt;br /&gt;
&lt;img src=&quot;http://helmut.dev-blog.fr/public/tuto1/newProject.png&quot; alt=&quot;Nouveau projet&quot; style=&quot;display:block; margin:0 auto;&quot; /&gt;
&lt;br /&gt;
Notre jeu va dont être destiné à la plate-forme Windows, bien qu'il devrait tourner sans problème sur Xbox 360. Pour faire un jeu sur Xbox 360, il faut faire un nouveau projet de type &lt;strong&gt;Xbox 360 Game (2.0)&lt;/strong&gt;, mais cela n'est pas vraiment nécessaire. Entre un jeu Windows et Xbox 360, le code est le même. Pourquoi deux types de projets différents alors? Simplement que dans l'un, Visual Studio exécutera votre code sur votre machine, et dans l'autre, Visual Studio cherchera à l'exécuter sur votre Xbox 360. En dehors de cette particularité, si vous avez codé votre jeu correctement, tout le reste est identique.&lt;br /&gt;
XNA propose une option pour convertir à la volée votre projet d'une plate-forme à l'autre via le menu &lt;strong&gt;Projet / Create a Copy for Xbox 360&lt;/strong&gt; et inversement.&lt;br /&gt;
En général, on ne test sur 360 que lorsque l'on a un prototype stable, si possible à chaques grandes étapes du développement. Ensuite on débug sur console avant de débuter la prochaine étape sur PC.&lt;br /&gt;
Lorsque l'on développe pour Windows, on peut utiliser toutes les librairies contenues dans .NET mais pour Xbox 360, on doit se limiter aux &lt;em&gt;classes&lt;/em&gt; et &lt;em&gt;méthodes&lt;/em&gt; compatibles avec le &lt;em&gt;.NET Compact Framework&lt;/em&gt; car la 360 embarque une version compact de la machine .NET 2. Pour savoir qu'elles classes sont &quot;Compact Compliant&quot;, visitez &lt;a href=&quot;http://msdn2.microsoft.com/fr-fr/library/ms229335(VS.80).aspx&quot; hreflang=&quot;fr&quot;&gt;la librairie MSDN du .NET 2&lt;/a&gt;. N'hésitez pas à en user et abuser, elle est très complète et peut vous épargner des heures de recherches ou de reflexion. Beaucoup trop de développeur débutant la néglige.&lt;br /&gt;
Dans l'aide, vous pourrez immédiatement identifier une classes ou méthodes compatibles avec l'icone &lt;img src=&quot;http://helmut.dev-blog.fr/public/tuto1/compact.gif&quot; alt=&quot;Compatible avec le Compact Framework&quot; /&gt;.&lt;br /&gt;
Autre astuce, dans votre Visual, à tout moment, si vous vous demandez comment fonctionne une classe qui est dans votre code, mettez le curseur sur son type (ou sur le nom d'une variable) et appuyez sur F1. L'aide MSDN sera automatiquement chargée à la page de classe concernée. Encore une fois, trop peu de personnes ont le réflexe d'appuyer sur F1.&lt;br /&gt;
F1 est une touche magique, peu importe ce que vous avez sélectionné dans Visual, notamment dans l'explorateur de propriété, la bonne aide apparaitra.&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;C'est parti&lt;a name=&quot;p2&quot;&gt;&lt;/a&gt;&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
Dans votre nouveau projet, ouvrez le fichier &lt;em&gt;Game1.cs&lt;/em&gt;, si il ne l'est pas par défaut.&lt;br /&gt;
Vous voici devant la classe principale de votre jeu. Elle dérive de la classe &lt;a href=&quot;http://msdn2.microsoft.com/en-us/library/microsoft.xna.framework.game.aspx&quot; hreflang=&quot;en&quot;&gt;Game&lt;/a&gt; qui se charge de tout le boulot concernant la boucle principale de votre jeu.&lt;br /&gt;
Pour ceux qui se sont déjà aventuré dans la programmation d'un jeu, vous n'aurez donc pas à faire de boucle principale. La classe Game vous propose de factoriser votre code en séparant la logique du graphisme.&lt;br /&gt;
&lt;br /&gt;
Voyons les méthodes que contient votre projet vide:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Initialize&lt;/strong&gt;&amp;nbsp;: ceux qui ont fait un peu du C# ne devrait pas être dépaysé. C'est dans cette méthode que l'on fait nos initialisation de base, si nécessaire. Elle est appelée toute seule après la création de l'instance du jeu.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;LoadContent&lt;/strong&gt;&amp;nbsp;: cette méthode nous propose de charger nos contenus (graphismes, sons ou autres) ici. Elle est idéale pour de petits projets, mais pour des plus gros, on ne fera pas souvent attention à celle-ci et on aura notre propre gestionnaire de contenus. Elle est appelée toute seule au chargement de votre jeu.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;UnloadContent&lt;/strong&gt;&amp;nbsp;: l'inverse de LoadContent. Elle est destinée à la dé-allocation des ressources. Cette méthode ne sert que si l'on créé plusieurs instances de la classe Game pour un même jeu, ce qui n'arrive quasiment pas. Bien souvent on n'utilisera pas du tout cette méthode et on aura aussi notre propre système de dé-allocation.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Update&lt;/strong&gt;&amp;nbsp;: cette méthode est appelée en boucle et est faite pour que vous gérez la logique de votre jeu à l'intérieur (interactions, déplacements, événements, gestion du pad,...). Par défaut, Update contient un code qui permet de quitter l'application en appuyant sur le bouton Back du pad 360.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Draw&lt;/strong&gt;&amp;nbsp;: également appelée en boucle, juste après Update, cette méthode est prévue pour que vous y fassiez votre travail graphique (2D/3D).&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;br /&gt;
Par défaut, vous avez aussi deux membres d'initialisés:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;graphics&lt;/strong&gt;&amp;nbsp;: instance d'un &lt;a href=&quot;http://msdn2.microsoft.com/en-us/library/microsoft.xna.framework.graphicsdevicemanager.aspx&quot; hreflang=&quot;en&quot;&gt;GraphicsDeviceManager&lt;/a&gt;. Si vous regardez, il est initialisé dans le constructeur. C'est cet objet qui permet de configurer le contexte graphique (résolution d'écran, etc). Il permet aussi d'avoir des infos sur la configuration actuelle et votre matériel.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;spriteBatch&lt;/strong&gt;&amp;nbsp;: instance de &lt;a href=&quot;http://msdn2.microsoft.com/en-us/library/microsoft.xna.framework.graphics.spritebatch.aspx&quot; hreflang=&quot;en&quot;&gt;SpriteBatch&lt;/a&gt;. Un outil qui vous permet de faire de la 2D &lt;em&gt;en deux temps trois mouvements&lt;/em&gt;. Vous verrez que comparé à d'autres API 2D, le gros du travail est pré-mâché. Cet objet est facultatif, mais vous en aurez besoin dans ce tutoriel.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Importer vos images&amp;nbsp;: introduction au Content Pipeline&lt;a name=&quot;p3&quot;&gt;&lt;/a&gt;&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
Commencez par télécharger ce &lt;a href=&quot;http://helmut.dev-blog.fr/upload/tuto1/pong_textures.7z&quot; hreflang=&quot;fr&quot;&gt;pack d'images faites maison&lt;/a&gt; (vous aurez besoin de &lt;a href=&quot;http://www.7-zip.org/fr/&quot; hreflang=&quot;fr&quot;&gt;7zip&lt;/a&gt; pour les décompresser).&lt;br /&gt;
Décompressez l'archive n'importe où.&lt;br /&gt;
&lt;br /&gt;
Pour ajouter du contenu à vos projets, regardez votre &lt;strong&gt;Explorateur de solutions&lt;/strong&gt;. Dedans, vous verrez une ligne &lt;strong&gt;Content&lt;/strong&gt;, c'est ici que viendra se glisser tout votre contenu. Ajoutons nos textures. Pour cela, je vous propose de vous organiser et de créer un dossier spécial. Faites un clic droit sur &lt;strong&gt;Content&lt;/strong&gt;, &lt;strong&gt;Ajouter / Nouveau dossier&lt;/strong&gt; (ou Add / New folder, si votre Visual est en anglais). Nommé se dossier à votre guise, je le nommerai &quot;textures&quot; pour ce tutoriel. On peut maintenant ajouter nos images. Cliquez sur votre nouveau dossier textures, puis faites clic droit &lt;strong&gt;Ajouter / Element existant&lt;/strong&gt; et allez chercher les images décompressées précédemment. Une fois les trois images importer, celles-ci sont disponibles pour jeu. Vous pouvez, si vous le souhaitez, effacer le dossier où vous les avez décompressé, il ne sert plus à rien et vos images ont été copiées dans votre projet.&lt;br /&gt;
&lt;br /&gt;
Tout les fichiers que vous ajoutez au dossier &lt;strong&gt;Content&lt;/strong&gt; passerons automatiquement par le &lt;strong&gt;Content Pipeline&lt;/strong&gt;.&lt;br /&gt;
&lt;br /&gt;
Voici le résultat escompté dans votre explorateur de solutions.&lt;br /&gt;
&lt;br /&gt;
&lt;img src=&quot;http://helmut.dev-blog.fr/public/tuto1/solution.gif&quot; alt=&quot;Explorateur de solutions&quot; style=&quot;display:block; margin:0 auto;&quot; /&gt;
&lt;br /&gt;
Regardons vos textures de plus près. Sélectionnez une des textures, peut importe laquelle, et observez ce qui se trouve dans l'&lt;strong&gt;Explorateur de propriétés&lt;/strong&gt;. Le moment est venu d'en apprendre un peu plus sur le &lt;em&gt;Content Pipeline&lt;/em&gt;.&lt;br /&gt;
Le &lt;em&gt;Content Pipeline&lt;/em&gt; est un système qui est propre au XNA. Avec d'autres API ou Framework graphique, pour importer du contenu, textures, modèles 3D ou autres, vous auriez du programmer votre importateur, notamment pour les modèles. Le &lt;em&gt;Content Pipeline&lt;/em&gt; fait tout ça pour vous, et bien plus. Il va également compiler vos fichiers dans un format spécial (.xnb) qui sera apte à être lu sur Xbox 360 et qui réduit les temps de chargement. Il fait également automatiquement le lien entre les modèles, leurs textures et leurs shaders. Vous n'aurez donc pas à coder tout un lot d'importateur et de visualisateur.&lt;br /&gt;
Revers de la médaille, le &lt;em&gt;Content Pipeline&lt;/em&gt; a un nombre de formats supportés réduit.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Formats de textures&lt;/strong&gt;&amp;nbsp;: .bmp, .dds, .dib, .hdr, .jpg, .pfm, .png, .ppm, et .tga, rien de bien particulier. Le XNA gère automatiquement les formats, que ce soit du 8 ou 32bit, avec ou sans canal alpha.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Fichiers sonores&lt;/strong&gt;&amp;nbsp;: uniquement des fichiers .xap, qui sont des projets XACT. XACT est seule et unique manière d'importer des sons avec XNA, ne verrons cela plus tard.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Modèles 3D&lt;/strong&gt;&amp;nbsp;: .x et .fbx, qui sont respectivement les formats de DirectX et d'AutoCAD.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Shaders&lt;/strong&gt;&amp;nbsp;: des shaders compilés, .fx, qui sont les formats de shaders de DirectX.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;XML&lt;/strong&gt;&amp;nbsp;: tout document XML peut être importé.&lt;br /&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Il y a donc largement de quoi faire avec ces formats. Seul le format .x de modèles pour s'avérer contraignant, puisqu'il ne gère pas les animations et n'enregistre pas les tangentes (vous n'avez pas besoin de savoir ce dont il s'agit, juste que c'est embêtant :p).&lt;br /&gt;
Heureusement, XNA permet de programmer nos propres importateurs.&lt;br /&gt;
&lt;br /&gt;
Revenons à nos moutons et à notre &lt;strong&gt;Explorateur de propriétés&lt;/strong&gt;.&lt;br /&gt;
&lt;br /&gt;
&lt;img src=&quot;http://helmut.dev-blog.fr/public/tuto1/proprietes.gif&quot; alt=&quot;Propriétés&quot; style=&quot;display:block; margin:0 auto;&quot; /&gt;
&lt;br /&gt;
Vous pouvez donc voir que XNA a automatiquement importé nos images avec l'importateur de textures. Déroulez la section &lt;strong&gt;Content Processor&lt;/strong&gt; et tout en bas, vous pouvez voir la propriété &lt;em&gt;Texture format&lt;/em&gt;. Il s'agit de la compression qui sera utilisée par votre carte graphique pour stocker cette texture dans sa mémoire. Lorsque cette propriété est à &quot;No change&quot;, la texture sera dépourvu de toute compression, ce qui sera à peu près équivalent à la taille d'un bmp et ce peu importe que le fichier d'origine soit un jpg ou png ou autre plus petit. Heureusement, les cartes graphiques proposent des compressions matérielles, comme le DXT que vous pouvez choisir dans cette propriété. Le DXT garanti un taux de compression constant de 75% au détriment d'une très légère perte de qualité, qui ne se vera de toute façon pas si vous utilisez des images déjà compressées. En général, on vous recommande d'utiliser une compression DXT si vos textures sont destinées à des modèles 3D mais on ne vous le recommande pas si vous voulez afficher des sprites ou autres éléments 2D, afin de garantir leur finesse. Libre à vous donc de mettre DXT ou non pour ce tutoriel. J'emploierai le DXT pour mes trois textures, pour la simple raison que les images d'origines n'ont déjà pas une super qualité, autant économiser la mémoire de la carte graphique.&lt;br /&gt;
Toujours dans l'explorateur de propriétés d'une de vos textures, voyez la propriété &lt;strong&gt;Asset name&lt;/strong&gt;. C'est le nom interne de votre texture. Vous devrez utiliser ce nom pour faire appel à celle-ci dans votre code. XNA donne un nom par défaut à vos contenus suivant leur nom de fichier, tronqué de leur extension. Si deux fichiers ont le même nom, XNA rajoute un chiffre à la suite. Vous pouvez changer ces noms à votre guise, mais pour garder un minimum de clarté, je vous recommande de les laisser tels quels.&lt;br /&gt;
&lt;br /&gt;
Votre contenu est pret!&lt;br /&gt;
Une dernière précision autour du &lt;strong&gt;Content Pipeline&lt;/strong&gt;. Sur une plate-forme Windows, vous n'êtes pas du tout obligé d'utiliser celui-ci, vous pouvez parfaitement charger vos fichiers &quot;à l'ancienne&quot;, via les classes de .NET le permettant ou en écrivant vos propres importateurs qui font directement appel à votre arborescence de fichiers.&lt;br /&gt;
Sur 360, il est tout simplement interdit de charger un fichier sans passer par le Content Pipeline (auquel cas votre jeu plantera minablement). Donc de façon générale, si vous avez l'intention de faire un jeu cross-plateforme, n'utilisez que le &lt;em&gt;Content Pipeline&lt;/em&gt;.&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Affichons notre premier sprite&lt;a name=&quot;p4&quot;&gt;&lt;/a&gt;&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
A ce stade, si vous lancer votre jeu (la petite flèche verte, ou plus simplement la touche F5), vous serez devant un fond bleu. Pour quitter, vous devrez cliquer la croix de la fenêtre, ou appuyer sur le bouton &lt;em&gt;Back&lt;/em&gt; de votre pad 360, pour le peu que vous en possédiez un et qu'il soit branché.&lt;br /&gt;
Histoire d'être un peu plus productif, nous allons ajouter à ce comportement de pouvoir fermer notre jeu avec la touche &lt;em&gt;Echap&lt;/em&gt; de votre clavier.&lt;br /&gt;
Pour ce faire, rendez-vous dans la méthode &lt;em&gt;Update&lt;/em&gt;, vous y verrez le code qui vérifie l'appui du bouton &lt;em&gt;Back&lt;/em&gt;. Modifions le comme suit.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// on récupère l'état du clavier&lt;/span&gt;
KeyboardState keyboard &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; Keyboard.&lt;span style=&quot;color: #0000FF;&quot;&gt;GetState&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;
&amp;nbsp;
&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// Allows the game to exit&lt;/span&gt;
&lt;span style=&quot;color: #0600FF;&quot;&gt;if&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;GamePad.&lt;span style=&quot;color: #0000FF;&quot;&gt;GetState&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;PlayerIndex.&lt;span style=&quot;color: #0000FF;&quot;&gt;One&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;Buttons&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;Back&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;==&lt;/span&gt; ButtonState.&lt;span style=&quot;color: #0000FF;&quot;&gt;Pressed&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;||&lt;/span&gt; keyboard.&lt;span style=&quot;color: #0000FF;&quot;&gt;IsKeyDown&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;Keys.&lt;span style=&quot;color: #0000FF;&quot;&gt;Escape&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;
    &lt;span style=&quot;color: #0600FF;&quot;&gt;this&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;Exit&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;/pre&gt;

&lt;p&gt;Pour pouvoir gérer le clavier, on créé une instance de la classe &lt;em&gt;KeyboardSate&lt;/em&gt; qui représente un état du clavier (quelles touches sont enfoncées etc). Puis on fait appel à la méthode static &lt;em&gt;GetState&lt;/em&gt; de la classe &lt;em&gt;Keyboard&lt;/em&gt; pour récupérer l'état actuel du clavier. Ensuite, la méthode &lt;em&gt;IsKeyDown&lt;/em&gt; renvoi true si la touche passé en paramètre est enfoncée.&lt;br /&gt;
&lt;br /&gt;
Chargeons maintenant nos textures. Déclarons tout d'abord nos textures, en dehors de toutes méthodes, juste après le SpriteBatch par exemple.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// pour nos textures&lt;/span&gt;
Texture2D fond, barres, balle;
Rectangle barreBleue &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; Rectangle&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;, &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;, &lt;span style=&quot;color: #FF0000;&quot;&gt;32&lt;/span&gt;, &lt;span style=&quot;color: #FF0000;&quot;&gt;128&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;,
    barreRouge &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; Rectangle&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;32&lt;/span&gt;, &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;, &lt;span style=&quot;color: #FF0000;&quot;&gt;32&lt;/span&gt;, &lt;span style=&quot;color: #FF0000;&quot;&gt;128&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;/pre&gt;

&lt;p&gt;Nous avons donc trois &lt;em&gt;Texture2D&lt;/em&gt;. Vous remarquerez que dans le fichier bars.png, j'ai mis deux barres dans une seule texture. Il va donc falloir les dissocier. Pour cela, nous déclarons deux &lt;em&gt;Rectangle&lt;/em&gt; qui serviront à délimiter notre texture. Nous avons une texture qui fait 64x128 pixels et chaque barre à une taille de 32x128 pixels, chaque &lt;em&gt;Rectangle&lt;/em&gt; couvre donc une barre.&lt;br /&gt;
Il y a une chose importante à savoir concernant les API graphique. Dans votre tête, lorsque vous vous représenté un repère graphique, l'origine de ce repère est probablement en bas à gauche, comme en maths, or, dans les API graphique, dont XNA, l'origine du repère est en haut à gauche et l'axe Y est inversé (positif vers le bas donc), comme ci-dessous.&lt;br /&gt;
&lt;br /&gt;
&lt;img src=&quot;http://helmut.dev-blog.fr/public/tuto1/ecran.gif&quot; alt=&quot;Repère d&amp;#039;un API graphique&quot; style=&quot;display:block; margin:0 auto;&quot; /&gt;
Nous allons maintenant charger nos textures. Dans la méthode &lt;em&gt;LoadContent&lt;/em&gt;, ajoutez-y le code suivant.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;fond &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; Content.&lt;span style=&quot;color: #0000FF;&quot;&gt;Load&lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt;&amp;lt;&lt;/span&gt;Texture2D&lt;span style=&quot;color: #008000;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #808080;&quot;&gt;&amp;quot;Textures/fond_herbe&amp;quot;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;
barres &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; Content.&lt;span style=&quot;color: #0000FF;&quot;&gt;Load&lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt;&amp;lt;&lt;/span&gt;Texture2D&lt;span style=&quot;color: #008000;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #808080;&quot;&gt;&amp;quot;Textures/bars&amp;quot;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;
balle &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; Content.&lt;span style=&quot;color: #0000FF;&quot;&gt;Load&lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt;&amp;lt;&lt;/span&gt;Texture2D&lt;span style=&quot;color: #008000;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #808080;&quot;&gt;&amp;quot;Textures/balle&amp;quot;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;/pre&gt;

&lt;p&gt;Ceci est la méthode pour charger du contenu provenant du &lt;em&gt;Content Pipeline&lt;/em&gt;. Pour charger un contenu, il faut utiliser la méthode statci &lt;em&gt;Load&lt;/em&gt; de la classe &lt;em&gt;Content&lt;/em&gt;. Cette méthode est une méthode générique qui doit prendre le type que vous cherchez à charger, &lt;em&gt;Texture2D&lt;/em&gt; dans notre cas. La méthode prend ensuite en paramètre le chemin vers le contenu à charger. Attention, pour les noms de contenus, il s'agit de leur &quot;Asset Name&quot; et non des vrais nom de fichiers.&lt;br /&gt;
Vos textures sont maintenant prêtes à être affiché.&lt;br /&gt;
&lt;br /&gt;
Petit détail concernant les textures qui vous utiliserez dans vos projets. Faites en sorte que les dimensions de vos textures soient toujours des puissances de 2 (2, 4, 8, 16, 32, 64,...). Ceci pour la simple raison que les cartes graphiques sont optimisées pour fonctionner avec des puissances de 2. Pire que cela, si vous n'utilisez pas de puissances de 2, les performances de vos jeux seront totalement exécrables suivant les cartes graphiques. Ceci n'est valable que pour les textures. Si vous avez plusieurs sprites dans une seule texture, ils peuvent avoir n'importe quelle taille, pourvu que la texture qui les contient ai les bonnes dimensions.&lt;br /&gt;
&lt;br /&gt;
Trêve de commentaires, affichons le fond de notre pong. Pour cela, dans la méthode &lt;em&gt;Draw&lt;/em&gt;, ajoutons ceci (avant &lt;em&gt;base.Draw&lt;/em&gt;, qui doit être appelé en dernier, tout comme &lt;em&gt;base.Update&lt;/em&gt; dans &lt;em&gt;Update&lt;/em&gt;).&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;spriteBatch.&lt;span style=&quot;color: #0000FF;&quot;&gt;Begin&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;; &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// indique que nous commençons à dessiner&lt;/span&gt;
&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// on dessine notre fond&lt;/span&gt;
spriteBatch.&lt;span style=&quot;color: #0000FF;&quot;&gt;Draw&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;fond, &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// la texture à utiliser&lt;/span&gt;
    &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; Rectangle&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;, &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;, screenWidth, screenHeight&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;, &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// le rectangle qui va dire sur quelle partie de l'écran afficher notre texture&lt;/span&gt;
    Color.&lt;span style=&quot;color: #0000FF;&quot;&gt;White&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;; &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// la composante de notre texture, à laisser à blanc pour avoir les couleurs originales&lt;/span&gt;
spriteBatch.&lt;span style=&quot;color: #0000FF;&quot;&gt;End&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;; &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// on a fini de dessiner, on dit à la carte graphique d'afficher le résultat&lt;/span&gt;&lt;/pre&gt;

&lt;p&gt;On utilise donc le SpriteBatch qui a été créé par défaut avec notre projet. SpriteBatch est une classe outil qui permet d'afficher des groupes de sprites avec les mêmes paramètres très rapidement.&lt;br /&gt;
Les initiés aux API 3D remarqueront surement la présence des &lt;em&gt;Begin&lt;/em&gt; et &lt;em&gt;End&lt;/em&gt;. Pour la petite histoire, SpriteBatch ne fait pas de la &quot;vrai 2D&quot;. Il s'agit en fait de véritable 3D, mais plaquée contre l'écran. C'est strictement pareil que si l'on avait aplati la matrice de projection dans un API 3D, c'est d'ailleurs la méthode que l'on utilise pour faire de la 2D avec un API 3D. La méthode &lt;em&gt;Draw&lt;/em&gt; n'affiche donc pas des sprites approprement parlé, mais des quads texturés. Car en XNA, tout n'est que 3D, via une sur couche à DirectX. Fin de l'aparté.&lt;br /&gt;
Pour dessiner notre fond, il faut donc lui dire sur quelle partie de l'écran l'afficher. En l'occurrence, sur tout l'écran. On spécifie donc un Rectangle qui part de l'origine et qui va jusqu'au bout des dimensions de l'écran.&lt;br /&gt;
Pour récupérer les dimensions de l'écran, on utilise l'instance de la classe &lt;em&gt;GraphicsDeviceManager&lt;/em&gt;. Dans mon cas, j'ai stocké ces valeurs dans les variables &lt;em&gt;screenWidth&lt;/em&gt; et &lt;em&gt;screenHeight&lt;/em&gt; (respectivement la largeur et la hauteur). Ces deux variables sont des &lt;em&gt;int&lt;/em&gt; que j'ai déclaré en tant que membres après mes &lt;em&gt;Texture2D&lt;/em&gt;.&lt;br /&gt;
Pour récuperer ces valeurs, j'ai ajouté ce bout de code dans la méthode &lt;em&gt;Initialise&lt;/em&gt;.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;screenWidth &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; graphics.&lt;span style=&quot;color: #0000FF;&quot;&gt;GraphicsDevice&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;Viewport&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;Width&lt;/span&gt;;
screenHeight &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; graphics.&lt;span style=&quot;color: #0000FF;&quot;&gt;GraphicsDevice&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;Viewport&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;Height&lt;/span&gt;;&lt;/pre&gt;

&lt;p&gt;Maintenant, il ne vous reste plus qu'à appuyer sur F5 pour admirer le résultat.&lt;br /&gt;
Félicitations, vous avez affiché votre première texture.&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Afficher les barres et la balle&lt;a name=&quot;p5&quot;&gt;&lt;/a&gt;&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
Tout d'abord, il va nous falloir des variables pour gérer la position des barres et de la balle. Déclarons les en tant que données membres.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt; barreBleuePosition, &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// la position de la barre bleue sur l'axe Y&lt;/span&gt;
    barreRougePosition, &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// idem pour la rouge&lt;/span&gt;
    bleueX, &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// position sur X de la barre bleue, qui sera fixe&lt;/span&gt;
    rougeX; &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// idem&lt;/span&gt;
Vector2 ballePosition; &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// la position sur X et Y de la balle, via un vecteur&lt;/span&gt;&lt;/pre&gt;

&lt;p&gt;Dans Pong, les barres ne bougent que sur un seul axe, Y. Inutile donc de se préoccuper de l'axe X pour les barres, mais nous avons tout de même besoin de variables pour stocker leur position sur X, histoire d'avoir un code qui s'adapte à n'importe qu'elle résolution d'écran. Pour la balle, on utilise un &lt;em&gt;Vector2&lt;/em&gt;, qui est un vecteur possédant 2 composantes, X et Y, idéale donc pour des positions 2D, d'autant plus que l'on peut faire facilement des opérations sur des &lt;em&gt;Vector2&lt;/em&gt; (addition, multiplication, etc par des composantes).&lt;br /&gt;
&lt;br /&gt;
Afin que notre jeu s'adapte à toutes les résolutions, nous avons encore besoins de deux variables, le rapport sur la longueur et le rapport sur la hauteur. Imaginez que votre jeu est élaboré pour une résolution native de 1024x768. Que va-t-il se passer si on essai la résolution 1280x720? L'image sera généralement tronqué et la logique de votre jeu complètement chamboulée.&lt;br /&gt;
Pour remédier à cela, on se débrouille dès le début pour notre code soit indépendant de la résolution. Dans notre cas, nous prenons donc une résolution de base, disons 1024x768, dont nous nous servirons pour calculer un rapport de grossissement ou de rétrécissement suivant la résolution réellement appliquée.&lt;br /&gt;
Déclarons donc ceci à la suite.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;float&lt;/span&gt; rapportWidth, rapportHeight;&lt;/pre&gt;

&lt;p&gt;Et initalisons ce beau monde dans la méthode &lt;em&gt;Initialise&lt;/em&gt;.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;rapportWidth &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; screenWidth &lt;span style=&quot;color: #008000;&quot;&gt;/&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;1024&lt;/span&gt;.0f;
rapportHeight &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; screenHeight &lt;span style=&quot;color: #008000;&quot;&gt;/&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;screenHeight &lt;span style=&quot;color: #008000;&quot;&gt;/&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;float&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;screenWidth &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;1024&lt;/span&gt;.0f&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;/pre&gt;

&lt;p&gt;Vous remarquerez que le rapport de hauteur est calculé par rapport au ratio de l'écran. Ce, afin que notre jeu s'adapte tout seul au 16/9 ou au 4/3 ou tout autre ratio.&lt;br /&gt;
&lt;br /&gt;
Nous pouvons maintenant initialiser la position de nos objets, toujours à la suite dans la méthode &lt;em&gt;Initialise&lt;/em&gt;.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;barreBleuePosition &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;screenHeight &lt;span style=&quot;color: #008000;&quot;&gt;/&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;2&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;-&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;barreBleue.&lt;span style=&quot;color: #0000FF;&quot;&gt;Height&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;/&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;2&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportHeight&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;
barreRougePosition &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; barreBleuePosition;
&amp;nbsp;
bleueX &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;screenWidth &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;0.05&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;-&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;barreBleue.&lt;span style=&quot;color: #0000FF;&quot;&gt;Width&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;/&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;2&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportWidth&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;
rougeX &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;screenWidth &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;0.95&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;-&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;barreRouge.&lt;span style=&quot;color: #0000FF;&quot;&gt;Width&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;/&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;2&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportWidth&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;
&amp;nbsp;
ballePosition.&lt;span style=&quot;color: #0000FF;&quot;&gt;X&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;screenWidth &lt;span style=&quot;color: #008000;&quot;&gt;/&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;2&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;-&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;32&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;/&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;2&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportWidth;
ballePosition.&lt;span style=&quot;color: #0000FF;&quot;&gt;Y&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;screenHeight &lt;span style=&quot;color: #008000;&quot;&gt;/&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;2&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;-&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;32&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;/&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;2&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportHeight;&lt;/pre&gt;

&lt;p&gt;Pour la position initiale des barres, on les affiches au milieu de l'écran. Il faut juste prendre soin de les décaler de la moitié de la hauteur du sprite, sinon il ne seront pas complètement au milieu.&lt;br /&gt;
Pour la position de chaque barre sur X, on position la première à 5% du bord gauche de l'écran, et la seconde à 5% du bord droit (donc 95% du gauche). On suit la même réflexion par rapport à la largeur du sprite pour qu'elles soient centrées.&lt;br /&gt;
Enfin, on dispose la balle en plein centre de l'écran, toujours par rapport à sa largeur/hauteur.&lt;br /&gt;
Notez que l'on prend scrupuleusement en compte les rapports de la hauteur et largeur de la résolution. Ceci aura pour effet de grossir ou rétrécir les sprites pour les adapter à la résolution.&lt;br /&gt;
&lt;br /&gt;
On est maintenant prêt à afficher tout ceci.&lt;br /&gt;
Direction la méthode &lt;em&gt;Draw&lt;/em&gt;, à la suite de l'affichage du fond.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// on commence à dessiner, cette fois avec des modes spéciaux&lt;/span&gt;
spriteBatch.&lt;span style=&quot;color: #0000FF;&quot;&gt;Begin&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;SpriteBlendMode.&lt;span style=&quot;color: #0000FF;&quot;&gt;AlphaBlend&lt;/span&gt;, &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// on gère la transparence&lt;/span&gt;
    SpriteSortMode.&lt;span style=&quot;color: #0000FF;&quot;&gt;BackToFront&lt;/span&gt;, &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// on dessine de l'arrière vers l'avant de l'écran&lt;/span&gt;
    SaveStateMode.&lt;span style=&quot;color: #0000FF;&quot;&gt;None&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;; &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// mettre à none, ceci ne servira pas dans notre exemple&lt;/span&gt;
&amp;nbsp;
&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// on dessine la barre bleue&lt;/span&gt;
spriteBatch.&lt;span style=&quot;color: #0000FF;&quot;&gt;Draw&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;barres, &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// la texture à utiliser&lt;/span&gt;
    &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; Rectangle&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;bleueX, &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// la position sur X de la barre, fixe&lt;/span&gt;
        barreBleuePosition, &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// la position du Y&lt;/span&gt;
        &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;barreBleue.&lt;span style=&quot;color: #0000FF;&quot;&gt;Width&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportWidth&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;, &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// sa largeur, en tenant compte du rapport de la résolution&lt;/span&gt;
        &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;barreBleue.&lt;span style=&quot;color: #0000FF;&quot;&gt;Height&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportHeight&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;, &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// idem pour sa hauteur&lt;/span&gt;
    barreBleue, &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// le Rectangle qui délimite la barre bleue dans la texture des barres&lt;/span&gt;
    Color.&lt;span style=&quot;color: #0000FF;&quot;&gt;White&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;; &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// la composante, par défaut&lt;/span&gt;
&amp;nbsp;
&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// même reflexion pour la barre rouge&lt;/span&gt;
spriteBatch.&lt;span style=&quot;color: #0000FF;&quot;&gt;Draw&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;barres, &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; Rectangle&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;rougeX, barreRougePosition, &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;barreRouge.&lt;span style=&quot;color: #0000FF;&quot;&gt;Width&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportWidth&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;, &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;barreRouge.&lt;span style=&quot;color: #0000FF;&quot;&gt;Height&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportHeight&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;, barreRouge, Color.&lt;span style=&quot;color: #0000FF;&quot;&gt;White&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;
&amp;nbsp;
&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// ainsi que pour la balle, à la différence que l'on utilise son Vector2&lt;/span&gt;
spriteBatch.&lt;span style=&quot;color: #0000FF;&quot;&gt;Draw&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;balle, &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; Rectangle&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;ballePosition.&lt;span style=&quot;color: #0000FF;&quot;&gt;X&lt;/span&gt;, &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;ballePosition.&lt;span style=&quot;color: #0000FF;&quot;&gt;Y&lt;/span&gt;, &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;balle.&lt;span style=&quot;color: #0000FF;&quot;&gt;Width&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportWidth&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;, &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;balle.&lt;span style=&quot;color: #0000FF;&quot;&gt;Height&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportHeight&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;, &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; Rectangle&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;, &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;, balle.&lt;span style=&quot;color: #0000FF;&quot;&gt;Width&lt;/span&gt;, balle.&lt;span style=&quot;color: #0000FF;&quot;&gt;Height&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;, Color.&lt;span style=&quot;color: #0000FF;&quot;&gt;White&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;
&amp;nbsp;
&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// on a fini, la carte graphique peut tout dessiner&lt;/span&gt;
spriteBatch.&lt;span style=&quot;color: #0000FF;&quot;&gt;End&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;/pre&gt;

&lt;p&gt;Les barres et la balles sont donc dessinés à leur position initiale, et avec les bonnes proportions.&lt;br /&gt;
Vous remarquerez que l'on a dessiné les trois sprites en même temps entre les &lt;em&gt;Begin&lt;/em&gt; et &lt;em&gt;End&lt;/em&gt;. Lorsque l'on fait cela, tout ce qui est dessiner est soumis aux mêmes propriétés définies dans le &lt;em&gt;Begin&lt;/em&gt;. En l'occurrence, gestion de la transparence etc.&lt;br /&gt;
Autre point très important à noter, on aurait pu encadrer chaque dessin par &lt;em&gt;Begin&lt;/em&gt; et &lt;em&gt;End&lt;/em&gt;, mais cela est beaucoup plus lourd pour la carte graphique. En effet, il vaut mieux dire à la carte graphique de tout dessiner d'un coup que de dessiner morceaux après morceaux.&lt;br /&gt;
On aurait aussi pu dessiner le fond en même temps que les sprites, mais suivant les cas, il n'est pas certifié que le fond soit dessiner en dessous ou au dessus des sprites. Il est donc préférable de forcer le fond à être dessiner en premier, pour de dessiner les sprites par au dessus.&lt;br /&gt;
Règles générales, regroupez au maximum les dessins entre des &lt;em&gt;Begin&lt;/em&gt; et &lt;em&gt;End&lt;/em&gt;, et dessinez toujours en premier ce qui est le plus au fond de votre scène. Ce que vous dessinez écrase toujours ce qui est derrière.&lt;br /&gt;
&lt;br /&gt;
F5 et apprécions le résultat.&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Gérer les commandes et bouger les barres&lt;a name=&quot;p6&quot;&gt;&lt;/a&gt;&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
La méthode &lt;em&gt;Update&lt;/em&gt; est appelée à chaque image rendue. Suivant la complexité de votre jeu, il se peut que votre jeu tourne à 30 images par seconde (fps), comme à 60, 200 ou 10. Ces fps ne sont pas forcément fixes et peuvent varier au cours du jeu. La méthode &lt;em&gt;Update&lt;/em&gt; n'est donc peut être pas appelée à intervalles réguliers.&lt;br /&gt;
Imaginons que votre jeu tourne à 60fps et que vous avez choisi que le déplacement de votre barre se fasse à hauteur de 100 pixels par seconde. On imagine alors que Update est appelée toutes les 16,66 millisecondes (1000/60) et donc, dans la méthode &lt;em&gt;Update&lt;/em&gt;, vous ferez un déplacement de 1,66 pixels pour vos 100 par seconde.&lt;br /&gt;
Or, si maintenant, pour une raison quelconque, votre jeu se met à ralentir à 40fps, voir à accélérer à 100fps, il y aura donc plus ou moins d'appel à &lt;em&gt;Update&lt;/em&gt; et votre déplacement se vera complètement ralenti ou accéléré.&lt;br /&gt;
Pour palier à ce problème, il y a deux solutions:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Forcer votre jeu à tourner à 60fps au maximum.&lt;/li&gt;
&lt;li&gt;Faire vos calculs de déplacement en fonction du temps écoulé entre deux appels à &lt;em&gt;Update&lt;/em&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Ici, libre à vous de préférer une solution ou une autre. Par défaut, XNA bloque les fps à 60. Mais cela n'empêche pas à votre jeu de ralentir si les fps tombent en dessous de 60.&lt;br /&gt;
Personnellement, je préfère utiliser la deuxième méthode. Elle est peut être un peu plus fastidieuse à mettre en place, mais le comportement de votre jeu est assuré de tourner au même rythme peu importe les performances de la machine sur laquelle il tournera, Xbox 360 incluse.&lt;br /&gt;
Le top du top, c'est de combiner les deux mondes, avoir des fps fixes, pour mieux prévoir le comportement de son jeu, et calculer les déplacements en fonction du temps, pour ne pas ralentir en cas de chute d'fps.&lt;br /&gt;
Dans ce tutoriel, on fera tout en fonction du temps.&lt;br /&gt;
&lt;br /&gt;
Etape numéro 1&amp;nbsp;: calculer le temps écoulé entre deux appels à &lt;em&gt;Update&lt;/em&gt;.&lt;br /&gt;
Rien de plus simple, XNA met à notre disposition cette valeur via la variable &lt;em&gt;gameTime&lt;/em&gt;, que l'on récupère ici en secondes (dans la méthodes &lt;em&gt;Update&lt;/em&gt;).&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;float&lt;/span&gt; tempsEcoule &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;float&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;gameTime.&lt;span style=&quot;color: #0000FF;&quot;&gt;ElapsedRealTime&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;TotalMilliseconds&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;/&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;1000&lt;/span&gt;.0f;&lt;/pre&gt;

&lt;p&gt;Maintenant que l'on a notre temps, il nous faut calculer le déplacement associé, tout de suite après.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt; deplacement &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;screenHeight &lt;span style=&quot;color: #008000;&quot;&gt;/&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;2&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; tempsEcoule&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;/pre&gt;

&lt;p&gt;Ici, on souhaite que notre déplacement se fasse à la hauteur de &quot;la moitié de l'écran&quot; par seconde. Ainsi, le feeling de notre jeu sera le même peu importe un ratio de 4/3 ou 16/9 (ou autre).&lt;br /&gt;
&lt;br /&gt;
Nous avons désormais tous les éléments pour appliquer notre mouvement. A la suite, nous gérons les commandes.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// joueur un&lt;/span&gt;
&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// si on appui sur la touche D du clavier, ou si on pouce le stick gauche vers le bas&lt;/span&gt;
&lt;span style=&quot;color: #0600FF;&quot;&gt;if&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;keyboard.&lt;span style=&quot;color: #0000FF;&quot;&gt;IsKeyDown&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;Keys.&lt;span style=&quot;color: #0000FF;&quot;&gt;D&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;||&lt;/span&gt; GamePad.&lt;span style=&quot;color: #0000FF;&quot;&gt;GetState&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;PlayerIndex.&lt;span style=&quot;color: #0000FF;&quot;&gt;One&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;ThumbSticks&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;Left&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;Y&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;&amp;lt;&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;-0&lt;/span&gt;.5f&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;
    barreBleuePosition &lt;span style=&quot;color: #008000;&quot;&gt;+=&lt;/span&gt; deplacement; &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// on déplace la barre vers le bas&lt;/span&gt;
&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// sinon si on appui sur E, ou stick gauche en haut&lt;/span&gt;
&lt;span style=&quot;color: #0600FF;&quot;&gt;else&lt;/span&gt; &lt;span style=&quot;color: #0600FF;&quot;&gt;if&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;keyboard.&lt;span style=&quot;color: #0000FF;&quot;&gt;IsKeyDown&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;Keys.&lt;span style=&quot;color: #0000FF;&quot;&gt;E&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;||&lt;/span&gt; GamePad.&lt;span style=&quot;color: #0000FF;&quot;&gt;GetState&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;PlayerIndex.&lt;span style=&quot;color: #0000FF;&quot;&gt;One&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;ThumbSticks&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;Left&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;Y&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;&amp;gt;&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;.5f&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;
    barreBleuePosition &lt;span style=&quot;color: #008000;&quot;&gt;-=&lt;/span&gt; deplacement; &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// on monte la barre&lt;/span&gt;
&amp;nbsp;
&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// meme reflexion pour le joueur deux, mais avec les touches Haut et Bas du clavier&lt;/span&gt;
&lt;span style=&quot;color: #0600FF;&quot;&gt;if&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;keyboard.&lt;span style=&quot;color: #0000FF;&quot;&gt;IsKeyDown&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;Keys.&lt;span style=&quot;color: #0000FF;&quot;&gt;Down&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;||&lt;/span&gt; GamePad.&lt;span style=&quot;color: #0000FF;&quot;&gt;GetState&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;PlayerIndex.&lt;span style=&quot;color: #0000FF;&quot;&gt;Two&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;ThumbSticks&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;Left&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;Y&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;&amp;lt;&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;-0&lt;/span&gt;.5f&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;
    barreRougePosition &lt;span style=&quot;color: #008000;&quot;&gt;+=&lt;/span&gt; deplacement;
&lt;span style=&quot;color: #0600FF;&quot;&gt;else&lt;/span&gt; &lt;span style=&quot;color: #0600FF;&quot;&gt;if&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;keyboard.&lt;span style=&quot;color: #0000FF;&quot;&gt;IsKeyDown&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;Keys.&lt;span style=&quot;color: #0000FF;&quot;&gt;Up&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;||&lt;/span&gt; GamePad.&lt;span style=&quot;color: #0000FF;&quot;&gt;GetState&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;PlayerIndex.&lt;span style=&quot;color: #0000FF;&quot;&gt;Two&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;ThumbSticks&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;Left&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;Y&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;&amp;gt;&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;.5f&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;
    barreRougePosition &lt;span style=&quot;color: #008000;&quot;&gt;-=&lt;/span&gt; deplacement;&lt;/pre&gt;

&lt;p&gt;Rien de bien compliqué donc. Chose amusante, si vous le souhaitez, vous pouvez faire jouer les deux joueurs sur le même gamepad, un sur le stick gauche, l'autre sur le droit. C'est également utile si vous n'avez pas deux gamepad.&lt;br /&gt;
&lt;br /&gt;
Sous Windows, si vous souhaitez prendre en charge un gamepad autre que celui de la 360 ou tout autre matériel, il vous faut utiliser &lt;em&gt;DirectInput&lt;/em&gt; et là, ça devient tout de suite beaucoup plus compliqué, mais possible. Par contre, si vous faites cela, oubliez tout de suite le support de la Xbox 360.&lt;br /&gt;
Pour avoir une compatibilité avec la 360, il faut se restreindre aux pad 360 (guitare et big button supportés) et au clavier (que l'on peut brancher en USB sur 360).&lt;br /&gt;
&lt;br /&gt;
F5 et go!&lt;br /&gt;
Ho drame, vous remarquerez que les barres peuvent traverser l'écran. Remédions à cela, à la suite de votre précédent code.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// si la barre bleue dépasse le haut de l'écran, on la bloque à 0&lt;/span&gt;
&lt;span style=&quot;color: #0600FF;&quot;&gt;if&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;barreBleuePosition &lt;span style=&quot;color: #008000;&quot;&gt;&amp;lt;&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;
    barreBleuePosition &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;;
&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// si elle déplace le base de l'écran (en prenant en compte sa hauteur), on la bloc (toujours en prenant en compte sa hauteur)&lt;/span&gt;
&lt;span style=&quot;color: #0600FF;&quot;&gt;else&lt;/span&gt; &lt;span style=&quot;color: #0600FF;&quot;&gt;if&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;barreBleuePosition &lt;span style=&quot;color: #008000;&quot;&gt;&amp;gt;&lt;/span&gt; screenHeight &lt;span style=&quot;color: #008000;&quot;&gt;-&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;barreBleue.&lt;span style=&quot;color: #0000FF;&quot;&gt;Height&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportHeight&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;
    barreBleuePosition &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; screenHeight &lt;span style=&quot;color: #008000;&quot;&gt;-&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;barreBleue.&lt;span style=&quot;color: #0000FF;&quot;&gt;Height&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportHeight&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;
&amp;nbsp;
&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// même reflexion pour la barre rouge&lt;/span&gt;
&lt;span style=&quot;color: #0600FF;&quot;&gt;if&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;barreRougePosition &lt;span style=&quot;color: #008000;&quot;&gt;&amp;lt;&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;
    barreRougePosition &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;;
&lt;span style=&quot;color: #0600FF;&quot;&gt;else&lt;/span&gt; &lt;span style=&quot;color: #0600FF;&quot;&gt;if&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;barreRougePosition &lt;span style=&quot;color: #008000;&quot;&gt;&amp;gt;&lt;/span&gt; screenHeight &lt;span style=&quot;color: #008000;&quot;&gt;-&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;barreRouge.&lt;span style=&quot;color: #0000FF;&quot;&gt;Height&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportHeight&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;
    barreRougePosition &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; screenHeight &lt;span style=&quot;color: #008000;&quot;&gt;-&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;barreRouge.&lt;span style=&quot;color: #0000FF;&quot;&gt;Height&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportHeight&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;/pre&gt;

&lt;p&gt;Voilà, nos barres ont le comportement recherché et nous en avons fini avec cette partie.&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Faisons avancer cette balle&lt;a name=&quot;p7&quot;&gt;&lt;/a&gt;&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
Pour commencer, nous ne souhaitons pas que la balle commence à bouger dès que le jeu est démarré. Il faut pouvoir commander son départ afin que les joueurs puissent être prêts. Pour démarre la partie, nous allons donc programmer le &quot;top départ&quot; sur la barre d'espace du clavier ou la touche &lt;em&gt;Start&lt;/em&gt; du gamepad 360.&lt;br /&gt;
Lors d'un départ, la balle doit aller dans une direction aléatoire et à une certaine vitesse. Nous avons donc besoin d'une variable qui représente cette direction et cette vitesse. Un &lt;em&gt;Vector2&lt;/em&gt; est parfait pour ce job, déclarons le en tant que donnée membre (parmi vos Texture2D et autres).&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;Vector2 balleVitesse &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; Vector2.&lt;span style=&quot;color: #0000FF;&quot;&gt;Zero&lt;/span&gt;;&lt;/pre&gt;

&lt;p&gt;On lui donne une vitesse initiale nulle via la propriété static de &lt;em&gt;Vector2&lt;/em&gt; prévu à cet effet.&lt;br /&gt;
Nous allons maintenant programmer le lancement de la partie. Ce bout de code va être réutilisé pour lancer une nouvelle balle à chaque point marqué. Donc pour cela, nous avons d'abord besoin de booléens qui nous indique l'état de la partie (à la suite du Vector2 d'avant).&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;bool&lt;/span&gt; started &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0600FF;&quot;&gt;false&lt;/span&gt;, &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// est-ce que la partie a commencé?&lt;/span&gt;
    newGame &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0600FF;&quot;&gt;false&lt;/span&gt;; &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// est-ce que je dois relancer la balle?&lt;/span&gt;&lt;/pre&gt;

&lt;p&gt;Gérons le lancement de la balle, à la suite dans votre méthode &lt;em&gt;Update&lt;/em&gt;.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;&lt;span style=&quot;color: #0600FF;&quot;&gt;if&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt;!&lt;/span&gt;started &lt;span style=&quot;color: #008000;&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// si la partie n'a pas commencé&lt;/span&gt;
    &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;keyboard.&lt;span style=&quot;color: #0000FF;&quot;&gt;IsKeyDown&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;Keys.&lt;span style=&quot;color: #0000FF;&quot;&gt;Space&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;||&lt;/span&gt; GamePad.&lt;span style=&quot;color: #0000FF;&quot;&gt;GetState&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;PlayerIndex.&lt;span style=&quot;color: #0000FF;&quot;&gt;One&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;Buttons&lt;/span&gt;.&lt;span style=&quot;color: #0000FF;&quot;&gt;Start&lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt;==&lt;/span&gt; ButtonState.&lt;span style=&quot;color: #0000FF;&quot;&gt;Pressed&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;||&lt;/span&gt; &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// et que &amp;quot;espace&amp;quot; ou &amp;quot;start&amp;quot; est appuyé&lt;/span&gt;
    newGame&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// ou si on a besoin d'une nouvelle balle&lt;/span&gt;
&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#123;&lt;/span&gt;
    &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// on commence par placer la balle au milieu de l'écran&lt;/span&gt;
    ballePosition.&lt;span style=&quot;color: #0000FF;&quot;&gt;X&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;screenWidth &lt;span style=&quot;color: #008000;&quot;&gt;/&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;2&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;-&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;32&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;/&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;2&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportWidth;
    ballePosition.&lt;span style=&quot;color: #0000FF;&quot;&gt;Y&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;screenHeight &lt;span style=&quot;color: #008000;&quot;&gt;/&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;2&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;-&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;32&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;/&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;2&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportHeight;
&amp;nbsp;
    started &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0600FF;&quot;&gt;true&lt;/span&gt;; &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// on indique que la partie a commencé&lt;/span&gt;
    newGame &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0600FF;&quot;&gt;false&lt;/span&gt;; &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// que l'on a plus besoin de nouvelle balle&lt;/span&gt;
&amp;nbsp;
    &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// on prend un nombre au hasard, entre 0 et 3&lt;/span&gt;
    Random rand &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; Random&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;
    &lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt; n &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; rand.&lt;span style=&quot;color: #0000FF;&quot;&gt;Next&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;4&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;
    &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// on initialise la vitesse de la balle à 200 pixels par seconde (par rapport à la résolution toujours)&lt;/span&gt;
    &lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt; vitesseX &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;200&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportWidth&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;
    &lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt; vitesseY &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;200&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportHeight&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;
    &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// suivant le nombre tiré au hasard, on lance la balle dans une direction ou une autre (4 possibles donc)&lt;/span&gt;
    &lt;span style=&quot;color: #0600FF;&quot;&gt;switch&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;n&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;
    &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#123;&lt;/span&gt;
        &lt;span style=&quot;color: #0600FF;&quot;&gt;case&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt;:&lt;/span&gt; balleVitesse &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; Vector2&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;vitesseX, vitesseY&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;; &lt;span style=&quot;color: #0600FF;&quot;&gt;break&lt;/span&gt;;
        &lt;span style=&quot;color: #0600FF;&quot;&gt;case&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;1&lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt;:&lt;/span&gt; balleVitesse &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; Vector2&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;vitesseX, &lt;span style=&quot;color: #008000;&quot;&gt;-&lt;/span&gt;vitesseY&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;; &lt;span style=&quot;color: #0600FF;&quot;&gt;break&lt;/span&gt;;
        &lt;span style=&quot;color: #0600FF;&quot;&gt;case&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;2&lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt;:&lt;/span&gt; balleVitesse &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; Vector2&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt;-&lt;/span&gt;vitesseX, vitesseY&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;; &lt;span style=&quot;color: #0600FF;&quot;&gt;break&lt;/span&gt;;
        &lt;span style=&quot;color: #0600FF;&quot;&gt;case&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;3&lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt;:&lt;/span&gt; balleVitesse &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; Vector2&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #008000;&quot;&gt;-&lt;/span&gt;vitesseX, &lt;span style=&quot;color: #008000;&quot;&gt;-&lt;/span&gt;vitesseY&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;; &lt;span style=&quot;color: #0600FF;&quot;&gt;break&lt;/span&gt;;
    &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#125;&lt;/span&gt;
&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#125;&lt;/span&gt;&lt;/pre&gt;

&lt;p&gt;Nous avons la direction et la vitesse de la balle, mais la balle n'avance pas encore. Il faut appliquer ce vecteur de déplacement à la position actuelle de la balle. Juste après ce code, on a ceci.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// on déplace la balle, toujours suivant le temps écoulé&lt;/span&gt;
ballePosition &lt;span style=&quot;color: #008000;&quot;&gt;+=&lt;/span&gt; balleVitesse &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; tempsEcoule;&lt;/pre&gt;

&lt;p&gt;Un petit F5, et on appui sur &lt;em&gt;espace&lt;/em&gt; ou &lt;em&gt;Start&lt;/em&gt;. La balle avance, mais poursuit son chemin indifféremment.&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Gestion des collisions&lt;a name=&quot;p8&quot;&gt;&lt;/a&gt;&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
La balle doit rebondir contre les bords de l'écran et contre les barres. Commençons par gérer les bords de l'écran. Toujours à la suite du précédent code.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// si la balle dépasse le bord supérieur, on inverse la composante Y de sa vitesse (on la fait rebondir)&lt;/span&gt;
&lt;span style=&quot;color: #0600FF;&quot;&gt;if&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;ballePosition.&lt;span style=&quot;color: #0000FF;&quot;&gt;Y&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;&amp;lt;&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;
    balleVitesse.&lt;span style=&quot;color: #0000FF;&quot;&gt;Y&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;-&lt;/span&gt;balleVitesse.&lt;span style=&quot;color: #0000FF;&quot;&gt;Y&lt;/span&gt;;
&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// si la balle dépasse le bord inférieur (en tenant compte de sa hauteur), on fait rebondir la balle&lt;/span&gt;
&lt;span style=&quot;color: #0600FF;&quot;&gt;else&lt;/span&gt; &lt;span style=&quot;color: #0600FF;&quot;&gt;if&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;ballePosition.&lt;span style=&quot;color: #0000FF;&quot;&gt;Y&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;&amp;gt;&lt;/span&gt; screenHeight &lt;span style=&quot;color: #008000;&quot;&gt;-&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;balle.&lt;span style=&quot;color: #0000FF;&quot;&gt;Height&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportHeight&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;
    balleVitesse.&lt;span style=&quot;color: #0000FF;&quot;&gt;Y&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;-&lt;/span&gt;balleVitesse.&lt;span style=&quot;color: #0000FF;&quot;&gt;Y&lt;/span&gt;;&lt;/pre&gt;

&lt;p&gt;La balle rebondi maintenant sur les bords mais traverse les barres. Pour gérer les collisions entres deux volumes (et donc des rectangles), XNA propose des classes toutes faites pour gérer cela, comme la classe &lt;em&gt;BoundingBox&lt;/em&gt; que nous allons utiliser. Les &lt;em&gt;BoundingBox&lt;/em&gt; sont des boîtes qui vont englober les objets dont vous voulez gérer les collisions. Ces boîtes sont normalement faites pour des collisions 3D, mais en faisans abstraction de la composante sur l'axe Z, on peut parfaitement gérer des collisions 2D. On défini une &lt;em&gt;BoundingBox&lt;/em&gt; par deux points, le supérieur gauche avant et l'inférieur droit arrière. Voici un schéma pour illustrer les &lt;em&gt;BoundingBox&lt;/em&gt; en 3D et 2D.&lt;br /&gt;
&lt;br /&gt;
&lt;img src=&quot;http://helmut.dev-blog.fr/public/tuto1/boundingbox.gif&quot; alt=&quot;BoundingBox 2D/3D&quot; style=&quot;display:block; margin:0 auto;&quot; /&gt;
Voyons cela de plus près, encore une fois dans &lt;em&gt;Update&lt;/em&gt;.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// boite pour la balle&lt;/span&gt;
BoundingBox balleBox &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; BoundingBox&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;
    &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; Vector3&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;ballePosition.&lt;span style=&quot;color: #0000FF;&quot;&gt;X&lt;/span&gt;, ballePosition.&lt;span style=&quot;color: #0000FF;&quot;&gt;Y&lt;/span&gt;, &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;, &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// on défini le premier point, avec la composante Z à 0 puisque l'on fait de la 2D&lt;/span&gt;
    &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; Vector3&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;ballePosition.&lt;span style=&quot;color: #0000FF;&quot;&gt;X&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;+&lt;/span&gt; balle.&lt;span style=&quot;color: #0000FF;&quot;&gt;Width&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportWidth, ballePosition.&lt;span style=&quot;color: #0000FF;&quot;&gt;Y&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;+&lt;/span&gt; balle.&lt;span style=&quot;color: #0000FF;&quot;&gt;Height&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportHeight, &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;; &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// le deuxième point, attention, contrairement aux Rectangle, une BoundingBox ne demande pas la largeur et la hauteur de la boite, mais les coordonnées du point, il ne faut donc pas oublier d'ajouter les origines du premier point&lt;/span&gt;
&amp;nbsp;
&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// même raisonnement pour les barres&lt;/span&gt;
BoundingBox barreBleueBox &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; BoundingBox&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;
    &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; Vector3&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;bleueX, barreBleuePosition, &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;,
    &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; Vector3&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;bleueX &lt;span style=&quot;color: #008000;&quot;&gt;+&lt;/span&gt; barreBleue.&lt;span style=&quot;color: #0000FF;&quot;&gt;Width&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportWidth, barreBleuePosition &lt;span style=&quot;color: #008000;&quot;&gt;+&lt;/span&gt; barreBleue.&lt;span style=&quot;color: #0000FF;&quot;&gt;Height&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportHeight, &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;
BoundingBox barreRougeBox &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; BoundingBox&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;
    &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; Vector3&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;rougeX, barreRougePosition, &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;,
    &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; Vector3&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;rougeX &lt;span style=&quot;color: #008000;&quot;&gt;+&lt;/span&gt; barreRouge.&lt;span style=&quot;color: #0000FF;&quot;&gt;Width&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportWidth, barreRougePosition &lt;span style=&quot;color: #008000;&quot;&gt;+&lt;/span&gt; barreRouge.&lt;span style=&quot;color: #0000FF;&quot;&gt;Height&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; rapportHeight, &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;
&amp;nbsp;
&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// puis on utilise la méthode Intersects, qui prend en paramètre une autre BoundingBox et qui renvoi true si il y a collision&lt;/span&gt;
&lt;span style=&quot;color: #0600FF;&quot;&gt;if&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;balleBox.&lt;span style=&quot;color: #0000FF;&quot;&gt;Intersects&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;barreBleueBox&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;||&lt;/span&gt; balleBox.&lt;span style=&quot;color: #0000FF;&quot;&gt;Intersects&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;barreRougeBox&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;
&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#123;&lt;/span&gt;
    &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// si la balle touche une des deux barres, on inverse son mouvement&lt;/span&gt;
    balleVitesse.&lt;span style=&quot;color: #0000FF;&quot;&gt;X&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;-&lt;/span&gt;balleVitesse.&lt;span style=&quot;color: #0000FF;&quot;&gt;X&lt;/span&gt;;
    &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// et on augmente sa vitesse pour pimenter le gameplay&lt;/span&gt;
    balleVitesse &lt;span style=&quot;color: #008000;&quot;&gt;+=&lt;/span&gt; balleVitesse &lt;span style=&quot;color: #008000;&quot;&gt;*&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;.05f;
&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#125;&lt;/span&gt;&lt;/pre&gt;

&lt;p&gt;Le gros du travail est donc de construire les boîtes. Notez que si la balle rebondi sur une barre, on augmente sa vitesse de 5%, ceci afin de rendre le gameplay plus amusant. La vitesse des barres étant fixe, il arrivera un moment où la vitesse de la balle sera trop rapide et ce sera alors le joueur qui anticipera le mieux les mouvements de la balle qui gagnera.&lt;br /&gt;
Notre gestion des collisions est loin d'être parfaite (tout comme la physique de la balle), mais ce tutoriel est là uniquement pour vous donner quelques notions de bases. On ne cherchera pas à aller plus loin dans cet exemple.&lt;br /&gt;
&lt;br /&gt;
Un petit F5 et votre Pong est jouable. Mais il reste à gérer le score.&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Buts et score&lt;a name=&quot;p9&quot;&gt;&lt;/a&gt;&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
Dans cette partie, nous allons coder les scores et le marquage de points. Ceci sera très simple car nous n'allons pas afficher le score directement dans notre jeu mais dans le titre de la fenêtre. Pourquoi? Parce que XNA ne permet pas directement d'écrire du texte à l'écran et histoire d'alléger un peu ce tutoriel. Je vous montrerai dans un autre tutoriel comment afficher du texte.&lt;br /&gt;
Allons-y pour le score. D'abord, déclarons des données membres.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;&lt;span style=&quot;color: #FF0000;&quot;&gt;int&lt;/span&gt; scoreBleu &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;,
    scoreRouge &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;;&lt;/pre&gt;

&lt;p&gt;Ensuite, dans notre méthode Update, rajoutons la détection de la balle qui a dépassé les barres, et donc un but.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// si la balle dépasse à gauche&lt;/span&gt;
&lt;span style=&quot;color: #0600FF;&quot;&gt;if&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;ballePosition.&lt;span style=&quot;color: #0000FF;&quot;&gt;X&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;&amp;lt;&lt;/span&gt; &lt;span style=&quot;color: #FF0000;&quot;&gt;0&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;
&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#123;&lt;/span&gt;
    &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// le joueur rouge marque&lt;/span&gt;
    scoreRouge&lt;span style=&quot;color: #008000;&quot;&gt;++&lt;/span&gt;;
    &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// et on relance la balle&lt;/span&gt;
    newGame &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0600FF;&quot;&gt;true&lt;/span&gt;;
&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#125;&lt;/span&gt;
&lt;span style=&quot;color: #0600FF;&quot;&gt;else&lt;/span&gt; &lt;span style=&quot;color: #0600FF;&quot;&gt;if&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;ballePosition.&lt;span style=&quot;color: #0000FF;&quot;&gt;X&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;&amp;gt;&lt;/span&gt; screenWidth&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;
&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#123;&lt;/span&gt;
    &lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// idem si la balle dépasse à droite&lt;/span&gt;
    scoreRouge&lt;span style=&quot;color: #008000;&quot;&gt;++&lt;/span&gt;;
    newGame &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #0600FF;&quot;&gt;true&lt;/span&gt;;
&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#125;&lt;/span&gt;&lt;/pre&gt;

&lt;p&gt;Il ne reste plus qu'à afficher le score. Direction la méthode &lt;em&gt;Draw&lt;/em&gt; (rien ne vous empêche de le faire dans la méthode &lt;em&gt;Update&lt;/em&gt;, mais histoire de bien dissocier la logique du graphisme, on le fera dans &lt;em&gt;Draw&lt;/em&gt;).&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;Window.&lt;span style=&quot;color: #0000FF;&quot;&gt;Title&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #808080;&quot;&gt;&amp;quot;Pong : &amp;quot;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;+&lt;/span&gt; scoreBleu.&lt;span style=&quot;color: #0000FF;&quot;&gt;ToString&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;+&lt;/span&gt; &lt;span style=&quot;color: #808080;&quot;&gt;&amp;quot; - &amp;quot;&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;+&lt;/span&gt; scoreRouge.&lt;span style=&quot;color: #0000FF;&quot;&gt;ToString&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;/pre&gt;

&lt;p&gt;Et voilà, le comportement de votre Pong est terminé, ou presque.&lt;br /&gt;
Ajoutons-y une dernière touche.&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Du son avec XACT&lt;a name=&quot;p10&quot;&gt;&lt;/a&gt;&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
Pour ajouter du son à votre projet, on ne peut malheureusement pas ajouter des wav ou mp3 au &lt;em&gt;Content Pipeline&lt;/em&gt;. XNA ne prend que des projets XACT au format .xap. Pourquoi cela? Parce que cela permet des sons compatibles avec toutes les plateformes car chacune a son propre format de son. La Xbox 360 ne supporte qu'un format spéciale à elle (XMA), sous Windows XP le son passera par DirectSound et sous Vista il passera par sa couche sonore spéciale. Pour palier à toutes ces différences, Microsoft a créé XACT qui est un outil également utilisé par les professionnels.&lt;br /&gt;
Tout comme les autres fichiers, sous Windows, vous n'êtes pas obliger de passer par XACT et le Content Pipeline. Vous pouvez très bien utiliser directement DirectSound, mais c'est autrement plus compliqué et vous casserez encore une fois la compatibilité de votre jeu avec la 360.&lt;br /&gt;
Enfin, sachez que XACT ne supporte que les fichiers WAV non compressés.&lt;br /&gt;
&lt;br /&gt;
Allons-y avec les sons. Téléchargez ce petit &lt;a href=&quot;http://helmut.dev-blog.fr/upload/tuto1/sons.7z&quot; hreflang=&quot;fr&quot;&gt;pack de sons&lt;/a&gt;.&lt;br /&gt;
&lt;br /&gt;
Pour lancer XACT, direction le menu démarrer, et dans le repertoire de XNA Game Studio, vous en trouverez un autre nommé &lt;em&gt;Tools&lt;/em&gt; qui contient XACT. Il faut lancer &lt;strong&gt;Microsoft Cross-Platform Audio Creation Tool (XACT)&lt;/strong&gt;. Une fois lancé, faites &lt;strong&gt;Files/New Project&lt;/strong&gt; et enregistrez ce projet où vous le souhaitez en le nommant &quot;Pong&quot; (sans les guillemets).&lt;br /&gt;
&lt;br /&gt;
Concernant le son, ce tutoriel sera plus une marche à suivre qu'une réelle explication. XACT étant un outil de création à part entière, il est préférable de lui consacrer un article à lui seul.&lt;br /&gt;
&lt;br /&gt;
Dans l'arborescence à droite, cliquez sur &lt;strong&gt;Wave Banks&lt;/strong&gt;, puis clic droit &lt;strong&gt;New Wave Bank&lt;/strong&gt;. Double cliquez sur la &lt;em&gt;Wave Bank&lt;/em&gt; fraichement créée. Une fenêtre s'est ouverte. Dedans, glissez y vos fichiers wav ou faites clic droit &lt;strong&gt;Insert Wave File(s)&lt;/strong&gt; et ajoutez vos fichiers.&lt;br /&gt;
&lt;br /&gt;
Sélectionnez les deux entrées de votre&lt;em&gt; Wave Bank&lt;/em&gt; et glissez les à droite sur &lt;strong&gt;Sound Banks&lt;/strong&gt;. Ouvrez la nouvelle &lt;em&gt;Sound Bank&lt;/em&gt;, sélectionnez les deux entrées et glissez les dans le tableau du dessous (&quot;Cue&quot;).&lt;br /&gt;
Voici ce à quoi votre projet XACT devrait ressembler.&lt;br /&gt;
&lt;br /&gt;
&lt;img src=&quot;http://helmut.dev-blog.fr/public/tuto1/xact.gif&quot; alt=&quot;XACT&quot; style=&quot;display:block; margin:0 auto;&quot; /&gt;
&lt;br /&gt;
Petite explication&amp;nbsp;:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Wave Banks&lt;/strong&gt;&amp;nbsp;: vos banques de fichiers originaux tout simplement.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Sound Banks&lt;/strong&gt;&amp;nbsp;: ici, vous pouvez définir des sons qui peuvent être composés de fragment de fichiers et aussi leur appliquer des effets, ou optimiser leur volume.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Sound Cues&lt;/strong&gt;&amp;nbsp;: servent à jouer vos sons. Ce sont en gros des déclencheur. Vous pouvez associer plusieurs son à un seul cue. Ceci aura pour effet de jouer tous les sons en même temps au déclenchement du cue.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Voilà! Sauvegardez votre projet (CTRL+S).&lt;br /&gt;
&lt;br /&gt;
Retournez à votre projet XNA et ajoutez au &lt;em&gt;Content Pipeline&lt;/em&gt; le fichier .xap de votre projet XACT. Chose importante, il faut également copiez les fichiers wav dans le dossier &quot;Content&quot; (le dossier! et non le &lt;em&gt;Content Pipeline&lt;/em&gt;) de votre projet XNA.&lt;br /&gt;
Vous êtes fin prêt à jouer des sons dans votre jeu.&lt;br /&gt;
&lt;br /&gt;
Il faut commencer par initialiser le moteur sonore et déclarer vos banques de sons. Alors déclarons le nécessaire en données membres.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;AudioEngine moteurSonore;
WaveBank banqueWaves;
SoundBank banqueSons;&lt;/pre&gt;

&lt;p&gt;Puis, il faut initialiser tout ceci, dans la méthode &lt;em&gt;Initialise&lt;/em&gt;.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;moteurSonore &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; AudioEngine&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #808080;&quot;&gt;&amp;quot;Content/Pong.xgs&amp;quot;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;
banqueWaves &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; WaveBank&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;moteurSonore, &lt;span style=&quot;color: #808080;&quot;&gt;&amp;quot;Content/Wave Bank.xwb&amp;quot;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;
&lt;span style=&quot;color: #0600FF;&quot;&gt;if&lt;/span&gt; &lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;banqueWaves &lt;span style=&quot;color: #008000;&quot;&gt;!=&lt;/span&gt; &lt;span style=&quot;color: #0600FF;&quot;&gt;null&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;
    banqueSons &lt;span style=&quot;color: #008000;&quot;&gt;=&lt;/span&gt; &lt;span style=&quot;color: #008000;&quot;&gt;new&lt;/span&gt; SoundBank&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;moteurSonore, &lt;span style=&quot;color: #808080;&quot;&gt;&amp;quot;Content/Sound Bank.xsb&amp;quot;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;/pre&gt;

&lt;p&gt;Vous vous demandez peut-être d'où sortent les fichiers xgs, xwb et xsd? Ces fichiers n'apparaissent pas dans votre dossier &quot;Content,&quot; mais ils sont créé par XNA à la compilation grâce à vos sons et votre projet XACT. Ces fichiers auront le noms que vous leur aurez donné dans XACT. Comme nous n'y avons pas touché, ce sont les noms par défaut.&lt;br /&gt;
&lt;br /&gt;
Jouons des sons maintenant!&lt;br /&gt;
&lt;br /&gt;
Pour jouer un son, rien de plus simple.&lt;br /&gt;&lt;/p&gt;
&lt;pre class=&quot;csharp&quot;&gt;&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// pour le son du rebond&lt;/span&gt;
banqueSons.&lt;span style=&quot;color: #0000FF;&quot;&gt;PlayCue&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #808080;&quot;&gt;&amp;quot;rebond&amp;quot;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;
&lt;span style=&quot;color: #008080; font-style: italic;&quot;&gt;// pour le son du but&lt;/span&gt;
banqueSons.&lt;span style=&quot;color: #0000FF;&quot;&gt;PlayCue&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #808080;&quot;&gt;&amp;quot;but&amp;quot;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;/pre&gt;

&lt;p&gt;Je vous laisse le soin de placer ces sons où vous le souhaitez. Vous pouvez les placer dans la méthode &lt;em&gt;Update&lt;/em&gt;, là où les collisions sont gérées ainsi que le score.&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Terminé!&lt;a name=&quot;p11&quot;&gt;&lt;/a&gt;&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
Votre Pong est désormais fini. Du moins, ce tutoriel l'est!&lt;br /&gt;
Il y a évidement beaucoup de marge d'améliorations et le code ne prétend pas être propre ou optimal. Le but ayant été de vous familiariser avec l'outil.&lt;br /&gt;
En guise de challenge, vous propose de faire ceci par vous même&amp;nbsp;:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Optimiser les collisions et la physique de la balle.&lt;/li&gt;
&lt;li&gt;Ajouter un menu (pour le texte, vous pouvez afficher une texture avec votre texte écrit dessus).&lt;/li&gt;
&lt;li&gt;Ajouter un une &quot;intelligence artificielle&quot; pour jouer seul (astuce&amp;nbsp;: il suffit que la barre suive la balle).&lt;/li&gt;
&lt;li&gt;Gérer un score maximum pour gagner.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;br /&gt;
Voilà qui conclu ce premier tutoriel. Vous pouvez télécharger les sources complètes de ce tutoriel &lt;a href=&quot;http://helmut.dev-blog.fr/upload/tuto1/pong.7z&quot; hreflang=&quot;fr&quot;&gt;ici&lt;/a&gt;.&lt;br /&gt;
Etant donné qu'il s'agit de mon tout premier article, les questions, remarques ou toutes autres réactions sont les bienvenues.&lt;/p&gt;</description>
    
    
    
          <comments>http://helmut.dev-blog.fr/post/2008/04/22/Votre-premier-jeu-avec-XNA%3A-Pong#comment-form</comments>
      <wfw:comment>http://helmut.dev-blog.fr/post/2008/04/22/Votre-premier-jeu-avec-XNA%3A-Pong#comment-form</wfw:comment>
      <wfw:commentRss>http://helmut.dev-blog.fr/feed/rss2/comments/7</wfw:commentRss>
      </item>
    
  <item>
    <title>XNA/C#/.NET les sites et livres à retenir</title>
    <link>http://helmut.dev-blog.fr/post/2008/04/21/XNA/C/NET-les-sites-et-livres-a-retenir</link>
    <guid isPermaLink="false">urn:md5:d931a323b0bd8fa445fdce712c7d29fb</guid>
    <pubDate>Mon, 21 Apr 2008 14:50:00 +0200</pubDate>
    <dc:creator>Helmut</dc:creator>
        <category>Articles</category>
        <category>.NET - CSharp</category><category>Microsoft</category><category>XNA</category>    
    <description>&lt;p&gt;Le web regorge de sites très intéressants concernant XNA et ses technologies associées. Je vous propose donc de visiter une partie de mon bookmark personnel.&lt;br /&gt;
Il y en a pour tous les goûts et tous les niveaux, en passant par des tutoriels pour réaliser des jeux de A à Z.&lt;br /&gt;
Je vous propose également une petite sélection de livres.&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;    &lt;h2&gt;Apprendre à programmer en C#&lt;br /&gt;&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://www.developpez.com/&quot; hreflang=&quot;fr&quot;&gt;Developpez.com&lt;/a&gt; et plus précisement son &lt;a href=&quot;http://tahe.developpez.com/dotnet/csharp/&quot; hreflang=&quot;fr&quot;&gt;méga cours&lt;/a&gt; qui s'adresse à des gens qui ont des notions de programmation, bien qu'avec un peu de motivation, un débutant puisse y trouver son compte.&lt;br /&gt;&lt;/li&gt;
&lt;li&gt;Le livre &lt;a href=&quot;http://www.amazon.fr/Pratique-NET-2-0-C/dp/2841773396/ref=sr_1_1?ie=UTF8&amp;amp;s=books&amp;amp;qid=1208782047&amp;amp;sr=1-1&quot; hreflang=&quot;fr&quot;&gt;Pratique de .NET 2 et C# 2&lt;/a&gt; de Patrick Smacchia, aux éditions O'Reilly. Un livre très complet, ma référence personnelle (si il ne devait y en avoir qu'un seul), qui conviendra aussi bien aux débutants qu'aux développeurs confirmés. Il est tout de même recommandé d'avoir des notions d'informatique.&lt;br /&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Les sites à retenir&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
La très grande partie des sites autour de XNA sont anglophones et les ressources françaises ne sont souvent pas au goût du jour ou populaire. Désolé dont à tous les anglophobes.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://www.ziggyware.com/&quot; hreflang=&quot;en&quot;&gt;Ziggyware&lt;/a&gt;, surement la plus grosse communauté autour du XNA. Tutoriels, news sur les jeux, forums, la totale.&lt;br /&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://www.gamedev.net/xml/&quot; hreflang=&quot;en&quot;&gt;GameDev&lt;/a&gt; ou le plus gros site généraliste traitant du développement de jeux vidéo. La grosse partie de ses articles sont destinés à des programmeurs de niveau intermédiaire à avancé.&lt;br /&gt;&lt;/li&gt;
&lt;li&gt;Les &lt;a href=&quot;http://www.developpez.net/forums/forumdisplay.php?f=66&quot; hreflang=&quot;en&quot;&gt;forums 2D, 3D, Jeux de developpez.com&lt;/a&gt;, entretenu par de très bon développeurs, dont des professionnels du jeux vidéo dont je citerai pas le nom. J'y participe assez rarement.&lt;br /&gt;&lt;/li&gt;
&lt;li&gt;Le &lt;a href=&quot;http://blogs.msdn.com/xna/&quot; hreflang=&quot;en&quot;&gt;blog des développeurs du XNA&lt;/a&gt;, histoire de suivre les annonces autours de celui-ci.&lt;br /&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://letskilldave.com/&quot; hreflang=&quot;en&quot;&gt;Let's Kill Dave&lt;/a&gt;, tas de news et articles à propos du développement de jeux via les technologie Microsoft.&lt;br /&gt;&lt;/li&gt;
&lt;li&gt;Le &lt;a href=&quot;http://blogs.msdn.com/shawnhar/&quot; hreflang=&quot;en&quot;&gt;blog de Shawn Hargreaves&lt;/a&gt;, plein d'articles intéressants concernant la 3D et fonctionnement de vos GPU.&lt;br /&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://blogs.msdn.com/etayrien/&quot; hreflang=&quot;en&quot;&gt;Cornflower Blue&lt;/a&gt; ou le blog d'un membre de l'équipe XNA, plein de bonnes choses.&lt;br /&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://www.thezbuffer.com/&quot; hreflang=&quot;en&quot;&gt;The Z Buffer&lt;/a&gt;, tenu par ZMan. Principalement des news autour du XNA et de MDX.&lt;br /&gt;&lt;/li&gt;
&lt;li&gt;Le &lt;a href=&quot;http://benjaminnitschke.no-ip.info/&quot; hreflang=&quot;en&quot;&gt;blog de Benjamin Nitschke&lt;/a&gt;, lead programmer chez exDream et MVP DirectX/XNA. Son studio est le premier à avoir commercialisé un jeu réaliser avec MDX (Managed DirectX, la version .NET de DirectX). Il est également l'auteur d'un très bon livre sur XNA (cf. plus bas) et du starter kit XNA Racer. Son site regorge de beaucoup chose intéressante.&lt;br /&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Les tutoriels intérressants pour débuter&lt;br /&gt;&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://blogs.msdn.com/dawate/archive/2008/02/05/building-a-3d-game-in-xna-from-scratch-free-video-tutorial-series-now-available.aspx&quot; hreflang=&quot;en&quot;&gt;Réaliser un jeu musical de A à Z en 14 vidéos&lt;/a&gt;, très sympa et vous demandera de posséder une guitare 360. Un bon niveau est recommandé. Le site de l'auteur, Dan Waters, est également très intéressant.&lt;br /&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://nick.gravelyn.com/tile-engine-series/&quot; hreflang=&quot;en&quot;&gt;Réaliser votre Tile Engine en vidéos&lt;/a&gt;, très sympa aussi.&lt;br /&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Les livres&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
Il n'y a pour l'instant pas beaucoup de livre sur XNA 2 et absolument aucun en français. La plupart sont encore au XNA 1, mais ils sont en bonne partie compatibles avec le XNA 2. Je préfères vous diriger vers les ouvrages récents.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://www.amazon.fr/Professional-Programming-Building-Windows-Studio/dp/0470261285/ref=sr_1_1?ie=UTF8&amp;amp;s=english-books&amp;amp;qid=1208784675&amp;amp;sr=8-1&quot; hreflang=&quot;en&quot;&gt;Professional XNA Programming 2nd Edition&lt;/a&gt; de Benjamin Nitschke. Très complet et couvre beaucoup d'élément dont la réalisation d'un moteur 3D. Il propose de réaliser plusieurs jeux, en partant de pong en 2D à un RPG 3D en passant par un Shoot them up ou encore un jeu de course. Bon niveau requis. Ce livre a l'avantage de ne pas être un flot de code à repomper et beaucoup de ses chapitres ne sont que des théories et remplis de challenge &quot;code yourself&quot;. Attention à ne pas tomber sur la première édition du livre, que ne couvre que XNA 1.0 beta.&lt;br /&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://www.amazon.fr/Microsoft-XNA-Game-Studio-2-0/dp/0735625220/ref=sr_1_5?ie=UTF8&amp;amp;s=english-books&amp;amp;qid=1208784675&amp;amp;sr=8-5&quot; hreflang=&quot;en&quot;&gt;Microsoft XNA Game Studio 2.0: Learn Programming Now&lt;/a&gt; de Rob Miles aux éditions Microsoft Press. Bien que je n'ai pas eu l'occasion de le lire, il peut être intéressant pour débuter, mais il a l'air un peu léger comparer au précédent livre.&lt;br /&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;br /&gt;
Ceci clôture ma sélection. Bonne lecture.&lt;/p&gt;</description>
    
    
    
          <comments>http://helmut.dev-blog.fr/post/2008/04/21/XNA/C/NET-les-sites-et-livres-a-retenir#comment-form</comments>
      <wfw:comment>http://helmut.dev-blog.fr/post/2008/04/21/XNA/C/NET-les-sites-et-livres-a-retenir#comment-form</wfw:comment>
      <wfw:commentRss>http://helmut.dev-blog.fr/feed/rss2/comments/6</wfw:commentRss>
      </item>
    
  <item>
    <title>Introduction au framework XNA</title>
    <link>http://helmut.dev-blog.fr/post/2008/04/19/Introduction-framework-XNA</link>
    <guid isPermaLink="false">urn:md5:679d05344c5d39b3341dfb71f8eaf644</guid>
    <pubDate>Sat, 19 Apr 2008 21:56:00 +0200</pubDate>
    <dc:creator>Helmut</dc:creator>
        <category>Articles</category>
        <category>.NET - CSharp</category><category>Microsoft</category><category>Windows</category><category>Xbox 360</category><category>XNA</category>    
    <description>&lt;p&gt;Avec la sortie du XNA GS 2.0 et sa mise en avant de Microsoft à la GDC (Game Developers Conference) de février, la curiosité de beaucoup de personnes a été titillée. Les démos sur 360 de certains jeux tels que &lt;a href=&quot;http://www.youtube.com/watch?v=lscKqMsnpJY&quot; hreflang=&quot;en&quot;&gt;The Dishwasher&lt;/a&gt; (réalisé essentiellement par &lt;a href=&quot;http://skasoftware.wordpress.com/&quot; hreflang=&quot;en&quot;&gt;un seul gars&lt;/a&gt;) ont frappé un grand coup.&lt;br /&gt;
&lt;br /&gt;
Pour mettre un pied dans le framework XNA, suivez le guide.&lt;br /&gt;
&lt;br /&gt;
&lt;em&gt;Article mis à jour le 19/01/2009 afin de refléter XNA3.&lt;/em&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;img src=&quot;http://helmut.dev-blog.fr/public/xna-logo.png&quot; alt=&quot;XNA logo&quot; style=&quot;display:block; margin:0 auto;&quot; /&gt;&lt;/p&gt;    &lt;h2&gt;Qu'est-ce que XNA?&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
XNA (pour &lt;em&gt;XNA's Not Acronymed&lt;/em&gt;, oui, c'est très recherché) est un ensemble d'outils facilitant le développement d'application cross-plateforme PC/Xbox360/Zune. Sa particularité, en plus d'être proposé gratuitement par Microsoft, est d'être axé communauté. On l'appel parfois &quot;le youtube du jeux vidéo&quot;, bien que cela puisse se discuter.&lt;br /&gt;
En effet, vous pouvez soumettre vos créations à la communauté qui sera alors en charge de l'évaluer et de lui permettre d'être diffuser sur les Community Games de la 360.&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Techniquement, c'est quoi?&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
Le framework XNA peut être comparé à un &lt;a href=&quot;http://en.wikipedia.org/wiki/Application_programming_interface&quot; hreflang=&quot;en&quot;&gt;API&lt;/a&gt; tel que DirectX mais il n'en est pas un. C'est un ensemble d'outils.&lt;br /&gt;
Tout d'abord, XNA est une sur-couche au .NET Framework et s'appuie donc sur les langages et les librairies de .NET. Il est donc recommandé de programmer en C#.&lt;br /&gt;
Le framework XNA apporte des bibliothèques permettant de gérer le graphisme (sur-couche à DirectX 9), les périhpériques d'entrée (pad 360, guitar, big button pad,...), le son, le contenu et le réseau de vos applications (via Xbox Live / Game for Windows Live).&lt;br /&gt;
En dehors des bibliothèques, on a un environnement de développement qui se greffe entièrement à Visual Studio 2008 (Express ou non) et on peut donc profiter de toutes ses fonctions.&lt;br /&gt;
Une des forces du XNA (et parfois sa faiblesse), c'est le &lt;em&gt;Content Pipeline&lt;/em&gt;. Il s'agit d'une sorte d'importateur automatique de contenu. Il permet d'importer et d'utiliser très facilement des textures, du son, des modèles et autres contenus en passant par les shaders. Le &lt;em&gt;Content Pipeline&lt;/em&gt; va également &lt;em&gt;cuisiner&lt;/em&gt; votre contenu pour qu'il transportable du PC à la Xbox360 ou au Zune de façon transparente (et optimisée). Le &lt;em&gt;Content Pipeline&lt;/em&gt; compresse également vos données à la volée de façon efficace.&lt;br /&gt;
XNA, c'est aussi d'autres outils, tels que XACT, qui permet de cuisiner votre contenu sonore afin que celui-ci soit cross-plateforme PC/Xbox360. A noter qu'à l'origine, XACT est un outil qui fait parti du SDK de la 360 et que ce dernier n'est plus indispensable depuis XNA 3.&lt;br /&gt;
&lt;br /&gt;
XNA est l'aboutissement de MDX, l'implémentation .NET de DirectX, dont le développement a été arrêté au profit de XNA.&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;A qui s'adresse le XNA?&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
Vous l'aurez peut-être deviné, XNA est principalement destiné aux développeurs. Microsoft vise en premier lieux les étudiants en informatique, les développeurs amateurs et les petits studios de développement indépendants.&lt;br /&gt;
Après la GDC 2008, quelques personnes s'attendaient à un outil simple, voir WYSIWYG, à l'image d'un RPG Maker. Autant faire déchanter ces personnes tout de suite. Il est largement préférable d'avoir de bonnes bases en programmation, notamment en C#, Java ou C++. Une connaissance des APIs graphiques OpenGL et/ou DirectX est également très utile à comprendre certains concepts.&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;De quoi ai-je besoin pour m'y mettre et combien cela coûte?&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
Concernant les coûts, tout dépend de ce que vous souhaitez en faire, mais de façon générale, le XNA et son utilisation sont gratuits, et un usage commercial est possible sans licence sur PC.&lt;br /&gt;
&lt;br /&gt;
Pour débuter, votre PC devra disposer des logiciels suivants:&lt;br /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Windows XP SP2 ou Vista&lt;br /&gt;&lt;/li&gt;
&lt;li&gt;Un DirectX à jour&lt;/li&gt;
&lt;li&gt;Le &lt;a href=&quot;http://www.microsoft.com/downloads/details.aspx?familyid=333325FD-AE52-4E35-B531-508D977D32A6&amp;amp;displaylang=fr&quot; hreflang=&quot;fr&quot;&gt;.NET Framework 2 ou supérieur&lt;/a&gt; (intégré à Vista en version 3.0), la version la plus récente est la 3.5.&lt;br /&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://www.microsoft.com/express/vcsharp/&quot; hreflang=&quot;en&quot;&gt;Visual C# Express 2008&lt;/a&gt; qui est gratuit pour tous dans la limite d'une utilisation non commerciale (les professionnels peuvent utiliser les versions complètes de l'EDI).&lt;br /&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://www.microsoft.com/downloads/details.aspx?FamilyId=7D70D6ED-1EDD-4852-9883-9A33C0AD8FEE&amp;amp;displaylang=en&quot; hreflang=&quot;en&quot;&gt;XNA Game Studio 3.0&lt;/a&gt;&lt;br /&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;br /&gt;
Si vous êtes étudiant dans l'enseignement supérieur, il y a de bonne chance que votre établissement soit dans le programme &lt;a href=&quot;http://msdn2.microsoft.com/fr-fr/academic/default.aspx&quot; hreflang=&quot;fr&quot;&gt;MSDN AA de Microsoft&lt;/a&gt; et vous pourrez profiter de logiciels comme les versions professionnelles de Visual Studio qui sont plus pratiques pour utiliser XNA, mais pas du tout indispensables. Dirigez vous vers le précédent lien pour plus d'infos ou aller voir le responsable informatique de votre établissement qui, en théorie, devrait pouvoir vous renseigner.&lt;br /&gt;
&lt;br /&gt;
Côté matériels, il est nécessaire d'avoir une carte graphique DirectX 9.0c supportant au moins les shaders 2.0.&lt;br /&gt;
Posséder une manette d'Xbox 360 est un plus non négligeable (beaucoup d'exemples ou de livres n'utilisant pas le clavier). Attention à ne pas avoir des pilotes modifiés comme les XBCD qui rendent les manettes 360 incompatibles avec XNA.&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Et pour tester mes applications sur une Xbox 360?&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
C'est la que les choses peuvent devenir contrariantes. Pour exécuter du code provenant du XNA sur une console, il est nécessaire d'avoir une licence &lt;em&gt;XNA Creator Club&lt;/em&gt;, achetable via le Market Place pour la somme de 99€ par an, ou 49€ pour 4 mois.&lt;br /&gt;
Encore une fois, si vous êtes étudiants, Microsoft propose via son programme &lt;a href=&quot;https://downloads.channel8.msdn.com/&quot; hreflang=&quot;en&quot;&gt;DreamSpark&lt;/a&gt; des logiciels de développement et autres, dont une licence &lt;em&gt;Creator Club&lt;/em&gt; d'un an gratuite (mais uniquement valide pour débugger une appli sur 360).&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Comment tester les applications des autres?&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
Sur PC, si vous trouvez un jeu développé avec XNA, vous n'aurez besoin que du Runtime XNA (qui est normalement intégré à l'installateur du jeu) et vous pourrez utiliser l'application sans restriction.&lt;br /&gt;
Pour tester sur 360, il y a deux options:&lt;br /&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;L'auteur met à disposition les executables Xbox sur le web, vous devrez alors les télécharger, et les transferer sur votre Xbox 360 via le XNA Game Studio.&lt;br /&gt;&lt;/li&gt;
&lt;li&gt;Le jeu est dispo sur les Community Games de la console et vous n'avez plus qu'à le télécharger comme un jeu Xbox Live Arcade.&lt;br /&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;br /&gt;
Depuis les Community Games, la licence &lt;em&gt;Creator Club&lt;/em&gt; n'est utile que si vous souhaitez débugger vos créations sur 360 et les vendre.&lt;br /&gt;
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Et maintenant, on fait des jeux!&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
Stop! Là, on va y aller tout en douceur, étapes par étapes. Dans les prochains temps, je vous proposerai des tutoriels de base, en commençant pour de la 2D.&lt;br /&gt;
Je ne vais pas vous apprendre un langage. Mes articles ne s'adresseront surement pas aux débutants complets et certains seront même d'un niveau avancé.&lt;br /&gt;
Je vous invite donc à vous renseigner sur la plate-forme .NET et le C# qui lui est associé.&lt;br /&gt;
&lt;br /&gt;
Mon &lt;a href=&quot;http://helmut.dev-blog.fr/post/2008/04/21/XNA/C/NET-les-sites-et-livres-a-retenir&quot; hreflang=&quot;fr&quot;&gt;prochain billet&lt;/a&gt; concernera probablement un ensemble de liens et de livres qui vous permettront d'en apprendre plus, voir de commencer.&lt;br /&gt;
Pour ceux qui ont un train d'avance, je vous propose de &lt;a href=&quot;http://helmut.dev-blog.fr/post/2008/04/22/Votre-premier-jeu-avec-XNA%3A-Pong&quot; hreflang=&quot;fr&quot;&gt;réaliser votre premier jeu&lt;/a&gt;.
&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Et pour distribuer mon jeu sur le Xbox Live et le vendre ?&lt;br /&gt;&lt;/h2&gt;

&lt;p&gt;&lt;br /&gt;
Direction &lt;a href=&quot;http://helmut.dev-blog.fr/post/2009/01/15/Introduction-aux-Xbox-Community-Games-XBCG&quot; hreflang=&quot;fr&quot;&gt;les Community Games&lt;/a&gt;.
&lt;br /&gt;
Voilà qui boucle mon introduction au XNA. Remarques et questions bienvenues.&lt;/p&gt;</description>
    
    
    
          <comments>http://helmut.dev-blog.fr/post/2008/04/19/Introduction-framework-XNA#comment-form</comments>
      <wfw:comment>http://helmut.dev-blog.fr/post/2008/04/19/Introduction-framework-XNA#comment-form</wfw:comment>
      <wfw:commentRss>http://helmut.dev-blog.fr/feed/rss2/comments/5</wfw:commentRss>
      </item>
    
</channel>
</rss>
