Знакомство с XNA и написание первой музыкальной игры

Привет всем начинающим геймдевелоперам и просто хорошим людям. Сегодня, я хочу познакомить вас с замечательным фреймворком XNA (набор инструментов с управляемой средой времени выполнения dotNet). Программировать мы будем на C#.
Для того, чтобы познакомить вас с XNA ближе, я предлагаю написать простую «музыкальную» 2D игрушку. Остальное под катом.

Краткое описание на википедии

Microsoft XNA (англ. XNA's Not Acronymed) — набор инструментов с управляемой средой времени выполнения (.NET), созданный Microsoft, облегчающий разработку и управление компьютерными играми. XNA стремится освободить разработку игр от написания «повторяющегося шаблонного кода»

Что для этого нам будет нужно?

1) Свежий DirectX (например Июнь 2010)
2) Microsoft Visual C# 2010 EXPRESS (бесплатная лицензия)
3) Microsoft XNA Game Studio 4.0

Что предполагается разобрать и сделать на этом уроке?

• Подключить сборки XNA Framework
• Создать пустое приложение с закрашиванием фона
• Научиться подгружать контент
• Научиться работать со звуком
• Научиться работать с графикой

Какую игру мы будем реализовывать?

Механика игры проста до безумия. Смысл будет построен на музыке, в случае с этой игрой, будет использована композиция Исаака Шепарда — Leaves in the Wind. Нужно будет ловить мышкой «ноты», скорость и кол-во которых будут зависимы от текущей позиции в музыки, грубо говоря игровой «визуализатор». Для разнообразия существуют 5 тип нот: обычные, красные (враги), пурпурные (мощь), мигающие (превращает все в желтые), желтые (увеличивает скорость набора очков и размеры).

Собираем вещи пустой проект

Для начала ставим все необходимые компоненты по порядку, затем запускаем Microsoft Visual C# 2010 EXPRESS и создаем проект Windows Game (4.0) и называем его music_catch:

Создается пустой проект, который при компиляции только чистит «экран» приложения, давайте более подробно рассмотрим структуру нового проекта.


Проект music_catch — «логика» нашего приложения.
Game1.cs — главный класс приложения, унаследован он от Microsoft.Xna.Framework.Game
Program.cs — «точка входа» в приложение, он нам не интересен.
Проект music_catchContent — «контент» нашего приложения, туда мы будем складывать ресурсы.

Более подробно взглянем на Game1.cs
В нем можно выделить основные функции, такие как:
Game1() — конструктор класса.
Initialize() — инициализация приложения.
LoadContent() — загрузка контента.
UnloadContent() — выгрузка контента.
Update(GameTime gameTime) — обновление логики приложения (например физики, etc)
Draw(GameTime gameTime) — отрисовка игры. ВНИМАНИЕ, любые операции с рисованием нужно проводить тут и только тут.

Пустой проект собран, идем дальше, добавляем ресурсы в приложение, все нужные ресурсы «кидаем» в папку music_catch\music_catchContent. В нашем случае — пять PNG файлов и одно музыкальное сопровождение. Добавляем это все в проект:



Там же создаем шрифт, в теле SpriteFont1.spritefont указываем имя и размер:

<FontName>Segoe UI Mono</FontName>
<Size>14</Size>

Создаем переменные для будущего контента:

private List<Texture2D> MelList;
private Texture2D mouse;
private Song song;
private SpriteFont font;

И грузим его в LoadContent():

MelList = new List<Texture2D>();
for(int a = 1; a <= 5; a++)
MelList.Add(Content.Load<Texture2D>("mel" + a));

mouse = Content.Load<Texture2D>("mouse");
song = Content.Load<Song>("Leaves_in_the_Wind");
font = Content.Load<SpriteFont>("SpriteFont1");

