Graphic Stream : Visual Studio

Annexe : Intégration de Xna dans WPF

valentin — Mon, 20 Jul 2009 11:58:00 GMT

Il existe de nombreuses méthodes pour afficher des scènes 3D à base de Xna dans un environnement WPF. Certaines souffrent de problèmes de lenteur (réalisées le plus souvent à base de WindowsFormHost), d’autres ne permettent qu’une interaction limitée avec les contrôles et l’interface WPF. Réaliser des affichages multiples comme on peut en avoir dans des logiciels comme Maya devient alors problématique :

Il existe pourtant un moyen, relativement simple d’arriver à ses fins. Ce moyen consiste tout simplement à donner une impression visuelle à l’utilisateur d’une intégration Xna parfaite dans un widget WPF alors qu’il n’en est rien. La clé de cet effet réside dans une parfaite manipulation des fenêtres.

Principe

Nous voulons pouvoir intégrer notre scène Xna dans une interface WPF de la même manière que nous intégrons un Canvas ou un quelconque widget à une interface. Or le meilleur moyen d’afficher une scène 3D en Xna est de l’incorporer dans une fenêtre. Impossible en effet d’obtenir le handle de tout contrôle en WPF comme on peut le faire en Winform. L’astuce consiste alors à réécrire une partie du framework Xna tournant autour de la classe Game. Le but étant de faire hériter une nouvelle classe Game d’un Panel (dans notre cas un Canvas) afin de pouvoir l’intégrer dans l’arborescence visuel WPF. La surface visuelle de ce panel sera ainsi la zone d’affichage de la scène Xna liée. Pourtant nous venons de dire qu’il n’était pas possible d’obtenir un handle d’un contrôle visuel qui n’hérite pas de Window. Comment y afficher de la 3D avec Xna donc ? Nous allons tout simplement afficher une fenêtre sans bordure exactement au dessus de ce panel. Cette fenêtre sera toujours au dessus lorsque l’application aura le focus et que le panel sera visible, et sera cachée dans le cas contraire. De même, lorsque le panel n’est pas visible, nous stopperons l’activité du jeu.

Chaque modification de la taille ou de la position du panel entrainera une modification équivalente chez la fenêtre sus-jacente.

Cette fenêtre se trouvant donc exactement au dessus du panel et ayant une taille identique l’illusion est parfaite.

Réalisation

La première étape consiste donc à réécrire une partie des classes de l’assembly Microsoft.Xna.Framework et Microsoft.Xna.Framework.Game. Ce afin de s’émanciper du fonctionnement de base de la classe Game trop fortement couplée à un fonctionnement sur fenêtre unique. Le projet Arcane.Xna.Presentation reprend donc une partie des classes de ces assemblies pour une utilisation avec WPF.

Rien de bien compliqué. Seules les classes Game et GameHost sont réellement intéressantes ici.

La classe Game comme précisé précédemment correspond à la zone d’affichage de nos scènes 3D dans les interfaces utilisateurs WPF. Elle hérite de Canvas. L’utilisation de Canvas répond à un besoin bien particulier que nous présenterons plus loin. La classe Game ne se différencie de la classe Game de l’assembly Microsoft.Xna.Framework.Game que par quelques membres. Tout d’abord elle possède un membre de type GameHost qui est en fait la fenêtre se positionnant juste au dessus. Elle possède de même un membre nommé _tichGenerator qui va permettre de mettre à jour l’affichage à intervalle réguliers.

Le constructeur initialise ses membres ainsi :

this._window = new GameHost(this);

this._window.Closed += new EventHandler(_window_Closed);

this._tickGenerator = new DispatcherTimer();

this._tickGenerator.Tick += new EventHandler(_tickGenerator_Tick);

Il commence par créer la fenêtre qui sera située au dessus de lui, et enregistre l’événement Closed afin de fermer la scène 3D. L’object de type DispatcherTimer est utilisé pour la boucle de jeu et permet donc d’appeler de manière régulière les méthodes Update et Draw. Sa vélocité dépend de la propriété IsFixedTimeStep.

Dernier élément important, l’enregistrement de l’événement IsVisibleChange :

this.IsVisibleChanged += new DependencyPropertyChangedEventHandler(GameCanvas_IsVisibleChanged);

L’activation du DispatcherTimer est en fonction de cette visibilité.

La classe GameHost est tout aussi simple. Elle créé une fenêtre sans bordure, invisible sur la barre des tâches et qui enregistre l’événement SizeChanged du panel Xna et LocationChanged de la fenêtre de plus haut niveau. Ces deux événements lui permettent de toujours être au dessus du panel Xna en effectuant un appel à la méthode UpdateBounds :

