Microsoft xna как сделать игру

Добавил пользователь Дмитрий К.
Обновлено: 19.09.2024

Теперь нам нужно разобраться с тем, как использовать собственные шейдеры в играх на XNA Framework. В данной главе мы научимся делать это, а также разработаем несколько простых шейдеров, чтобы понять основные аспекты их использования в собственных играх.

Ранее, мы уже научились использовать BasicEffect для рисования графических примитивов и моделей. Теперь мы сможем перейти к использованию собственных шейдеров. На самом деле, BasicEffect предоставляет достаточно большое количество возможностей, однако проблема его использования заключается в том, что его использовать совместно с какими-либо более сложными техниками. Это утверждение относится не только к BasicEffect, но и к любому эффекту. Например, Вы подготовили шейдер для анимации и другий шейдер для освещения, оказывается, что Вы никаким образом не сможете объединить их, не изменяя исходные коды шейдеров, то есть не сможете создать эффект одновременно с анимацией и освещением из Ваших готовых шейдеров. Однако, если BasicEffect устраивает Вас, можете использовать его, например, для вывода некоторых объектов в сцене.

В данной главе мы будем сначала использовать уже известный нам BasicEffect, а затем реализовывать аналогичную функциональность в наших собственных шейдерах.

Нашей задачей будет отображение квадрата на экране монитора.

Создадим новый проект, и добавим в него переменные:

Я использую VertexPositionColor поскольку для начала я не буду использовать текстуры.

Также мне понадобится новый метод CreateGeometry, в котором я создам геометрию (то есть опишу все вершины) для квадрата:

basicEffect = new
BasicEffect (GraphicsDevice, null );

vd = new
VertexDeclaration (GraphicsDevice, VertexPositionColor .VertexElements);

verts = new
VertexPositionColor [4];

verts[0].Position = new
Vector3 (-0.5f, -0.5f, 0);

verts[0].Color = Color .Red;

verts[1].Position = new
Vector3 (-0.5f, 0.5f, 0);

verts[1].Color = Color .Green;

verts[2].Position = new
Vector3 (0.5f, 0.5f, 0);

verts[2].Color = Color .Blue;

verts[3].Position = new
Vector3 (0.5f, -0.5f, 0);

verts[3].Color = Color .White;

Этот метод я буду вызывать в Initialize класса Game1, там же я инициализирую basicEffect.

basicEffect = new
BasicEffect (GraphicsDevice, null );

Теперь в методы Draw я напишу код, который будет рисовать квадрат на экране монитора:

protected
override
void Draw( GameTime gameTime)

GraphicsDevice.Clear( Color .CornflowerBlue);

// TODO: Add your drawing code here

Matrix World = Matrix .CreateScale(0.5f) * Matrix .CreateTranslation(-0.5f, 0.5f, 0);

Matrix View = Matrix .CreateLookAt( new
Vector3 (0, 0, 2), Vector3 .Zero, Vector3 .Up);

Matrix Projection = Matrix .CreatePerspectiveFieldOfView( MathHelper .ToRadians(45), GraphicsDevice.Viewport.AspectRatio, 0.1f, 5f);

GraphicsDevice.DrawUserIndexedPrimitives VertexPositionColor >( PrimitiveType .TriangleList, verts, 0, 4, indices, 0, 2);

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

Если сейчас запустить приложение, то мы увидим следующую картину:

Теперь, при помощи BasicEffect нарисуем текстурированный квадрат, для этого нужно добавить текстуру в проект (в папку Content) и создать нужные нам переменные.

Texture2D texture;

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

Также мне понадобятся новые вешины, которые будут также содержать информацию о текстурных координатах. Индескы можно оставить прежние.

vd = new
VertexDeclaration (GraphicsDevice, VertexPositionColor .VertexElements);

verts = new
VertexPositionColor [4];

verts[0].Position = new
Vector3 (-0.5f, -0.5f, 0);

verts[0].Color = Color .Red;

verts[1].Position = new
Vector3 (-0.5f, 0.5f, 0);

verts[1].Color = Color .Green;

verts[2].Position = new
Vector3 (0.5f, 0.5f, 0);

verts[2].Color = Color .Blue;

verts[3].Position = new
Vector3 (0.5f, -0.5f, 0);

verts[3].Color = Color .White;

vd2 = new
VertexDeclaration (GraphicsDevice, VertexPositionTexture .VertexElements);

verts2 = new
VertexPositionTexture [4];

verts2[0].Position = new
Vector3 (-0.5f, -0.5f, 0);

verts2[0].TextureCoordinate = new
Vector2 (0, 1);