Кстати, подгружается контент следующим образом: вызывается Content.Load<>(«asset»);
В треугольных скобках указывается процессор контента, в нашем случае это Texture2D, Song, SpriteFont. Можно использовать свои процессоры, об этом я расскажу как-нибудь потом.

Контент подгружен, идем в конструктор Game1() и пишем:

graphics = new GraphicsDeviceManager(this);
           
graphics.PreferredBackBufferWidth = 800; // ширина приложения
graphics.PreferredBackBufferHeight = 600; // высота приложения
graphics.IsFullScreen = false; // флаг полноэкранного приложения
graphics.ApplyChanges(); // применяем параметры

Content.RootDirectory = "Content";

Приложение инициализировано.

Пишем «игровую логику»

Теперь нам нужно создать контроллер системы частиц и сами частицы (ноты), которые мы будем виртуозно ловить мышкой.
Создаем два класса: Catcher (сами частицы) и CatcherHolder (система частиц).

Листинг Catcher с комментариями:

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;

namespace MusicCatch
{
    public class Catcher
    {

        public Texture2D Texture { get; set; }        // Текстура частицы
        public Vector2 Position { get; set; }        // Позиция частицы
        public Vector2 Velocity { get; set; }        // Скорость частицы
        public float Angle { get; set; }            // Угол поворота частицы
        public float AngularVelocity { get; set; }    // Угловая скорость частицы
        public Color Color { get; set; }            // Цвет частицы
        public float Size { get; set; }                // Размер частицы
        public int TTL { get; set; }                // Время жизни частицы

        private float RComponent; // Красный компонент RGB
        private float GComponent; // Зеленый компонент RGB
        private float BComponent; // Синий компонент RGB
        public int type; // Тип частицы
        private Random random; // Генератор случайных чисел

        public Catcher(Texture2D texture, Vector2 position, Vector2 velocity,
            float angle, float angularVelocity, int type, float size, int ttl)
        {
		// Установка переменных из конструктора
            Texture = texture;
            Position = position;
            Velocity = velocity;
            Angle = angle;
            AngularVelocity = angularVelocity;
            this.type = type;
            Size = size;
            TTL = ttl;

            SetType(type); // Установка цвета под определенный тип

        }

        public void ApplyImpulse(Vector2 vector) // Добавление импульса (используется бонусом)
        {
            Velocity += vector;
        }

        public void Update() // Обновление единичной частички
        {
            TTL--;
            Position += Velocity;
            Angle += AngularVelocity;

            if (type != -1)
            {
                Velocity = new Vector2(Velocity.X, Velocity.Y - .1f);
                Size = (10 + Velocity.Y) / 20;
                if(Size > 0.8f) Size = 0.8f;
            } 

            if (type == 0)
            {
                GComponent -= 0.005f;
                BComponent += 0.005f;

                Color = new Color(RComponent, GComponent, BComponent);
            }
            else if (type == 4)
            {
                Color = new Color((float)(1f * random.NextDouble()), (float)(1f * random.NextDouble()), (float)(1f * random.NextDouble()));
            }
        }

        public void Draw(SpriteBatch spriteBatch) // Прорисовка частички
        {
            Rectangle sourceRectangle = new Rectangle(0, 0, Texture.Width, Texture.Height);
            Vector2 origin = new Vector2(Texture.Width / 2, Texture.Height / 2);

            spriteBatch.Draw(Texture, Position, sourceRectangle, Color,
                Angle, origin, Size, SpriteEffects.None, 0f);
        }

        public void SetType(int type) // Установка цвета частички
        {
            this.type = type;
            Color StartColor = new Color(1f, 1f, 1f);

            switch (type)
            {
                case 0: StartColor = new Color(0f, 1f, 0f); break; // Обычная
                case 1: StartColor = new Color(1f, 0f, 0f); break; // Красная
                case 2: StartColor = new Color(1f, 0f, 1f); break; // Пурпурная
                case 3: StartColor = new Color(1f, 1f, 0f); break; // Желтая
                case 4: random = new Random(); break; // Мигающая
            }

            RComponent = ((int)StartColor.R) / 255f;
            GComponent = ((int)StartColor.G) / 255f;
            BComponent = ((int)StartColor.B) / 255f;

            Color = new Color(RComponent, GComponent, BComponent);

            if (type == -1)
            {
                Color = new Color(1f, 1f, 1f, 0.1f);
            }

        }
    }
}