public void UpdateBounds()
{
    if (this.IsVisible)
    {
        GeneralTransform gt = this.game.TransformToVisual(this.TopLevelWindow);

        this.Width = this.game.ActualWidth;
        this.Height = this.game.ActualHeight;

        this.Left = this.TopLevelWindow.Left + gt.Transform(new Point(0, 0)).X;
        this.Top = this.TopLevelWindow.Top + gt.Transform(new Point(0, 0)).Y;
    }
}

Cette méthode détermine la position de la fenêtre courante en se basant sur la fenêtre de plus haut niveau (la fenêtre contenant le panel Xna de la classe Game). Elle lui affecte en outre, la même largeur et hauteur que le panel Xna.

Là encore la fenêtre s’enregistre sur l’événement IsVisibleChange de ce dernier afin de se rendre visible ou non.

Premier Exemple

Nous baserons nos exemple sur le framework AvalonDock (http://www.codeplex.com/AvalonDock), un moyen efficace de créer des interfaces dockable à la Visual Studio très facilement. Un moyen aussi pour nous de montrer la puissance et la simplicité de notre système dans des interfaces WPF très avancées.

Notre solution contient donc un projet nommé Demo qui correspond au projet d’exemple d’AvanlonDock légèrement modifié. Nous avons ajouté une classe héritant de Game qui va afficher un cube tournant sur lui-même.

Cette classe a tout simplement été extraite d’une application Xna pur pour être ajouté dans ce projet, et ce, sans aucune modification (ou presque) :

public class RotatingCubeGame : Arcane.Xna.Presentation.Game
{

    #region Fields

    Arcane.Xna.Presentation.GraphicsDeviceManager graphics;
    SpriteBatch spriteBatch;
    BasicEffect effect;
    VertexPositionColor[] vertices;
    Vector3 position = Vector3.Zero;
    Vector3 size = Vector3.One;
    VertexBuffer vertexBuffer;
    IndexBuffer indexBuffer;

    #endregion

    #region Constructors

    public RotatingCubeGame()
    {
        if (!(System.ComponentModel.DesignerProperties.GetIsInDesignMode(this)))
        {
            graphics = new Arcane.Xna.Presentation.GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }
    }

    #endregion

    /// <summary>
    /// Allows the game to perform any initialization it needs to before starting to run.
    /// This is where it can query for any required services and load any non-graphic
    /// related content. Calling base.Initialize will enumerate through any components
    /// and initialize them as well.
    /// </summary>
    protected override void Initialize()
    {
         base.Initialize();
       // TODO: Add your initialization logic here
        this.graphics.IsFullScreen = false;
        this.graphics.PreferredBackBufferWidth = 800;
        this.graphics.PreferredBackBufferHeight = 600;
        this.graphics.ApplyChanges();

        this.Window.Title = "";

        this.InitializeVertices();
        this.InitializeIndices();

    }

    private void InitializeVertices()
    {
        vertices = new VertexPositionColor[ 8 ];
        vertices[0].Position = new Vector3(-10f, -10f, 10f);
        vertices[0].Color = Color.Yellow;
        vertices[1].Position = new Vector3(-10f, 10f, 10f);
        vertices[1].Color = Color.Green;
        vertices[2].Position = new Vector3(10f, 10f, 10f);
        vertices[2].Color = Color.Blue;
        vertices[3].Position = new Vector3(10f, -10f, 10f);
        vertices[3].Color = Color.Black;
        vertices[4].Position = new Vector3(10f, 10f, -10f);
        vertices[4].Color = Color.Red;
        vertices[5].Position = new Vector3(10f, -10f, -10f);
        vertices[5].Color = Color.Violet;
        vertices[ 6 ].Position = new Vector3(-10f, -10f, -10f);
        vertices[ 6 ].Color = Color.Orange;
        vertices[7].Position = new Vector3(-10f, 10f, -10f);
        vertices[7].Color = Color.Gray;
        this.vertexBuffer = new VertexBuffer(this.graphics.GraphicsDevice, typeof(VertexPositionColor), 8, BufferUsage.WriteOnly);
        this.vertexBuffer.SetData(vertices);
    }

    private void InitializeIndices()
    {
        short[] indices = new short[36]{
            0,1,2, //face devant
            0,2,3,
            3,2,4, //face droite
            3,4,5,
            5,4,7, //face arrière
            5,7,6,
            6,7,1, //face gauche
            6,1,0,
            6,0,3, //face bas
            6,3,5,
            1,7,4, //face haut
            1,4,2};
        this.indexBuffer = new IndexBuffer(this.graphics.GraphicsDevice, typeof(short), 36, BufferUsage.WriteOnly);
        this.indexBuffer.SetData(indices);
    }

    /// <summary>
    /// LoadContent will be called once per game and is the place to load
    /// all of your content.
    /// </summary>
    protected override void LoadContent()
    {
        // Create a new SpriteBatch, which can be used to draw textures.
        spriteBatch = new SpriteBatch(GraphicsDevice);

        // TODO: use this.Content to load your game content here
        this.effect = new BasicEffect(graphics.GraphicsDevice, null);
        this.effect.View = (Matrix.CreateLookAt(new Vector3(20, 30, -50), Vector3.Zero, Vector3.Up));
        this.effect.Projection = (Matrix.CreatePerspectiveFieldOfView(MathHelper.PiOver4, this.GraphicsDevice.Viewport.AspectRatio, 0.1f, 100f));
        this.effect.VertexColorEnabled = true;
    }

   /// <summary>
    /// Allows the game to run logic such as updating the world,
    /// checking for collisions, gathering input and playing audio.
    /// </summary>
    /// <param name="gameTime">Provides a snapshot of timing values.</param>
    protected override void Update(GameTime gameTime)
    {
        if (Keyboard.GetState()[Keys.Up] == KeyState.Down)
            position += Vector3.Up;
        if (Keyboard.GetState()[Keys.Down] == KeyState.Down)
            position += Vector3.Down;
        if (Keyboard.GetState()[Keys.Left] == KeyState.Down)
            position += Vector3.Left;
        if (Keyboard.GetState()[Keys.Right] == KeyState.Down)
            position += Vector3.Right;
        if (Keyboard.GetState()[Keys.PageUp] == KeyState.Down)
            size += new Vector3(0.1f, 0.1f, 0.1f);
        if (Keyboard.GetState()[Keys.PageDown] == KeyState.Down)
            size -= new Vector3(0.1f, 0.1f, 0.1f);

      // Allows the default game to exit on Xbox 360 and Windows
        if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
           this.Exit();

        float fAngle = (float)gameTime.TotalGameTime.TotalSeconds;

        //la transformation en elle même
        Matrix world = Matrix.CreateRotationY(fAngle) * Matrix.CreateRotationX(fAngle)
                            * Matrix.CreateScale(size)
                            * Matrix.CreateTranslation(position);

        this.effect.World = (world);
        base.Update(gameTime);
    }


    /// <summary>
    /// This is called when the game should draw itself.
    /// </summary>
    /// <param name="gameTime">Provides a snapshot of timing values.</param>
    protected override void Draw(GameTime gameTime)
    {
        this.graphics.GraphicsDevice.Vertices[0].SetSource(this.vertexBuffer, 0, VertexPositionColor.SizeInBytes);
        this.graphics.GraphicsDevice.Indices = this.indexBuffer;
        this.graphics.GraphicsDevice.VertexDeclaration = new VertexDeclaration(this.graphics.GraphicsDevice, VertexPositionColor.VertexElements);
        graphics.GraphicsDevice.Clear(Color.CornflowerBlue);

        // TODO: Add your drawing code here
        this.effect.Begin();

        foreach (EffectPass pass in effect.CurrentTechnique.Passes)
        {
            pass.Begin();
            this.graphics.GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, 8, 0, 12);
            pass.End();
        }

        effect.End();

        base.Draw(gameTime);
    }
}

