Clever Geek Handbook

Microsoft XNA：段階的なアルカノイド

数日前、偉大で強力なインターネットの広大な広がりを耕し、Microsoft XNA Studioに出会いました。 初めてこのフレームワークについて聞いたわけではありませんが、以前のすべての時間はどういうわけか通り過ぎましたが、理解する時間はまったくありませんでした。

今回、何かが私をより深く掘り下げた。 ライブラリを知るために何かを実装するよりも良い方法はないと判断し、自由な夜を過ごすために、私は単純なものを書くことにしました。例えば、自分の興味のためではなく、知り合いのために、子供時代の私のお気に入りのアルカノイド（ブリックアウト）を書くことにしました。



これはハーバーに関する私の最初の記事です。



この記事の意味は、XNAを使用してゲームの作成を開始することがいかに簡単かを示すことであり、実際、このプラットフォームをさらに研究するためのインセンティブを提供することです。 したがって、それは本格的なゲームのふりをするものではなく、グラフィックは私からのアーティストのようなものではありません。 物理学はより現実的かもしれませんが、これはこの記事の範囲を超えています。ゲーム開発に興味がある人は、ネットワーク上で多くの価値のある（そうではない）資料を見つけると確信しています。



ソースはここからダウンロードできます







それでは、Microsoft XNAとは正確には何ですか？



Microsoft XNAは、Microsoft Managed Runtime Environmentでマルチプラットフォームの2Dおよび3Dゲームを開発するためのツールキットおよびライブラリです。 サポートされるプラットフォームは、Windows、Microsoft Xbox 360、およびMicrosoft Zuneです。 理論的には、任意の.Net言語、任意のIDEで記述できますが、正式にサポートされているのはC＃とXNA Game Studio ExpressおよびVisual Studio 2005以降のすべてのバージョンのみです。 XNAは、最小限の変更でサポートされているプラ​​ットフォームにゲームを移植する機能も提供します。



執筆時点での最新バージョンは、 Microsoft XNA Game Studio 3.1（73.2 MB）です。



プロジェクト作成





新しいプロジェクトを作成しましょう-XNA Game Studio 3.1-Windowsゲーム（3.1）



フォトバケット



ウィザードはゲームのスケルトンを作成します：







私たちにとって最大の関心事は、ゲームを開発するMicrosoft.Xna.Framework.Gameから継承されたGame1クラスを定義するGame1.csファイルです。

次のGameメソッドは、Game1クラスでオーバーライドされます。



void Initialize（）-ゲームが開始する前にリソースを初期化するために一度呼び出されます

void LoadContent（）-一度呼び出され、コンテンツ（スプライトなど）のロードに使用されます

void UnloadContent（）-一度呼び出され、コンテンツのアップロードに使用されます

void Update（GameTime gameTime）-このメソッドは、ゲームの実際のロジック、衝突処理、キーボードまたはジョイスティックイベントの処理、オーディオの再生などを実装します。

void Draw（GameTime gameTime）-競技場を描くために呼び出されます。



現時点では、コンパイルされたゲームは次のようになります







コンテンツを追加する





ゲームリソースを追加します。この場合、レンガ、ラケット、ボールの背景画像-コンテンツ（右クリック）->追加->既存のアイテム...







Asset Nameプロパティに注意してください。これを使用して、さらにアニメーションを作成するために必要なTexture2Dオブジェクトを作成します。



競技場の背景を描く





競技場の背景の画像をダウンロードします。



private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .



  1. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .



  2. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .



  4. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .



  5. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .



  6. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .



  7. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .



  8. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .



  9. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .



  10. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .



  12. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .



  13. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .



  14. private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .



private Rectangle _viewPortRectangle; // private Texture2D _background; // protected override void LoadContent() { <... skip ...> // _viewPortRectangle = new Rectangle(0, 0, graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height); _background = Content.Load<Texture2D>( @"background" ); <... skip ...> } * This source code was highlighted with Source Code Highlighter .







