Even more Graphics articles

articles/getting_to_know/howto/HowTo_CollisionDetectionOverview.md

@@ -0,0 +1,76 @@
+---
+title: How to test collisions with Bounding Volumes
+description: A walkthrough what is involved in figuring out if two objects collide for MonoGame!
+requireMSLicense: true
+---
+
+## Overview
+
+Collision detection determines whether objects in a game world overlap each other.
+
+The MonoGame Framework provides several classes and methods to speed implementation of collision detection systems in games.
+
+* [Bounding Volume Classes](#bounding-volume-classes)
+* [Non-Bounding Volume Classes](#non-bounding-volume-classes)
+* [Contains and Intersects Methods](#contains-and-intersects-methods)
+* [Adding New Collision Data Structures](#adding-new-collision-data-structures)
+
+## Bounding Volume Classes
+
+The MonoGame Framework has three classes that represent three-dimensional volumes. Use a bounding volume class to approximate the volume occupied by a complex object using a volume that is less complex and faster for performing collision checking. All of the bounding volume classes support intersection and containment tests with each other and the plane and ray classes.
+
+### Bounding Sphere
+
+The [BoundingSphere Structure](xref:Microsoft.Xna.Framework.BoundingSphere) represents the space occupied by a sphere.
+
+There are several benefits of using a bounding sphere for collision detection.
+
+* Sphere to sphere checks are very fast. To check for collision between two spheres, the distance between the centers of the spheres is compared to the sum of the radii of both spheres. If the distance is less than the combined radii of both spheres, the spheres intersect.
+* The [BoundingSphere Structure](xref:Microsoft.Xna.Framework.BoundingSphere) class is compact. It stores only a vector representing its center and its radius.
+* Unlike a bounding box, a bounding sphere does not need to be recreated if the model rotates. If the model being bounded rotates, the bounding sphere will still be large enough to contain it.
+* Moving a bounding sphere is inexpensive. Just add a value to the center.
+
+There is one major drawback to using the bounding sphere class for collision detection.
+
+* Unless the object being approximated is sphere shaped, the bounding sphere will have some empty space, which could result in false positive results. Long narrow objects will have the most empty space in their bounding spheres.
+
+### Bounding Box
+
+The [BoundingBox Structure](xref:Microsoft.Xna.Framework.BoundingBox) represents the space occupied by a box. The bounding box class is axis aligned. Each face of the bounding box is perpendicular to the x-axis, the y-axis, or the z-axis.
+
+There are several benefits of using the bounding box for collision detection.
+
+* The bounding box class fits rectangular shapes aligned with the axis very well. Compared to the bounding sphere class, the bounding box class provides a much tighter fit for non-rotated rectangular objects.
+* Because the bounding box class is axis aligned, you can make certain assumptions that result in collision checks between bounding boxes being quicker than a bounding box that can be rotated.
+
+There are a few drawbacks of using the bounding box for collision detection.
+
+* Rotating a bounding box causes it to no longer be axis aligned. Because of this, if you rotate a model being bounded, you will need to recreate the bounding box. Doing so can be slow, since all the points in an object are iterated through to get the bounding box. If the model has not changed orientation, you can translate the bounding box instead of recreating it.
+* If the model being bounded is not aligned to the axis, the bounding box will have some empty space. The amount of empty space will be greatest when the object is rotated 45 degrees from an axis.
+* Empty space in the bounding box can result in false positives when checking for collision.
+
+### Bounding Frustum
+
+Use a [BoundingFrustum Class](xref:Microsoft.Xna.Framework.BoundingFrustum) to create a bounding volume that corresponds to the space visible to the camera. You create a bounding frustum from the combined view and projection matrix that the camera is using currently. If the camera moves or rotates, you need to recreate the bounding frustum. The bounding frustum is not used to determine when two objects collide, but rather when an object intersects with the volume of space viewable by the camera. Objects that do not intersect and are not contained by the bounding frustum are not visible to the camera and do not need to be drawn. For complex models, this can reduce the number of pixels that need to be rendered.
+
+## Non-Bounding Volume Classes
+
+### Plane
+
+The [Plane Structure](xref:Microsoft.Xna.Framework.Plane) describes a 2D plane. The plane is defined by a normal vector (perpendicular to the plane) and a point on the plane. The plane class supports intersection tests with the bounding volume classes. The plane class’s intersection test returns the tested object's position relative to the plane. The return value indicates whether the object intersects the plane. If the object does not intersect the plane, the return value indicates whether the object is on the plane’s front side or back side.
+
+### Ray
+
+The [Ray Structure](xref:Microsoft.Xna.Framework.Ray) describes a ray starting at a point in space. The ray structure supports intersection tests with the bounding volume classes. The return value of the ray intersection tests is the distance the intersection occurred at, or null if no intersection occurred.
+
+### Model
+
+In addition to the information needed to draw a model, the [Model Class](xref:Microsoft.Xna.Framework.Graphics.Model) contains bounding volumes for its parts. When a model is imported, the content pipeline calculates the bounding sphere for each of the model's parts. To check for collision between two models, you can compare the bounding spheres for one model to all of the bounding spheres of the other model.
+
+## Contains and Intersects Methods
+
+Bounding volume classes have methods to support two types of collision tests: intersection tests and containment tests. The intersects methods check whether the two objects being tested overlap in any way. As soon as the test finds that the objects do intersect, it returns without trying to determine the degree of the intersection. The contains methods determine whether the objects simply intersect or whether one of the objects is completely contained by the other. Since the intersects methods need only determine whether an intersection occurred, they tend to be faster than the contains methods.
+
+## Adding New Collision Data Structures
+
+When implementing other bounding volume classes and intersection tests, you will probably need to add a custom content pipeline processor. For example, your game might need to use convex hulls for collision detection. You could use a custom processor to determine the convex hull and then place it in the model's tag field. Then, when the model is loaded at run time, the convex hull information would be available in the model. For more information, see [Extending a Standard Content Processor](content_pipeline/HowTo_Extend_Processor.md).

articles/getting_to_know/howto/graphics/HowTo_AspectRatio.md

@@ -0,0 +1,131 @@
+---
+title: How to restrict Aspect Ratio on a Graphics Device
+description: Demonstrates how to create a custom GraphicsDeviceManager that only selects graphics devices with widescreen aspect ratios in full-screen mode.
+requireMSLicense: true
+---
+
+## Overview
+
+Certain games require a fixed resolution that is only suitable for Wide-Screen devices (e.g. a TV). The steps below show how to implement a custom `GraphicsDeviceManager` to provide such a restriction.
+
+## To restrict graphics devices to widescreen aspect ratios in full-screen mode
+
+1. Create a class that derives from [GraphicsDeviceManager](xref:Microsoft.Xna.Framework.GraphicsDeviceManager).
+
+    ```csharp
+    public class CustomGraphicsDeviceManager : GraphicsDeviceManager
+    {
+        public CustomGraphicsDeviceManager( Game game )
+            : base( game )
+        {
+        }
+
+    }
+    ```
+
+2. Add a **WideScreenOnly** property to the class.
+
+    The property is used to turn on and off the widescreen-only behavior.
+
+    ```csharp
+    private bool isWideScreenOnly;
+    public bool IsWideScreenOnly
+    {
+        get { return isWideScreenOnly; }
+        set { isWideScreenOnly = value; }
+    }
+    ```
+
+3. Determine the minimum desired aspect ratio.
+
+    ```csharp
+    static float WideScreenRatio = 1.6f; //1.77777779f;
+    ```
+
+4. Override the **RankDevices** method of [GraphicsDeviceManager](xref:Microsoft.Xna.Framework.GraphicsDeviceManager).
+
+    Note the call to [base.RankDevices](xref:Microsoft.Xna.Framework.GraphicsDeviceManager). This call ensures that the new version of **RankDevices** has an already ranked list of available devices with which to work.
+
+    ```csharp
+    protected override void RankDevices( 
+        List<GraphicsDeviceInformation> foundDevices )
+    {
+        base.RankDevices( foundDevices );
+    }
+    ```
+
+5. Add a check to see if the **WideScreenOnly** property is **true**.
+
+    ```csharp
+    if (IsWideScreenOnly)
+    {
+        ...
+    }
+    ```
+
+6. In the **if** block, loop through all found devices, and check whether the [PresentationParameters](xref:Microsoft.Xna.Framework.Graphics.PresentationParameters) indicate the device is full-screen.
+
+7. If the device is full-screen, determine the aspect ratio of the device by dividing the **BackBufferWidth** by the **BackBufferHeight**.
+
+8. If the aspect ratio is less than the desired aspect ratio, remove the device from the list of found devices.
+
+    ```csharp
+    for (int i = 0; i < foundDevices.Count; )
+    {
+        PresentationParameters pp = 
+            foundDevices[i].PresentationParameters;
+        if (pp.IsFullScreen == true)
+        {
+            float aspectRatio = (float)(pp.BackBufferWidth) / 
+                (float)(pp.BackBufferHeight);
+
+            // If the device does not have a widescreen aspect 
+            // ratio, remove it.
+            if (aspectRatio < WideScreenRatio) 
+            { 
+                foundDevices.RemoveAt( i ); 
+            }
+            else { i++; }
+        }
+        else i++;
+    }
+    ```
+
+9. Replace the default [GraphicsDeviceManager](xref:Microsoft.Xna.Framework.GraphicsDeviceManager) with the derived [GraphicsDeviceManager](xref:Microsoft.Xna.Framework.GraphicsDeviceManager).
+10. To test the new component, set the **WideScreenOnly** and **IsFullScreen** properties to **true**.
+
+    ```csharp
+            public Game1()
+            {
+                graphics = new CustomGraphicsDeviceManager(this);
+                Content.RootDirectory = "Content";
+
+                this.graphics.PreferMultiSampling = false;
+    #if WINDOWS
+                this.graphics.PreferredBackBufferWidth = 1280;
+                this.graphics.PreferredBackBufferHeight = 720;
+    #endif
+    #if ANDROID
+                this.graphics.PreferredBackBufferWidth = 400;
+                this.graphics.PreferredBackBufferHeight = 600;
+    #endif
+
+                this.graphics.IsFullScreen = true;
+                this.graphics.IsWideScreenOnly = true;
+                graphics.ApplyChanges();
+            }
+    ```
+
+## See Also
+
+- [How to articles for the Graphics Pipeline](index.md)
+
+### Concepts
+
+- [What Is 3D Rendering?](../../whatis/graphics/WhatIs_3DRendering.md)
+- [What Is a Back Buffer?](../../whatis/graphics/WhatIs_BackBuffer.md)
+- [What Is a Viewport?](../../whatis/graphics/WhatIs_Viewport.md)
+
+### Reference
+
+- [GraphicsDeviceManager](xref:Microsoft.Xna.Framework.GraphicsDeviceManager)

articles/getting_to_know/howto/graphics/HowTo_Create_a_BasicEffect.md

@@ -0,0 +1,145 @@
+---
+title: How to create a Basic Effect
+description: Demonstrates how to create and initialize an instance of the BasicEffect class and use it to draw simple geometry.
+requireMSLicense: true
+---
+
+## Overview
+
+The steps described here apply to effects created with the [BasicEffect](xref:Microsoft.Xna.Framework.Graphics.BasicEffect) class using the [Effect](xref:Microsoft.Xna.Framework.Graphics.Effect) class to write a custom effect.
+
+> [!NOTE]
+> The example draws aliased geometry, to see an example that draws smoother edges because it also applies anti-aliasing, see [Enabling Anti-aliasing (Multi-sampling)](HowTo_Enable_Anti_Aliasing.md).
+
+### End result
+
+![The output of this tutorial](images/HowTo_BasicEffect_Sample.png)
+
+## To use BasicEffect
+
+Using the basic effect class requires a set of `world`, `view`, and `projection` matrices, a `vertex buffer`, a `vertex declaration`, and an instance of the [BasicEffect](xref:Microsoft.Xna.Framework.Graphics.BasicEffect) class.
+
+1. Declare these properties at the beginning of the game class.
+
+    ```csharp
+    //Matrices for 3D perspective
+    private Matrix worldMatrix, viewMatrix, projectionMatrix;
+
+    // Vertex data for rendering
+    private VertexPositionColor[] triangleVertices;
+
+    // A Vertex format structure that contains position, normal data, and one set of texture coordinates
+    private BasicEffect basicEffect;
+    ```
+
+1. Initialize the world, view, and projection matrices in the `Initialize`.
+
+    Next, create a world matrix using the default `Matrix.Identity` for simplicity. Set the `view matrix` as a `look-at` matrix with a camera position of `(0, 0, 50)`, pointing at the origin. The `projection matrix` is a `perspective` projection matrix based on a a `45-degree` field of view, an aspect ratio equal to the client window, and a set of `near` and `far` planes to render the geometry within in view of the camera.
+
+    ```csharp
+    protected override void Initialize()
+    {
+        // Setup the matrices to look forward
+        worldMatrix = Matrix.Identity;
+        viewMatrix = Matrix.CreateLookAt(new Vector3(0, 0, 50), Vector3.Zero, Vector3.Up);
+
+        projectionMatrix = Matrix.CreatePerspectiveFieldOfView(
+            MathHelper.PiOver4,
+            GraphicsDevice.Viewport.AspectRatio,
+            1.0f, 300.0f);
+
+        base.Initialize();
+    }
+    ```
+
+1. Initialize a [BasicEffect](xref:Microsoft.Xna.Framework.Graphics.BasicEffect) with the transformation and light values in the `LoadContent` method.
+
+    ```csharp
+    protected override void LoadContent()
+    {
+        basicEffect = new BasicEffect(_graphics.GraphicsDevice);
+
+        basicEffect.World = worldMatrix;
+        basicEffect.View = viewMatrix;
+        basicEffect.Projection = projectionMatrix;
+
+        // primitive color
+        basicEffect.AmbientLightColor = new Vector3(0.1f, 0.1f, 0.1f);
+        basicEffect.DiffuseColor = new Vector3(1.0f, 1.0f, 1.0f);
+        basicEffect.SpecularColor = new Vector3(0.25f, 0.25f, 0.25f);
+        basicEffect.SpecularPower = 5.0f;
+        basicEffect.Alpha = 1.0f;
+        // The following MUST be enabled if you want to color your vertices
+        basicEffect.VertexColorEnabled = true;
+
+        // Use the built in 3 lighting mode provided with BasicEffect            
+        basicEffect.EnableDefaultLighting();
+    }
+    ```
+
+    > [!NOTE]
+    > If you wish, you can set up the lighting manually through code, as follows:
+    > [!code-csharp[](./files/basiceffectlighting.cs)]
+
+
+1. Still in `LoadContent`, create the per vertex data using the `VertexPositionColor` format. This example shows the data for the face of a triangle.
+
+    ```csharp
+    triangleVertices = new VertexPositionColor[3];
+
+    triangleVertices[0].Position = new Vector3(0f, 0f, 0f);
+    triangleVertices[0].Color = Color.Red;
+    triangleVertices[1].Position = new Vector3(10f, 10f, 0f);
+    triangleVertices[1].Color = Color.Yellow;
+    triangleVertices[2].Position = new Vector3(10f, 0f, -5f);
+    triangleVertices[2].Color = Color.Green;
+    ```
+
+1. Finally, in the `Draw` Method, call [GraphicsDevice.Clear](xref:Microsoft.Xna.Framework.Graphics.GraphicsDevice#Microsoft_Xna_Framework_Graphics_GraphicsDevice_Clear_Microsoft_Xna_Framework_Color_) to clear the render target.
+
+1. Set the rasterizer state to turn off culling using the [RasterizerState](xref:Microsoft.Xna.Framework.Graphics.GraphicsDevice.RasterizerState) property.
+
+1. Call [EffectPass.Apply](/api/Microsoft.Xna.Framework.Graphics.EffectPass.html#Microsoft_Xna_Framework_Graphics_EffectPass_Apply) to set the effect state in preparation for rendering.
+
+1. Draw the geometry by calling [GraphicsDevice.DrawUserPrimitives](/api/Microsoft.Xna.Framework.Graphics.GraphicsDevice.html#Microsoft_Xna_Framework_Graphics_GraphicsDevice_DrawUserPrimitives__1_Microsoft_Xna_Framework_Graphics_PrimitiveType___0___System_Int32_System_Int32_Microsoft_Xna_Framework_Graphics_VertexDeclaration_).
+
+    ```csharp
+    protected override void Draw(GameTime gameTime)
+    {
+        GraphicsDevice.Clear(Color.SteelBlue);
+
+        RasterizerState rasterizerState1 = new RasterizerState();
+        rasterizerState1.CullMode = CullMode.None;
+        GraphicsDevice.RasterizerState = rasterizerState1;
+        foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
+        {
+            pass.Apply();
+
+            GraphicsDevice.DrawUserPrimitives(
+                PrimitiveType.TriangleList,
+                triangleVertices,
+                0,
+                1,
+                VertexPositionColor.VertexDeclaration
+            );
+        }
+
+        base.Draw(gameTime);
+    }
+    ```
+
+When the sample is run, the basic geometry is rendered using the custom [BasicEffect](xref:Microsoft.Xna.Framework.Graphics.BasicEffect), feel free to play with the position, content or rendering order to enhance the effect.
+
+## See Also
+
+- [How to create a State Object](HowTo_Create_a_StateObject.md)
+
+### Concepts
+
+- [What Is a Configurable Effect?](../../whatis/graphics/WhatIs_ConfigurableEffect.md)
+
+### Reference
+
+- [GraphicsDevice](xref:Microsoft.Xna.Framework.Graphics.GraphicsDevice)
+- [BasicEffect](xref:Microsoft.Xna.Framework.Graphics.BasicEffect)
+- [RasterizerState](xref:Microsoft.Xna.Framework.Graphics.GraphicsDevice.RasterizerState)