Rien de bien compliqué ici (le code est extrait de l’article 6). La première modification est de faire hériter la classe RotatingCubeGame de l’objet Game de notre assembly et non celle de l’assembly Microsoft.Xna.Framework.Game. La seconde modification consiste à entourer les initialisations réalisées dans le constructeur de :

System.ComponentModel.DesignerProperties.GetIsInDesignMode(this)

Afin de s’assurer que notre jeu ne sera pas en partie créé dans le designer de Visual Studio. Le reste est très simple. Nous avons juste remplacé le contenu de chaque DockablePane dans le code Xaml de Window1 par un :

<Demo:RotatingCubeGame></Demo:RotatingCubeGame>

Le resultat nous donne :

Bien évidemment notre système respecte les avantage d’AvalonDock en permettant un docking puissant et ce, sans perturber nos scène 3D:

Pas mal, mais on peut faire mieux.

Intégration de Widgets

Pourquoi ne pas tenter d’afficher des widgets (bouton, label, Grid, Canvas, …) dans notre scène 3D pour faire une intégration avec WPF de manière parfaite.

Nous pourrions être tentés d’ajouter ces éléments directement à la fenêtre GameHost. Mais à l’affichage nous aurions des problèmes de scintillement (deux types d’affichages différents vectoriel et 3D à réaliser sur une même zone clip n’est pas forcement bon…). Nous allons donc simplement rajouter une nouvelle fenêtre au dessus de la fenêtre existante, sans bordure elle aussi :