Листинг CatcherHolder с комментариями:

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;

namespace MusicCatch
{
    class CatcherHolder
    {
        private Random random; // Генератор случайных чисел

        public List<Catcher> particles; // Массив частичек (Catcher)
        private List<Texture2D> textures; // Массив текстур

        public List<float> accomulator { get; set; } // Массив float-значений, что такое и зачем нужен accomulator — объясню чуть позже.

        public CatcherHolder(List<Texture2D> textures)
        {
            this.textures = textures;
            this.particles = new List<Catcher>();

            random = new Random();

            accomulator = new List<float>(); // Инициализируем массив и записываем во все 128 ячеек — 1.0f
            for (int a = 0; a < 128; a++)
            {
                accomulator.Add(1.0f);
            }
        }
	// Генерация одной частички
	// Wave - волна, число от 0f до ширины экрана.
	 private Catcher GenerateNewParticle(float Wave) 
        {
            Texture2D texture = textures[random.Next(textures.Count)]; // Берем случайную текстуру из массива
            Vector2 position = new Vector2(Wave, 0); // Задаем позицию
            Vector2 velocity = new Vector2((float)(random.NextDouble()  - 0.5), (float)(random.NextDouble() * 10)); // Случайное ускорение, 0.5f для X и 10f для Y
            float angle = 0; // Угол поворота = 0
            float angularVelocity = 0.05f * (float)(random.NextDouble()*2 - 1 ); // Случайная скорость вращения
            Color color = new Color(0f, 1f, 0f); // Зеленый цвет (изменится цвет уже в самом Catcher)
            float size = (float)random.NextDouble()*.8f + .2f; // Случайный размер
            int ttl = 400; // Время жизни в 400 (400 актов рисования живет частица, т.е. 400 / 60 — 6 с лишним секунд.

            int type = 0; — изначальный тип 0

		// Вероятность появления
	     if (random.Next(10000) > 9900) // враг
                type = 1;
            else if (random.Next(10000) > 9950) // желтый
                type = 3;
            else if (random.Next(10000) > 9997) // пурпурный
                type = 2;
            else if (random.Next(10000) > 9998) // мигающий
                type = 4;
	
            return new Catcher(texture, position, velocity, angle, angularVelocity, type, size, ttl); // Создаем частичку и возвращаем её
        }

	// Генерация желтых частичек при касании с красной частичкой
	 public void GenerateYellowExplossion(int x, int y, int radius)
        {
            Texture2D texture = textures[random.Next(textures.Count)];

            Vector2 direction = Vector2.Zero;
            float angle = (float)Math.PI * 2.0f * (float)random.NextDouble();
            float length = radius * 4f;

            direction.X = (float)Math.Cos(angle);
            direction.Y = -(float)Math.Sin(angle);

            Vector2 position = new Vector2(x, y) + direction * length;

            Vector2 velocity = direction * 4f;
            
            float angularVelocity = 0.05f * (float)(random.NextDouble() * 2 - 1);

            float size = (float)random.NextDouble() * .8f + .2f;
            int ttl = 400;

            int type = 3;
            particles.Add(new Catcher(texture, position, velocity, 0, angularVelocity, type, size, ttl));
        }

	// "Музыкальный" импульс, создание частички
        public void Beat(float Wave)
        {
            particles.Add(GenerateNewParticle(Wave));
        }

