先日、私はこの投稿をWindows Phone向けの開発用資料のリストとともに見てきましたが、残念ながら、SilverlightとXNAの両方を同時に使用したアプリケーションの開発に関する記事は1つも見ませんでした。 開発者にとってのこの素晴らしい機会は、マンゴーの到来によってもたらされました。

このギャップを埋めて、次のことを説明したかったのです。

• 同じページでSilverlightとXNAを使用する
• XNAで最もシンプルなジェスチャー処理
• XNAカメラの基本

この記事の例は、スタスパブロフのイブニングスクールの最初のストリームの訪問者にはおなじみかもしれません

まず、1つのアプリケーションでSilverlightとXNAを使用できるものを見てみましょう。

これは開発者に何を与えますか？

まず、ゲーム開発者には次の機能があります。

• Silverlightのコントロールを使用したクイックUI作成
• ナビゲーションサービスを使用したページ間の便利なナビゲーション
• WebClientを使用してさまざまなソーシャルサービスを統合する
• Expression Blendでインターフェイスを作成する

また、すべてのページがSilverlightとXNAの両方を組み合わせる必要があるわけではないことに注意してください。 また、この機能はゲーム開発者だけでなく役に立つという事実にも注意を喚起したいと思います。 たとえば、XNAには素晴らしい組み込みのジェスチャサポートがあり、テクスチャを操作するための非常に便利な方法があります。 SilverlightとXNAを使用した優れた非ゲームアプリケーションの例は、 Holiday Photoです。

方法：最初のSilverlight + XNAアプリケーションの開発

例として、私は非常に有名な数学ゲームLifeを選びました。これはHabré（ 1、2、3、および他の多く）で繰り返し書かれています。 要するに、ゲームは「ゼロプレーヤーゲーム」です。つまり、プレーヤーは初期状態のみを設定します。 さらに、各世代の各セルの状態は、かなり単純な規則に従って、周囲の8つのセルの状態に基づいて計算されます。

2つの配列を使用する最も単純なアルゴリズムを使用することをすぐに予約したいのですが、これはアルゴリズムとデータ構造に関する投稿ではありません。 したがって、最適かつ高速なアルゴリズムの実装は、宿題の1つになります。

ステップ1.プロジェクトの作成とインターフェースのレンダリング

新しいプロジェクトを作成するときは、 「Windows Phone SilverlightおよびXNAアプリケーション」を選択する必要があります。 2 つの MainPageページとGamePageページで新しいプロジェクトが作成されます 。



MainPage -Silverlightアプリケーションの通常のページ。「ゲームページに変更」ボタンがあり、クリックするとGamePageページが開きます 。

GamePageは単なるXNAページです。 xamlファイルの内容を見ると、ページレイアウトの代わりに1行しかありません。

<!--No XAML content is required as the page is rendered entirely with the XNA Framework-->
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、このページにコントロールを追加する場合、このコメントをコードに置き換える必要があります。これを行うには、 [開始 ]ボタンを配置します。

 <Grid Name="Layout" LayoutUpdated="Layout_LayoutUpdated"> <Button Content="Start" Height="71" Name="button1" Width="160" Margin="25,717,295,12" Click="button1_Click" /> </Grid>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プロジェクトを開始し、「 ゲームページに変更 」ボタンを押して、ブルースクリーンのみを表示します。ボタンはどこにもありません。 しかし、心配する必要はありません。今すぐ修正します。



GamePage.xaml.csファイルを開きます。このファイルには、XNAアプリケーションのすべてのロジックが含まれています。 Silverlight要素を表示するには、特別なUIElementRendererオブジェクトを作成する必要があります。

 UIElementRenderer uiRenderer;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