Son contenu sera directement relié au contenu du panel Xna (le Canvas). La classe GameHost contiendra désormais un nouveau membre nommé _frontWindow de type Window. Elle exposera en internal une propriété nommée WPFHost donnant accès au Content de cette window :

internal object WPFHost
{
    get
    {
        return this._frontWindow.Content;
    }
    set
    {
        this._frontWindow.Content = value;
    }
}

La classe Game exposera elle-aussi le Content de cette window à l’aide d’une propriété portant le même nom :

public object WPFHost
{
    get
    {
        if (!(System.ComponentModel.DesignerProperties.GetIsInDesignMode(this)))
            return this.Window.WPFHost;
        else
            return (base.Children[0] as ContentControl).Content;
    }
    set
    {
        if (!(System.ComponentModel.DesignerProperties.GetIsInDesignMode(this)))
            this.Window.WPFHost = value;
        else
            (base.Children[0] as ContentControl).Content = value;
    }
}

Cette propriété détermine si nous sommes en mode design (sous visual studio) ou en mode runtime. En mode design nous utilisons le fonctionnement classique du Canvas dont hérite notre classe Game, en mode runtime nous ciblons directement la window. Cela nous permet en mode design de pouvoir voir l’UI de notre contrôle et de pouvoir la modifier à la souris.

En outre nous marquons la classe Game de l’attribut :

[System.Windows.Markup.ContentProperty("WPFHost")]

Permettant de mettre du contenu direct en Xaml :

La page Window1.xaml a été modifiée pour rajouter du contenu à plusieurs RotatingCubeGame comme le montre l’image ci-dessus. Nous avons ajouté des shapes et paths purs pour reproduire le personnage orange et jaune symbolisant le Xna, des boutons et label liés par des événements et un FlowDocument avec scrolling.

Conclusion

L’assembly Arcane.Xna.Presentation présente un moyen simple d’intégrer de manière professionnel du Xna à ses applications WPF. Le seul vrai défaut qu’on peut lui trouver est la création de deux fenêtre par panel Xna. Il faut savoir que le nombre de fenêtre affichable sous Windows est malheureusement limité. Le résultat fonctionne tout de même parfaitement et peut être utilisé pour des applications professionnelles :

Vous pouvez télécharger le code ici.

A bientôt sur ce Blog !

Valentin Billotte

Sortie de la Community Technical Preview (CTP) de XNA Game Studio 3.0

valentin — Wed, 11 Jun 2008 15:24:00 GMT

La CTP de Xna Game Studio est desormais disponible. Elle permet (comme nouveauté majeure) de developper pour l'ensemble de la famille Zone (le lecteur media de Microsoft). La plupart des fonctionnalités du framework Xna sont utilisable sur cette plateforme. Cerise sur la gateau (à mes yeux :) ), la possibilité de travailler avec Visual Studio 2008 qu'il s'agisse de la version Express ou bien que la version Standard ou supérieure. Dans tous les cas il est obligatoire d'avior le support C# d'installé. La version 2005 n'est pas supportée. A noter que la 3.0 cohabite sans problème avec votre environement sous la 2.0 (avec 2005 donc). Grosse limitation poru cette cette CTP : impossibilité de développer sur Xbox 360 (faudra attendre la finale) et aucun support pour les OS 64 bits.

La CTP est téléchargeable depuis le site http://www.microsoft.com/downloads/details.aspx?FamilyId=DF4AF56A-58A7-474C-BFD0-7CF8ED3036A3&displaylang=en

ou depuis http://creator.xna.com. La version finale à priori prévue pour le milieu de cet été.

Amusez vous bien !

"Le type de projet n'est pas pris en charge par cette installation" pour les projets NetRumble / Marblets / Racing Game

valentin — Wed, 19 Dec 2007 13:31:00 GMT

Une réponse faite à feed dans les commentaires d'un de mes posts pour répondre à son probleme :

"Le template NetRumble se lance, mais pas Marblets ou Racing Game : "Le type de projet n'est pas pris en charge par cette installation"

En deux mots, tous les exemples du Xna Game Studio Engine 2.0 n'ont pas été portés de la 1.0 vers la 2.0, les projets sont donc incompatibles.

Différentes solutions pour utiliser ces projets d'exemple :

Utiliser un wizard de mise à jour (creators.xna.com/.../GettingStarted.aspx)

Créer un projet GSE 2.0 et ajoute manuellement tous les fichiers et ressources du projet au bon emplacement (un peu chiant :) )

Installer à nouveau la 1.0 refresh qui peut cohexister avec la 2.0.

Attendre la possible sortie d'une version upgradée de ces projets (soit de la part de MS soit de la part d'un passionné)

Xna Game Studio 2.0 et Visual Studio 2008

valentin — Wed, 19 Dec 2007 09:08:00 GMT