verts2[1].Position = new
Vector3 (-0.5f, 0.5f, 0);

verts2[1].TextureCoordinate = new
Vector2 (0, 0);

verts2[2].Position = new
Vector3 (0.5f, 0.5f, 0);

verts2[2].TextureCoordinate = new
Vector2 (1, 0);

verts2[3].Position = new
Vector3 (0.5f, -0.5f, 0);

verts2[3].TextureCoordinate = new
Vector2 (1, 1);

Теперь нам осталось только изменить метод Draw следующим образом:

protected
override
void Draw( GameTime gameTime)

GraphicsDevice.Clear( Color .CornflowerBlue);

// TODO: Add your drawing code here

Matrix World = Matrix .CreateScale(0.5f) * Matrix .CreateTranslation(-0.5f, 0.5f, 0);

Matrix View = Matrix .CreateLookAt( new
Vector3 (0, 0, 2), Vector3 .Zero, Vector3 .Up);

Matrix Projection = Matrix .CreatePerspectiveFieldOfView( MathHelper .ToRadians(45), GraphicsDevice.Viewport.AspectRatio, 0.1f, 5f);

GraphicsDevice.DrawUserIndexedPrimitives VertexPositionColor >( PrimitiveType .TriangleList, verts, 0, 4, indices, 0, 2);

World = Matrix .CreateScale(0.5f) * Matrix .CreateTranslation(0.5f, 0.5f, 0);

GraphicsDevice.VertexDeclaration = vd2;

basicEffect.VertexColorEnabled = false ;

basicEffect.World = World;

basicEffect.Texture = texture;

basicEffect.TextureEnabled = true ;

basicEffect.Begin();

basicEffect.CurrentTechnique.Passes[0].Begin();

GraphicsDevice.DrawUserIndexedPrimitives VertexPositionTexture >( PrimitiveType .TriangleList, verts2, 0, 4, indices, 0, 2);

basicEffect.CurrentTechnique.Passes[0].End();

basicEffect.End();

basicEffect.TextureEnabled = false ;

Тут я пересоздал матрицу World для того, чтобы новый квадрат рисовался в правом верхнем углу, а также написал код, который рисует текстурированный квадрат. Обратите также внимание на то, что необходимо менять значение параметров TextureEnabled и VertexColorEnabled у basicEffect для корректной отрисовки примитивов.

Если сейчас запустить приложение, то мы увидим следующую картинку:

Теперь пришло время создавать свой собственный шейдер, добавим в проект (в папку Content) новый файл с эффектом и назовем его, скажем, myEffect.fx и начнем редактировать файл.

// TODO: add effect parameters here.

float4 Position : POSITION0 ;

// TODO: add input channels such as texture

// coordinates and vertex colors here.

float4 Position : POSITION0 ;

// TODO: add vertex shader outputs such as colors and texture

// coordinates here. These values will automatically be interpolated

// over the triangle, and provided as input to your pixel shader.

VertexShaderOutput VertexShaderFunction(VertexShaderInput input)

float4 worldPosition = mul (input.Position, World);

float4 viewPosition = mul (worldPosition, View);

output.Position = mul (viewPosition, Projection);

// TODO: add your vertex shader code here.

float4 PixelShaderFunction(VertexShaderOutput input) : COLOR0

// TODO: add your pixel shader code here.

// TODO: set renderstates here.

VertexShader = compile
vs_1_1 VertexShaderFunction();

PixelShader = compile
ps_1_1 PixelShaderFunction();

Сейчас вершинный шейдер не передает никакой информации о цвете пикселя, следовательно, в пиксельном шейдере невозможно определить цвет. Модифицируем код шейдера так, чтобы он передавал информацию о цвете из вершинного шейдера в пиксельный. Для этого нам понадобится изменить структуры, соответствующие входным и выходным параметрам вершинного шейдера. После этого нужно обязательно заполнить информацию о новых элементах выходной структуры в вершинном шейдере. Для того, чтобы заполнить информацию о цвете в выходной структуре вершинного шейдера я просто передам туда значение из входной структуры.

float4 Position : POSITION0 ;

float4 Color : COLOR0 ;

float4 Position : POSITION0 ;

float4 Color : COLOR0 ;

VertexShaderOutput VertexShaderFunction(VertexShaderInput input)

float4 worldPosition = mul (input.Position, World);

float4 viewPosition = mul (worldPosition, View);

output.Position = mul (viewPosition, Projection);

output.Color = input.Color;

После этих операций пиксельный шейдер обладает достаточной информацией для получения итогового цвета пикселя. Модифицируем его следующим образом:

float4 PixelShaderFunction(VertexShaderOutput input) : COLOR0

return input.Color;

Теперь осталось применить новый шейдер для рисования нашего квадрата. Вернемся к Game1 и там добавим новую переменную типа Effect (этот класс отвечает за работу с шейдерами в XNA) и инициализируем ее, как и для всех остальных видов ресурсов это делается при помощи ContentManager:

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

В методе Draw напишем код, который отображает квадрат с использованием нового шейдера в нижнем левом углу.

protected
override
void Draw( GameTime gameTime)

GraphicsDevice.Clear( Color .CornflowerBlue);

// TODO: Add your drawing code here

Matrix World = Matrix .CreateScale(0.5f) * Matrix .CreateTranslation(-0.5f, 0.5f, 0);

Matrix View = Matrix .CreateLookAt( new
Vector3 (0, 0, 2), Vector3 .Zero, Vector3 .Up);

Matrix Projection = Matrix .CreatePerspectiveFieldOfView( MathHelper .ToRadians(45), GraphicsDevice.Viewport.AspectRatio, 0.1f, 5f);

GraphicsDevice.DrawUserIndexedPrimitives VertexPositionColor >( PrimitiveType .TriangleList, verts, 0, 4, indices, 0, 2);

World = Matrix .CreateScale(0.5f) * Matrix .CreateTranslation(0.5f, 0.5f, 0);

GraphicsDevice.DrawUserIndexedPrimitives VertexPositionTexture >( PrimitiveType .TriangleList, verts2, 0, 4, indices, 0, 2);

World = Matrix .CreateScale(0.5f) * Matrix .CreateTranslation(-0.5f, -0.5f, 0);

GraphicsDevice.VertexDeclaration = vd;

effect.Begin();

effect.CurrentTechnique.Passes[0].Begin();

GraphicsDevice.DrawUserIndexedPrimitives VertexPositionColor >( PrimitiveType .TriangleList, verts, 0, 4, indices, 0, 2);

effect.CurrentTechnique.Passes[0].End();

effect.End();

Обратите внимание на то, что для класса Effect не определены свойства такие как имели в BasicEffect, например World или View. Для задания параметров эффекта нужно использовать свойство Parameters, которое является коллекцией параметров эффекта. Для обращения к конкретному параметру нужно использовать строковые идентификаторы, соответствующие названию параметра. Как Вы помните, сейчас в шейдере используется три переменные – World, View, Projection. Именно их значения мы и установили в методе Draw при помощи вызова метода SetValue.

Также нужно установить технику, которую необходимо использовать

Рисование примитивов осуществляется алалогично тому, как это делалось для BasicEffect.

Запустив приложение, мы увидим новый квадрат, который нарисован уже с помощию нашего собственного шейдера!

Я также хотел бы обратить Ваше внимание на то, как пиксельный шейдер определяет цвет пикселя. Ведь мы вычисляли цвет только для каждой вершины квадрата, а не для каждого его пикселя. Все дело в том, что значения пераметров, полученных для каждой верщины интерполируются перед тем как попасть в пиксельный шейдер. Безусловно, это относится не только к цвету, но и к любому другому параметру.

Теперь создадим собственный шейдер для текстурирования объекта, для этого создадим новый файл с шейдером, загрузим его в проект и начнем изменять шейдер.

Для того чтобы определять цвет каждого пикселя нам понадобятся текстурные координаты в пиксельном шейдере. Сейчас у нас не учитываются текстурные координаты во входной и выходной структуре данных вершинного шейдера. Добавим их самостоятельно.

float4 Position : POSITION0 ;

float4 TexCoords : TEXCOORD0 ;

float4 Position : POSITION0 ;

float4 TexCoords : TEXCOORD0 ;

VertexShaderOutput VertexShaderFunction(VertexShaderInput input)

float4 worldPosition = mul (input.Position, World);

float4 viewPosition = mul (worldPosition, View);

output.Position = mul (viewPosition, Projection);

output.TexCoords = input.TexCoords;

Теперь мы сможет получить интерполированные текстурные координаты в пиксельном шейдере, но для того, чтобы получать цвет их текстуры по этим координатам, нам нужно будет создать сэмплер и передать в шейдер саму текстуру. Обратите внимание на строку Texture= ; при описании сэмплера, она указывает на то, какую такстуру будет использовать сэмплер.

sampler mySampler = sampler_state

float4 PixelShaderFunction(VertexShaderOutput input) : COLOR0

return
tex2D (mySampler, input.TexCoords);

Шейдер готов и можно приступать к его использованию в Game1, для этого добавим все необходимое.