        public void Update() // Обновление всех частиц
        {
           
           for (int particle = 0; particle < particles.Count; particle++)
            {
                particles[particle].Update();
                if (particles[particle].Size <= 0 || particles[particle].TTL <= 0)
                {
			// Если частичка дохлая или размер нуль или меньше, удаляем её
                    particles.RemoveAt(particle);
                    particle--;
                }
            }
	
	// Обновляем аккумулятор, если значения ячейки меньше 1f, то добавляем значение, указанное в статическом классе Constants — ACCUMULATE_SPEED, листинг Constanst - ниже.
            for (int a = 0; a < 128; a++)
                if (accomulator[a] < 1.0f)
                    accomulator[a] += Constanst.ACCUMULATE_SPEED; 
            
        }

        public void Draw(SpriteBatch spriteBatch)
        {
		// Прорисовываем все частички, важно указать BlendState.Additive, чтобы частички были более "мягкие".
            spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.Additive);
            for (int index = 0; index < particles.Count; index++)
            {
                particles[index].Draw(spriteBatch);
            }
            spriteBatch.End();
        }
    }
}

Листинг Constant.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace MusicCatch
{
    public class Constanst
    {
        public const float BEAT_COST = .4f; // "Стоимость" частички, отнимается у аккумулятора при генерации новой частички
        public const float ACCUMULATE_SPEED = .01f; // Скорость аккумуляции
        public const float BEAT_REACTION = .5f; // Значение реакции на "бит" в музыке
        public const float ACCOMULATOR_REACTION = .5f; // Разрешает создавать новую частичку только тогда, когда значения больше реакции аккумулятора
    }
}

Объясню, что за загадочный аккумулятор и зачем он нужен. Поговорим о «музыкальном» спектре.

Музыкальный сигнал – пища для аудиосистемы. Точнее – не так. Динамики музыку не слушают, ее восстанавливает наш мозг, получая сложный сигнал, содержащий множество частотных составляющих.
Дак вот, идея такая, слушать «частоты» каждый Update и записывать их в какой-нибудь, например, VisualizationData. Проще говоря, в массив из 128 элементов, которые изменяются от 0f до 1f.

Как этим можно воспользоваться?
Каждый Update: значения в массиве меняются в соответствии с музыкой, нам нужно проверить все 128 элементов, если значение элемента больше чем 0.6f, вызываем Beat-функцию и передаем ей Wave (индекс элемента массива, в котором произошло событие). Все бы хорошо, можно в Beat создавать частичку-ноту. Но представим, что у нас выполняется три Update'а подряд, в котором в одном и том же индексе — значение > 0.6f, как итог будет 100500 частичек за секунду. Чтобы таких вещей не происходило, можно использовать аккумулятор. Смысл его прост: при Beat'е у ячейки массива-аккумулятора соотвествующего индексу Wave отнимается константа BEAT_COST. Каждый Update ко всем элементам аккумулятора прибавляется ACCUMULATE_SPEED. Перед тем, как вызвать Beat проверяется выполняется ли условие — значение аккумулятора > ACCOMULATOR_REACTION, если да, то вызываем Beat. Это решает проблему.

Кстати, BEAT_REACTION — значение, после которых нужно проверять, стоит ли вызывать Beat.

Дальше приведу полный листинг GameLogic (Game1). Много кода, но постараюсь расписать в комментариях.

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;

namespace MusicCatch
{
  public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;

        private List<Texture2D> MelList;
        private Texture2D mouse;

        private CatcherHolder m_cHolder;

        MediaLibrary mediaLibrary; // Грубо говоря "проигрыватель"
        Song song; // Сама музыка
        VisualizationData visualizationData;

        SpriteFont font;

        private int scores = 0; // очки
        private float self_size = 1f; // размер "игрока"
        private int xsize = 1; // множитель очков

        private float power = 0f; // переменная для пурпурного бонуса
        private float activity = 0f; // переменная для активности игрока

        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
           