Une procédure (tirée par les cheveux, mais qui a le mérite d'exister) pour utiliser la dernière version du Xna Game Studio 2.0 avec 2008 :

http://www.codeproject.com/KB/game/XNA_And_Beyond.aspx

Merci à Jiaozi pour l'info

Visual Studio Express 2008 arrive

valentin — Thu, 29 Nov 2007 11:04:00 GMT

Bonne nouvelle pour tous ceux qui comme moi utilisent Visual Studio Express : la version 2008 est enfin présente :

http://www.microsoft.com/express

Rappelons les avantages :

Gratuité
Rapidité (chez moi, ouvrir un code source est aussi rapide sous notepad que sous vexpress)
Installation rapide et peu gourmande en espace disque.
Peu gourmand en RAM
cohabite avec d'autres versions de 2008.

A noter néanmoins que peu d'addons sont présents par rapport à une version professional, standard, architecte ou la team suite...

L'Express edition permet d'avoir un visual studio en plus sur sa machine particulièrement véloce et léger qui évite d'avoir à ouvrir visual studio 2008 et toute la machinerie (à gaz) qui vient avec.

Il existe une version par "langage" : C#, VB.net, ASP.net, Managed C++

Annexe : Interface utilisateur en Xna

valentin — Mon, 21 May 2007 14:10:00 GMT

Retourner au sommaire des cours

L'interface utilisateur constitue le lien principal entre le joueur et le jeu. Dans l'univers Xna, la notion de widget est inexistante : le framework se veut générique et la notion de "bouton", de "TextBox" est inexistante sous une Xbox. Quiconque veut réaliser une interface est confronté à un dilemn : Soit il se branche au monde WinForm et profite de l'ensemble des contrôles de l'API .net Soit il réalise son propre système graphique.

Le premier cas limite le cadre d'utilisation de vos jeux à la plate-forme Windows. Elle demande la conciliation de deux univers graphique différents (Winform et Xna) et, de ce fait, peche par un manque de performances. Toutefois, cette méthode est sans aucun doute la plus rapide a mettre en place et la plus complète.

Le second cas ne souffre d'aucun de ces défaut mais demande un temps d'implémentation relativement conséquent.Le developpeur doit effectivement s'occuper du rendu de chaque contrôle, et ce, pour tous les états que ceux ci peuvent avoir, mais aussi du système événementiel et enfin du modèle objet sous jacent.Une interface puissante et customizée est à ce prix. Nous aborderons ce cas dans cette annexe. Vous pouvez vous reporter à l'annexe "Xna et Winform" pour apprendre à développer une interface utilisateur à l'aide du namespace System.Windows.Form.

Cette annexe est en cours d'écriture.

UI ou non ?

Le projet en téléchargement ici est en cours de développement et n'est pas terminé à ce jour.

Le projet explicité vise un seul but : offrir au développeur un moyen de développer une interface graphique aussi simplement que sous Windows avec .Net. Le principe est donc de pouvoir réaliser des instructions de type :

bouton = new Button();
bouton.Width *= 2;
bouton.Location = new Point(200, 200);
bouton.MouseDown += new MouseEventHandler(button_MouseDown);
bouton.Text = "Click on me";
contener.Controls.Add(bouton);

et de voir apparaitre un bouton à l'écran. Facile à dire, facile à mettre en oeuvre : c'est effectivement ce que nous ferons :).

Il y'a toutefois quelques nota bene à preciser avant de partir dans l'aventure la fleur au fusil. Sous Windows n'importe quel bouton de n'importe quelle application se ressemble, et pour cause : la notion de skin, d'univers graphique, de cohérence graphique n'a pas vraiment lieu d'être. Microsoft publie ainsi une documentation assimilable à une chartre graphique que tout développeur d'application Windows doit respecter. La chartre de Winsows Vista est accessible ici : http://msdn2.microsoft.com/en-us/library/aa511258.aspx. Comme on le voit, l'utilisateur y apprend la taille des boutons, les couleurs des messages, la façon dont il faut agencer les widgets (un widget est un élément graphique), il lui est même précisé comment afficher les messages d'erreur et d'alerte. Quel raison à tout cela ? l'UCO bien sûr. Sous cet acronyme se cache l'User Cost of OwnerShip. C'est à dire le coût d'aprehension d'une application par un utilisateur. Microsoft se base sur un principe simple : si toutes les applications respectent les mêmes normes alors l'utilisateur verra le cout de sa formation à un nouveau produit reduit. Nous nous en rendons compte tous les jours : nous voulons faire un copier collé ? Qui ne connait pas Ctrl +C / Ctrl + V ? Qui ne sait pas que ces commandes se trouvent dans le menu "Edition" ? Qui ne sait pas que dans le menu Fichier précédent ce menu se trouve la commande pour quitter l'application ? Qui ne sait pas que la barre d'état se trouve toujours en bas d'une fenêtre ? Quelqu'un a t'il déjà vu le bouton Annuler à gauche du bouton Ok dans une fenêtre de confirmation ?