背景の描画







  1. 保護された オーバーライド void Draw（GameTime gameTime）
  2. {
  3. GraphicsDevice.Clear（Color.CornflowerBlue）;
  5. spriteBatch.Begin（SpriteBlendMode.AlphaBlend）;
  7. //背景を描きます
  8. spriteBatch.Draw（_background、_viewPortRectangle、Color.White）;
  10. spriteBatch.End（）;
  12. base .Draw（gameTime）;
  13. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




SpriteBatch.Beginメソッドは、スプライトをレンダリングするためにグラフィックデバイスを準備し、SpriteBatch.Endは描画プロセスを完了し、デバイスを初期状態に戻します。 すべてのSpriteBatch.Drawメソッドは、SpriteBatch.Begin-SpriteBatch.Endで囲む必要があります。



ゲームオブジェクトを作成する





ゲームオブジェクトのいずれかをカプセル化するGameObjectクラスを作成しましょう。







  1. Microsoft.Xna.Framework を使用 。
  2. Microsoft.Xna.Framework を使用します。 グラフィックス
  4. 名前空間アルカノイド
  5. {
  6. パブリック クラス GameObject
  7. {
  8. public Texture2D Sprite { 取得 ; セット ; } //スプライト
  10. パブリック Vector2の位置。 //位置
  11. パブリック Vector2 Velocity; //速度
  12. public int Width { get { return Sprite.Width; }} //幅
  13. public int Height { get { return Sprite.Height; }} //高さ
  14. パブリック ブール IsAlive { get ; セット ; } //オブジェクトは生きているか
  15. public Rectangle Bounds //オブジェクト境界
  16. {
  17. 得る
  18. {
  19. 新しい Rectangle（（ int ）Position.X、（ int ）Position.Y、Width、Height）;
  20. }
  21. }
  23. //水平軸に沿って動きを拡大
  24. public void ReflectHorizo​​ntal（）
  25. {
  26. Velocity.Y = -Velocity.Y;
  27. }
  29. //垂直軸に沿って動きを拡大します
  30. public void ReflectVertical（）
  31. {
  32. Velocity.X = -Velocity.X;
  33. }
  35. パブリック GameObject（Texture2Dスプライト）
  36. {
  37. スプライト=スプライト;
  38. IsAlive = true ;
  39. 位置= Vector2.Zero;
  40. 速度= Vector2.Zero;
  41. }
  42. }
  43. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




ラケットのレンダリングとアニメーション





最初に、ラケットを表すオブジェクトを作成し、それを競技場の中央から下端から少し高く配置します。







  1. プライベート GameObject _paddle; //ラケット
  3. 保護された オーバーライド void LoadContent（）
  4. {
  5. <...スキップ...>
  7. //ラケットを作成します。開始位置は競技場の中央、下端より高くなります
  8. _paddle = new GameObject（Content.Load <Texture2D>（ @ "paddle" ））;
  9. _paddle.Position = new Vector2（（_ viewPortRectangle.Width-_paddle.Width）/ 2、
  10. _viewPortRectangle.Height-_paddle.Height-20）;
  12. <...スキップ...>
  13. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




画面にラケットを描く







  1. 保護された オーバーライド void Draw（GameTime gameTime）
  2. {
  3. <...スキップ...>
  5. spriteBatch.Draw（_paddle.Sprite、_paddle.Position、Color.White）;
  7. <...スキップ...>
  8. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




この段階で、アプリケーションをコンパイルすると、次のようになります。







ラケットをキーストロークに応答させると便利です。このため、次のコードをUpdateメソッドに追加します







  1. 保護された オーバーライド void更新（GameTime gameTime）
  2. {
  3. <...スキップ...>
  5. KeyboardState keyboardState = Keyboard.GetState（）;
  7. //ラケットを右に移動
  8. if （keyboardState.IsKeyDown（Keys.Right））
  9. _paddle.Position.X + = 6f;
  11. //ラケットを左に移動します
  12. if （keyboardState.IsKeyDown（Keys.Left））
  13. _paddle.Position.X-= 6f;
  15. //ラケットの動きを競技場に制限する
  16. _paddle.Position.X = MathHelper.Clamp（_paddle.Position.X、0、_viewPortRectangle.Width-_paddle.Width）;
  18. <...スキップ...>
  19. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




レンガの描画





実際に壊すブリックを表すGameObject配列を作成します







  1. private int _brickPaneWidth = 10; //幅で描画する糸杉の数
  2. private int _brickPaneHeight = 5; //高さで描画する糸杉の数
  3. プライベート Texture2D _brickSprite; //レンガのスプライト
  4. プライベート GameObject [、] _bricks; //レンガの配列
*このソースコードは、 ソースコードハイライターで強調表示されました。




LoadContent（）メソッドに次のコードを追加します







  1. 保護された オーバーライド void LoadContent（）
  2. {
  3. <...スキップ...>
  5. //ブリックの配列を作成します
  6. _brickSprite = Content.Load <Texture2D>（ @ "brick" ）;
  7. _bricks = 新しい GameObject [_brickPaneWidth、_brickPaneHeight];
  9. for （ int i = 0; i <_brickPaneWidth; i ++）
  10. {
  11. for （ int j = 0; j <_brickPaneHeight; j ++）
  12. {
  13. _bricks [i、j] = 新しい GameObject（_brickSprite）
  14. {
  15. 位置= 新しい Vector2（i * 55 + 120、j * 25 + 100）
  16. };
  17. }
  18. }
  20. <...スキップ...>
  21. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




レンガの配列を描画し、レンガが「生きている」場合、つまりレンダリングが行われます。 ボールで壊れない







  1. 保護された オーバーライド void Draw（GameTime gameTime）
  2. {
  3. <...スキップ...>
  5. //レンガを描く
  6. foreach （_bricksのvar brick）
  7. if （brick.IsAlive）
  8. spriteBatch.Draw（brick.Sprite、brick.Position、Color.White）;
  10. <...スキップ...>
  11. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




この段階での競技場は次のとおりです







ボール描画





ボールオブジェクトを作成する







  1. プライベート GameObject _ball; //ボール
  3. 保護された オーバーライド void LoadContent（）
  4. {
  5. <...スキップ...>
  7. //ラケットの中央の初期位置であるボールを作成し、
  8. //方向を開始-右、上
  9. _ball = new GameObject（Content.Load <Texture2D>（ @ "ball" ））;
  10. _ball.Position = new Vector2（（_ viewPortRectangle.Width-_ball.Width）/ 2、
  11. _viewPortRectangle.Height-_paddle.Height-_ball.Height-20）;
  12. _ball.Velocity = new Vector2（3、-3）;
  13. <...スキップ...>
  14. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




ボールをアニメートするには、新しいUpdateBall（）メソッドを追加し、Update（）メソッドで呼び出します。 レンガとラケットとのボールの衝突を処理するために、今後このメソッドが必要になります







  1. プライベート void UpdateBall（）
  2. {
  3. _ball.Position + = _ball.Velocity;
  4. }
  6. 保護された オーバーライド void更新（GameTime gameTime）
  7. {
  8. <...スキップ...>
  10. //ボールを移動します
  11. UpdateBall（）;
  13. <...スキップ...>
  14. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




ボールを描くには、次のコードをDraw（）メソッドに追加します







  1. 保護された オーバーライド void Draw（GameTime gameTime）
  2. {
  3. <...スキップ...>
  5. //ボールを描く
  6. spriteBatch.Draw（_ball.Sprite、_ball.Position、Color.White）;
  8. <...スキップ...>
  9. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




現時点では、ほぼ完全に終了した競技場がありますが、衝突処理がなければ、ボールはすぐに競技場から飛び出します。 競技場、レンガ、ラケットにボール衝突処理を追加します



衝突処理





オブジェクトの衝突の場所を決定し、ボールの飛行方向を変更する新しいメソッドを作成します。







  1. //衝突の側面を特定し、ボールの飛行の方向を反映します
  2. public void Collide（GameObject gameObject、Rectangle rect2）
  3. {
  5. //オブジェクトは上下に衝突し、水平方向の飛行方向を反映します
  6. if （rect2.Left <= gameObject.Bounds.Center.X && gameObject.Bounds.Center.X <= rect2.Right）
  7. gameObject.ReflectHorizo​​ntal（）;
  9. //左右に衝突したオブジェクト、飛行方向を垂直に反映
  10. else if （rect2.Top <= gameObject.Bounds.Center.Y && gameObject.Bounds.Center.Y <= rect2.Bottom）
  11. gameObject.ReflectVertical（）;
  12. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




UpdateBall（）メソッドに次のコードを追加します







  1. プライベート void UpdateBall（）
  2. {
  3. //ボールの将来の位置。オブジェクトの表面にボールが「くっつく」のを防ぐ必要があります
  4. Rectangle nextRect = 新しい Rectangle（（ int ）（_ ball.Position.X + _ball.Velocity.X）、
  5. （ int ）（_ ball.Position.Y + _ball.Velocity.Y）、
  6. _ball.Width、_ball.Height）;
  8. //競技場の上端との衝突
  9. if （nextRect.Y <= 0）
  10. _ball.ReflectHorizo​​ntal（）;
  12. //ボールが競技場の下端に当たると、ボールは「死ぬ」
  13. if （nextRect.Y> = _viewPortRectangle.Height-nextRect.Height）
  14. {
  15. _ball.IsAlive = false ;
  16. }
  18. //競技場の左端または右端とボールの衝突
  19. if （（nextRect.X> = _viewPortRectangle.Width-nextRect.Width）|| nextRect.X <= 0）
  20. {
  21. _ball.ReflectVertical（）;
  22. }
  24. //ラケットとボールの衝突
  25. if （nextRect.Intersects（_paddle.Bounds））
  26. 衝突（_ball、_paddle.Bounds）;
  28. //レンガと衝突ボール
  29. foreach （_bricksのvar brick）
  30. {
  31. if （nextRect.Intersects（brick.Bounds）&& brick.IsAlive）
  32. {
  33. brick.IsAlive = false ;
  34. 衝突（_ball、brick.Bounds）;
  35. }
  36. }
  38. _ball.Position + = _ball.Velocity;
  39. }
*このソースコードは、 ソースコードハイライターで強調表示されました。




どうしたの







もちろん、ゲームには物理学はありません。控えめに言っても、ボールが動いているラケットと衝突すると、スティックすることがあります。 ただし、この記事の意味はMicrosoft XNA Game Studio環境に精通していることであり、このルーチンに対応しているため、開発者はゲームのロジックに集中することができます。



ソースはここからダウンロードできます



追加のリソース：

creators.xna.com

XNAWiki



PS。 招待してくれてありがとう。

PPS XNAに転送されたカルマをありがとう



テキストはHabraで準備されます


More articles:


All Articles