            graphics.PreferredBackBufferWidth = 800;
            graphics.PreferredBackBufferHeight = 600;
            graphics.IsFullScreen = false;
            graphics.ApplyChanges();

            Content.RootDirectory = "Content";

	// Создаем переменные
            mediaLibrary = new MediaLibrary();
            visualizationData = new VisualizationData();

            scores = 0;

        }

        protected override void Initialize()
        {
            m_cHolder = new CatcherHolder(MelList);

            MediaPlayer.Play(song); // начинаем играть музыку
            MediaPlayer.IsVisualizationEnabled = true; // включаем визуализатор

 	     base.Initialize();
        }

        protected override void LoadContent()
        {
            spriteBatch = new SpriteBatch(GraphicsDevice);

            MelList = new List<Texture2D>();

            for(int a = 1; a <= 5; a++)
            MelList.Add(Content.Load<Texture2D>("mel" + a));

            mouse = Content.Load<Texture2D>("mouse");

            song = Content.Load<Song>("Leaves_in_the_Wind");

            font = Content.Load<SpriteFont>("SpriteFont1");
        }

        protected override void UnloadContent()
        {
        }

        protected override void Update(GameTime gameTime)
        {
           m_cHolder.Update();
           MediaPlayer.GetVisualizationData(visualizationData); // получаем данные 
           // "Прогоняем" массив с частотами, выполняем условия
            for (int a = 0; a < 128; a++)
            {
                if (visualizationData.Frequencies[a] > Constanst.BEAT_REACTION && m_cHolder.accomulator[a] > Constanst.ACCOMULATOR_REACTION)
                {
                    m_cHolder.Beat(a * 3.125f * 2); // вызываем "бит", которые создает частичку.
                    m_cHolder.accomulator[a] -= Constanst.BEAT_COST; // убавляем аккумулятор
                }
            }
	// проверяем, есть ли бонус, который тянет к игроку все ноты
            if (power > 0f)
            {
                for (int particle = 0; particle < m_cHolder.particles.Count; particle++)
                {
                    if (m_cHolder.particles[particle].type != 1) // если не враг, то тянем
                    {
                        float body1X = m_cHolder.particles[particle].Position.X;
                        float body1Y = m_cHolder.particles[particle].Position.Y;
                        float body2X = (float)Mouse.GetState().X;
                        float body2Y = (float)Mouse.GetState().Y;

                        float Angle = (float)Math.Atan2(body2X - body1X, body2Y - body1Y) - ((float)Math.PI / 2.0f); // находим угол к игроку

                        float Lenght = (float)(5000f * power) / (float)Math.Pow((float)Distance(body1X, body1Y, body2X, body2Y), 2.0f); // находим силу

                        m_cHolder.particles[particle].ApplyImpulse(AngleToV2(Angle, Lenght)); // даем пинка ноте
                    }
                }
                power -= 0.001f; // убавляем бонус
            }

            activity -= 0.001f; // убавляем активность игрока

            if (activity < 0.0f)
                activity = 0.0f;
            else if (activity > 0.5f) activity = 0.5f;
		// Держим активность игрока от 0f до .5f

		// Проверяем столкновения двух кругов: игрока и нот
            for (int particle = 0; particle < m_cHolder.particles.Count; particle++)
            {
                int x = (int)m_cHolder.particles[particle].Position.X;
                int y = (int)m_cHolder.particles[particle].Position.Y;
                int radius = (int)(16f * m_cHolder.particles[particle].Size);

                if (circlesColliding(Mouse.GetState().X, Mouse.GetState().Y, (int)(16f * self_size), x, y, radius))
                {

                    scores += (int)(10f * m_cHolder.particles[particle].Size * xsize); // добавляем очки, которые зависят от размера ноты и множителя
                    activity += 0.005f; // добавляем активность
                    int type = m_cHolder.particles[particle].type;

			// выполняем всякие условия, которые возникают при коллизии
                    switch (type)
                    {
                        case 3: // желтый
                            self_size += 0.1f;
                            xsize += 1;
				
				// увеличиваем множитель и размер игрока
                            if (self_size > 4.0f)
                                self_size = 4.0f;
                        break;

                        case 2: // пурпурный
                            power = 1f; // даем бонус игроку, который все ноты притягивает к себе
				
                        break;

                        case 4: // мигающий
                        for (int b = 0; b < m_cHolder.particles.Count; b++)
                            m_cHolder.particles[b].SetType(3); // устанавливает всем нотам тип — желтый
                                
                            
                        break;

                        case 1: // красный (враг)
                            for(int a = 1; a < xsize; a++)
                            m_cHolder.GenerateYellowExplossion(Mouse.GetState().X, Mouse.GetState().Y, (int)(16f * self_size)); 

                            xsize = 1;
                            self_size = 1f;
                            scores -= (int)(scores / 4);
                        break;

                    }


			// удаляем частичку
                    m_cHolder.particles[particle].TTL = 0; 
                    m_cHolder.particles.RemoveAt(particle);
                    particle--;
                }
            }

            base.Update(gameTime);
        }

              protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.Black);
            
            m_cHolder.Draw(spriteBatch); // рисуем CatcherHolder

            spriteBatch.Begin();

            Rectangle sourceRectangle = new Rectangle(0, 0, mouse.Width, mouse.Height); // размеры текстуры
            Vector2 origin = new Vector2(mouse.Width / 2, mouse.Height / 2); // offset текстуры
            Vector2 mouse_vector = new Vector2(Mouse.GetState().X, Mouse.GetState().Y); // вектор(позиция) мышки

            string xtext = "x" + xsize.ToString(); // текст
            Vector2 text_vector = font.MeasureString(xtext) / 2.0f; // вычисления offset'a текста

            spriteBatch.Draw(mouse, mouse_vector, sourceRectangle, new Color(0.5f - power/2.0f + activity, 0.5f, 0.5f - power/2.0f), 0.0f, origin, self_size, SpriteEffects.None, 0f); // рисуем игрока
            spriteBatch.DrawString(font, xtext, mouse_vector - text_vector, Color.White); // рисуем множитель

            spriteBatch.DrawString(font, "Score: " + scores.ToString(), new Vector2(5, graphics.PreferredBackBufferHeight - 34), Color.White); // рисуем очки
            spriteBatch.End();

            base.Draw(gameTime);
        }

        // возвращает, столкнулись ли два круга или нет
        bool circlesColliding(int x1, int y1, int radius1, int x2, int y2, int radius2)
        {
            
            int dx = x2 - x1;
            int dy = y2 - y1;
            int radii = radius1 + radius2;
            if ((dx * dx) + (dy * dy) < radii * radii)
            {
                return true;
            }
            else
            {
                return false;
            }
        }
	// функция перевода угла в вектор
        public Vector2 AngleToV2(float angle, float length)
        {
            Vector2 direction = Vector2.Zero;
            direction.X = (float)Math.Cos(angle) * length;
            direction.Y = -(float)Math.Sin(angle) * length;
            return direction;
        }

	// дистанция
        public float Distance(float x1, float y1, float x2, float y2)
        {
            return (float)Math.Sqrt((float)Math.Pow(x2 - x1, 2) + (float)Math.Pow(y2 - y1, 2));
        }
    }
}

Вот такая простенькая игрушка получается. На конечной машине пользователя должен быть установлен XNA 4.0 и .NET;

Ссылки: сама игра (директ) | исходники (директ) | XNA Framework End-user

Скриншот:


P.S. Идея не моя, такая игра уже была выпущена под flash. Эта игра писалась исключительно для статьи, соответственно дальнейшего развития она не получит.
P.S.S. Так же помогу разобраться в XNA / уроке, для этого пишите мне в личку на хабре или на контакты, которые есть в профиле.