Toutes ces normes sont importantes dans un environement qui se veut professionnel. Mais dans le monde du jeu video l'ambiance et l'univers d'un jeu oblige les développeur à créer des widgets en conformité avec l'ambiance que doit dégager un jeu. Notre projet devra ainsi permettre à l'utilisateur de pouvoir créer sa propre skin, de pouvoir donner à un bouton, une combo box ou un slider l'aspect qu'il désire. Enfin et pour terminer sur les contraintes, nous devrons faire en sorte que le projet sois maléable et que l'ajout de nouveaux type de Widget soit d'une grande simplicité. Inutile de passer 80% du développement d'un jeu à créer des controles et seulement 20% consacré à la réalisation du jeu en lui-même.

Imagineriez vous cet écran avec les boutons Winsows classiques ?

et celui-ci avec les boutons d'age of empire ?

Utilisation du projet

Jusqu'à trois projets sont nécessaires pour utiliser une interface utilisateur en Xna. Le premier projet correspond à notre API graphique. Il contient la définition des différents Widgets et la skin de base des widgets. Pour information cette skin de base est la même que le sample de l'API DirectX. Le second projet est facultatif. Il contient la définition des Widgets customisés par l'utilisateur pour son jeu ainsi que la ou les skins adaptées à l'univers du jeu développé. Le troisième projet correspond au projet principal (contenant généralement la classe héritant de Game).

