Pour déboguer un programme à l’aide de XNA dans Silverlight5

Page mise à jour :
Date de création de la page :

Les explications sont expliquées dans l’ordre dès la création du projet, veuillez donc sauter les parties que vous comprenez.

Tout d’abord, créez une application Silverlight. Dans le menu Visual Studio, choisissez Fichier, Nouveau, Projet.

プロジェクトの新規作成

Sélectionnez Application Silverlight.

Silverlight アプリケーションを選択

En ce qui concerne l’hébergement de sites Web, veillez à spécifier le site que vous souhaitez héberger. Les pages de test générées automatiquement lors du débogage dans Silverlight seul ne peuvent pas exécuter de programmes XNA utilisant le GPU. (Toutefois, cela ne s’applique pas lorsque vous créez manuellement une page de test.)

ホストする Web サイトの作成

Une fois le projet créé, cliquez avec le bouton droit sur Références dans l’application Silverlight et sélectionnez Ajouter une référence.

参照の追加

Sélectionnez « Assemblage » et « Cadre » dans le menu de gauche et vérifiez les éléments suivants. (N’appuyez pas encore sur le bouton OK)

  • Microsoft.Xna.Framework
  • Microsoft.Xna.Framework.Graphics
  • System.Windows.Xna

参照するアセンブリを選択

Ensuite, sélectionnez « Avancer » dans le menu de gauche, vérifiez les éléments suivants et appuyez sur le bouton OK.

  • Microsoft.Xna.Framework.Graphics.Extensions
  • Microsoft.Xna.Framework.Math

Nous avons sélectionné le minimum nécessaire pour exécuter un programme XNA, sélectionnez donc l’assemblage à référencer en fonction de vos besoins.

参照するアセンブリを選択

Une référence à l’assemblage est ajoutée.

参照一覧

Ensuite, nous allons modifier le code. Cette fois, seules les informations minimales indiquant si le programme XNA a fonctionné correctement sont décrites.

À partir de votre application Silverlight, ouvrez MainPage.xaml et ajoutez le code suivant :

<Grid x:Name="LayoutRoot" Background="White">
  <!-- 追加ここから -->
  <DrawingSurface Draw="DrawingSurface_Draw" />
  <TextBlock x:Name="textBlockMessage"/>
  <!-- 追加ここまで -->
</Grid>

DrawingSurface est la zone vers laquelle le programme XNA dessine. Lorsqu’il est exécuté, l’événement Draw se produit à plusieurs reprises, alors décrivez le processus de dessin ici. Cette fois, je ne dessinerai que la couleur de fond afin que vous puissiez voir si cela fonctionne correctement.

textBlockMessage est utilisé pour afficher du texte si un programme XNA fonctionne correctement ou non. Cette fois, je le mets pour le confirmer, donc je n’en ai pas besoin dans la version réelle.

Ouvrez ensuite le fichier « MainPage.xaml.cs ». Tout d’abord, trions les parties utilisées. L’espace de noms de l’application Silverlight est spécifié, nous allons donc le modifier pour XNA. Lors de sa création, veuillez le définir en fonction de votre application.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
//using System.Windows.Input;
//using System.Windows.Media;
//using System.Windows.Media.Animation;
//using System.Windows.Shapes;

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using System.Windows.Graphics;

Ensuite, lorsque vous démarrez, vous souhaitez afficher le mode de fusion actuel et la raison pour laquelle vous n’avez pas pu dessiner dans le texte. Je l’écris dans le constructeur parce que je sais quand l’application Silverlight est lancée.

public MainPage()
{
  InitializeComponent();

  textBlockMessage.Text
    = string.Format("RenderMode:{0}\r\nRenderModeReason:{1}",
                    GraphicsDeviceManager.Current.RenderMode.ToString(),
                    GraphicsDeviceManager.Current.RenderModeReason);
}

Écrivez le processus de dessin. Dans ce cas, nous voulons simplement que XNA Framework dessine l’arrière-plan lorsque l’événement de dessin se produit.

private void DrawingSurface_Draw(object sender, DrawEventArgs e)
{
  GraphicsDeviceManager.Current.GraphicsDevice.Clear(new Color(0x64, 0x95, 0xED));
}

Exécutons le débogage.

デバッグ実行。

Lorsque vous l’exécutez, il sera affiché comme indiqué dans la figure. RenderMode : Non disponible n’autorise pas le rendu matériel, RenderModeReason:GPUAccelerationDisabled désactive le rendu GPU. Il s’agit d’un problème côté serveur, vous devez donc d’abord l’activer.

描画ができない

Ouvrez le fichier < nom de projet>TestPage.aspx du projet ASP.NET hébergé dans la version Silverlight.

TestPage.aspx を開く

Ajoutez « EnableGPUAcceleration » au paramètre de l’objet et définissez la valeur sur « true ». Cela donne au côté serveur l’autorisation pour cette application Silverlight d’utiliser le GPU. (En fait, il est résolu par le traitement client, mais comme c’est le serveur qui génère du code HTML, il s’agit d’un problème côté serveur.)

<body>
  <form id="form1" runat="server" style="height:100%">
    <div id="silverlightControlHost">
      <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
        <param name="source" value="ClientBin/DebugXna.xap"/>
        <param name="onError" value="onSilverlightError" />
        <param name="background" value="white" />
        <param name="minRuntimeVersion" value="5.0.61118.0" />
        <param name="autoUpgrade" value="true" />
        <!-- 追加ここから -->
        <param name="EnableGPUAcceleration" value="true" />
        <!-- 追加ここまで -->
        <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration:none">
          <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Microsoft Silverlight の取得" style="border-style:none"/>
        </a>
      </object>
      <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
    </div>
  </form>
</body>

Si vous essayez de l’exécuter avec cela, il ressemblera à la figure. RenderModeReason est désormais SecurityBlocked. En effet, le dessin GPU n’est pas autorisé par défaut pour des raisons de sécurité. Comme il s’agit d’un problème client, en plus d’exécuter le débogage, vous devez également demander à l’utilisateur d’effectuer les étapes suivantes pour permettre au GPU de dessiner.

RenderModeReason が SecurityBlocked に変化

Pour autoriser le rendu GPU, cliquez avec le bouton droit sur l’application Silverlight et choisissez Silverlight dans le menu.

Silverlight を選択

Dans la boîte de dialogue qui s’ouvre, sélectionnez l’onglet « Autorisations », sélectionnez le site approprié, puis cliquez sur le bouton « Autoriser ».

アクセス許可

Lorsque l’autorisation est « Autoriser », cliquez sur le bouton OK.

アクセス許可が「許可」に代わる

Si vous déboguez pendant le débogage, l’actualisation du navigateur ne prend pas effet, donc si vous fermez le navigateur et l’exécutez à nouveau, vous verrez que RenderMode devient dessin matériel et que le dessin d’arrière-plan XNA est également activé. Maintenant, vous pouvez créer des programmes XNA à votre guise.

ハードウェアによる描画が有効