Skip to content

Commit 1bedb82

Browse files
SimonDarksideJSimonDarksideJ
authored
Added more articles
1 parent 0c51950 commit 1bedb82

File tree

4 files changed

+254
-0
lines changed

4 files changed

+254
-0
lines changed

‎articles/getting_to_know/howto/graphics/HowTo_Draw_Textured_Quad.md

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
---
2+
title: Creating a Custom Effect with Texturing
3+
description: Demonstrates how to use a custom effect and a texture to render a 3D object.
4+
requireMSLicense: true
5+
---
6+
7+
## Overview
8+
9+
Drawing a textured quad is a basic technique to have in any Game Developers arsenal, which can be populated by any texture from either the Content Pipeline (loaded from disk) or generated in memory (which we will use here for simplicity).
10+
11+
> [!NOTE]
12+
> Drawing a texture quad is in effect what a SpriteBatch does under the hood, but while a SpriteBatch natively only draws flat to the screen, a Quad can be positioned in any way you see fit. Either approach has its pros and cons.
13+
14+
There is a but of setup to draw a quad in MonoGame and there are many ways to achieve it.
15+
16+
> [!NOTE]
17+
> This example draws from community responses to the same question [here, on the MonoGame Community site](https://community.monogame.net/t/minimal-example-of-drawing-a-quad-into-2d-space/11063/2), with a little clean-up to make it simpler.
18+
19+
## To use a custom effect with a texture
20+
21+
1. Create a custom vertex format declaration and a set of indices to indicate the drawing order.
22+
23+
``` csharp
24+
// A Vertex format with Texture information
25+
private VertexPositionColorTexture[] drawingQuad;
26+
27+
// The indices array for drawing a quad
28+
private short[] drawingIndices;
29+
30+
public void SetupUserIndexedVertexRectangle(Rectangle r)
31+
{
32+
drawingQuad = new VertexPositionColorTexture[4];
33+
drawingQuad[0] = new VertexPositionColorTexture(new Vector3(r.Left, r.Top, 0f), Color.White, new Vector2(0f, 0f));
34+
drawingQuad[1] = new VertexPositionColorTexture(new Vector3(r.Left, r.Bottom, 0f), Color.Red, new Vector2(0f, 1f));
35+
drawingQuad[2] = new VertexPositionColorTexture(new Vector3(r.Right, r.Bottom, 0f), Color.Green, new Vector2(1f, 1f));
36+
drawingQuad[3] = new VertexPositionColorTexture(new Vector3(r.Right, r.Top, 0f), Color.Blue, new Vector2(1f, 0f));
37+
38+
drawingIndices = [0, 2, 1, 2, 0, 3];
39+
}
40+
```
41+
42+
1. To make setup simpler, we will also define two methods to Set the [Graphics State](HowTo_Create_a_StateObject.md) and [create our basic effect](xref:Microsoft.Xna.Framework.Graphics.Effect).
43+
44+
``` csharp
45+
// The basic effect definition
46+
private BasicEffect basicEffect;
47+
48+
// A Texture2D that we will generate data into
49+
private Texture2D generatedTexture;
50+
51+
/// <summary>
52+
/// Set the states for the graphics device.
53+
/// </summary>
54+
private void SetStates()
55+
{
56+
GraphicsDevice.BlendState = BlendState.Opaque;
57+
GraphicsDevice.DepthStencilState = DepthStencilState.Default;
58+
GraphicsDevice.SamplerStates[0] = SamplerState.PointWrap;
59+
GraphicsDevice.RasterizerState = RasterizerState.CullCounterClockwise;
60+
}
61+
62+
/// <summary>
63+
/// Creates a basic effect for drawing a textured quad.
64+
/// </summary>
65+
private void SetUpBasicEffect()
66+
{
67+
basicEffect = new BasicEffect(this.GraphicsDevice);
68+
basicEffect.VertexColorEnabled = true;
69+
basicEffect.TextureEnabled = true;
70+
basicEffect.Texture = generatedTexture;
71+
72+
// set up our matrix to match basic effect.
73+
Viewport viewport = GraphicsDevice.Viewport;
74+
basicEffect.World = Matrix.Identity;
75+
Vector3 cameraUp = Vector3.Transform(Vector3.Down, Matrix.CreateRotationZ(0));
76+
basicEffect.View = Matrix.CreateLookAt(Vector3.Forward, Vector3.Zero, cameraUp);
77+
basicEffect.Projection = Matrix.CreateScale(1, -1, 1) * Matrix.CreateOrthographicOffCenter(0, viewport.Width, viewport.Height, 0, 0, 1);
78+
}
79+
```
80+
81+
> [!NOTE]
82+
> Note that the basic effect is created with `basicEffect.TextureEnabled = true;` and the texture to draw using `basicEffect.Texture = generatedTexture;`, just stating we are drawing a texture and what it is.
83+
84+
1. Next, we will generate a Texture to draw as part of the quad, a simple white texture which the effect will also draw a coloured "tint" over thanks to the `basicEffect.VertexColorEnabled = true;` set in the effect.
85+
86+
```csharp
87+
private Texture2D GenerateTexture2D()
88+
{
89+
Texture2D t = new Texture2D(this.GraphicsDevice, 250, 250);
90+
var cdata = new Color[250 * 250];
91+
for (int i = 0; i < 250; i++)
92+
{
93+
for (int j = 0; j < 250; j++)
94+
{
95+
cdata[i * 250 + j] = Color.White;
96+
}
97+
}
98+
t.SetData(cdata);
99+
return t;
100+
}
101+
```
102+
103+
> [!NOTE]
104+
> Alternatively, you can just use a texture loaded from the Content Pipeline, just be sure to change the Vertex format used in Step 1 to `VertexPositionTexture` unless you want the coloured gradient, or simply disable `basicEffect.VertexColorEnabled = false;`. That is unless you want to apply color tints with the vertex declaration.
105+
106+
1. Putting this together, setup all the relevant artifacts in the `LoadContent` method.
107+
108+
```csharp
109+
protected override void LoadContent()
110+
{
111+
// Set render state
112+
SetStates();
113+
114+
// Setup basic effect
115+
SetUpBasicEffect();
116+
117+
// Create the quad to draw
118+
SetupUserIndexedVertexRectangle(new Rectangle(10, 40, 450, 260));
119+
120+
// Generate (or load) the Texture
121+
generatedTexture = GenerateTexture2D();
122+
}
123+
```
124+
125+
1. Finally, draw the primitive quad to the screen using the BasicEffect and generated data.
126+
127+
```csharp
128+
protected override void Draw(GameTime gameTime)
129+
{
130+
GraphicsDevice.Clear(Color.CornflowerBlue);
131+
132+
foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
133+
{
134+
pass.Apply();
135+
GraphicsDevice.DrawUserIndexedPrimitives(PrimitiveType.TriangleList, drawingQuad, 0, 4, drawingIndices, 0, 2);
136+
}
137+
138+
base.Draw(gameTime);
139+
}
140+
```
141+
142+
1. Marvel at the wonder of your drawn Textured Quad plus vertex effect.
143+
144+
![Final effect](./images/HowTo_DrawTexturedQuad_Final.png)
145+
146+
## See Also
147+
148+
- [How to create a Basic Effect](HowTo_Create_a_BasicEffect.md)
149+
150+
### Concepts
151+
152+
- [3D Pipeline Basics](../../whatis/graphics/WhatIs_3DRendering.md)
153+
154+
### Reference
155+
156+
- [GraphicsDevice](xref:Microsoft.Xna.Framework.Graphics.GraphicsDevice)
157+
- [BasicEffect](xref:Microsoft.Xna.Framework.Graphics.BasicEffect)

‎articles/getting_to_know/howto/graphics/HowTo_DynamicallyUpdateVertices.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: How to Dynamically Update Vertex Data
3+
description: Describes techniques for dynamically updating vertex data in an MonoGame game.
4+
requireMSLicense: true
5+
---
6+
7+
## Overview
8+
9+
Geometry in a 3D game is defined by vertex data. Sometimes, a game needs to modify vertex data or even generate new vertex data dynamically (at run time). Here are some solutions for dynamically updating vertex data.
10+
11+
## Updating a Set of Primitives Dynamically
12+
13+
The [Primitives Sample](https://github.com/simondarksidej/XNAGameStudio/wiki/Primitives) demonstrates a dynamic vertex buffer that is generated during each rendering frame. The sample renders primitives by first calling `Begin`, adding the necessary vertices, using the `Add` method, and then calling `End`. This forces the buffer to be drawn to the current device. The `Flush` method calls [GraphicsDevice.DrawUserPrimitives](xref:Microsoft.Xna.Framework.Graphics.GraphicsDevice#Microsoft_Xna_Framework_Graphics_GraphicsDevice_DrawUserPrimitives__1_Microsoft_Xna_Framework_Graphics_PrimitiveType___0___System_Int32_System_Int32_) method when `End` is called or when the buffer has no room for new vertices. If there is no room, the buffer is written to the device, it is reset, and the pending vertices are added.
14+
15+
## Dynamically Rendering a Persistent Set of Primitives
16+
17+
The [Particle 3D Sample](https://github.com/simondarksidej/XNAGameStudio/wiki/Particles-3D), implements a dynamic vertex buffer that contains custom vertices with a limited lifespan. The application adds and removes particles into a fixed length buffer. The custom shader of the sample renders the active subset of vertices dynamically. Because particles have a limited lifespan, the `ParticleSystem` class handles all adding, updating, and deleting of the vertex buffer in real time.
18+
19+
## Generating Geometry Programmatically
20+
21+
Sometimes, your game needs to generate geometry because the geometry is not known at design-time or it changes at run time. For this scenario, create a dynamic vertex and index buffer, and use [VertexBuffer.SetData](xref:Microsoft.Xna.Framework.Graphics.VertexBuffer) and [IndexBuffer.SetData](xref:Microsoft.Xna.Framework.Graphics.IndexBuffer) to set or change the data at run time.
22+
23+
## Remarks
24+
25+
Create a dynamic vertex or index buffer using [DynamicVertexBuffer](xref:Microsoft.Xna.Framework.Graphics.DynamicVertexBuffer) and [DynamicIndexBuffer](xref:Microsoft.Xna.Framework.Graphics.DynamicIndexBuffer) ; create a static vertex or index buffer using [VertexBuffer](xref:Microsoft.Xna.Framework.Graphics.VertexBuffer) and [IndexBuffer](xref:Microsoft.Xna.Framework.Graphics.IndexBuffer). Use a dynamic buffer for vertex data that is updated every render frame, otherwise, use a static buffer.
26+
27+
The samples are located on the App Hub Web site. For a more advanced solution for dynamic vertex updating, download the [Generated Geometry Sample](http://go.microsoft.com/fwlink/?LinkId=93007). This sample uses the [MeshBuilder](xref:Microsoft.Xna.Framework.Content.Pipeline.Graphics.MeshBuilder) helper class and a custom processor to generate a terrain map from a bitmap loaded by the content manager. Specifically, examine the `Process` method, located in TerrainProcessor.cs, which programmatically creates the terrain geometry based on input from the specified bitmap.
28+
29+
## See Also
30+
31+
- [How to articles for the Graphics Pipeline](index.md)
32+
33+
### Concepts
34+
35+
- [What Is 3D Rendering?](../../whatis/graphics/WhatIs_3DRendering.md)
36+
- [What Is a Configurable Effect?](../../whatis/graphics/WhatIs_ConfigurableEffect.md)
37+
38+
### Reference
39+
40+
- [GraphicsDeviceManager](xref:Microsoft.Xna.Framework.GraphicsDeviceManager)
41+
- [VertexBuffer](xref:Microsoft.Xna.Framework.Graphics.VertexBuffer)
42+
- [IndexBuffer](xref:Microsoft.Xna.Framework.Graphics.IndexBuffer)
43+
- [DynamicVertexBuffer](xref:Microsoft.Xna.Framework.Graphics.DynamicVertexBuffer)
44+
- [DynamicIndexBuffer](xref:Microsoft.Xna.Framework.Graphics.DynamicIndexBuffer)

‎articles/getting_to_know/howto/graphics/HowTo_FullScreen.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
title: How to create a Full-Screen Game
3+
description: Demonstrates how to start a game in full-screen mode.
4+
requireMSLicense: true
5+
---
6+
7+
## Overview
8+
9+
By default, MonoGame will render in a Window pre-set to the default (800 x 480) resolution. If you instead want to render to the full screen, then is it as simple as flipping a switch and the renderer will use the full dimensions of the targeted display device.
10+
11+
> [!NOTE]
12+
> Rendering to the full screen does NOT change the resolution that the game will be drawn in, that is something as a game developer you have to control. This is because the resolution the game draws at will have a direct impact on the content you are rendering, so you need to best control what gets drawn and how.
13+
14+
## To create a full-screen game
15+
16+
1. Derive a class from [Game](xref:Microsoft.Xna.Framework.Game).
17+
18+
1. After creating the [GraphicsDeviceManager](xref:Microsoft.Xna.Framework.GraphicsDeviceManager), set its [PreferredBackBufferWidth](xref:Microsoft.Xna.Framework.GraphicsDeviceManager.PreferredBackBufferWidth) and [PreferredBackBufferHeight](xref:Microsoft.Xna.Framework.GraphicsDeviceManager.PreferredBackBufferHeight) to the desired screen height and width.
19+
20+
> [!NOTE]
21+
> Check the [What Is 3D Rendering?](../../whatis/graphics/WhatIs_3DRendering.md) guide on the various ways the [GraphicsDevice](xref:Microsoft.Xna.Framework.GraphicsDevice) and [Back Buffer?](../../whatis/graphics/WhatIs_BackBuffer.md) can be initialized.
22+
23+
1. Set [IsFullScreen](xref:Microsoft.Xna.Framework.GraphicsDeviceManager.IsFullScreen) to **true**.
24+
25+
```csharp
26+
public Game1()
27+
{
28+
_graphics = new GraphicsDeviceManager(this);
29+
// Setup up the default resolution for the project
30+
_graphics.PreferredBackBufferWidth = 800;
31+
_graphics.PreferredBackBufferHeight = 480;
32+
33+
// Runs the game in "full Screen" mode using the set resolution
34+
_graphics.IsFullScreen = true;
35+
36+
Content.RootDirectory = "Content";
37+
IsMouseVisible = true;
38+
}
39+
```
40+
41+
## See Also
42+
43+
- [How to articles for the Graphics Pipeline](index.md)
44+
45+
### Concepts
46+
47+
- [What Is 3D Rendering?](../../whatis/graphics/WhatIs_3DRendering.md)
48+
- [What Is a Back Buffer?](../../whatis/graphics/WhatIs_BackBuffer.md)
49+
- [What Is a Viewport?](../../whatis/graphics/WhatIs_Viewport.md)
50+
51+
### Reference
52+
53+
- [GraphicsDeviceManager](xref:Microsoft.Xna.Framework.GraphicsDeviceManager)

‎articles/getting_to_know/howto/graphics/images/HowTo_DrawTexturedQuad_Final.png

14.5 KB
Loading

0 commit comments

Comments
 (0)