描画サイクルでは、インターフェイスをレンダリングして描画する必要があります。

 private void OnDraw(object sender, GameTimerEventArgs e) { SharedGraphicsDeviceManager.Current.GraphicsDevice.Clear(Color.White); uiRenderer.Render(); spriteBatch.Begin(); spriteBatch.Draw(uiRenderer.Texture, Vector2.Zero, Color.White); spriteBatch.End(); // TODO: Add your drawing code here }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

お気づきかもしれませんが、uiRendererオブジェクトを作成しましたが、どこでも初期化しませんでした。 これを行う最善の方法については、いくつかの観点があります。 インターフェイスの更新をキャッチしてレンダラーを確認し、存在しない場合や一貫性がない場合は、再作成します。



GamePage.xaml

 <Grid Name="Layout" LayoutUpdated="Layout_LayoutUpdated">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

GamePage.xaml.cs

 private void Layout_LayoutUpdated(object sender, EventArgs e) { int width = (int)ActualWidth; int height = (int)ActualHeight; // Ensure the page size is valid if (width <= 0 || height <= 0) return; // Do we already have a UIElementRenderer of the correct size? if (uiRenderer != null && uiRenderer.Texture != null && uiRenderer.Texture.Width == width && uiRenderer.Texture.Height == height) { return; } // Before constructing a new UIElementRenderer, be sure to Dispose the old one if (uiRenderer != null) uiRenderer.Dispose(); // Create the renderer uiRenderer = new UIElementRenderer(this, width, height); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでプロジェクトを再度実行します。 ご覧のとおり、ボタンが適切な場所に表示されます。 競技場を描きましょう。

2. XNA出力

フィールドが100x100セル、各セルが30x30ピクセルになることに同意しましょう。 合計フィールドは3000x3000ピクセルになります。

Areaクラスを作成します。

 public class Area { Texture2D point; Rectangle line; public Area(Texture2D point) { this.point = point; } public void Draw(SpriteBatch spriteBatch) { for (int i = 0; i < 100; i++) { line = new Rectangle(i*30, 0, 1, 3000); spriteBatch.Draw(point, line, Color.White); line = new Rectangle( 0, i*30, 3000, 1); spriteBatch.Draw(point, line, Color.White); } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

XNAには線を描画する方法はありませんが、任意の色またはテクスチャで塗りつぶされた長方形を描画できます。 ここでは、1x1サイズの黒い点を含むポイントテクスチャで塗りつぶされた100本の水平線と100本の垂直線を作成します。



GamePage.xaml.csでフィールドを作成して初期化します。

 Texture2D point; Area area;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

XNAとSilverlightを一緒に使用する場合、純粋なXNAアプリケーション（LoadContent）のように、コンテンツをロードするために別のメソッドを使用する必要はありません。 通常、ゲームコンテンツはいつでもダウンロードできますが、グラフィックコンテンツの読み込み中にアプリケーションがXNAレンダリングモードになっていることを確認する必要があります（SetSharingModeメソッドを呼び出して）。 Silverlightレンダリング中にグラフィックコンテンツをロードしようとすると、例外がスローされます。 ContentManagerを作成したら、いつでも非グラフィックコンテンツをダウンロードできます。 通常、OnNavigatedToメソッドでコンテンツをロードします。

 protected override void OnNavigatedTo(NavigationEventArgs e) { // Set the sharing mode of the graphics device to turn on XNA rendering SharedGraphicsDeviceManager.Current.GraphicsDevice.SetSharingMode(true); // Create a new SpriteBatch, which can be used to draw textures. spriteBatch = new SpriteBatch(SharedGraphicsDeviceManager.Current.GraphicsDevice); // TODO: use this.content to load your game content here point = contentManager.Load<Texture2D>("point"); area = new Area(point); // Start the timer timer.Start(); base.OnNavigatedTo(e); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

OnDrawメソッドでフィールドを描画します。

 private void OnDraw(object sender, GameTimerEventArgs e) { SharedGraphicsDeviceManager.Current.GraphicsDevice.Clear(Color.CornflowerBlue); uiRenderer.Render(); spriteBatch.Begin(); area.Draw(spriteBatch) spriteBatch.End(); spriteBatch.Begin(); spriteBatch.Draw(uiRenderer.Texture, Vector2.Zero, Color.White); spriteBatch.End(); // TODO: Add your drawing code here }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、別のspriteBatchにフィールドを描画します。 なぜそうなのか-少し後で説明します。



アプリケーションを起動します。これで、ボタンフィールドに感心することができます。

表面的な小さな変更を行いましょう。ボタンの下に半透明のバッキングを追加し、フィールドを白にします。

GamePage.xaml：

 <Grid Name="Layout" LayoutUpdated="Layout_LayoutUpdated"> <Rectangle Height="100" HorizontalAlignment="Left" Margin="0,700,0,0" Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="480" Fill="#B1000000" /> <Button Content="Start" Height="71" Name="button1" Width="160" Margin="25,717,295,12" Click="button1_Click" /> <Button Content="1 gen" Height="72" HorizontalAlignment="Left" Margin="254,716,0,0" Name="button2" VerticalAlignment="Top" Width="160" Click="button2_Click" /> </Grid>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

GamePage.xaml.cs：

 private void OnDraw(object sender, GameTimerEventArgs e) { SharedGraphicsDeviceManager.Current.GraphicsDevice.Clear(Color.White); uiRenderer.Render(); ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3.ジェスチャーを操作する

XNA Frameworkは10種類のジェスチャをサポートしていますが、それらについての話は別の記事に値します（必要に応じて作成します）。 このアプリケーションでは、タップ（クリック）とFreeDrag（自由移動）の2種類のジェスチャを使用します。

まず、フィールドにポイントを追加することから始めましょう。 ここではDotsクラスの完全なコードを提供したくありません。記事の下部にある例をダウンロードして、自分で確認できます。 ここでは、ポイントを追加するために使用されるAddDotメソッドのみに関心があります。

 public void AddDot(int x, int y, Vector2 shift) { DotX = (int)(x / DotSize ); DotY = (int)(y / DotSize ); DotsNow[DotX, DotY] = !DotsNow[DotX, DotY]; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この方法では、タッチポイントの座標を転送し、それに基づいてマトリックス内の目的のセルを計算します。 すべてがシンプルです。



まず、OnNavigatedTo（）メソッドでジェスチャサポートを有効にする必要があります。

 TouchPanel.EnabledGestures = GestureType.Tap | GestureType.FreeDrag;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

OnUpdateループでそれらを追跡できるようになりました。

 private void OnUpdate(object sender, GameTimerEventArgs e) { while (TouchPanel.IsGestureAvailable) { GestureSample gesture = TouchPanel.ReadGesture(); if (gesture.GestureType == GestureType.Tap) { dots.AddDot((int)gesture.Position.X, (int)gesture.Position.Y); } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

OnDraw（）メソッドの画面に生細胞を表示することを忘れないでください：

 dots.Draw(spriteBatch);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでアプリケーションを起動してポイントを追加しようとすると、すぐに消えます。 この理由は、更新速度です。 dots.Update（）の呼び出しには多少の遅延が必要です。 私の例では、この遅延の最も簡単な実装は次のとおりです。

 i++; if (IsGameStarted && Math.IEEERemainder(i, 15) == 0) { i = 0; dots.Update(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

IsGameStartedは、[スタート]ボタンをクリックすると値が変わるフラグです。 2番目の宿題は、GameTimeクラスを使用して遅延を実装することです。

これで完全に機能するゲームができましたが、フィールドのほんの一部しか見えません。 これを修正するには、フィールド内を移動する機能を追加します。

4.カメラでの作業

最も簡単な近似では、カメラはゲーム世界を画像の形で画面に投影するマトリックスです。 Matrixクラスには、CreateScale（）、CreateTranslation（）、CreateRotationX（）など、多くの関連メソッドがあります。 CreateTranslation（）だけが必要です。 最初に、ゲームワールドを移動し、マトリックスを作成するために必要な量を見つけます。

 while (TouchPanel.IsGestureAvailable) { GestureSample gesture = TouchPanel.ReadGesture(); if (gesture.GestureType == GestureType.Tap) { dots.AddDot((int)gesture.Position.X, (int)gesture.Position.Y, totalShift); } if (gesture.GestureType == GestureType.FreeDrag) { shift = gesture.Delta; totalShift += shift; } } matrix *= Matrix.CreateTranslation(totalShift.X, totalShift.Y, 0);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、新しい投影を描く必要があります。 これを行うには、マトリックスをspriteBatchに渡します。

 spriteBatch.Begin(SpriteSortMode.Deferred, null, null, null, null, null, matrix); area.Draw(spriteBatch); dots.Draw(spriteBatch); spriteBatch.End();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そのため、2番目のspriteBatchが必要でした。1つですべてレンダリングすると、ボタンもフィールドとともに移動しますが、フィールドは必要ありません。 宿題-ゲームとインターフェイスのレンダリングを1つのspriteBatchに配置するとどうなるかを確認します。

1つの問題が残っています-ポイントを追加するときにカメラのシフトを考慮しません。 これは単純に解決され、totalShiftもAddDot（）メソッドに渡す必要があります。

 public void AddDot(int x, int y, Vector2 shift) { DotX = (int)(Math.Abs(x-shift.X) / DotSize ); DotY = (int)(Math.Abs(y-shift.Y) / DotSize ); DotsNow[DotX, DotY] = !DotsNow[DotX, DotY]; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、必要な場所にポイントが追加されます。 宿題：フィールドの外側に生細胞を追加しようとすると、まだ間違った反応があります：ミラーポイントに追加するか、アレイの境界を越えるかのいずれかです。 フィールドの境界を越えることを不可能にします。



チェシャ猫

おわりに

実際、それだけです。 Windows Phoneと宿題の完全に機能するゲームLifeがあり、その上で数時間頭を痛めることができます。 生成カウンター、ランダム充填など、さまざまなパンを作成することもできます。 SilverLifeというマーケットプレイスで私の最終バージョンを見つけることができます。



アプリケーションソースをダウンロードします 。



良いお正月をお過ごしください！