Comment fonctionne le premier projet ? Il ressemble en grande partie à l'assembly System.Windows.Form (en plus simple toutefois). L'assembly repose principalement sur la classe Control dont hérite tous les Widgets. Elle contient la plupart des membres, événements et méthodes utilisés par les développeurs Winforms. La classe UIManager est responsable de la gestion de l'interface utilisateur sur la surface de rendu Xna. C'est à elle qu'on rajoute les contrôle situés sur le Z-index le plus bas. Cette classe s'occupe en interne des différents rouages qui gèrent la souris, le clavier et les interractions avec les contrôles. Le troisième élément important correspond au répertoire Configuration. Il contient le schéma définissant le fichier Xml de définition de Widget et de Skin. Il contient de même un fichier par défaut (pour l'interface et les Widgets de base). On y trouve enfin un fichier xsl. Ce fichier permet la transformation d'un fichier Xml en un ensemble de classe métier utilisable par le développeur s'occupant de l'interface graphique. Deux outils s'occupent de cette transformation : msxsl.exe et xsd.exe. Ils sont eux aussi inclus dans ce repertoire.

Fichier de configuration

Le fichier de configuration permet de réaliser des skins pour donner diverses apparences à ses objets. La définition d'un bouton se fait ainsi :

</Elements>

</Instructions>

</Event>

</Instructions>

</Event>

Désolé pour l'affichage chaotique, mais le blog ne permet plus l'ajoute de text ordonné :/

Si on analyse ce code Xml, on se rend compte que la portion de code réalise plusieurs travaux. En plus de définir un control nommé Bouton elle :

Créé un ensemble d'élément issu d'une texture donnant un aspect au bouton (la skin)
Spécifie des éléments par défaut (largeur, hauteur ...)
Créé des instructions qui repondent à des événements

Cette portion de Xml couplé à l'outil msxsl.exe et au fichier xsl génère une classe en sortie dans le fichier Widget.Designer.cs :

/// <summary>
/// <para>Defines a Button.</para>

/// </summary>

public partial class Button : Control

{

/// <summary>

/// <para>Instanciate a new <see cref="Button"/> object.</para>

/// </summary>

public Button()

{

this.Bounds = new Rectangle(0, 0, 75, 23);

}

public override void Update()

{

base.Update();

//Manage instructions for each events

if (GetState((int)States.MouseOver))

{

//add instructions

this.OffsetX = -1;

this.OffsetY = -2;

this.ForeColor = Color.Black;

}

if (GetState((int)States.Pressed))

{

//add instructions

this.OffsetX = 1;

this.OffsetY = 2;

this.ForeColor = Color.White;

}

if (GetState((int)States.Normal))

{

//add instructions

this.ForeColor = Color.Black;

}

public override void Load(Microsoft.Xna.Framework.Graphics.GraphicsDevice device)

{

base.Load(device);

//add skins

this.Elements.Add(new Element( "BackFocused", "GenericTexture", "", new Microsoft.Xna.Framework.Rectangle(0, 0, 136, 54), States.Focused, new Color((byte)255, (byte)255, (byte)255, (byte)255)));

this.Elements.Add(new Element( "FrontFocused", "GenericTexture", "", new Microsoft.Xna.Framework.Rectangle(136, 0, 116, 54), States.Focused, new Color((byte)255, (byte)255, (byte)255, (byte)255)));

this.Elements.Add(new Element( "BackNormal", "GenericTexture", "", new Microsoft.Xna.Framework.Rectangle(0, 0, 136, 54), States.Normal, new Color((byte)255, (byte)255, (byte)255, (byte)140)));

this.Elements.Add(new Element( "FrontNormal", "GenericTexture", "", new Microsoft.Xna.Framework.Rectangle(136, 0, 116, 54), States.Normal, new Color((byte)255, (byte)255, (byte)255, (byte)0)));

this.Elements.Add(new Element( "BackMouseOver", "GenericTexture", "", new Microsoft.Xna.Framework.Rectangle(0, 0, 136, 54), States.MouseOver, new Color((byte)0, (byte)0, (byte)0, (byte)255)));

this.Elements.Add(new Element( "FrontMouseOver", "GenericTexture", "", new Microsoft.Xna.Framework.Rectangle(136, 0, 116, 54), States.MouseOver, new Color((byte)255, (byte)255, (byte)255, (byte)153)));

this.Elements.Add(new Element( "BackPressed", "GenericTexture", "", new Microsoft.Xna.Framework.Rectangle(0, 0, 136, 54), States.Pressed, new Color((byte)255, (byte)255, (byte)255, (byte)217))); this.Elements.Add(new Element( "FrontPressed", "GenericTexture", "", new Microsoft.Xna.Framework.Rectangle(136, 0, 116, 54), States.Pressed, new Color((byte)0, (byte)0, (byte)0, (byte)64)));

}

Cette classe est générée à chaque build par l'intermédiaire d'un prebuild event ajouté aux propriétés du projet :

"$(ProjectDir)Configuration\msxsl.exe" "$(ProjectDir)Configuration\StandardUI.xml" "$(ProjectDir)Configuration\configuration.cs.xslt" -o "$(ProjectDir)Widgets.Designer.cs"

Pour le reste une étude du code qui reste simple vaut mieux que plusieurs milliers de lignes d'explications.

Ajouter une interface graphique

Nous voilà enfin sur le terrain pour tester notre produit. L'exercice reste simple, il nous faut d'abord ajuter une référence vers le projet Arcane.Xna.Windows.Form. Puis créer dans le contreur un UIManager (le fameux manageur de controle). Ce manager se créé à l'aide d'un objet de type GameServicesContainer :

_uiContainer = new UIManager(this.Services);

Lorsque l'objet est créé dans la méthode Initialize on le charge et on ajoute alors de la même manière qu'en Winform l'ensemble de ses contrôles :

private void InitializeUI()

{

_uiContainer.Load();

//Stream stream = Assembly.GetAssembly(typeof(Arcane.Xna.Windows.Form.Custom.Class1)).GetManifestResourceStream("Arcane.Xna.Windows.Form.Custom.Configuration.MyGameUI.xml");

//_uiContainer.LoadCustomUI(stream);

for (int i = 0; i < 15; i++)

{

Button z = new Button();z.Location = new Point(0, 23 + 23 * i);

_uiContainer.Controls.Add(z);

}

textBox = new TextBox(); textBox.BackColor = Color.DarkRed;

//t.Location = new Point(300, 300);

textBox.Bounds = new Rectangle(100, 300, 200, 30);textBox.TextChanged += new EventHandler(t_TextChanged);

_uiContainer.Controls.Add(textBox);

label = new Label();

label.Bounds = new Rectangle(400, 50, 75, 30);

label.Click +=new EventHandler(label_Click);

this._uiContainer.Controls.Add(label);

this.IsMouseVisible = true;

bouton = new Button();

bouton.Width *= 2;

bouton.Location = new Point(200, 200);

bouton.MouseDown += new MouseEventHandler(button_MouseDown);

bouton.Text = "Click on me";

_uiContainer.Controls.Add(bouton);

}

Deux étapes restent encore : l'appel à la méthode Update du manager et l'appel à la sa méthode Draw. Au final on obtient à l'affichage :

On y voit une douzaine de bouton, une texbox et un label. Une partie de ces controles interragit avec l'utilisateur par l'intermédiaire d'événements.

Vous pouvez télécharger le sample ici.

Le projet en téléchargement est en cours de développement et peux souffrir de bugs dus à l'absence d'autres composants en cours de développement où du fait que je ne peux pas penser à tout :p

Merci néanmoins de me préciser les problèmes que vous pouvez rencontrer.

Lorsque le projet sera terminé, la présente annexe sera grandement etoffée pour expliciter au mieux ce projet.

23/05/2007

TextBox

correction bug sur l'entrée de certains caractères
Ajout des propriétés SelectionStart, SelectionLength, SelectionText
Amélioration de la selection de text
Correction bug selection de text rémanente quand on tape du texte
TextBox rendue plus indépendante de Control
Selection de texte avec Shift et fleches
Ajout propriété TextLength
Ajout propriété MaxLength
Gestion touches Home et End (avec shift ou non)

UIGénérale

correction bug sur la touche Tab pour passer d'un control à un autre (et donc Shift Tab aussi)

Control

Ajout d'events FontChanged, SizeChanged, LocationChanged

Bug trouvé à corriger

Si on clique sur un control et qu'on relache sur un autre, cet autre est selectionné

24/05/2007

Label

Correction d'un bug sur le backcolor
Le label prend la taille du text qu'il contient désormais

Radiobutton

Ajout d'un nouveau controle : le RadioButton

Panel

Ajout d'un nouveau controle : le panel (obligatoire pour grouper les Radio et Check Buttons par parents communs)

General

Gestion parent/enfant améliorée
gestion de position absolute / relatif

COnfiguration

Possibilité de rajouter une description aux widgets
Les effets sont optionnels
Ajout d'un nouvel etat : None

Bug :

correction d'un bug sur la selection avec *** + fleche

Bug dans la sauvegarde du state du device corrigé

25/05/07

Checkbox

Ajout d'un nouveau controle : la Checkbox

ComboBox

Ajout d'un nouveau controle : la combobox (en cours de développement)

TextBox

Ajout de la propriété ReadOnly

Control

Ajout des méthodes protected d'accès aux events got et lost focus
Ajout d'une propriété ControlStyles pour gérer l'affichage

General

Ajout d'un nouvel evenement mouseenter et mouseleave

01/06/07

UserInterfaceManager

Nouveau non de uicontainer
Hérite de GameComponent
Simplification de la syntaxe

GameCanvas

Nouveau controle Gamecanvas
Game canvas peut être focused
Game cavas repond seul à l'évent sizechanged

ListControl

Ajout d'un nouveau control : le listcontrol, parent de combobox et de listbox

ComboBox

Gestion du texte dans la combobox
ajout propriété selectedindex
ajout propriété sorted
ajout propriété index

ScrollBox

Ajout d'un nouveau control : la scrolbox

TextBox

Ne gère plus le clavier mais ecoute le keybord manageur
Ajout d'une propriété HideSelection

Control

Ajout des méthodes protected d'accès aux events got et lost focus
Ajout d'une propriété ControlStyles pour gérer l'affichage
Ajout d'un nouvel event : DeviceLoaded
Gestion du Visible

General

Ajout d'un manageur pour Keyboard et Mouse
Gestion de l'event KeyPress
Les controls sont visibles en tant que composants possibilité d'utiliser le designer de Visual Studio
Reponse à l'event check pour le checkbox afin de cacher/afficher le panel
Meilleur gestion de l'update
Gestion d'update et Render avec ou sans GameTime en parametre.

Bug

Selection a la souris impossible
Bouton cliqué sur un control et relaché en dehors donnait le focus au control sur lequel le bouton était relaché

Retourner au sommaire des cours

Fenêtre de création de projets vide sous Visual Studio 2005

valentin — Wed, 04 Apr 2007 09:29:00 GMT

Je ne sais pas si ca vous est déjà arrivé mais moi oui. En gros après l'installation d'un produit qui ajoute des extensions à Visual Studio 2005 on se retrouve avec la fenêtre de création de projets complètement vide : plus aucun template (exit Application Windows, Class Library, Web Site etc.). Souvent, il ne reste d'ailleur que les templates liés à l'extension qu'on vient de mettre (supppeeeer).

On se retrouve donc complètement bloqué. J'ai eu ce problème plusieurs fois, notamment avec WWF, Ajax et VSTO. C'est peut être moi qui opère mal,en tout cas, je me souviens que je n'étais pas le seul sur le net lorsque le problème s'est présenté la première fois.

Je viens d'aider deux personnes qui ont eu cette *** et je me suis dis qu'il serait cool de placer une solution en Francais sur le net, la voici :

Il suffit tout simplement d'aller dans Tools/Options/Environmet/International Settings/Language. A priori par défaut vous avez en langage celui de Windows. Changez ce langage pour English. Fermez Visual Studio et reouvrez le. Normalement tout est rétabli.

A l'époque de 2003 je me souviens d'un deven.exe /installvstemplates mais si cette option ne plante pas, elle ne change rien à ce problème.

Pas la peine de me demander le pourquoi du comment : je ne sais pas pourquoi ca rétabli tout :)

A bientôt sur ce Blog !